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

[frontend] Add backend connection for GET trigger/badwords

Browse source
This commit is contained in:
Cathy Hu 2020-08-24 18:21:30 +02:00
parent 7ce824ea8e
commit 37d73b2f24
15 changed files with 138 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
kibicara-frontend/src/app/dashboard/board/board.component.ts
View file

@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
})
export class BoardComponent implements OnInit {
hoodId: number;
hood$: Observable<BodyHood>;
hood$: Observable<any>;
constructor(
private route: ActivatedRoute,

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

@ -1,11 +1,41 @@
<mat-card>
<mat-card-title>Badwords</mat-card-title>
<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>
<div>
<app-option-card></app-option-card>
</div>
<ng-container *ngIf="badwords$ | async as badwords">
<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>
<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>

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

@ -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;
}

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

@ -9,11 +9,11 @@ import { Observable } from 'rxjs';
})
export class BadwordsComponent implements OnInit {
@Input() hoodId;
badwords$: Observable<BodyBadWord>;
badwords$: Observable<Array<any>>;
constructor(private badwordService: BadwordsService) {}
ngOnInit(): void {
//this.badwords$ = this.badwordService.getBadwords(this.hoodId);
this.badwords$ = this.badwordService.getBadwords(this.hoodId);
}
}

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

@ -11,25 +11,20 @@
</mat-panel-description>
</mat-expansion-panel-header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi
enim, semper at metus dapibus, mattis rutrum risus. Nam sit amet
venenatis ipsum. Nulla accumsan blandit est, vel dignissim nisl
consectetur in. Phasellus pretium vulputate lorem, ornare lobortis est
euismod ut. Nullam sit amet malesuada diam. Sed condimentum felis eu
scelerisque fringilla. Mauris vel sapien et nisl faucibus rutrum. Ut
dictum erat nec mattis tristique. Suspendisse ultrices tempus
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.
To avoid misuse of the service, some safety mechanisms are in place.
For a message to be shared, it needs to contain
<strong>at least one trigger word</strong>. Additionally, <strong>no badwords
may occur in the message</strong>. Therefore triggers are words that only
appear in legitimate messages. Badwords on the other hand, are words
that completely discard the message, even if the remaining message is
legitimate. For example insults or spam words like "blockchain".
</p>
</mat-expansion-panel>
</mat-accordion>
</div>
<div class="container">
<app-trigger class="container-item"></app-trigger>
<app-badwords class="container-item"></app-badwords>
<app-trigger [hoodId]="hoodId"></app-trigger>
<app-badwords [hoodId]="hoodId"></app-badwords>
</div>
</div>

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

@ -2,15 +2,13 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: stretch;
justify-items: stretch;
@media (max-width: 600px) {
grid-template-columns: 1fr;
}
}
.container-item {
align-items: center;
}
.settings {
margin: 1%;
}

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

@ -1,11 +1,42 @@
<mat-card>
<mat-card-title>Triggers</mat-card-title>
<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>
<div>
<app-option-card></app-option-card>
</div>
<ng-container *ngIf="triggers$ | async as triggers">
<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>
<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>

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

@ -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;
}

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

@ -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({
selector: 'app-trigger',
@ -6,7 +8,12 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./trigger.component.scss'],
})
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);
}
}

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

@ -6,6 +6,7 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCardModule } from '@angular/material/card';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatListModule } from '@angular/material/list';
@NgModule({
declarations: [],
@ -17,6 +18,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
MatTabsModule,
MatCardModule,
MatExpansionModule,
MatListModule,
],
exports: [
MatButtonModule,
@ -26,6 +28,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
MatTabsModule,
MatCardModule,
MatExpansionModule,
MatListModule,
],
})
export class MaterialModule {}

12
kibicara-frontend/src/app/shared/option-card/option-card.component.html
View file

@ -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>

0
kibicara-frontend/src/app/shared/option-card/option-card.component.scss
View file

24
kibicara-frontend/src/app/shared/option-card/option-card.component.spec.ts
View file

@ -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();
});
});

14
kibicara-frontend/src/app/shared/option-card/option-card.component.ts
View file

@ -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 {}
}

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

@ -2,16 +2,10 @@ 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 { OptionCardComponent } from './option-card/option-card.component';
@NgModule({
declarations: [ToolbarComponent, NotFoundComponent, OptionCardComponent],
declarations: [ToolbarComponent, NotFoundComponent],
imports: [MaterialModule],
exports: [
ToolbarComponent,
NotFoundComponent,
OptionCardComponent,
MaterialModule,
],
exports: [ToolbarComponent, NotFoundComponent, MaterialModule],
})
export class SharedModule {}