Merge pull request #2 from TTvanWillegen/dashboard_logo

Dashboard logo - added functionality to change the desired logo path from the settings menu

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

@@ -51,7 +51,7 @@
                fxLayoutAlign.gt-sm="start center"
                fxLayoutAlign="end center" fxLayoutGap="12px" class="db-logo-and-title" >
 
-            <img [fxShow]="showDashboardLogo()" [src]="dashboard_logo"
+            <img [fxShow]="showDashboardLogo() && isFullscreen" [src]="dashboard_logo"
                  aria-label="white_label_logo" class="whitelabel-logo-db"/>
 
             <tb-states-component fxFlex.lt-md

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

@@ -121,6 +121,8 @@ import {
   DisplayWidgetTypesPanelData,
   WidgetTypes
 } from '@home/components/dashboard-page/widget-types-panel.component';
+import { LogoComponent } from '@app/shared/components/logo.component';
+import { concat } from 'lodash';
 import { DashboardWidgetSelectComponent } from '@home/components/dashboard-page/dashboard-widget-select.component';
 
 // @dynamic
@@ -189,10 +191,10 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   currentDashboardScope: DashboardPageScope;
 
   addingLayoutCtx: DashboardPageLayoutContext;
-  
-  dashboard_logo = 'assets/example_logo.png';
-
 
+  logo_name_local = 'example_logo.png'; 
+  dashboard_logo = 'assets/' + this.logo_name_local; 
+  
   dashboardCtx: DashboardContext = {
     instanceId: this.utils.guid(),
     getDashboard: () => this.dashboard,
@@ -491,6 +493,11 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       return true;
     }
   }
+
+  public updateLogoName(): string {
+    this.dashboard_logo = 'assets/' + this.dashboard.configuration.settings.logoName 
+    return this.dashboard.configuration.settings.logoName;
+  }
   
   public showRightLayoutSwitch(): boolean {
     return this.isMobile && this.layouts.right.show;
@@ -612,11 +619,16 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       data: {
         settings: deepClone(this.dashboard.configuration.settings),
-        gridSettings
+        gridSettings,
       }
-    }).afterClosed().subscribe((data) => {
+    }
+    ).afterClosed().subscribe((data) => {
       if (data) {
         this.dashboard.configuration.settings = data.settings;
+        if (this.dashboard.configuration.settings)
+        {
+          this.updateLogoName();
+        }
         const newGridSettings = data.gridSettings;
         if (newGridSettings) {
           const layout = this.dashboard.configuration.states[layoutKeys.state].layouts[layoutKeys.layout];

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html

@@ -51,6 +51,10 @@
                           openOnInput
                           formControlName="titleColor">
           </tb-color-input>
+          <mat-form-field class="mat-block" fxFlex floatLabel="always">
+            <mat-label translate>dashboard.display-dashboard-enterLogoName</mat-label>
+            <input #searchInput matInput formControlName="logoName" placeholder="{{ 'dashboard.display-dashboard-exampleLogoName' | translate }}"/>
+          </mat-form-field>
         </div>
         <div fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-md="column" fxLayoutAlign.lt-md  fxLayoutGap="8px">
           <mat-checkbox fxFlex formControlName="showDashboardLogo">

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

@@ -34,6 +34,7 @@ export interface DashboardSettingsDialogData {
   gridSettings?: GridSettings;
 }
 
+
 @Component({
   selector: 'tb-dashboard-settings-dialog',
   templateUrl: './dashboard-settings-dialog.component.html',
@@ -45,13 +46,16 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
 
   settings: DashboardSettings;
   gridSettings: GridSettings;
+  logo_name;
 
+  
   settingsFormGroup: FormGroup;
   gridSettingsFormGroup: FormGroup;
 
   stateControllerIds: string[];
 
   submitted = false;
+  
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -69,6 +73,7 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
 
     this.settings = this.data.settings;
     this.gridSettings = this.data.gridSettings;
+    this.logo_name = 'example_logo.png';
 
     if (this.settings) {
       this.settingsFormGroup = this.fb.group({
@@ -80,6 +85,7 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
         showEntitiesSelect: [isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, []],
         showFilters: [isUndefined(this.settings.showFilters) ? true : this.settings.showFilters, []],
         showDashboardLogo: [isUndefined(this.settings.showDashboardLogo) ? true : this.settings.showDashboardLogo, []],
+        logoName: [isUndefined(this.settings.logoName) ? this.logo_name : this.settings.logoName, []],
         showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []],
         showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []]
       });

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

@@ -87,6 +87,7 @@ export interface DashboardSettings {
   showEntitiesSelect?: boolean;
   showFilters?: boolean;
   showDashboardLogo?: boolean; 
+  logoName?: string; 
   showDashboardTimewindow?: boolean;
   showDashboardExport?: boolean;
   toolbarAlwaysOpen?: boolean;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -726,6 +726,8 @@
         "display-dashboard-timewindow": "Display timewindow",
         "display-dashboard-export": "Display export",
         "display-dashboard-showDashboardLogo": "Display dashboard logo", 
+        "display-dashboard-enterLogoName": "Enter logo filename (must be in assets folder)",
+        "display-dashboard-exampleLogoName": "example_logo.png",
         "import": "Import dashboard",
         "export": "Export dashboard",
         "export-failed-error": "Unable to export dashboard: {{error}}",