Layout Chart settings

frangoteam · Dec 29, 2021 · 9d72352 · 9d72352
1 parent b94b59d
commit 9d72352
Show file tree

Hide file tree

Showing 21 changed files with 140 additions and 113 deletions.
diff --git a/client/dist/assets/i18n/en.json b/client/dist/assets/i18n/en.json
@@ -73,6 +73,8 @@
     "dlg.docname-title": "View name",
     "dlg.docname-name": "Name",
     "dlg.docproperty-type": "View type",
+    "dlg.item-title": "Name",
+    "dlg.item-name": "Name",
 
     "dlg.tagname-title": "Tag name",
     "dlg.tagname-name": "Name",
@@ -158,6 +160,7 @@
     "chart.property-props": "Property",
     "chart.property-layout": "Layout",
     "chart.property-chart": "Chart to show",
+    "chart.property-newchart": "New Chart...",
     "chart.property-chart-type": "Show mode",
     "chart.property-realtime-max": "Max minutes",
     "chart.viewtype-realtime1": "Realtime",
@@ -783,6 +786,7 @@
     "msg.tags-remove-all": "Would you like to remove all Tags?",
     "msg.view-remove": "Would you like to remove View '{{value}}'?",
     "msg.chart-remove": "Would you like to remove Chart '{{value}}'?",
+    "msg.graph-remove": "Would you like to remove Bar chart '{{value}}'?",
     "msg.device-connection-error": "Device '{{value}}' connection error!",
     "msg.server-connection-error": "Server connection failed!",
     "msg.users-save-error": "User save failed!",

diff --git a/client/dist/index.html b/client/dist/index.html
@@ -32,21 +32,21 @@
     <script src="assets/lib/svg/svg.min.js"></script>
     <script src="assets/lib/svg/raphael.min.js"></script>
 
-<link rel="stylesheet" href="styles.4289a3f94e362d7dcdd5.css"></head>
+<link rel="stylesheet" href="styles.2e476564d89fae71021d.css"></head>
 <!-- 3. Display the application -->
 
 <body>
     <app-root>
         <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
-            <div class="logo" style="display:block;width:40px;height:40px;background-size:40px 40px;margin-left: 40px;"></div>
+            <div class="logo" style="display:block;width:60px;height:60px;background-size:60px 60px;margin-left: 45px;"></div>
             <div style="display: block; padding-left:10px">
-                <div style="display:block;font-size: 18px">FUXA Loading...</div>
-                <div style="display: block;font-size: 9px;padding-top: 3px;">
+                <div style="display:block;font-size: 18px; font-weight: 600; text-align: center;">FUXA Loading...</div>
+                <div style="display: block;font-size: 10px;padding-top: 3px; text-align: center;">
                     powered by <span><b>frango</b>team</span>
                 </div>
             </div>
         </div>
     </app-root>
-<script type="text/javascript" src="runtime.80ab492fe3d778817936.js"></script><script type="text/javascript" src="polyfills.32ecc676167084d6ee38.js"></script><script type="text/javascript" src="scripts.5248615c5df4838808f4.js"></script><script type="text/javascript" src="main.515414aac0a168d1fadf.js"></script></body>
+<script type="text/javascript" src="runtime.80ab492fe3d778817936.js"></script><script type="text/javascript" src="polyfills.32ecc676167084d6ee38.js"></script><script type="text/javascript" src="scripts.5248615c5df4838808f4.js"></script><script type="text/javascript" src="main.edd9eb1d8ba496f813d8.js"></script></body>
 
 </html>
diff --git a/client/dist/main.515414aac0a168d1fadf.js → client/dist/main.edd9eb1d8ba496f813d8.js b/client/dist/main.515414aac0a168d1fadf.js → client/dist/main.edd9eb1d8ba496f813d8.js
diff --git a/client/dist/styles.2e476564d89fae71021d.css b/client/dist/styles.2e476564d89fae71021d.css
diff --git a/client/dist/styles.4289a3f94e362d7dcdd5.css b/client/dist/styles.4289a3f94e362d7dcdd5.css
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fuxa",
-  "version": "1.1.3-569",
+  "version": "1.1.3-570",
   "keywords": [],
   "author": "frangoteam <[email protected]>",
   "description": "Web-based Process Visualization (SCADA/HMI) software",

diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
@@ -31,7 +31,7 @@ import { LayoutPropertyComponent, DialogMenuItem } from './editor/layout-propert
 import { PluginsComponent } from './editor/plugins/plugins.component';
 import { AppSettingsComponent } from './editor/app-settings/app-settings.component';
 import { SetupComponent } from './editor/setup/setup.component';
-import { ChartConfigComponent, DialogListItem, DialogChartLine } from './editor/chart-config/chart-config.component';
+import { ChartConfigComponent, DialogChartLine } from './editor/chart-config/chart-config.component';
 import { CardConfigComponent } from './editor/card-config/card-config.component';
 import { AlarmViewComponent } from './alarms/alarm-view/alarm-view.component';
 import { AlarmListComponent } from './alarms/alarm-list/alarm-list.component';
@@ -73,6 +73,7 @@ import { TreetableComponent } from './gui-helpers/treetable/treetable.component'
 import { ConfirmDialogComponent } from './gui-helpers/confirm-dialog/confirm-dialog.component';
 import { SelOptionsComponent } from './gui-helpers/sel-options/sel-options.component';
 import { NgxSwitchComponent } from './gui-helpers/ngx-switch/ngx-switch.component';
+import { EditNameComponent } from './gui-helpers/edit-name/edit-name.component';
 
 import { DialogDraggableDirective } from './_directives/dialog-draggable.directive';
 import { ModalPositionCache } from './_directives/modal-position.cache';
@@ -163,6 +164,7 @@ export function createTranslateLoader(http: HttpClient) {
         DialogDocName,
         DialogNewDoc,
         DialogLinkProperty,
+        EditNameComponent,
         ConfirmDialogComponent,
         DialogInfo,
         GaugeBaseComponent,
@@ -215,7 +217,6 @@ export function createTranslateLoader(http: HttpClient) {
         LogsViewComponent,
         NgxGaugeComponent,
         NgxNouisliderComponent,
-        DialogListItem,
         DialogChartLine,
         UsersComponent,
         DialogUser,
@@ -306,6 +307,7 @@ export function createTranslateLoader(http: HttpClient) {
         TagPropertyComponent,
         TopicPropertyComponent,
         ConfirmDialogComponent,
+        EditNameComponent,
         LayoutPropertyComponent,
         PluginsComponent,
         AppSettingsComponent,
@@ -318,7 +320,6 @@ export function createTranslateLoader(http: HttpClient) {
         AlarmViewComponent,
         AlarmPropertyComponent,
         TextListComponent,
-        DialogListItem,
         DialogChartLine,
         DialogUser,
         LoginComponent,

diff --git a/client/src/app/editor/chart-config/chart-config.component.css b/client/src/app/editor/chart-config/chart-config.component.css
@@ -1,7 +1,7 @@
 .panelTop {
     display: block;
     width: 100%;
-    height: 320px;
+    height: 180px;
     border: 1px solid var(--formBorder);
     position: relative;
 }
@@ -53,7 +53,7 @@
 .panelBottom {
     display: block;
     width: 100%;
-    height: 200px;
+    height: 300px;
     margin-top: 10px;
 }
 

diff --git a/client/src/app/editor/chart-config/chart-config.component.html b/client/src/app/editor/chart-config/chart-config.component.html
@@ -1,6 +1,6 @@
 <div>
     <h1 mat-dialog-title style="display:inline-block;cursor: move" mat-dialog-draggable>{{'chart.config-title' | translate}}</h1>
-    <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
+    <mat-icon (click)="onNoClick()" class="dialog-close-btn">clear</mat-icon>
     <div style="display: inline-block; width: 100%">
         <div class="panelTop">
             <div class="toolbox-toadd">
@@ -19,46 +19,6 @@ <h1 mat-dialog-title style="display:inline-block;cursor: move" mat-dialog-dragga
                 </span>
                 <mat-icon (click)="onSelectChart(chart);onRemoveChart(i)">cancel</mat-icon>
             </div>
-            <!-- <mat-grid-list cols="3" rowHeight="100%">
-                <mat-grid-tile class="chart-list">
-                    <mat-list class="list" >
-                        <mat-list-item class="list-item list-header list-item-sel">
-                            <span>{{'chart.config-charts' | translate}}</span>
-                            <mat-icon style="position: absolute; right: 10px;cursor:pointer;color:rgba(255, 255, 255, 0.9);" (click)="editChart(null)">add</mat-icon>
-                        </mat-list-item>
-                        <mat-list-item *ngFor="let chart of data.charts" class="list-item list-item-text list-item-sel" [ngClass]="isChartSelected(chart)" (click)="selectedChart = chart;loadChartConfig();">
-                            <span>{{chart.name}}</span>
-                            <mat-icon [matMenuTriggerFor]="configMenu" style="position: absolute; right: 10px;cursor:pointer;color:gray;">more_vert</mat-icon>
-                            <mat-menu #configMenu [overlapTrigger]="false" style="color:#000000">
-                                <button mat-menu-item (click)="editChart(chart)" style="color:#000000;font-size: 14px;">{{'chart.config-rename' | translate}}</button>
-                                <button mat-menu-item (click)="deleteChart(chart)" style="color:#000000;font-size: 14px;">{{'chart.config-delete' | translate}}</button>
-                            </mat-menu>
-                        </mat-list-item>
-                    </mat-list>
-                </mat-grid-tile>
-                <mat-grid-tile class="device-list">
-                    <mat-list class="list">
-                        <mat-list-item class="list-item list-header list-item-sel">
-                            <span>{{'chart.config-devices' | translate}}</span>
-                        </mat-list-item>
-                        <mat-list-item *ngFor="let device of data.devices;" class="list-item list-item-text list-item-sel" [ngClass]="isDeviceSelected(device)" (click)="selectDevice(device);">
-                            <span>{{device.name}}</span>
-                        </mat-list-item>
-                    </mat-list>
-                </mat-grid-tile>
-                <mat-grid-tile class="tag-list">
-                    <mat-list class="list">
-                        <mat-list-item class="list-item list-header list-item-sel">
-                            <span>{{'chart.config-tags' | translate}}</span>
-                        </mat-list-item>
-                        <mat-selection-list #selTags [(ngModel)]="selectedTags" [disabled]="(selectedChart.id)?false:true" (selectionChange)="tagSelectionChanged($event)" style="padding-top: 0px;">
-                            <mat-list-option *ngFor="let tag of selectedDevice.tags" matTooltip="{{getTagLabel(tag)}}" [selected]="tag.selected" [value]="tag" class="list-item list-item-text" checkboxPosition="before">
-                                {{getTagLabel(tag)}}
-                            </mat-list-option>
-                        </mat-selection-list>
-                    </mat-list>
-                </mat-grid-tile>
-            </mat-grid-list> -->
         </div>
         <div class="panelBottom">
             <mat-list class="list">
@@ -99,6 +59,6 @@ <h1 mat-dialog-title style="display:inline-block;cursor: move" mat-dialog-dragga
     </div>
     <div mat-dialog-actions class="dialog-action">
         <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
-        <button mat-raised-button color="primary" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
+        <button mat-raised-button color="primary" (click)="onOkClick()" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
     </div>
 </div>
diff --git a/client/src/app/editor/chart-config/chart-config.component.ts b/client/src/app/editor/chart-config/chart-config.component.ts
@@ -2,12 +2,14 @@ import { Component, OnInit, Inject, ViewChild } from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatSelectionList } from '@angular/material';
 
 import { TranslateService } from '@ngx-translate/core';
+import { ProjectService } from '../../_services/project.service';
 
 import { Utils } from '../../_helpers/utils';
 import { Device, DevicesUtils, Tag } from '../../_models/device';
 import { Chart, ChartLine } from '../../_models/chart';
 import { ConfirmDialogComponent } from '../../gui-helpers/confirm-dialog/confirm-dialog.component';
 import { DeviceTagDialog } from '../../device/device.component';
+import { EditNameComponent } from '../../gui-helpers/edit-name/edit-name.component';
 
 @Component({
   selector: 'app-chart-config',
@@ -20,7 +22,6 @@ export class ChartConfigComponent implements OnInit {
 
     selectedChart = <Chart>{ id: null, name: null, lines: [] };
     selectedDevice = { id: null, name: null, tags: []};
-    selectedTags = [];
     data = { charts: [], devices: [] };
     defaultColor = Utils.defaultColor;
     lineColor = Utils.lineColor;
@@ -32,13 +33,8 @@ export class ChartConfigComponent implements OnInit {
         public dialog: MatDialog,
         public dialogRef: MatDialogRef<ChartConfigComponent>,
         private translateService: TranslateService,
-        @Inject(MAT_DIALOG_DATA) public param: any) {
-            this.data.charts = param.charts;
-            Object.values(param.devices).forEach(device => {
-                let devicobj = Object.assign({}, <Device>device);
-                devicobj.tags = (<Device>device).tags;
-                this.data.devices.push(devicobj);
-            });
+        private projectService: ProjectService) {
+            this.loadData();
     }
 
     ngOnInit() {
@@ -47,12 +43,24 @@ export class ChartConfigComponent implements OnInit {
         }
     }
 
+    loadData() {
+        this.data.charts = JSON.parse(JSON.stringify(this.projectService.getCharts()));
+        this.data.devices = [];
+        let devices = this.projectService.getDevices();
+        Object.values(devices).forEach(device => {
+            let devicobj = Object.assign({}, <Device>device);
+            devicobj.tags = (<Device>device).tags;
+            this.data.devices.push(devicobj);
+        });
+    }
+
     onNoClick(): void {
         this.dialogRef.close();
     }
 
     onOkClick(): void {
-        this.dialogRef.close({ charts: this.data.charts });
+        this.projectService.setCharts(this.data.charts);
+        this.dialogRef.close(this.data.charts);
     }
 
     onRemoveChart(index: number) {
@@ -81,13 +89,16 @@ export class ChartConfigComponent implements OnInit {
     }
 
     onEditChart(chart) {
-        let dialogRef = this.dialog.open(DialogListItem, {
+        let title = 'dlg.item-title';
+        let label = 'dlg.item-name';
+        this.translateService.get(title).subscribe((txt: string) => { title = txt });
+        this.translateService.get(label).subscribe((txt: string) => { label = txt });
+        let dialogRef = this.dialog.open(EditNameComponent, {
             position: { top: '60px' },
-            data: { name: (chart) ? chart.name : '' }
+            data: { name: (chart) ? chart.name : '', title: title, label: label }
         });
         dialogRef.afterClosed().subscribe(result => {
             if (result && result.name && result.name.length > 0) {
-                // this.dirty = true;
                 if (chart) {
                     chart.name = result.name;
                 } else {
@@ -147,12 +158,6 @@ export class ChartConfigComponent implements OnInit {
     }
 
     removeChartLine(tag) {
-        for (let i = 0; i < this.selectedTags.length; i++) {
-            if (tag.id === this.selectedTags[i].id) {
-                this.selectedTags.splice(i, 1)
-                break;
-            }
-        }
         for (let i = 0; i < this.selectedChart.lines.length; i++) {
             if (this.selectedChart.lines[i].id === tag.id) {
                 this.selectedChart.lines.splice(i, 1);
@@ -161,12 +166,6 @@ export class ChartConfigComponent implements OnInit {
         }
     }
 
-    isDeviceSelected(device) {
-        if (device && device.name === this.selectedDevice.name) {
-            return 'list-item-selected';
-        }
-    }
-
     getTagLabel(tag) {
         if (tag.label) {
             return tag.label;
@@ -214,25 +213,6 @@ export class ChartConfigComponent implements OnInit {
     }
 }
 
-@Component({
-    selector: 'dialog-list-item',
-    templateUrl: './list-item.dialog.html',
-})
-export class DialogListItem {
-    // defaultColor = Utils.defaultColor;
-    constructor(
-        public dialogRef: MatDialogRef<DialogListItem>,
-        @Inject(MAT_DIALOG_DATA) public data: any) { }
-
-    onNoClick(): void {
-        this.dialogRef.close();
-    }
-
-    onOkClick(): void {
-        this.dialogRef.close(true);
-    }
-}
-
 @Component({
     selector: 'dialog-chart-line',
     templateUrl: './chart-line.dialog.html',

diff --git a/client/src/app/editor/setup/setup.component.ts b/client/src/app/editor/setup/setup.component.ts
@@ -43,19 +43,11 @@ export class SetupComponent implements OnInit, AfterViewInit {
      */
     onChartConfig() {
         this.onNoClick();
-        let chartscopy = JSON.parse(JSON.stringify(this.projectService.getCharts()));
-        let devices = this.projectService.getDevices();
         let dialogRef = this.dialog.open(ChartConfigComponent, {
             position: { top: '60px' },
-            minWidth: '1090px', width: '1090px',
-            data: { charts: chartscopy, devices: devices }
-        });
-
-        dialogRef.afterClosed().subscribe(result => {
-            if (result) {
-                this.projectService.setCharts(result.charts);
-            }
+            minWidth: '1090px', width: '1090px'
         });
+        dialogRef.afterClosed().subscribe();
     }
 
     /**

diff --git a/client/src/app/gauges/controls/html-chart/chart-property/chart-property.component.html b/client/src/app/gauges/controls/html-chart/chart-property/chart-property.component.html
@@ -9,6 +9,7 @@ <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-dragga
                         <span>{{'chart.property-chart' | translate}}</span>
                         <mat-select [formControl]="chartCtrl">
                             <mat-select-search [formControl]="chartFilterCtrl"></mat-select-search>
+                            <mat-option (click)="onEditNewChart();">{{'chart.property-newchart' | translate}}</mat-option>
                             <mat-option *ngFor="let chart of filteredChart | async" [value]="chart">
                                 {{ chart.name }}
                             </mat-option>

diff --git a/client/src/app/gauges/controls/html-chart/chart-property/chart-property.component.ts b/client/src/app/gauges/controls/html-chart/chart-property/chart-property.component.ts
@@ -10,6 +10,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { GaugeChartProperty, DateFormatType, TimeFormatType } from '../../../../_models/hmi';
 import { Chart, ChartViewType, ChartLegendMode } from '../../../../_models/chart';
 import { ChartOptions, ChartUplotComponent } from '../chart-uplot/chart-uplot.component';
+import { ChartConfigComponent } from '../../../../editor/chart-config/chart-config.component';
 import { Define } from '../../../../_helpers/define';
 import { Utils } from '../../../../_helpers/utils';
 
@@ -43,6 +44,7 @@ export class ChartPropertyComponent implements OnInit, AfterViewInit {
     private _onDestroy = new Subject<void>();
 
     constructor(
+        public dialog: MatDialog,
         public dialogRef: MatDialogRef<ChartPropertyComponent>,
         private translateService: TranslateService,
         @Inject(MAT_DIALOG_DATA) public data: any) { }
@@ -126,6 +128,20 @@ export class ChartPropertyComponent implements OnInit, AfterViewInit {
         this.chartuplot.withToolbar = (this.chartViewValue !== this.chartViewRealtime);
     }
 
+
+    onEditNewChart() {
+        let dialogRef = this.dialog.open(ChartConfigComponent, {
+            position: { top: '60px' },
+            minWidth: '1090px', width: '1090px'
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                this.data.charts = result;
+                this.loadChart();
+            }
+        });
+    }
+
     private loadChart(toset?: string) {
         // load the initial chart list
         this.filteredChart.next(this.data.charts.slice());

diff --git a/client/src/app/gui-helpers/edit-name/edit-name.component.css b/client/src/app/gui-helpers/edit-name/edit-name.component.css