ticketfrei/ticketfrei3
8
1
Fork 0
Code Issues 11 Pull requests 2 Projects 1 Releases Wiki Activity

[frontend] Add initial mastodon frontend

Browse source
This commit is contained in:
ogdbd3h5qze42igcv8wcrqk3 2023-03-19 18:25:16 +01:00
parent 68bbd358a5
commit a6c0b9c962
19 changed files with 565 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/dashboard/board/platforms/platforms.component.html
View file

@ -39,4 +39,5 @@
<app-email-settings [hoodId]="hoodId"></app-email-settings>
<app-twitter-settings [hoodId]="hoodId"></app-twitter-settings>
<app-telegram-settings [hoodId]="hoodId"></app-telegram-settings>
<app-mastodon-settings [hoodId]="hoodId"></app-mastodon-settings>
</div>

47
frontend/src/app/platforms/mastodon/mastodon-bot-card/mastodon-bot-card.component.html Normal file
View file

@ -0,0 +1,47 @@
<div *ngIf="mastodons$ | loading | async as mastodons">
<ng-template [ngIf]="mastodons.value">
<mat-card appearance="outlined">
<mat-card-header>
<div mat-card-avatar class="mastodon"></div>
<mat-card-title class="platform-title">
mastodon
<button mat-icon-button aria-label="How to use">
<mat-icon
matTooltip="How to send and receive hood broadcast messages with mastodon"
class="info-button"
(click)="onInfoClick()"
>info</mat-icon
>
</button>
</mat-card-title>
</mat-card-header>
<mat-card-content *ngIf="mastodons.value.length !== 0; else nomastodon">
<mat-selection-list [multiple]="false" class="list">
<a
*ngFor="let mastodon of mastodons.value"
href="https://{{mastodon.instance}}/@{{ mastodon.username }}"
routerLinkActive="router-link-active"
>
<mat-list-option>
@{{ mastodon.username }}
<mat-divider></mat-divider>
</mat-list-option>
</a>
</mat-selection-list>
</mat-card-content>
</mat-card>
<ng-template #nomastodon>
<mat-card-content>
Unfortunately your hood admin has not configured mastodon as platform
yet.
</mat-card-content>
</ng-template>
</ng-template>
<ng-template [ngIf]="mastodons.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="mastodons.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</div>

0
frontend/src/app/platforms/mastodon/mastodon-bot-card/mastodon-bot-card.component.scss Normal file
View file

23
frontend/src/app/platforms/mastodon/mastodon-bot-card/mastodon-bot-card.component.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MastodonBotCardComponent } from './mastodon-bot-card.component';
describe('MastodonBotCardComponent', () => {
let component: MastodonBotCardComponent;
let fixture: ComponentFixture<MastodonBotCardComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MastodonBotCardComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(MastodonBotCardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

27
frontend/src/app/platforms/mastodon/mastodon-bot-card/mastodon-bot-card.component.ts Normal file
View file

@ -0,0 +1,27 @@
import { Component, OnInit, Input } from '@angular/core';
import { MastodonService } from 'src/app/core/api';
import { MastodonBotInfoDialogComponent } from './mastodon-bot-info-dialog/mastodon-bot-info-dialog.component';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'app-mastodon-bot-card',
templateUrl: './mastodon-bot-card.component.html',
styleUrls: ['./mastodon-bot-card.component.scss'],
})
export class MastodonBotCardComponent implements OnInit {
@Input() hoodId;
mastodons$;
constructor(
private mastodonService: MastodonService,
private dialog: MatDialog
) {}
ngOnInit(): void {
this.mastodons$ = this.mastodonService.getMastodonsPublic(this.hoodId);
}
onInfoClick() {
this.dialog.open(MastodonBotInfoDialogComponent);
}
}

54
frontend/src/app/platforms/mastodon/mastodon-bot-card/mastodon-bot-info-dialog/mastodon-bot-info-dialog.component.html Normal file
View file

@ -0,0 +1,54 @@
<mat-dialog-content>
<div class="container">
<h2>How to communicate with the hood via Telegram?</h2>
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title
>How to subscribe to the hood via Telegram?</mat-panel-title
>
</mat-expansion-panel-header>
<ol>
<li>
Click on the telegram bot name that is shown in the telegram card.
</li>
<li>
Start messaging the telegram bot that the link leads to by writing a
message containing only the word <strong>/start</strong>. Done!
</li>
</ol>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title
>How to send a broadcast message to the hood?</mat-panel-title
>
</mat-expansion-panel-header>
<p>
Write a direct message to the bot. This message will be broadcasted to
the other platforms.
</p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>How to receive messages?</mat-panel-title>
</mat-expansion-panel-header>
<p>
If you subscribed to the bot, you will automatically receive the
messages of your hood from the bot.
</p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>How to stop receiving messages?</mat-panel-title>
</mat-expansion-panel-header>
<p>
Write a message with content <strong>/stop</strong> to the bot. You
should receive a message from the bot which confirms that the
unsubscription was successful.
</p>
</mat-expansion-panel>
</mat-accordion>
</div>
</mat-dialog-content>

0
frontend/src/app/platforms/mastodon/mastodon-bot-card/mastodon-bot-info-dialog/mastodon-bot-info-dialog.component.scss Normal file
View file

12
frontend/src/app/platforms/mastodon/mastodon-bot-card/mastodon-bot-info-dialog/mastodon-bot-info-dialog.component.ts Normal file
View file

@ -0,0 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mastodon-bot-info-dialog',
templateUrl: './mastodon-bot-info-dialog.component.html',
styleUrls: ['./mastodon-bot-info-dialog.component.scss']
})
export class MastodonBotInfoDialogComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}

46
frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-dialog/mastodon-dialog.component.html Normal file
View file

@ -0,0 +1,46 @@
<h2 mat-dialog-title>Create new inbox</h2>
<mat-dialog-content>
<form class="input" [formGroup]="form">
<mat-form-field>
<mat-label>Mastodon Instance URL</mat-label>
<input matInput formControlName="instance_url" />
<mat-error
*ngIf="
form.controls.instance_url.errors &&
form.controls.instance_url.errors.required
"
>Mastodon Instance URL is required</mat-error
>
</mat-form-field>
<mat-form-field>
<mat-label>Mastodon E-Mail</mat-label>
<input matInput formControlName="email" />
<mat-error
*ngIf="
form.controls.email.errors &&
form.controls.email.errors.required
"
>Mastodon E-Mail is required</mat-error
>
</mat-form-field>
<mat-form-field>
<mat-label>Mastodon Password</mat-label>
<input matInput formControlName="password" />
<mat-error
*ngIf="
form.controls.password.errors &&
form.controls.password.errors.required
"
>Mastodon Password is required</mat-error
>
</mat-form-field>
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onCancel()">Cancel</button>
<button mat-button (click)="onSubmit()" cdkFocusInitial>
Add Mastodon bot
</button>
</mat-dialog-actions>

26
frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-dialog/mastodon-dialog.component.scss Normal file
View file

@ -0,0 +1,26 @@
.input {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
width: 100%;
}
form {
margin-top: 10px;
height: 100%;
}
textarea {
height: 120px;
}
.example-image {
margin-left: 10%;
margin-right: 10%;
width: 80%;
@media screen and (max-width: 600px) {
width: 100%;
margin-left: 0%;
margin-right: 0%;
}
}

23
frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-dialog/mastodon-dialog.component.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MastodonDialogComponent } from './mastodon-dialog.component';
describe('MastodonDialogComponent', () => {
let component: MastodonDialogComponent;
let fixture: ComponentFixture<MastodonDialogComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MastodonDialogComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(MastodonDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

79
frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-dialog/mastodon-dialog.component.ts Normal file
View file

@ -0,0 +1,79 @@
import { Component, OnInit, Inject } from '@angular/core';
import { Validators, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MastodonService } from 'src/app/core/api';
import { MatSnackBar } from '@angular/material/snack-bar';
import { first } from 'rxjs/operators';
@Component({
selector: 'app-mastodon-dialog',
templateUrl: './mastodon-dialog.component.html',
styleUrls: ['./mastodon-dialog.component.scss'],
})
export class MastodonDialogComponent implements OnInit {
form: UntypedFormGroup;
constructor(
public dialogRef: MatDialogRef<MastodonDialogComponent>,
private formBuilder: UntypedFormBuilder,
private mastodonService: MastodonService,
private snackBar: MatSnackBar,
@Inject(MAT_DIALOG_DATA) public data
) {}
ngOnInit(): void {
this.form = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required],
instance_url: ['', Validators.required],
});
if (this.data.mastodonId) {
this.mastodonService
.getMastodon(this.data.mastodonId, this.data.hoodId)
.subscribe((data) => {
this.form.controls.email.setValue(data.email);
this.form.controls.password.setValue(data.password);
this.form.controls.instance_url.setValue(data.instance_url);
});
}
}
onCancel() {
this.dialogRef.close();
}
success() {
this.dialogRef.close();
}
error() {
this.snackBar.open('Invalid API Key. Try again!', 'Close', {
duration: 2000,
});
}
onSubmit() {
if (this.form.invalid) {
return;
}
const response = {
email: this.form.controls.email.value,
instance_url: this.form.controls.instance_url.value,
password: this.form.controls.password.value
}
this.mastodonService
.createMastodon(this.data.hoodId, response)
.pipe(first())
.subscribe(
() => {
this.success();
},
() => {
this.error();
}
);
}
}

69
frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-settings.component.html Normal file
View file

@ -0,0 +1,69 @@
<mat-card appearance="outlined">
<mat-card-header>
<div mat-card-avatar class="mastodon"></div>
<mat-card-title class="platform-title">
Mastodon
<button mat-icon-button aria-label="How to use">
<mat-icon
matTooltip="How to add an mastodon bot to your hood"
class="info-button"
(click)="onInfoClick()"
>info</mat-icon
>
</button>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-list *ngIf="mastodons$ | loading | async as mastodons">
<ng-template [ngIf]="mastodons.value">
<mat-list-item *ngIf="mastodons.value.length === 0">
<button class="add-button" mat-button (click)="onCreate()">
<div class="in-add-button">
<mat-icon>add</mat-icon>
<span> Add a platform connection!</span>
</div>
</button>
<mat-divider></mat-divider>
</mat-list-item>
<mat-list-item *ngFor="let mastodon of mastodons.value">
<div class="entry">
@{{ mastodon.username }}
<mat-slide-toggle
[checked]="mastodon.enabled === 1"
(change)="onChange(mastodon)"
></mat-slide-toggle>
<button
mat-icon-button
[matMenuTriggerFor]="menu"
aria-label="Example icon-button with a menu"
>
<mat-icon>more_vert</mat-icon>
</button>
</div>
<mat-divider></mat-divider>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="onEdit(mastodon.id)">
<mat-icon>edit</mat-icon>
<span>Edit</span>
</button>
<button mat-menu-item (click)="onDelete(mastodon.id)">
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span>Add another</span>
</button>
</mat-menu>
</mat-list-item>
</ng-template>
<ng-template [ngIf]="mastodons.error"
><mat-icon class="warning">warning</mat-icon></ng-template
>
<ng-template [ngIf]="mastodons.loading">
<mat-spinner [diameter]="45" class="spinner"></mat-spinner>
</ng-template>
</mat-list>
</mat-card-content>
</mat-card>

23
frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-settings.component.scss Normal file
View file

@ -0,0 +1,23 @@
.entry {
display: grid;
grid-template-columns: 4fr 40px 20px;
width: 100%;
align-items: center;
}
.platform-title {
display: grid;
grid-template-columns: 1fr 40px;
width: 100%;
align-items: center;
}
.platform-heading {
align-self: flex-end;
}
.mastodon {
background-image: url("../../../../assets/mastodon.png");
background-size: cover;
}

23
frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-settings.component.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MastodonSettingsComponent } from './mastodon-settings.component';
describe('MastodonSettingsComponent', () => {
let component: MastodonSettingsComponent;
let fixture: ComponentFixture<MastodonSettingsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MastodonSettingsComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(MastodonSettingsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

102
frontend/src/app/platforms/mastodon/mastodon-settings/mastodon-settings.component.ts Normal file
View file

@ -0,0 +1,102 @@
import { Component, OnInit, Input } from '@angular/core';
import { MastodonService } from 'src/app/core/api';
import { Observable } from 'rxjs';
import { MastodonBotInfoDialogComponent } from '../mastodon-bot-card/mastodon-bot-info-dialog/mastodon-bot-info-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import { MastodonDialogComponent } from './mastodon-dialog/mastodon-dialog.component';
import { YesNoDialogComponent } from 'src/app/shared/yes-no-dialog/yes-no-dialog.component';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-mastodon-settings',
templateUrl: './mastodon-settings.component.html',
styleUrls: ['./mastodon-settings.component.scss'],
})
export class MastodonSettingsComponent implements OnInit {
@Input() hoodId;
mastodons$: Observable<Array<any>>;
constructor(
private mastodonService: MastodonService,
public dialog: MatDialog,
private snackBar: MatSnackBar
) {}
ngOnInit(): void {
this.reload();
}
private reload() {
this.mastodons$ = this.mastodonService.getMastodons(this.hoodId);
}
onInfoClick() {
this.dialog.open(MastodonBotInfoDialogComponent);
}
onDelete(mastodonId) {
const dialogRef = this.dialog.open(YesNoDialogComponent, {
data: {
title: 'Warning',
content:
'This will also delete the list of subscribers of the mastodon bot.',
},
});
dialogRef.afterClosed().subscribe((response) => {
if (response) {
this.mastodonService
.deleteMastodon(mastodonId, this.hoodId)
.subscribe(() => {
this.reload();
});
}
});
}
onCreate() {
const dialogRef = this.dialog.open(MastodonDialogComponent, {
data: { hoodId: this.hoodId },
});
dialogRef.afterClosed().subscribe(() => {
this.reload();
});
}
onEdit(mastodonId) {
const dialogRef = this.dialog.open(MastodonDialogComponent, {
data: { hoodId: this.hoodId, mastodonId },
});
dialogRef.afterClosed().subscribe(() => {
this.reload();
});
}
onChange(mastodon) {
if (mastodon.enabled === 0) {
this.mastodonService.startMastodon(mastodon.id, this.hoodId).subscribe(
() => {},
(error) => {
this.snackBar.open('Could not start. Check your settings.', 'Close', {
duration: 2000,
});
}
);
} else if (mastodon.enabled === 1) {
this.mastodonService.stopMastodon(mastodon.id, this.hoodId).subscribe(
() => {},
(error) => {
this.snackBar.open('Could not stop. Check your settings.', 'Close', {
duration: 2000,
});
}
);
}
// TODO yeah i know this is bad, implement disabling/enabling
setTimeout(() => {
this.reload();
}, 100);
}
}

1
frontend/src/app/platforms/platforms-info-page/platforms-info-page.component.html
View file

@ -3,4 +3,5 @@
<app-twitter-bot-card [hoodId]="hoodId"></app-twitter-bot-card>
<app-telegram-bot-card [hoodId]="hoodId"></app-telegram-bot-card>
<app-email-bot-card [hoodId]="hoodId"></app-email-bot-card>
<app-mastodon-bot-card [hoodId]="hoodId"></app-mastodon-bot-card>
</div>

9
frontend/src/app/platforms/platforms.module.ts
View file

@ -20,6 +20,10 @@ import { TelegramBotInfoDialogComponent } from './telegram/telegram-bot-card/tel
import { TwitterBotInfoDialogComponent } from './twitter/twitter-bot-card/twitter-bot-info-dialog/twitter-bot-info-dialog.component';
import { EmailConfirmationComponent } from './email/email-confirmation/email-confirmation.component';
import { EmailUnsubscribeComponent } from './email/email-unsubscribe/email-unsubscribe.component';
import { MastodonBotCardComponent } from './mastodon/mastodon-bot-card/mastodon-bot-card.component';
import { MastodonSettingsComponent } from './mastodon/mastodon-settings/mastodon-settings.component';
import { MastodonDialogComponent } from './mastodon/mastodon-settings/mastodon-dialog/mastodon-dialog.component';
import { MastodonBotInfoDialogComponent } from './mastodon/mastodon-bot-card/mastodon-bot-info-dialog/mastodon-bot-info-dialog.component';
@NgModule({
declarations: [
@ -42,10 +46,15 @@ import { EmailUnsubscribeComponent } from './email/email-unsubscribe/email-unsub
TwitterBotInfoDialogComponent,
EmailConfirmationComponent,
EmailUnsubscribeComponent,
MastodonBotCardComponent,
MastodonSettingsComponent,
MastodonDialogComponent,
MastodonBotInfoDialogComponent
],
imports: [CommonModule, SharedModule],
exports: [
TelegramSettingsComponent,
MastodonSettingsComponent,
TwitterSettingsComponent,
EmailSettingsComponent,
PlatformsInfoPageComponent,

BIN
frontend/src/assets/mastodon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB