fix: update dashboard

FraunhoferIOSB · Jun 25, 2024 · 3c707a5 · 3c707a5
1 parent eebc561
commit 3c707a5
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 50 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -12,6 +12,7 @@
         {
             "name": "Start aas-server",
             "type": "node",
+            "args": ["--security-revert=CVE-2023-46809"],
             "request": "launch",
             "preLaunchTask": "build-aas-server",
             "program": "${workspaceFolder}/projects/aas-server/build/aas-server.js",

diff --git a/projects/aas-portal/src/app/dashboard/dashboard.component.html b/projects/aas-portal/src/app/dashboard/dashboard.component.html
@@ -79,13 +79,13 @@
             <option [ngValue]="page">{{page.name}}</option>
             }
         </select>
-        <button type="button" class="btn btn-primary" (click)="addNew()" [disabled]="!editMode">
+        <button type="button" class="btn btn-primary" (click)="addNew()" [disabled]="!editMode()">
             <i class="bi bi-plus"></i>
         </button>
-        <button type="button" class="btn btn-primary" (click)="rename()" [disabled]="!editMode">
+        <button type="button" class="btn btn-primary" (click)="rename()" [disabled]="!editMode()">
             <i class="bi bi-pen"></i>
         </button>
-        <button type="button" class="btn btn-primary" (click)="delete()" [disabled]="!editMode">
+        <button type="button" class="btn btn-primary" (click)="delete()" [disabled]="!editMode()">
             <i class="bi bi-trash"></i>
         </button>
     </div>

diff --git a/projects/aas-portal/src/app/dashboard/dashboard.component.ts b/projects/aas-portal/src/app/dashboard/dashboard.component.ts
@@ -13,7 +13,6 @@ import { AsyncPipe, NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
     AfterViewInit,
-    AfterViewChecked,
     Component,
     ElementRef,
     OnDestroy,
@@ -83,11 +82,11 @@ interface TimeSeries {
     imports: [NgClass, AsyncPipe, FormsModule, TranslateModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit, AfterViewChecked {
+export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
     private readonly map = new Map<string, UpdateTuple>();
     private readonly charts = new Map<string, ChartConfigurationTuple>();
     private webSocketSubject: WebSocketSubject<WebSocketData> | null = null;
-    private reset = false;
+    // private reset = false;
     private selections = new Set<string>();
     private selectedSources = new Map<string, number>();
 
@@ -105,13 +104,10 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit, Aft
     ) {
         effect(() => {
             this.dashboard.activePage();
-            if (untracked(this.editMode)) {
-                this.reset = false;
-            } else {
+            if (!untracked(this.editMode)) {
                 this.closeWebSocket();
                 this.charts.forEach(item => item.chart.destroy());
                 this.map.clear();
-                this.reset = true;
             }
 
             this.selections.clear();
@@ -120,11 +116,9 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit, Aft
 
         effect(() => {
             if (this.editMode()) {
-                this.closeWebSocket();
-                this.charts.forEach(item => item.chart.destroy());
-                this.map.clear();
+                this.enterEditMode();
             } else {
-                this.reset = true;
+                this.leafEditMode();
             }
         });
     }
@@ -205,22 +199,6 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit, Aft
         }
     }
 
-    public ngAfterViewChecked(): void {
-        if (this.reset) {
-            try {
-                this.openWebSocket();
-                if (this.chartContainers) {
-                    this.createCharts(this.chartContainers);
-                    this.play();
-                }
-            } catch (error) {
-                this.notify.error(error);
-            } finally {
-                this.reset = false;
-            }
-        }
-    }
-
     public toggleSelection(column: DashboardColumn): void {
         if (this.selections.has(column.id)) {
             this.selections.delete(column.id);
@@ -471,6 +449,30 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit, Aft
         }
     }
 
+    private enterEditMode(): void {
+        this.closeWebSocket();
+        this.charts.forEach(item => item.chart.destroy());
+        this.map.clear();
+    }
+
+    private leafEditMode(): void {
+        setTimeout(() => {
+            try {
+                this.openWebSocket();
+                if (this.chartContainers) {
+                    this.createCharts(this.chartContainers);
+                    if (this.webSocketSubject) {
+                        for (const request of this.activePage().requests) {
+                            this.webSocketSubject.next(this.createMessage(request));
+                        }
+                    }
+                }
+            } catch (error) {
+                this.notify.error(error);
+            }
+        }, 0);
+    }
+
     private findItem(id: string): DashboardItem | undefined {
         return this.activePage().items.find(item => item.id === id);
     }
@@ -505,14 +507,6 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit, Aft
         });
     }
 
-    private play(): void {
-        if (this.webSocketSubject) {
-            for (const request of this.activePage().requests) {
-                this.webSocketSubject.next(this.createMessage(request));
-            }
-        }
-    }
-
     private createChart(item: DashboardChart, canvas: HTMLCanvasElement): void {
         let tuple = this.charts.get(item.id);
         switch (item.chartType) {

diff --git a/projects/aas-portal/src/app/dashboard/dashboard.service.ts b/projects/aas-portal/src/app/dashboard/dashboard.service.ts
@@ -98,7 +98,7 @@ export class DashboardService {
         pages: [{ name: this.createPageName(), items: [], requests: [] }],
     });
 
-    private modified = false;
+    private readonly modified = signal(false);
 
     public constructor(private auth: AuthService) {
         this.auth.ready
@@ -183,15 +183,15 @@ export class DashboardService {
                     throw new Error(`Not implemented`);
             }
 
-            this.modified = true;
+            this.modified.set(true);
         }
 
         if (blobs.length > 0) {
             this.addScatterChart(document, page, blobs);
-            this.modified = true;
+            this.modified.set(true);
         }
 
-        if (this.modified) {
+        if (this.modified()) {
             this.updatePage(page);
         }
     }
@@ -207,7 +207,7 @@ export class DashboardService {
         }
 
         this.addNewPage(name);
-        this.modified = true;
+        this.modified.set(true);
     }
 
     public rename(page: DashboardPage, name: string) {
@@ -225,7 +225,7 @@ export class DashboardService {
         }
 
         this.renamePage(page, name);
-        this.modified = true;
+        this.modified.set(true);
     }
 
     public getGrid(page: DashboardPage): DashboardItem[][] {
@@ -296,19 +296,19 @@ export class DashboardService {
 
     public update(page: DashboardPage): void {
         this.updatePage(page);
-        this.modified = true;
+        this.modified.set(true);
     }
 
     public delete(page: DashboardPage): void {
         this.deletePage(page);
-        this.modified = true;
+        this.modified.set(true);
     }
 
     public save(): Observable<void> {
         return this.saveCurrentPage().pipe(
             mergeMap(() => {
-                if (this.modified) {
-                    this.modified = false;
+                if (this.modified()) {
+                    this.modified.set(false);
                     return this.savePages();
                 }
 
@@ -466,10 +466,10 @@ export class DashboardService {
     private savePages(): Observable<void> {
         const pages = this._state().pages;
         if (pages.length > 0) {
-            return this.auth.setCookie('.Dashboard', JSON.stringify(pages));
+            return this.auth.setCookie('.DashboardPages', JSON.stringify(pages));
         }
 
-        return this.auth.deleteCookie('.Dashboard');
+        return this.auth.deleteCookie('.DashboardPages');
     }
 
     private saveCurrentPage(): Observable<void> {

diff --git a/projects/aas-portal/src/assets/i18n/de-de.json b/projects/aas-portal/src/assets/i18n/de-de.json
@@ -108,6 +108,7 @@
     "LABEL_VIEWS": "Sichten",
     "LABEL_CATEGORY": "Kategorie",
     "LABEL_SEMANTIC_ID": "Semantik ID",
+    "LABEL_EDIT_MODE": "Bearbeiten",
     "PLEASE_WAIT": "Bitte warten...",
     "PLACEHOLDER_EMAIL": "E-Mail-Adresse eingeben",
     "PLACEHOLDER_PASSWORD": "Passwort eingeben",

diff --git a/projects/aas-portal/src/assets/i18n/en-us.json b/projects/aas-portal/src/assets/i18n/en-us.json
@@ -108,6 +108,7 @@
     "LABEL_VIEWS": "Views",
     "LABEL_CATEGORY": "Category",
     "LABEL_SEMANTIC_ID": "Semantic ID",
+    "LABEL_EDIT_MODE": "Edit",
     "PLEASE_WAIT": "Please wait...",
     "PLACEHOLDER_EMAIL": "enter email address",
     "PLACEHOLDER_PASSWORD": "enter password",