[frontend] Add backend connection for GET trigger/badwords
This commit is contained in:
parent
7ce824ea8e
commit
37d73b2f24
|
@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
|
||||||
})
|
})
|
||||||
export class BoardComponent implements OnInit {
|
export class BoardComponent implements OnInit {
|
||||||
hoodId: number;
|
hoodId: number;
|
||||||
hood$: Observable<BodyHood>;
|
hood$: Observable<any>;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
|
|
|
@ -1,11 +1,41 @@
|
||||||
<mat-card>
|
<mat-card>
|
||||||
<mat-card-title>Badwords</mat-card-title>
|
<mat-card-title>Badwords</mat-card-title>
|
||||||
<mat-card-subtitle
|
<mat-card-subtitle
|
||||||
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</mat-card-subtitle
|
>Discards an incoming message that matches the pattern (spam-protection, insult-filtering)</mat-card-subtitle
|
||||||
>
|
>
|
||||||
<mat-card-content>
|
<mat-card-content>
|
||||||
<div>
|
<ng-container *ngIf="badwords$ | async as badwords">
|
||||||
<app-option-card></app-option-card>
|
<mat-list *ngIf="badwords.length !== 0; else empty">
|
||||||
|
<mat-list-item *ngFor="let badword of badwords">
|
||||||
|
<div class="entry">
|
||||||
|
<div class="regex">
|
||||||
|
{{ badword.pattern }}
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
color="primary"
|
||||||
|
aria-label="Edit"
|
||||||
|
class="button"
|
||||||
|
>
|
||||||
|
<mat-icon>edit</mat-icon>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
color="warn"
|
||||||
|
aria-label="Delete"
|
||||||
|
class="button"
|
||||||
|
>
|
||||||
|
<mat-icon>delete</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
</mat-list-item>
|
||||||
|
</mat-list>
|
||||||
|
</ng-container>
|
||||||
|
<ng-template #empty>
|
||||||
|
<div class="error-msg">
|
||||||
|
No badwords configured yet.
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
.entry {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 4fr 50px 50px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regex {
|
||||||
|
margin: 5px;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-msg {
|
||||||
|
display: flex;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
|
@ -9,11 +9,11 @@ import { Observable } from 'rxjs';
|
||||||
})
|
})
|
||||||
export class BadwordsComponent implements OnInit {
|
export class BadwordsComponent implements OnInit {
|
||||||
@Input() hoodId;
|
@Input() hoodId;
|
||||||
badwords$: Observable<BodyBadWord>;
|
badwords$: Observable<Array<any>>;
|
||||||
|
|
||||||
constructor(private badwordService: BadwordsService) {}
|
constructor(private badwordService: BadwordsService) {}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
//this.badwords$ = this.badwordService.getBadwords(this.hoodId);
|
this.badwords$ = this.badwordService.getBadwords(this.hoodId);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,25 +11,20 @@
|
||||||
</mat-panel-description>
|
</mat-panel-description>
|
||||||
</mat-expansion-panel-header>
|
</mat-expansion-panel-header>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi
|
To avoid misuse of the service, some safety mechanisms are in place.
|
||||||
enim, semper at metus dapibus, mattis rutrum risus. Nam sit amet
|
For a message to be shared, it needs to contain
|
||||||
venenatis ipsum. Nulla accumsan blandit est, vel dignissim nisl
|
<strong>at least one trigger word</strong>. Additionally, <strong>no badwords
|
||||||
consectetur in. Phasellus pretium vulputate lorem, ornare lobortis est
|
may occur in the message</strong>. Therefore triggers are words that only
|
||||||
euismod ut. Nullam sit amet malesuada diam. Sed condimentum felis eu
|
appear in legitimate messages. Badwords on the other hand, are words
|
||||||
scelerisque fringilla. Mauris vel sapien et nisl faucibus rutrum. Ut
|
that completely discard the message, even if the remaining message is
|
||||||
dictum erat nec mattis tristique. Suspendisse ultrices tempus
|
legitimate. For example insults or spam words like "blockchain".
|
||||||
facilisis. Fusce ac quam tempus sapien commodo vehicula. Suspendisse
|
|
||||||
viverra accumsan nunc, lacinia sagittis augue porttitor non. Cras
|
|
||||||
auctor, lorem sed convallis bibendum, odio sapien blandit nisl, sed
|
|
||||||
pulvinar augue risus a ligula. In dui massa, fringilla eu dolor eu,
|
|
||||||
volutpat varius lorem. Vivamus et molestie eros.
|
|
||||||
</p>
|
</p>
|
||||||
</mat-expansion-panel>
|
</mat-expansion-panel>
|
||||||
</mat-accordion>
|
</mat-accordion>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<app-trigger class="container-item"></app-trigger>
|
<app-trigger [hoodId]="hoodId"></app-trigger>
|
||||||
<app-badwords class="container-item"></app-badwords>
|
<app-badwords [hoodId]="hoodId"></app-badwords>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,15 +2,13 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-items: stretch;
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-item {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings {
|
.settings {
|
||||||
margin: 1%;
|
margin: 1%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,42 @@
|
||||||
<mat-card>
|
<mat-card>
|
||||||
<mat-card-title>Triggers</mat-card-title>
|
<mat-card-title>Triggers</mat-card-title>
|
||||||
<mat-card-subtitle
|
<mat-card-subtitle
|
||||||
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</mat-card-subtitle
|
>Only shares an incoming message if it matches a pattern (topic-setting). <br />
|
||||||
|
<strong>Add at least one trigger!</strong></mat-card-subtitle
|
||||||
>
|
>
|
||||||
<mat-card-content>
|
<mat-card-content>
|
||||||
<div>
|
<ng-container *ngIf="triggers$ | async as triggers">
|
||||||
<app-option-card></app-option-card>
|
<mat-list *ngIf="triggers.length !== 0; else empty">
|
||||||
|
<mat-list-item *ngFor="let trigger of triggers">
|
||||||
|
<div class="entry">
|
||||||
|
<div class="regex">
|
||||||
|
{{ trigger.pattern }}
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
color="primary"
|
||||||
|
aria-label="Edit"
|
||||||
|
class="button"
|
||||||
|
>
|
||||||
|
<mat-icon>edit</mat-icon>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
color="warn"
|
||||||
|
aria-label="Delete"
|
||||||
|
class="button"
|
||||||
|
>
|
||||||
|
<mat-icon>delete</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
</mat-list-item>
|
||||||
|
</mat-list>
|
||||||
|
</ng-container>
|
||||||
|
<ng-template #empty>
|
||||||
|
<div class="error-msg">
|
||||||
|
No triggers configured yet.
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
.entry {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 4fr 50px 50px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regex {
|
||||||
|
margin: 5px;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-msg {
|
||||||
|
display: flex;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
|
@ -1,4 +1,6 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
|
import { TriggersService, BodyTrigger } from 'src/app/core/api';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-trigger',
|
selector: 'app-trigger',
|
||||||
|
@ -6,7 +8,12 @@ import { Component, OnInit } from '@angular/core';
|
||||||
styleUrls: ['./trigger.component.scss'],
|
styleUrls: ['./trigger.component.scss'],
|
||||||
})
|
})
|
||||||
export class TriggerComponent implements OnInit {
|
export class TriggerComponent implements OnInit {
|
||||||
constructor() {}
|
@Input() hoodId: number;
|
||||||
|
triggers$: Observable<Array<any>>;
|
||||||
|
|
||||||
ngOnInit(): void {}
|
constructor(private triggersService: TriggersService) {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.triggers$ = this.triggersService.getTriggers(this.hoodId);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { MatMenuModule } from '@angular/material/menu';
|
||||||
import { MatTabsModule } from '@angular/material/tabs';
|
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';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [],
|
declarations: [],
|
||||||
|
@ -17,6 +18,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
||||||
MatTabsModule,
|
MatTabsModule,
|
||||||
MatCardModule,
|
MatCardModule,
|
||||||
MatExpansionModule,
|
MatExpansionModule,
|
||||||
|
MatListModule,
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
|
@ -26,6 +28,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
||||||
MatTabsModule,
|
MatTabsModule,
|
||||||
MatCardModule,
|
MatCardModule,
|
||||||
MatExpansionModule,
|
MatExpansionModule,
|
||||||
|
MatListModule,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class MaterialModule {}
|
export class MaterialModule {}
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
<p>option-card works!</p>
|
|
||||||
|
|
||||||
<mat-card>
|
|
||||||
test
|
|
||||||
<button mat-icon-button color="primary" aria-label="Edit">
|
|
||||||
<mat-icon>edit</mat-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button mat-icon-button color="warn" aria-label="Delete">
|
|
||||||
<mat-icon>delete</mat-icon>
|
|
||||||
</button>
|
|
||||||
</mat-card>
|
|
|
@ -1,24 +0,0 @@
|
||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { OptionCardComponent } from './option-card.component';
|
|
||||||
|
|
||||||
describe('OptionCardComponent', () => {
|
|
||||||
let component: OptionCardComponent;
|
|
||||||
let fixture: ComponentFixture<OptionCardComponent>;
|
|
||||||
|
|
||||||
beforeEach(async(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
declarations: [OptionCardComponent],
|
|
||||||
}).compileComponents();
|
|
||||||
}));
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(OptionCardComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -1,14 +0,0 @@
|
||||||
import { Component, OnInit, Input } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-option-card',
|
|
||||||
templateUrl: './option-card.component.html',
|
|
||||||
styleUrls: ['./option-card.component.scss'],
|
|
||||||
})
|
|
||||||
export class OptionCardComponent implements OnInit {
|
|
||||||
@Input() option;
|
|
||||||
|
|
||||||
constructor() {}
|
|
||||||
|
|
||||||
ngOnInit(): void {}
|
|
||||||
}
|
|
|
@ -2,16 +2,10 @@ 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 { OptionCardComponent } from './option-card/option-card.component';
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [ToolbarComponent, NotFoundComponent, OptionCardComponent],
|
declarations: [ToolbarComponent, NotFoundComponent],
|
||||||
imports: [MaterialModule],
|
imports: [MaterialModule],
|
||||||
exports: [
|
exports: [ToolbarComponent, NotFoundComponent, MaterialModule],
|
||||||
ToolbarComponent,
|
|
||||||
NotFoundComponent,
|
|
||||||
OptionCardComponent,
|
|
||||||
MaterialModule,
|
|
||||||
],
|
|
||||||
})
|
})
|
||||||
export class SharedModule {}
|
export class SharedModule {}
|
||||||
|
|
Loading…
Reference in a new issue