Merge pull request #107 from WebEngineering2/frontend

Frontend

frontend/.eslintrc.json

@@ -0,0 +1,50 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

frontend/angular.json

@@ -26,7 +26,10 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.png",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss"
@@ -92,16 +95,31 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
-  "defaultProject": "Aktienbot"
+  "defaultProject": "Aktienbot",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
 }

frontend/package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -16,28 +17,36 @@
     "@angular/compiler": "~13.2.0",
     "@angular/core": "~13.2.0",
     "@angular/forms": "~13.2.0",
-    "@angular/material": "^13.3.5",
+    "@angular/material": "^13.2.6",
     "@angular/platform-browser": "~13.2.0",
     "@angular/platform-browser-dynamic": "~13.2.0",
     "@angular/router": "~13.2.0",
     "bootstrap": "^5.1.3",
     "ngx-cron-editor": "^0.7.3",
     "rxjs": "~7.5.0",
-    "tslib": "^2.4.0",
+    "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.4",
+    "@angular-devkit/build-angular": "~13.2.5",
-    "@angular/cli": "~13.3.4",
+    "@angular-eslint/builder": "13.2.1",
+    "@angular-eslint/eslint-plugin": "13.2.1",
+    "@angular-eslint/eslint-plugin-template": "13.2.1",
+    "@angular-eslint/schematics": "13.2.1",
+    "@angular-eslint/template-parser": "13.2.1",
+    "@angular/cli": "~13.2.5",
     "@angular/compiler-cli": "~13.2.0",
-    "@types/jasmine": "~4.0.3",
+    "@types/jasmine": "~3.10.0",
-    "@types/node": "^17.0.29",
+    "@types/node": "^12.11.1",
-    "karma": "~6.3.19",
+    "@typescript-eslint/eslint-plugin": "5.17.0",
-    "jasmine-core": "~4.1.0",
+    "@typescript-eslint/parser": "5.17.0",
+    "eslint": "^8.12.0",
+    "jasmine-core": "~4.0.0",
+    "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.2.0",
+    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~5.0.0",
+    "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.5.2"
   }
-}
+}

frontend/src/app/Helpers/helper.service.ts

@@ -21,7 +21,7 @@ export class HelperService {
       var data = JSON.parse(result);
       for (let i = 0; i < data.data.length; i++) {
         shares.push({
-          symbol: data.data[i].symbol,
+          isin: data.data[i].isin,
         });
       }
     });

frontend/src/app/Services/bot.service.ts

@@ -79,11 +79,12 @@ export class BotService {
    * @param  {string} keyword
    * @returns Observable
    */
-  public createShare(symbol: string): Observable<any> {
+  public createShare(isin: string, comment: string): Observable<any> {
     return this.http.post(
       API_URL + 'share',
       {
-        symbol,
+        comment,
+        isin,
       },
       {
         headers: new HttpHeaders({

frontend/src/app/Services/data.service.ts

@@ -50,7 +50,8 @@ export class DataService {
    * @returns Observable
    */
   public createTransaction(
-    symbol: string,
+    comment: string,
+    isin: string,
     time: string,
     count: number,
     price: number
@@ -60,9 +61,10 @@ export class DataService {
     return this.http.post(
       API_URL + 'transaction',
       {
+        comment,
         count,
+        isin,
         price,
-        symbol,
         time,
       },
       {

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

@@ -1,5 +1,5 @@
-<mat-grid-list cols="2">
+<mat-grid-list cols="2" rowHeight="45%">
-  <mat-grid-tile>
+  <mat-grid-tile colspan="1" rowspan="1">
     <mat-card class="card">
       <mat-card-title class="card-title">Keywords</mat-card-title>
       <mat-card-content>
@@ -31,7 +31,32 @@
       </mat-card-content>
     </mat-card>
   </mat-grid-tile>
-  <mat-grid-tile>
+  <mat-grid-tile colspan="1" rowspan="2">
+    <mat-card class="card placeholderRHS">
+      <mat-card-title class="card-title">
+        <span>Add automatic updates</span>
+      </mat-card-title>
+      <mat-card-content class="cron-content">
+        <form
+          name="form"
+          (ngSubmit)="f.form.valid && setCronString()"
+          #f="ngForm"
+          novalidate
+          class="backgorund form"
+        >
+          <cron-editor
+            class="cron-editor"
+            [formControl]="cronForm"
+            [options]="cronOptions"
+          ></cron-editor>
+          <div class="form-group footer-buttons">
+            <button class="btn btn-primary btn-block">Add</button>
+          </div>
+        </form>
+      </mat-card-content>
+    </mat-card>
+  </mat-grid-tile>
+  <mat-grid-tile colspan="1" rowspan="1">
     <mat-card class="card">
       <mat-card-title class="card-title">Shares</mat-card-title>
       <mat-card-content>
@@ -42,7 +67,7 @@
               *ngFor="let share of shares"
               (removed)="removeShare(share)"
             >
-              {{ share.symbol }}
+              {{ share.isin }}
               <button matChipRemove>
                 <mat-icon>cancel</mat-icon>
               </button>

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

@@ -24,3 +24,20 @@ mat-grid {
 .example-chip-list {
   width: 100%;
 }
+
+.placeholder {
+  height: 95%;
+}
+
+.placeholderRHS {
+  height: 90%;
+}
+
+.cron-content {
+  height: 70%;
+  overflow: auto;
+}
+
+mat-card {
+  overflow: scroll;
+}

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

@@ -1,15 +1,20 @@
 import { Component, OnInit } from '@angular/core';
 import { C, COMMA, ENTER, F } from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material/chips';
+
+import { CronOptions } from 'ngx-cron-editor';
+
 import { BotService } from 'src/app/Services/bot.service';
 import { HelperService } from 'src/app/Helpers/helper.service';
+import { ProfileService } from 'src/app/Services/profile.service';
+import { FormControl } from '@angular/forms';
 
 export interface Fruit {
   name: string;
 }
 
 export interface Share {
-  symbol: string;
+  isin: string;
 }
 
 export interface Keyword {
@@ -25,7 +30,11 @@ export class BotSettingsComponent implements OnInit {
   keywords: Keyword[] = [];
   shares: Share[] = [];
 
-  constructor(private botService: BotService, private helper: HelperService) {}
+  constructor(
+    private botService: BotService,
+    private helper: HelperService,
+    private profileService: ProfileService
+  ) {}
 
   ngOnInit(): void {
     this.shares = this.helper.formatShareData();
@@ -41,7 +50,7 @@ export class BotSettingsComponent implements OnInit {
     // Add keyword to database
     if (value && !this.keywords.includes({ name: value })) {
       console.log('Added: ' + value);
-      this.botService.createKeyword(value).subscribe((result) => {
+      this.botService.createKeyword(value.toLowerCase()).subscribe((result) => {
         console.log(result);
       });
     }
@@ -71,9 +80,9 @@ export class BotSettingsComponent implements OnInit {
     const value = (event.value || '').trim();
 
     // Add share to database
-    if (value && !this.shares.includes({ symbol: value })) {
+    if (value && !this.shares.includes({ isin: value.toLowerCase() })) {
       console.log('Added: ' + value);
-      this.botService.createShare(value).subscribe((result) => {
+      this.botService.createShare(value, 'Comment').subscribe((result) => {
         console.log(result);
       });
     }
@@ -90,7 +99,7 @@ export class BotSettingsComponent implements OnInit {
   }
 
   async removeShare(share: Share): Promise<void> {
-    this.botService.deleteShare(share.symbol).subscribe((result) => {
+    this.botService.deleteShare(share.isin).subscribe((result) => {
       console.log(result);
     });
 
@@ -99,4 +108,32 @@ export class BotSettingsComponent implements OnInit {
     this.shares = [];
     this.shares = this.helper.formatShareData();
   }
+
+  setCronString() {
+    this.profileService
+      .addCronString(this.cronForm.value)
+      .subscribe((result) => {
+        console.log(result);
+      });
+  }
+
+  cronForm = new FormControl('0 0 1/1 * *');
+  public cronOptions: CronOptions = {
+    defaultTime: '00:00:00',
+
+    hideMinutesTab: true,
+    hideHourlyTab: true,
+    hideDailyTab: false,
+    hideWeeklyTab: true,
+    hideMonthlyTab: true,
+    hideYearlyTab: true,
+    hideAdvancedTab: true,
+    hideSpecificWeekDayTab: true,
+    hideSpecificMonthWeekTab: true,
+
+    use24HourTime: true,
+    hideSeconds: true,
+
+    cronFlavor: 'quartz', //standard or quartz
+  };
 }

frontend/src/app/Views/dashboard/dashboard.component.html

@@ -123,6 +123,12 @@
               <td mat-cell *matCellDef="let element">{{ element.count }}</td>
             </ng-container>
 
+            <!-- Comment Column -->
+            <ng-container matColumnDef="comment">
+              <th mat-header-cell *matHeaderCellDef>Comment</th>
+              <td mat-cell *matCellDef="let element">{{ element.comment }}</td>
+            </ng-container>
+
             <!-- Name Column -->
             <ng-container matColumnDef="name">
               <th mat-header-cell *matHeaderCellDef>Price</th>
@@ -131,8 +137,8 @@
 
             <!-- Weight Column -->
             <ng-container matColumnDef="weight">
-              <th mat-header-cell *matHeaderCellDef>Symbol</th>
+              <th mat-header-cell *matHeaderCellDef>ISIN</th>
-              <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+              <td mat-cell *matCellDef="let element">{{ element.isin }}</td>
             </ng-container>
 
             <!-- Symbol Column -->

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

@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import { DataService } from 'src/app/Services/data.service';
 import { MatDialog } from '@angular/material/dialog';
 import { UserDialogComponent } from './user-dialog/user-dialog.component';
-import { C } from '@angular/cdk/keycodes';
 import { HelperService } from 'src/app/Helpers/helper.service';
 
 export interface PeriodicElement {
@@ -31,7 +30,8 @@ var TRANSACTION_DATA: TransactionData[] = [];
 var STOCK_DATA: Stock[] = [];
 
 export interface TransactionData {
-  symbol: string;
+  comment: string;
+  isin: string;
   time: string;
   count: number;
   price: number;
@@ -44,8 +44,8 @@ export interface TransactionData {
 })
 export class DashboardComponent implements OnInit {
   constructor(
-    private helper: HelperService,
     private dataService: DataService,
+    private helper: HelperService,
     public dialog: MatDialog
   ) {}
 
@@ -55,11 +55,34 @@ export class DashboardComponent implements OnInit {
   depotCost: number = 0;
   profit: number = 0;
 
+  getTransactions() {
+    var TRANSACTION_DATA: TransactionData[] = [];
+    this.dataService.getTransactionData().subscribe((response: any) => {
+      var data = JSON.parse(response);
+      this.depotCost = 0;
+      for (let i = 0; i < data.data.length; i++) {
+        this.depotCost += data.data[i].price;
+        TRANSACTION_DATA.push({
+          comment: data.data[i].comment,
+          isin: data.data[i].isin,
+          time: data.data[i].time,
+          count: data.data[i].count,
+          price: data.data[i].price,
+        });
+      }
+      this.dataSourceTransactions = TRANSACTION_DATA;
+      //TODO move to helper service
+
+      this.profit = this.depotCurrentValue - this.depotCost;
+    });
+  }
+
   ngOnInit() {
     this.dataService.getStockData().subscribe((response: any) => {
       var data = JSON.parse(response);
+      this.depotCurrentValue = 0;
       for (let i = 0; i < data.data.length; i++) {
-        this.depotCurrentValue += data.data[i].current_price;
+        this.depotCurrentValue = data.data[i].current_price;
         STOCK_DATA.push({
           count: data.data[i].count,
           currentPrice: data.data[i].current_price,
@@ -75,10 +98,12 @@ export class DashboardComponent implements OnInit {
 
     this.dataService.getTransactionData().subscribe((response: any) => {
       var data = JSON.parse(response);
+      this.depotCost = 0;
       for (let i = 0; i < data.data.length; i++) {
         this.depotCost += data.data[i].price;
         TRANSACTION_DATA.push({
-          symbol: data.data[i].symbol,
+          comment: data.data[i].comment,
+          isin: data.data[i].isin,
           time: data.data[i].time,
           count: data.data[i].count,
           price: data.data[i].price,
@@ -91,7 +116,8 @@ export class DashboardComponent implements OnInit {
     });
   }
 
-  symbol: string = '';
+  comment: string = '';
+  isin: string = '';
   time: Date = new Date();
   count: number = 0.0;
   price: number = 0.0;
@@ -100,7 +126,8 @@ export class DashboardComponent implements OnInit {
     const dialogRef = this.dialog.open(UserDialogComponent, {
       width: '50vw',
       data: {
-        symbol: this.symbol,
+        comment: this.comment,
+        isin: this.isin,
         time: this.time,
         count: this.count,
         price: this.price,
@@ -108,11 +135,18 @@ export class DashboardComponent implements OnInit {
     });
 
     dialogRef.afterClosed().subscribe((result) => {
-      console.log('The dialog was closed');
+      this.helper.delay(1000);
+      this.getTransactions();
     });
   }
 
-  displayedColumns: string[] = ['weight', 'position', 'name', 'symbol'];
+  displayedColumns: string[] = [
+    'comment',
+    'weight',
+    'position',
+    'name',
+    'symbol',
+  ];
   displayedColumnsStocks: string[] = [
     'position',
     'name',

frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.html

@@ -7,15 +7,27 @@
   class="backgorund"
 >
   <div class="form-group">
-    <label for="symbol">Symbol</label>
+    <label for="comment">Comment</label>
     <input
-      type="symbol"
+      type="comment"
       class="form-control"
-      name="symbol"
+      name="comment"
-      [(ngModel)]="data.symbol"
+      [(ngModel)]="data.comment"
       required
-      symbol
+      comment
-      #symbol="ngModel"
+      #comment="ngModel"
+    />
+  </div>
+  <div class="form-group">
+    <label for="isin">isin</label>
+    <input
+      type="isin"
+      class="form-control"
+      name="isin"
+      [(ngModel)]="data.isin"
+      required
+      isin
+      #isin="ngModel"
     />
   </div>
   <div class="form-group">

frontend/src/app/Views/dashboard/user-dialog/user-dialog.component.ts

@@ -13,7 +13,7 @@ import { TransactionData } from '../dashboard.component';
   templateUrl: './user-dialog.component.html',
   styleUrls: ['./user-dialog.component.scss'],
 })
-export class UserDialogComponent implements OnInit {
+export class UserDialogComponent {
   constructor(
     private dataService: DataService,
     public dialog: MatDialog,
@@ -21,14 +21,13 @@ export class UserDialogComponent implements OnInit {
     @Inject(MAT_DIALOG_DATA) public data: TransactionData
   ) {}
 
-  ngOnInit(): void {}
-
   onSubmit() {
-    //TODO check tat price is decimal
+    //TODO check that price is decimal
     console.log(
       this.dataService
         .createTransaction(
-          this.data.symbol,
+          this.data.comment,
+          this.data.isin,
           this.data.time,
           +this.data.count,
           +this.data.price.toFixed(2)

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

@@ -6,14 +6,12 @@ import { TokenStorageService } from 'src/app/Services/token.service';
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
 })
-export class HeaderComponent implements OnInit {
+export class HeaderComponent {
   /**
    * @param  {TokenStorageService} privatetokenStorage
    */
   constructor(private tokenStorage: TokenStorageService) {}
 
-  ngOnInit(): void {}
-
   //logout() clears session storage; All user data is eradicated from it and page is reloaded
   logout() {
     this.tokenStorage.signOut();

frontend/src/app/Views/profile/confirmation-dialog/confirmation-dialog.component.ts

@@ -5,11 +5,9 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './confirmation-dialog.component.html',
   styleUrls: ['./confirmation-dialog.component.scss'],
 })
-export class ConfirmationDialogComponent implements OnInit {
+export class ConfirmationDialogComponent {
   constructor() {}
 
-  ngOnInit(): void {}
-
   confirm() {}
 
   returnBack() {}

frontend/src/app/Views/profile/help-dialog/help-dialog.component.ts

@@ -5,10 +5,8 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './help-dialog.component.html',
   styleUrls: ['./help-dialog.component.scss'],
 })
-export class HelpDialogComponent implements OnInit {
+export class HelpDialogComponent {
   constructor() {}
 
-  ngOnInit(): void {}
-
   close() {}
 }

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

@@ -95,8 +95,8 @@
       </mat-card-content>
     </mat-card>
   </mat-grid-tile>
-  <mat-grid-tile colspan="1" rowspan="1">
+  <mat-grid-tile colspan="1" rowspan="2">
-    <mat-card class="card placeholderRHS">
+    <mat-card class="card placeholder">
       <mat-card-title class="card-title">
         <span>Connect Telegram Account</span>
       </mat-card-title>
@@ -137,29 +137,4 @@
       </mat-card-content>
     </mat-card>
   </mat-grid-tile>
-  <mat-grid-tile colspan="1" rowspan="1">
-    <mat-card class="card placeholderRHS">
-      <mat-card-title class="card-title">
-        <span>Add automatic updates</span>
-      </mat-card-title>
-      <mat-card-content class="cron-content">
-        <form
-          name="form"
-          (ngSubmit)="f.form.valid && setCronString()"
-          #f="ngForm"
-          novalidate
-          class="backgorund form"
-        >
-          <cron-editor
-            class="cron-editor"
-            [formControl]="cronForm"
-            [options]="cronOptions"
-          ></cron-editor>
-          <div class="form-group footer-buttons">
-            <button class="btn btn-primary btn-block">Add</button>
-          </div>
-        </form>
-      </mat-card-content>
-    </mat-card>
-  </mat-grid-tile>
 </mat-grid-list>

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

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl, PatternValidator, Validators } from '@angular/forms';
+import { FormControl, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
-import { CronOptions } from 'ngx-cron-editor';
 import { ProfileService } from 'src/app/Services/profile.service';
 import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
 import { HelpDialogComponent } from './help-dialog/help-dialog.component';
@@ -32,26 +31,6 @@ export class ProfileComponent implements OnInit {
     public dialog: MatDialog
   ) {}
 
-  cronForm = new FormControl('0 0 1/1 * *');
-  public cronOptions: CronOptions = {
-    defaultTime: '00:00:00',
-
-    hideMinutesTab: true,
-    hideHourlyTab: true,
-    hideDailyTab: false,
-    hideWeeklyTab: true,
-    hideMonthlyTab: true,
-    hideYearlyTab: true,
-    hideAdvancedTab: true,
-    hideSpecificWeekDayTab: true,
-    hideSpecificMonthWeekTab: true,
-
-    use24HourTime: true,
-    hideSeconds: true,
-
-    cronFlavor: 'quartz', //standard or quartz
-  };
-
   ngOnInit(): void {
     this.profileService.getUserData().subscribe((result) => {
       console.log(result);
@@ -98,14 +77,6 @@ export class ProfileComponent implements OnInit {
     });
   }
 
-  setCronString() {
-    this.profileService
-      .addCronString(this.cronForm.value)
-      .subscribe((result) => {
-        console.log(result);
-      });
-  }
-
   openHelp() {
     const dialogRef = this.dialog.open(HelpDialogComponent, {
       width: '50vw',

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

@@ -7,7 +7,7 @@ import { AuthService } from '../../Services/auth.service';
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.scss'],
 })
-export class RegisterComponent implements OnInit {
+export class RegisterComponent {
   form: any = {
     email: null,
     password: null,
@@ -22,7 +22,6 @@ export class RegisterComponent implements OnInit {
    * @param  {Router} privaterouter
    */
   constructor(private authService: AuthService, private router: Router) {}
-  ngOnInit(): void {}
   onSubmit(): void {
     const { email, username, password } = this.form;
     this.authService.register(email, username, password).subscribe(

frontend/src/index.html

@@ -6,6 +6,7 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link rel="icon" type="image/x-icon" href="assets/favicon.png" />
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
       rel="stylesheet"