Add bot-settings for keywords and shares

frontend/src/app/Views/bot-settings/bot-settings.component.html

@@ -1 +1,58 @@
-<p>bot-settings works!</p>
+<mat-grid-list cols="2">
+  <mat-grid-tile>
+    <mat-card class="card">
+      <mat-card-title class="card-title">Keywords</mat-card-title>
+      <mat-card-content>
+        <mat-form-field class="example-chip-list" appearance="fill">
+          <mat-label>Keywords</mat-label>
+          <mat-chip-list #chipList aria-label="Keyword selection">
+            <mat-chip
+              *ngFor="let keyword of keywords"
+              (removed)="removeKeyword(keyword)"
+            >
+              {{ keyword.name }}
+              <button matChipRemove>
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip>
+            <input
+              placeholder="New keyword..."
+              [matChipInputFor]="chipList"
+              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+              [matChipInputAddOnBlur]="addOnBlur"
+              (matChipInputTokenEnd)="addKeyword($event)"
+            />
+          </mat-chip-list>
+        </mat-form-field>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <mat-card class="card">
+      <mat-card-title class="card-title">Shares</mat-card-title>
+      <mat-card-content>
+        <mat-form-field class="example-chip-list" appearance="fill">
+          <mat-label>Shares</mat-label>
+          <mat-chip-list #sharesList aria-label="Share selection">
+            <mat-chip
+              *ngFor="let share of shares"
+              (removed)="removeShare(share)"
+            >
+              {{ share.symbol }}
+              <button matChipRemove>
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip>
+            <input
+              placeholder="New fruit..."
+              [matChipInputFor]="sharesList"
+              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+              [matChipInputAddOnBlur]="addOnBlur"
+              (matChipInputTokenEnd)="addShare($event)"
+            />
+          </mat-chip-list>
+        </mat-form-field>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+</mat-grid-list>

frontend/src/app/Views/bot-settings/bot-settings.component.scss

@@ -0,0 +1,26 @@
+.form {
+  width: 100%;
+}
+
+.card {
+  width: 90%;
+  height: 80%;
+  margin: 5%;
+}
+
+.example-full-width {
+  width: 100%;
+}
+
+.card-title {
+  padding-bottom: 2.5vh;
+}
+
+mat-grid {
+  width: 100%;
+  height: 100%;
+}
+
+.example-chip-list {
+  width: 100%;
+}

frontend/src/app/Views/bot-settings/bot-settings.component.ts

@@ -1,15 +1,102 @@
 import { Component, OnInit } from '@angular/core';
+import { C, COMMA, ENTER, F } from '@angular/cdk/keycodes';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { BotService } from 'src/app/Services/bot.service';
+import { HelperService } from 'src/app/Helpers/helper.service';
+
+export interface Fruit {
+  name: string;
+}
+
+export interface Share {
+  symbol: string;
+}
+
+export interface Keyword {
+  name: string;
+}
 
 @Component({
   selector: 'app-bot-settings',
   templateUrl: './bot-settings.component.html',
-  styleUrls: ['./bot-settings.component.scss']
+  styleUrls: ['./bot-settings.component.scss'],
 })
 export class BotSettingsComponent implements OnInit {
+  keywords: Keyword[] = [];
+  shares: Share[] = [];
 
-  constructor() { }
+  constructor(private botService: BotService, private helper: HelperService) {}
 
   ngOnInit(): void {
+    this.shares = this.helper.formatShareData();
+    this.helper.formatKeywordsData(this.keywords);
   }
 
+  addOnBlur = true;
+  readonly separatorKeysCodes = [ENTER, COMMA] as const;
+
+  async addKeyword(event: MatChipInputEvent): Promise<void> {
+    const value = (event.value || '').trim();
+
+    // Add keyword to database
+    if (value && !this.keywords.includes({ name: value })) {
+      console.log('Added: ' + value);
+      this.botService.createKeyword(value).subscribe((result) => {
+        console.log(result);
+      });
+    }
+
+    // Clear the input value
+    event.chipInput!.clear();
+
+    if (value) {
+      await this.helper.delay(1000);
+      this.keywords = [];
+      this.keywords = this.helper.formatKeywordsData(this.keywords);
+    }
+  }
+
+  async removeKeyword(keyword: Keyword): Promise<void> {
+    this.botService.deleteKeyword(keyword.name).subscribe((result) => {
+      console.log(result);
+    });
+
+    await this.helper.delay(1000);
+
+    this.keywords = [];
+    this.keywords = this.helper.formatKeywordsData(this.keywords);
+  }
+
+  async addShare(event: MatChipInputEvent): Promise<void> {
+    const value = (event.value || '').trim();
+
+    // Add share to database
+    if (value && !this.shares.includes({ symbol: value })) {
+      console.log('Added: ' + value);
+      this.botService.createShare(value).subscribe((result) => {
+        console.log(result);
+      });
+    }
+
+    // Clear the input value
+    event.chipInput!.clear();
+
+    if (value) {
+      await this.helper.delay(1000);
+
+      this.shares = [];
+      this.shares = this.helper.formatShareData();
+    }
+  }
+
+  async removeShare(share: Share): Promise<void> {
+    this.botService.deleteShare(share.symbol).subscribe((result) => {
+      console.log(result);
+    });
+
+    await this.helper.delay(1000);
+
+    this.shares = [];
+    this.shares = this.helper.formatShareData();
+  }
 }

frontend/src/app/Views/profile/profile.component.ts

@@ -1,9 +1,6 @@
-import { i18nMetaToJSDoc } from '@angular/compiler/src/render3/view/i18n/meta';
 import { Component, OnInit } from '@angular/core';
 import { FormControl, PatternValidator, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
-import { BotService } from 'src/app/Services/bot.service';
-import { DataService } from 'src/app/Services/data.service';
 import { ProfileService } from 'src/app/Services/profile.service';
 import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';