[frontend] Add backend connection for GET trigger/badwords

kibicara-frontend/src/app/dashboard/board/board.component.ts

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

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

@@ -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>
+    <ng-container *ngIf="badwords$ | async as badwords">
-      <app-option-card></app-option-card>
+      <mat-list *ngIf="badwords.length !== 0; else empty">
-    </div>
+        <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>

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

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

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

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

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

@@ -11,25 +11,20 @@
           </mat-panel-description>
         </mat-expansion-panel-header>
         <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>
       </mat-expansion-panel>
     </mat-accordion>
   </div>
 
   <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>

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

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

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

@@ -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>
+    <ng-container *ngIf="triggers$ | async as triggers">
-      <app-option-card></app-option-card>
+      <mat-list *ngIf="triggers.length !== 0; else empty">
-    </div>
+        <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>

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

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

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

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

kibicara-frontend/src/app/shared/material/material.module.ts

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

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

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

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

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

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

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

kibicara-frontend/src/app/shared/shared.module.ts

@@ -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: [
+  exports: [ToolbarComponent, NotFoundComponent, MaterialModule],
-    ToolbarComponent,
-    NotFoundComponent,
-    OptionCardComponent,
-    MaterialModule,
-  ],
 })
 export class SharedModule {}