UI: Fix/improve dashboard layouts. Add help links for SCADA.

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -437,15 +437,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       ).pipe(
         map(value => this.parseBreakpointsResponse(value.breakpoints)),
         tap((value) => {
-          this.dashboardCtx.breakpoint = value.id;
-          this.changeMobileSize.next(this.isMobileSize(value));
+          this.dashboardCtx.breakpoint = value ? value.id : 'default';
+          this.changeMobileSize.next(value ? this.isMobileSize(value) : false);
         }),
         distinctUntilChanged((_, next) => {
           if (this.layouts.right.show || this.isEdit) {
             return true;
           }
           let nextBreakpointConfiguration: BreakpointId = 'default';
-          if (!!this.layouts.main.layoutCtx.layoutData?.[next.id]) {
+          if (next && !!this.layouts.main.layoutCtx.layoutData?.[next.id]) {
             nextBreakpointConfiguration = next.id;
           }
           return this.layouts.main.layoutCtx.breakpoint === nextBreakpointConfiguration;

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts

@@ -204,8 +204,7 @@ export class DashboardWidgets implements Iterable<DashboardWidget> {
             index = this.dashboardWidgets.findIndex((dashboardWidget) => dashboardWidget.widgetId === record.widgetId);
             if (index > -1) {
               const prevDashboardWidget = this.dashboardWidgets[index];
-              if (!isEqual(prevDashboardWidget.widget, record.widget) ||
-                  !isEqual(prevDashboardWidget.widgetLayout, record.widgetLayout)) {
+              if (!isEqual(prevDashboardWidget.widget, record.widget)) {
                 this.dashboardWidgets[index] = new DashboardWidget(this.dashboard, record.widget, record.widgetLayout,
                   this.parentDashboard, this.popoverComponent);
                 this.dashboardWidgets[index].highlighted = prevDashboardWidget.highlighted;
@@ -391,7 +390,7 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
   private gridsterItemComponentSubject = new Subject<GridsterItemComponentInterface>();
   private gridsterItemComponentValue: GridsterItemComponentInterface;
 
-  private readonly aspectRatio: number;
+  private aspectRatio: number;
 
   private heightValue: number;
   private widthValue: number;
@@ -419,85 +418,97 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
     this.gridsterItemComponentSubject.complete();
   }
 
+  private preserveAspectRatioApplied = false;
+
   private applyPreserveAspectRatio(item: GridsterItemComponentInterface) {
-    this.resizableHandles.ne = false;
-    this.resizableHandles.sw = false;
-    this.resizableHandles.nw = false;
 
-    const $item = item.$item;
+    if (this.widgetLayout?.preserveAspectRatio) {
+      this.resizableHandles.ne = false;
+      this.resizableHandles.sw = false;
+      this.resizableHandles.nw = false;
+    } else {
+      this.resizableHandles.ne = true;
+      this.resizableHandles.sw = true;
+      this.resizableHandles.nw = true;
+    }
+
+    if (!this.preserveAspectRatioApplied) {
+      const $item = item.$item;
 
-    this.rowsValue = $item.rows;
-    this.colsValue = $item.cols;
+      this.rowsValue = $item.rows;
+      this.colsValue = $item.cols;
 
-    Object.defineProperty($item, 'rows', {
-      get: () => this.rowsValue,
-      set: v => {
-        if (this.rowsValue !== v) {
-          if (this.preserveAspectRatio) {
-            this.colsValue = v * this.aspectRatio;
+      Object.defineProperty($item, 'rows', {
+        get: () => this.rowsValue,
+        set: v => {
+          if (this.rowsValue !== v) {
+            if (this.preserveAspectRatio) {
+              this.colsValue = v * this.aspectRatio;
+            }
+            this.rowsValue = v;
           }
-          this.rowsValue = v;
         }
-      }
-    });
+      });
 
-    Object.defineProperty($item, 'cols', {
-      get: () => this.colsValue,
-      set: v => {
-        if (this.colsValue !== v) {
-          if (this.preserveAspectRatio) {
-            this.rowsValue = v / this.aspectRatio;
+      Object.defineProperty($item, 'cols', {
+        get: () => this.colsValue,
+        set: v => {
+          if (this.colsValue !== v) {
+            if (this.preserveAspectRatio) {
+              this.rowsValue = v / this.aspectRatio;
+            }
+            this.colsValue = v;
           }
-          this.colsValue = v;
         }
-      }
-    });
+      });
 
-    const resizable = item.resize;
+      const resizable = item.resize;
 
-    this.heightValue = resizable.height;
-    this.widthValue = resizable.width;
+      this.heightValue = resizable.height;
+      this.widthValue = resizable.width;
 
-    const setItemHeight = resizable.setItemHeight.bind(resizable);
-    const setItemWidth = resizable.setItemWidth.bind(resizable);
-    resizable.setItemHeight = (height) => {
-      setItemHeight(height);
-      this.heightValue = height;
-      if (this.preserveAspectRatio) {
-        setItemWidth(height * this.aspectRatio);
-      }
-    };
-    resizable.setItemWidth = (width) => {
-      setItemWidth(width);
-      this.widthValue = width;
-      if (this.preserveAspectRatio) {
-        setItemHeight(width / this.aspectRatio);
-      }
-    };
-
-    Object.defineProperty(resizable, 'height', {
-      get: () => this.heightValue,
-      set: v => {
-        if (this.heightValue !== v) {
-          if (this.preserveAspectRatio) {
-            this.widthValue = v * this.aspectRatio;
+      const setItemHeight = resizable.setItemHeight.bind(resizable);
+      const setItemWidth = resizable.setItemWidth.bind(resizable);
+      resizable.setItemHeight = (height) => {
+        setItemHeight(height);
+        this.heightValue = height;
+        if (this.preserveAspectRatio) {
+          setItemWidth(height * this.aspectRatio);
+        }
+      };
+      resizable.setItemWidth = (width) => {
+        setItemWidth(width);
+        this.widthValue = width;
+        if (this.preserveAspectRatio) {
+          setItemHeight(width / this.aspectRatio);
+        }
+      };
+
+      Object.defineProperty(resizable, 'height', {
+        get: () => this.heightValue,
+        set: v => {
+          if (this.heightValue !== v) {
+            if (this.preserveAspectRatio) {
+              this.widthValue = v * this.aspectRatio;
+            }
+            this.heightValue = v;
           }
-          this.heightValue = v;
         }
-      }
-    });
+      });
 
-    Object.defineProperty(resizable, 'width', {
-      get: () => this.widthValue,
-      set: v => {
-        if (this.widthValue !== v) {
-          if (this.preserveAspectRatio) {
-            this.heightValue = v / this.aspectRatio;
+      Object.defineProperty(resizable, 'width', {
+        get: () => this.widthValue,
+        set: v => {
+          if (this.widthValue !== v) {
+            if (this.preserveAspectRatio) {
+              this.heightValue = v / this.aspectRatio;
+            }
+            this.widthValue = v;
           }
-          this.widthValue = v;
         }
-      }
-    });
+      });
+      this.preserveAspectRatioApplied = true;
+    }
   }
 
   get highlighted() {
@@ -527,19 +538,36 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
     }
   }
 
+  get widgetLayout(): WidgetLayout {
+    return this.widgetLayoutValue;
+  }
+
+  set widgetLayout(value: WidgetLayout) {
+    this.widgetLayoutValue = value;
+    this._widgetLayoutUpdated();
+  }
+
+  private _widgetLayoutUpdated() {
+    if (isDefined(this.widgetLayout?.resizable)) {
+      this.resizeEnabled = this.widgetLayout.resizable;
+    }
+    if (this.widgetLayout?.preserveAspectRatio) {
+      this.aspectRatio = this.widgetLayout.sizeX / this.widgetLayout.sizeY;
+    }
+    if (this.gridsterItemComponentValue) {
+      this.applyPreserveAspectRatio(this.gridsterItemComponentValue);
+    }
+  }
+
   constructor(
     private dashboard: IDashboardComponent,
     public widget: Widget,
-    public widgetLayout?: WidgetLayout,
+    private widgetLayoutValue?: WidgetLayout,
     private parentDashboard?: IDashboardComponent,
     private popoverComponent?: TbPopoverComponent) {
 
-    if (isDefined(widgetLayout?.resizable)) {
-      this.resizeEnabled = widgetLayout.resizable;
-    }
-    if (widgetLayout?.preserveAspectRatio) {
-      this.aspectRatio = this.widgetLayout.sizeX / this.widgetLayout.sizeY;
-    }
+    this.widgetLayout = widgetLayoutValue;
+
     if (!widget.id) {
       widget.id = guid();
     }

ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.html

@@ -30,6 +30,7 @@
                             headerHeightPx="64"
                             headerTitle="{{symbolData?.imageResource?.title}}">
             <div class="details-buttons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+              <div tb-help="scadaSymbolDev"></div>
               <button mat-stroked-button
                       [disabled]="scadaSymbolFormGroup.invalid"
                       (click)="createWidget()">

ui-ngx/src/app/shared/components/image/image-gallery.component.html

@@ -22,7 +22,10 @@
                  [fxShow]="!textSearchMode && (mode === 'grid' || dataSource?.selection.isEmpty())" [ngClass.lt-lg]="{'multi-row': !isSysAdmin}">
       <div fxFlex fxLayout="row" fxLayoutAlign="start center">
         <div class="mat-toolbar-tools">
-          <span fxHide fxShow.gt-sm class="tb-images-title">{{ (isScada ? 'scada.symbols' : 'image.gallery') | translate }}</span>
+          <div fxHide fxShow.gt-sm class="tb-images-title">
+            <div tbTruncateWithTooltip>{{ (isScada ? 'scada.symbols' : 'image.gallery') | translate }}</div>
+            <div *ngIf="isScada" tb-help="scada"></div>
+          </div>
           <div class="tb-images-view-type-toolbar"
                fxLayout="row"
                fxLayoutAlign="start center">
@@ -72,7 +75,7 @@
                     matTooltipPosition="above">
               <tb-icon>mdi:file-import</tb-icon>
             </button>
-            <button fxHide fxShow.lt-lg
+            <button [fxHide]="!(dialogMode && isScada)" fxShow.lt-lg
                     [disabled]="isLoading$ | async"
                     mat-icon-button
                     color="primary"
@@ -82,7 +85,7 @@
               <mat-icon>add</mat-icon>
             </button>
           </section>
-          <button fxHide fxShow.gt-md
+          <button fxHide [fxShow.gt-md]="!(dialogMode && isScada)"
                   [disabled]="isLoading$ | async"
                   mat-flat-button
                   color="primary"

ui-ngx/src/app/shared/components/image/image-gallery.component.scss

@@ -54,9 +54,8 @@ $tb-button-selected-color: rgb(255, 110, 64) !default;
 
     .tb-images-title {
       padding-right: 20px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      display: flex;
+      align-items: center;
     }
 
     .tb-images-view-type-toolbar {

ui-ngx/src/app/shared/models/constants.ts

@@ -183,8 +183,10 @@ export const HelpLinks = {
     templateNotifications: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/notifications/#templates`,
     recipientNotifications: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/notifications/#recipients`,
     ruleNotifications: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/notifications/#rules`,
-    jwtSecuritySettings: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/jwt-security-settings/`,
-    gatewayInstall: `${helpBaseUrl}/docs/iot-gateway/install/docker-installation/`,
+    jwtSecuritySettings: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/jwt-security-settings`,
+    gatewayInstall: `${helpBaseUrl}/docs/iot-gateway/install/docker-installation`,
+    scada: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/scada`,
+    scadaSymbolDev: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/symbols-dev-guide`,
   }
 };
 /* eslint-enable max-len */