[frontend] Add trigger and badword functionality

This commit is contained in:
Cathy Hu 2020-08-24 21:59:18 +02:00
parent 37d73b2f24
commit 88466b08eb
10 changed files with 175 additions and 29 deletions

View file

@ -37,7 +37,7 @@ export class LoginComponent implements OnInit {
this.route.snapshot.queryParams['returnUrl'] || '/dashboard'; this.route.snapshot.queryParams['returnUrl'] || '/dashboard';
if (this.route.snapshot.queryParams['registered'] === true) { if (this.route.snapshot.queryParams['registered'] === true) {
this.info = 'Registration infoful'; this.info = 'Registration successful';
} }
} }

View file

@ -1,11 +1,23 @@
<mat-card> <mat-card>
<mat-card-title>Badwords</mat-card-title> <mat-card-title>Badwords</mat-card-title>
<mat-card-subtitle <mat-card-subtitle
>Discards an incoming message that matches the pattern (spam-protection, insult-filtering)</mat-card-subtitle >Discards an incoming message that matches the pattern (spam-protection,
insult-filtering)</mat-card-subtitle
> >
<mat-card-content> <mat-card-content>
<form class="input" [formGroup]="regexForm" (ngSubmit)="onSubmit()">
<mat-form-field>
<mat-label>Add badword</mat-label>
<input formControlName="regex" matInput />
<mat-error *ngIf="regexForm.invalid">Invalid regex</mat-error>
</mat-form-field>
<button mat-icon-button color="primary" aria-label="Add" class="button">
<mat-icon>add</mat-icon>
</button>
</form>
<ng-container *ngIf="badwords$ | async as badwords"> <ng-container *ngIf="badwords$ | async as badwords">
<mat-list *ngIf="badwords.length !== 0; else empty"> <mat-list *ngIf="badwords.length !== 0; else empty">
<mat-divider></mat-divider>
<mat-list-item *ngFor="let badword of badwords"> <mat-list-item *ngFor="let badword of badwords">
<div class="entry"> <div class="entry">
<div class="regex"> <div class="regex">
@ -16,6 +28,7 @@
color="primary" color="primary"
aria-label="Edit" aria-label="Edit"
class="button" class="button"
(click)="onEdit(badword.id)"
> >
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
</button> </button>
@ -24,6 +37,7 @@
color="warn" color="warn"
aria-label="Delete" aria-label="Delete"
class="button" class="button"
(click)="onDelete(badword.id)"
> >
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>

View file

@ -4,6 +4,17 @@
width: 100%; width: 100%;
} }
.input {
display: grid;
grid-template-columns: 4fr 50px;
width: 100%;
margin: 10px;
}
.mat-form-field {
width: 100%;
}
.regex { .regex {
margin: 5px; margin: 5px;
margin-top: 10px; margin-top: 10px;

View file

@ -1,6 +1,8 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input } from '@angular/core';
import { BadwordsService, BodyBadWord } from 'src/app/core/api'; import { BadwordsService, BodyBadWord } from 'src/app/core/api';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { first } from 'rxjs/operators';
@Component({ @Component({
selector: 'app-badwords', selector: 'app-badwords',
@ -10,10 +12,51 @@ import { Observable } from 'rxjs';
export class BadwordsComponent implements OnInit { export class BadwordsComponent implements OnInit {
@Input() hoodId; @Input() hoodId;
badwords$: Observable<Array<any>>; badwords$: Observable<Array<any>>;
regexForm: FormGroup;
constructor(private badwordService: BadwordsService) {} constructor(
private badwordService: BadwordsService,
private formBuilder: FormBuilder
) {}
ngOnInit(): void { ngOnInit(): void {
this.reload();
this.regexForm = this.formBuilder.group({
regex: ['', Validators.required],
});
}
private reload() {
this.badwords$ = this.badwordService.getBadwords(this.hoodId); this.badwords$ = this.badwordService.getBadwords(this.hoodId);
} }
onEdit(triggerId) {}
onDelete(triggerId) {
this.badwordService.deleteBadword(triggerId, this.hoodId).subscribe(() => {
this.reload();
});
}
onSubmit() {
if (this.regexForm.invalid) {
return;
}
this.badwordService
.createBadword(this.hoodId, {
pattern: this.regexForm.controls.regex.value,
})
.pipe(first())
.subscribe(
(data) => {
this.regexForm.reset();
this.reload();
},
(error) => {
console.log(error);
this.regexForm.controls['regex'].setErrors({ incorrect: true });
}
);
}
} }

View file

@ -14,6 +14,6 @@
} }
.explanation { .explanation {
margin-top: 10px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 20px;
} }

View file

@ -1,12 +1,23 @@
<mat-card> <mat-card>
<mat-card-title>Triggers</mat-card-title> <mat-card-title>Triggers</mat-card-title>
<mat-card-subtitle <mat-card-subtitle
>Only shares an incoming message if it matches a pattern (topic-setting). <br /> >Only shares an incoming message if it matches a pattern (topic-setting).
<strong>Add at least one trigger!</strong></mat-card-subtitle <strong>Add at least one trigger!</strong></mat-card-subtitle
> >
<mat-card-content> <mat-card-content>
<form class="input" [formGroup]="regexForm" (ngSubmit)="onSubmit()">
<mat-form-field>
<mat-label>Add trigger</mat-label>
<input formControlName="regex" matInput />
<mat-error *ngIf="regexForm.invalid">Invalid regex</mat-error>
</mat-form-field>
<button mat-icon-button color="primary" aria-label="Add" class="button">
<mat-icon>add</mat-icon>
</button>
</form>
<ng-container *ngIf="triggers$ | async as triggers"> <ng-container *ngIf="triggers$ | async as triggers">
<mat-list *ngIf="triggers.length !== 0; else empty"> <mat-list *ngIf="triggers.length !== 0; else empty">
<mat-divider></mat-divider>
<mat-list-item *ngFor="let trigger of triggers"> <mat-list-item *ngFor="let trigger of triggers">
<div class="entry"> <div class="entry">
<div class="regex"> <div class="regex">
@ -17,6 +28,7 @@
color="primary" color="primary"
aria-label="Edit" aria-label="Edit"
class="button" class="button"
(click)="onEdit(trigger.id)"
> >
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
</button> </button>
@ -25,6 +37,7 @@
color="warn" color="warn"
aria-label="Delete" aria-label="Delete"
class="button" class="button"
(click)="onDelete(trigger.id)"
> >
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>

View file

@ -4,6 +4,17 @@
width: 100%; width: 100%;
} }
.input {
display: grid;
grid-template-columns: 4fr 50px;
width: 100%;
margin: 10px;
}
.mat-form-field {
width: 100%;
}
.regex { .regex {
margin: 5px; margin: 5px;
margin-top: 10px; margin-top: 10px;

View file

@ -1,6 +1,10 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input } from '@angular/core';
import { TriggersService, BodyTrigger } from 'src/app/core/api'; import { TriggersService, BodyTrigger } from 'src/app/core/api';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { ResourceLoader } from '@angular/compiler';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { invalid } from '@angular/compiler/src/render3/view/util';
@Component({ @Component({
selector: 'app-trigger', selector: 'app-trigger',
@ -10,10 +14,51 @@ import { Observable } from 'rxjs';
export class TriggerComponent implements OnInit { export class TriggerComponent implements OnInit {
@Input() hoodId: number; @Input() hoodId: number;
triggers$: Observable<Array<any>>; triggers$: Observable<Array<any>>;
regexForm: FormGroup;
constructor(private triggersService: TriggersService) {} constructor(
private triggersService: TriggersService,
private formBuilder: FormBuilder
) {}
ngOnInit(): void { ngOnInit(): void {
this.reload();
this.regexForm = this.formBuilder.group({
regex: ['', Validators.required],
});
}
private reload() {
this.triggers$ = this.triggersService.getTriggers(this.hoodId); this.triggers$ = this.triggersService.getTriggers(this.hoodId);
} }
onEdit(triggerId) {}
onDelete(triggerId) {
this.triggersService.deleteTrigger(triggerId, this.hoodId).subscribe(() => {
this.reload();
});
}
onSubmit() {
if (this.regexForm.invalid) {
return;
}
this.triggersService
.createTrigger(this.hoodId, {
pattern: this.regexForm.controls.regex.value,
})
.pipe(first())
.subscribe(
(data) => {
this.regexForm.reset();
this.reload();
},
(error) => {
console.log(error);
this.regexForm.controls['regex'].setErrors({ incorrect: true });
}
);
}
} }

View file

@ -7,6 +7,7 @@ import { MatTabsModule } from '@angular/material/tabs';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import { MatExpansionModule } from '@angular/material/expansion'; import { MatExpansionModule } from '@angular/material/expansion';
import { MatListModule } from '@angular/material/list'; import { MatListModule } from '@angular/material/list';
import { MatInputModule } from '@angular/material/input';
@NgModule({ @NgModule({
declarations: [], declarations: [],
@ -19,6 +20,7 @@ import { MatListModule } from '@angular/material/list';
MatCardModule, MatCardModule,
MatExpansionModule, MatExpansionModule,
MatListModule, MatListModule,
MatInputModule,
], ],
exports: [ exports: [
MatButtonModule, MatButtonModule,
@ -29,6 +31,7 @@ import { MatListModule } from '@angular/material/list';
MatCardModule, MatCardModule,
MatExpansionModule, MatExpansionModule,
MatListModule, MatListModule,
MatInputModule,
], ],
}) })
export class MaterialModule {} export class MaterialModule {}

View file

@ -2,10 +2,16 @@ import { NgModule } from '@angular/core';
import { ToolbarComponent } from './toolbar/toolbar.component'; import { ToolbarComponent } from './toolbar/toolbar.component';
import { MaterialModule } from './material/material.module'; import { MaterialModule } from './material/material.module';
import { NotFoundComponent } from './not-found/not-found.component'; import { NotFoundComponent } from './not-found/not-found.component';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({ @NgModule({
declarations: [ToolbarComponent, NotFoundComponent], declarations: [ToolbarComponent, NotFoundComponent],
imports: [MaterialModule], imports: [MaterialModule, ReactiveFormsModule],
exports: [ToolbarComponent, NotFoundComponent, MaterialModule], exports: [
ToolbarComponent,
NotFoundComponent,
MaterialModule,
ReactiveFormsModule,
],
}) })
export class SharedModule {} export class SharedModule {}