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

[frontend] Add trigger and badword functionality

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
kibicara-frontend/src/app/auth/login/login.component.ts
View file

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

16
kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.html
View file

@ -1,11 +1,23 @@
<mat-card>
<mat-card-title>Badwords</mat-card-title>
<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>
<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">
<mat-list *ngIf="badwords.length !== 0; else empty">
<mat-divider></mat-divider>
<mat-list-item *ngFor="let badword of badwords">
<div class="entry">
<div class="regex">
@ -16,6 +28,7 @@
color="primary"
aria-label="Edit"
class="button"
(click)="onEdit(badword.id)"
>
<mat-icon>edit</mat-icon>
</button>
@ -24,6 +37,7 @@
color="warn"
aria-label="Delete"
class="button"
(click)="onDelete(badword.id)"
>
<mat-icon>delete</mat-icon>
</button>

29
kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.scss
View file

@ -1,20 +1,31 @@
.entry {
display: grid;
grid-template-columns: 4fr 50px 50px;
width: 100%;
display: grid;
grid-template-columns: 4fr 50px 50px;
width: 100%;
}
.input {
display: grid;
grid-template-columns: 4fr 50px;
width: 100%;
margin: 10px;
}
.mat-form-field {
width: 100%;
}
.regex {
margin: 5px;
margin-top: 10px;
font-size: medium;
margin: 5px;
margin-top: 10px;
font-size: medium;
}
.button {
align-self: stretch;
align-self: stretch;
}
.error-msg {
display: flex;
font-style: italic;
display: flex;
font-style: italic;
}

45
kibicara-frontend/src/app/dashboard/board/hoodsettings/badwords/badwords.component.ts
View file

@ -1,6 +1,8 @@
import { Component, OnInit, Input } from '@angular/core';
import { BadwordsService, BodyBadWord } from 'src/app/core/api';
import { Observable } from 'rxjs';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { first } from 'rxjs/operators';
@Component({
selector: 'app-badwords',
@ -10,10 +12,51 @@ import { Observable } from 'rxjs';
export class BadwordsComponent implements OnInit {
@Input() hoodId;
badwords$: Observable<Array<any>>;
regexForm: FormGroup;
constructor(private badwordService: BadwordsService) {}
constructor(
private badwordService: BadwordsService,
private formBuilder: FormBuilder
) {}
ngOnInit(): void {
this.reload();
this.regexForm = this.formBuilder.group({
regex: ['', Validators.required],
});
}
private reload() {
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 });
}
);
}
}

4
kibicara-frontend/src/app/dashboard/board/hoodsettings/hoodsettings.component.scss
View file

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

15
kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.html
View file

@ -1,12 +1,23 @@
<mat-card>
<mat-card-title>Triggers</mat-card-title>
<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
>
<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">
<mat-list *ngIf="triggers.length !== 0; else empty">
<mat-divider></mat-divider>
<mat-list-item *ngFor="let trigger of triggers">
<div class="entry">
<div class="regex">
@ -17,6 +28,7 @@
color="primary"
aria-label="Edit"
class="button"
(click)="onEdit(trigger.id)"
>
<mat-icon>edit</mat-icon>
</button>
@ -25,6 +37,7 @@
color="warn"
aria-label="Delete"
class="button"
(click)="onDelete(trigger.id)"
>
<mat-icon>delete</mat-icon>
</button>

29
kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.scss
View file

@ -1,20 +1,31 @@
.entry {
display: grid;
grid-template-columns: 4fr 50px 50px;
width: 100%;
display: grid;
grid-template-columns: 4fr 50px 50px;
width: 100%;
}
.input {
display: grid;
grid-template-columns: 4fr 50px;
width: 100%;
margin: 10px;
}
.mat-form-field {
width: 100%;
}
.regex {
margin: 5px;
margin-top: 10px;
font-size: medium;
margin: 5px;
margin-top: 10px;
font-size: medium;
}
.button {
align-self: stretch;
align-self: stretch;
}
.error-msg {
display: flex;
font-style: italic;
display: flex;
font-style: italic;
}

47
kibicara-frontend/src/app/dashboard/board/hoodsettings/trigger/trigger.component.ts
View file

@ -1,6 +1,10 @@
import { Component, OnInit, Input } from '@angular/core';
import { TriggersService, BodyTrigger } from 'src/app/core/api';
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({
selector: 'app-trigger',
@ -10,10 +14,51 @@ import { Observable } from 'rxjs';
export class TriggerComponent implements OnInit {
@Input() hoodId: number;
triggers$: Observable<Array<any>>;
regexForm: FormGroup;
constructor(private triggersService: TriggersService) {}
constructor(
private triggersService: TriggersService,
private formBuilder: FormBuilder
) {}
ngOnInit(): void {
this.reload();
this.regexForm = this.formBuilder.group({
regex: ['', Validators.required],
});
}
private reload() {
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 });
}
);
}
}

3
kibicara-frontend/src/app/shared/material/material.module.ts
View file

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

10
kibicara-frontend/src/app/shared/shared.module.ts
View file

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