[frontend] Add trigger and badword functionality
This commit is contained in:
parent
37d73b2f24
commit
88466b08eb
|
@ -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';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 });
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,6 +14,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.explanation {
|
.explanation {
|
||||||
margin-top: 10px;
|
margin-top: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 });
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {}
|
||||||
|
|
|
@ -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 {}
|
||||||
|
|
Loading…
Reference in a new issue