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

[frontend] Add telegram wiring (add, delete)

Browse source
This commit is contained in:
Cathy Hu 2020-08-31 19:13:40 +02:00
parent e775c4f8f6
commit 3cd7131191
11 changed files with 264 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
kibicara-frontend/src/app/platforms/platforms.module.ts
View file

@ -6,6 +6,10 @@ import { TwitterSettingsComponent } from './twitter/twitter-settings/twitter-set
import { EmailSettingsComponent } from './email/email-settings/email-settings.component';
import { EmailDialogComponent } from './email/email-dialog/email-dialog.component';
import { EmailInfoDialogComponent } from './email/email-info-dialog/email-info-dialog.component';
import { TelegramInfoDialogComponent } from './telegram/telegram-info-dialog/telegram-info-dialog.component';
import { TelegramDialogComponent } from './telegram/telegram-dialog/telegram-dialog.component';
import { TwitterDialogComponent } from './twitter/twitter-dialog/twitter-dialog.component';
import { TwitterInfoDialogComponent } from './twitter/twitter-info-dialog/twitter-info-dialog.component';
@NgModule({
declarations: [
@ -14,6 +18,10 @@ import { EmailInfoDialogComponent } from './email/email-info-dialog/email-info-d
EmailSettingsComponent,
EmailDialogComponent,
EmailInfoDialogComponent,
TelegramInfoDialogComponent,
TelegramDialogComponent,
TwitterDialogComponent,
TwitterInfoDialogComponent,
],
imports: [CommonModule, SharedModule],
exports: [

28
kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.html Normal file
View file

@ -0,0 +1,28 @@
<h2 mat-dialog-title>Create new inbox</h2>
<mat-dialog-content class="mat-typography">
<form class="input" [formGroup]="form">
<mat-form-field>
<mat-label>Telegram API Token</mat-label>
<input matInput formControlName="api_token" />
<mat-error
*ngIf="
form.controls.api_token.errors &&
form.controls.api_token.errors.required
"
>API Token is required</mat-error
>
</mat-form-field>
<mat-form-field>
<mat-label>Welcome message</mat-label>
<textarea matInput formControlName="welcome_message"></textarea>
</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 telegram bot
</button>
</mat-dialog-actions>

5
kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.scss Normal file
View file

@ -0,0 +1,5 @@
.input {
display: grid;
grid-template-rows: 1fr 3fr;
width: 100%;
}

24
kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.spec.ts Normal file
View file

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

56
kibicara-frontend/src/app/platforms/telegram/telegram-dialog/telegram-dialog.component.ts Normal file
View file

@ -0,0 +1,56 @@
import { Component, OnInit, Inject } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TelegramService } from 'src/app/core/api';
import { MatSnackBar } from '@angular/material/snack-bar';
import { first } from 'rxjs/operators';
@Component({
selector: 'app-telegram-dialog',
templateUrl: './telegram-dialog.component.html',
styleUrls: ['./telegram-dialog.component.scss'],
})
export class TelegramDialogComponent implements OnInit {
form: FormGroup;
constructor(
public dialogRef: MatDialogRef<TelegramDialogComponent>,
private formBuilder: FormBuilder,
private telegramService: TelegramService,
private snackBar: MatSnackBar,
@Inject(MAT_DIALOG_DATA) public data
) {}
ngOnInit(): void {
this.form = this.formBuilder.group({
api_token: ['', Validators.required],
welcome_message: '',
});
}
onCancel() {
this.dialogRef.close();
}
onSubmit() {
if (this.form.invalid) {
return;
}
this.telegramService
.createTelegram(this.data.hoodId, {
api_token: this.form.controls.api_token.value,
welcome_message: this.form.controls.welcome_message.value,
})
.pipe(first())
.subscribe(
(data) => {
this.dialogRef.close();
},
(error) => {
this.snackBar.open('Invalid API Key. Try again!', 'Close', {
duration: 2000,
});
}
);
}
}

42
kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.html Normal file
View file

@ -0,0 +1,42 @@
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu at
magna euismod sollicitudin. Vestibulum ut auctor libero. Etiam volutpat, nisl
sed efficitur hendrerit, nunc risus hendrerit nulla, sollicitudin malesuada
neque sem sed tortor. Vestibulum laoreet elementum nibh ultrices ullamcorper.
Sed porta gravida lectus, suscipit dictum ligula pharetra posuere. Vivamus
pellentesque ex eget lacus consectetur, at pulvinar est pellentesque.
Phasellus a elit tempor, tristique tortor auctor, maximus eros. Duis magna
sapien, accumsan nec massa nec, porta auctor leo. Nam nibh nisl, hendrerit nec
convallis in, porttitor nec sapien. Morbi in lacus convallis, elementum turpis
in, venenatis mi. Vestibulum bibendum rhoncus pulvinar. Sed hendrerit ipsum
eget varius venenatis. Maecenas consectetur felis libero, fringilla fringilla
justo pellentesque non. Quisque congue dictum arcu ut fermentum. Aliquam
egestas, lectus at mollis pulvinar, diam libero sagittis eros, a lobortis
neque ligula eget odio. Praesent a tortor consequat, viverra odio id, feugiat
sem. Mauris orci velit, molestie sit amet urna laoreet, aliquet consectetur
risus. Cras tristique odio nec placerat viverra. Suspendisse id pretium risus,
sit amet consectetur turpis. Nunc mattis, felis a iaculis varius, est nulla
aliquam massa, aliquet dictum ipsum est nec erat. Integer tristique tellus
felis, ut porttitor nisi blandit nec. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Integer sagittis justo
ut elit gravida, vitae dignissim urna vehicula. Ut in ante non neque dignissim
scelerisque non id nisi. Sed sit amet posuere felis. Integer eget eros auctor,
ultrices arcu vel, feugiat erat. Curabitur rhoncus porta erat ut ullamcorper.
Duis in dictum tortor. Nam rutrum volutpat libero id interdum. Vestibulum vel
ante eget risus elementum iaculis eget ut mauris. Vestibulum ultrices nunc
quis leo venenatis, id tristique purus tempus. Fusce nec tellus dui. Nulla
bibendum nisi ut posuere pellentesque. Vivamus malesuada mollis dui a posuere.
Curabitur et lacus at augue posuere facilisis. Ut posuere orci mauris, at
hendrerit elit dignissim vel. Quisque vitae ipsum sed sem mattis hendrerit.
Pellentesque consectetur convallis consectetur. Praesent sit amet augue in dui
congue efficitur ac gravida metus. Sed nibh urna, facilisis at urna vitae,
tristique vestibulum velit. Maecenas et aliquet purus, non rutrum eros. Donec
maximus orci vel tortor maximus, finibus porttitor mauris convallis. Maecenas
eget quam vel nulla dapibus hendrerit. Vivamus malesuada neque ut elit
commodo, non viverra magna facilisis. Maecenas finibus ante non dui posuere,
sed varius leo elementum. Nullam eget vestibulum mauris. Maecenas in ipsum
lectus. Sed tempus at dolor sed posuere. Proin eget nulla dignissim, finibus
arcu eu, fringilla tellus. Nullam bibendum felis sed nulla lobortis sodales.
Nunc in elementum felis, quis aliquam velit. Morbi sodales sollicitudin
mollis.
</p>

0
kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.scss Normal file
View file

24
kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.spec.ts Normal file
View file

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

12
kibicara-frontend/src/app/platforms/telegram/telegram-info-dialog/telegram-info-dialog.component.ts Normal file
View file

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

39
kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html
View file

@ -5,14 +5,19 @@
Telegram
</div>
<button mat-icon-button aria-label="How to use">
<mat-icon matTooltip="How to use" class="info-button">info</mat-icon>
<mat-icon
matTooltip="How to add an telegram 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="telegrams$ | async as telegrams">
<mat-list-item *ngIf="telegrams.length === 0">
<button mat-menu-item>
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span> Add a platform connection!</span>
</button>
@ -20,7 +25,7 @@
</mat-list-item>
<mat-list-item *ngFor="let telegram of telegrams">
<div class="entry">
Telegramdummy
@{{ telegram.username }}
<mat-slide-toggle></mat-slide-toggle>
<button
mat-icon-button
@ -31,21 +36,21 @@
</button>
</div>
<mat-divider></mat-divider>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="onEdit(telegram.id)">
<mat-icon>edit</mat-icon>
<span>Edit</span>
</button>
<button mat-menu-item (click)="onDelete(telegram.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>
</mat-list>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>edit</mat-icon>
<span>Edit</span>
</button>
<button mat-menu-item>
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
<button mat-menu-item>
<mat-icon>add</mat-icon>
<span>Add another</span>
</button>
</mat-menu>
</mat-card-content>
</mat-card>

44
kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.ts
View file

@ -1,6 +1,9 @@
import { Component, OnInit, Input } from '@angular/core';
import { TelegramService } from 'src/app/core/api';
import { Observer, Observable } from 'rxjs';
import { TelegramInfoDialogComponent } from '../telegram-info-dialog/telegram-info-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import { TelegramDialogComponent } from '../telegram-dialog/telegram-dialog.component';
@Component({
selector: 'app-telegram-settings',
@ -11,9 +14,48 @@ export class TelegramSettingsComponent implements OnInit {
@Input() hoodId;
telegrams$: Observable<Array<any>>;
constructor(private telegramService: TelegramService) {}
constructor(
private telegramService: TelegramService,
public dialog: MatDialog
) {}
ngOnInit(): void {
this.reload();
}
private reload() {
this.telegrams$ = this.telegramService.getTelegrams(this.hoodId);
}
onInfoClick() {
this.dialog.open(TelegramInfoDialogComponent);
}
onDelete(telegramId) {
this.telegramService
.deleteTelegram(telegramId, this.hoodId)
.subscribe(() => {
this.reload();
});
}
onCreate() {
const dialogRef = this.dialog.open(TelegramDialogComponent, {
data: { hoodId: this.hoodId },
});
dialogRef.afterClosed().subscribe(() => {
this.reload();
});
}
onEdit(telegramId) {
const dialogRef = this.dialog.open(TelegramDialogComponent, {
data: { hoodId: this.hoodId, telegramId: telegramId },
});
dialogRef.afterClosed().subscribe(() => {
this.reload();
});
}
}