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

<!--

    Copyright © 2016-2024 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="tb-dashboard-page mat-content" [ngClass]="{'mobile-app': isMobileApp && !isEdit}" tb-toast
     fxFlex tb-fullscreen [fullscreenElement]="elRef.nativeElement" [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
  <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
  <section class="tb-dashboard-toolbar"
           [ngClass]="{ 'tb-dashboard-toolbar-opened': toolbarOpened,
                        'tb-dashboard-toolbar-closed': !toolbarOpened }">
    <tb-dashboard-toolbar [fxShow]="!widgetEditMode && !hideToolbar" [forceFullscreen]="forceFullscreen"
                          [toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
      <div class="tb-dashboard-action-panels" fxLayout="column" fxLayout.gt-sm="row"
           fxLayoutAlign="center stretch" fxLayoutAlign.gt-sm="space-between center">
        <div class="tb-dashboard-action-panel tb-left-panel" [fxHide]="isMobileApp && !isEdit">
          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" fxHide.gt-sm displayUserInfo="true">
          </tb-user-menu>
          <ng-container *ngIf="isEdit">
            <div fxFlex.lt-md fxLayout="row"
                 fxLayoutAlign.gt-sm="start center"
                 fxLayoutAlign="end center" fxLayoutGap.lt-lg="6px" fxLayoutGap.gt-md="12px">
              <button fxHide.gt-md mat-icon-button
                      matTooltip="{{'dashboard.manage-states' | translate}}"
                      matTooltipPosition="below"
                      (click)="manageDashboardStates($event)">
                <mat-icon>layers</mat-icon>
              </button>
              <button fxHide.lt-lg mat-button
                      matTooltip="{{'dashboard.manage-states' | translate}}"
                      matTooltipPosition="below"
                      (click)="manageDashboardStates($event)">
                <mat-icon>layers</mat-icon>
                {{'dashboard.states-short' | translate}}
              </button>
              <button fxHide.gt-md mat-icon-button
                      matTooltip="{{'layout.manage' | translate}}"
                      matTooltipPosition="below"
                      (click)="manageDashboardLayouts($event)">
                <mat-icon>view_compact</mat-icon>
              </button>
              <button fxHide.lt-lg mat-button
                      matTooltip="{{'layout.manage' | translate}}"
                      matTooltipPosition="below"
                      (click)="manageDashboardLayouts($event)">
                <mat-icon>view_compact</mat-icon>
                {{'layout.layouts' | translate}}
              </button>
              <tb-select-dashboard-layout
                [dashboardCtrl]="this">
              </tb-select-dashboard-layout>
            </div>
          </ng-container>
          <tb-states-component fxFlex.lt-md
                               [statesControllerId]="isEdit ? 'default' : dashboardConfiguration.settings.stateControllerId"
                               [dashboardCtrl]="this"
                               [dashboardId]="setStateDashboardId ? dashboard.id.id : ''"
                               [isMobile]="isMobile"
                               [state]="dashboardCtx.state"
                               [currentState]="currentState"
                               [syncStateWithQueryParam]="syncStateWithQueryParam"
                               [states]="dashboardConfiguration.states">
          </tb-states-component>
          <img *ngIf="showDashboardLogo()" [src]="dashboardLogo | image | async"
               aria-label="dashboard_logo" class="dashboard_logo"/>
        </div>
        <div class="tb-dashboard-action-panel">
          <button [fxShow]="showCloseToolbar()" mat-icon-button class="close-action"
                  matTooltip="{{ 'dashboard.close-toolbar' | translate }}"
                  matTooltipPosition="below"
                  (click)="closeToolbar()">
            <mat-icon>arrow_forward</mat-icon>
          </button>
          <tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" fxHide.lt-md displayUserInfo="true">
          </tb-user-menu>
          <button [fxShow]="showRightLayoutSwitch()" mat-icon-button
                  matTooltip="{{ (isRightLayoutOpened ? 'dashboard.hide-details' : 'dashboard.show-details') | translate }}"
                  matTooltipPosition="below"
                  (click)="toggleLayouts()">
            <mat-icon>{{isRightLayoutOpened ? 'arrow_back' : 'menu'}}</mat-icon>
          </button>
          <button [fxShow]="!hideFullscreenButton()" mat-icon-button
                  matTooltip="{{(isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"
                  matTooltipPosition="below"
                  (click)="isFullscreen = !isFullscreen">
            <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
          </button>
          <button [fxShow]="currentDashboardId && !isMobileApp && displayExport() && !isEdit" mat-icon-button
                  matTooltip="{{'dashboard.export' | translate}}"
                  matTooltipPosition="below"
                  (click)="exportDashboard($event)">
            <mat-icon>file_download</mat-icon>
          </button>
          <ng-container *ngIf="!readonly && !isEdit">
            <button fxHide.gt-md mat-icon-button (click)="toggleDashboardEditMode()"
                    matTooltip="{{'dashboard.edit-mode' | translate}}"
                    matTooltipPosition="below">
              <mat-icon>edit</mat-icon></button>
            <button fxHide.lt-lg mat-stroked-button (click)="toggleDashboardEditMode()">
              <mat-icon>edit</mat-icon>{{'dashboard.edit-mode' | translate}}</button>
          </ng-container>
          <ng-container *ngIf="isEdit">
            <button fxHide.gt-md mat-icon-button (click)="saveDashboard()"
                    matTooltip="{{'action.save' | translate}}"
                    matTooltipPosition="below">
              <mat-icon>done</mat-icon></button>
            <button fxHide.lt-lg mat-stroked-button (click)="saveDashboard()">
              <mat-icon>done</mat-icon>{{ 'action.save' | translate }}</button>
            <button fxHide.gt-md mat-icon-button (click)="toggleDashboardEditMode()"
                    matTooltip="{{'action.cancel' | translate}}"
                    matTooltipPosition="below">
              <mat-icon>close</mat-icon></button>
            <button fxHide.lt-lg mat-button (click)="toggleDashboardEditMode()">
              <mat-icon>close</mat-icon>{{ 'action.cancel' | translate }}</button>
            <mat-divider class="tb-toolbar-divider" vertical></mat-divider>
          </ng-container>
          <ng-container *ngIf="currentDashboardId && isEdit && isTenantAdmin()">
            <button fxHide.lt-lg fxHide.gt-lg mat-icon-button
                    #versionControlIconButton
                    matTooltip="{{'version-control.version-control' | translate}}"
                    matTooltipPosition="below"
                    (click)="toggleVersionControl($event, versionControlIconButton)">
              <mat-icon>history</mat-icon>
            </button>
            <button fxHide.lt-xl mat-button
                    #versionControlButton
                    matTooltip="{{'version-control.version-control' | translate}}"
                    matTooltipPosition="below"
                    (click)="toggleVersionControl($event, versionControlButton)">
              <mat-icon>history</mat-icon>
              {{'version-control.versions' | translate}}
            </button>
          </ng-container>
          <ng-container *ngIf="isEdit">
            <button fxHide.gt-lg mat-icon-button
                    matTooltip="{{ 'filter.filters' | translate }}"
                    matTooltipPosition="below"
                    (click)="openFilters($event)">
              <mat-icon>filter_list</mat-icon>
            </button>
            <button fxHide.lt-xl mat-button
                    matTooltip="{{ 'filter.filters' | translate }}"
                    matTooltipPosition="below"
                    (click)="openFilters($event)">
              <mat-icon>filter_list</mat-icon>
              {{ 'filter.filters' | translate }}
            </button>
          </ng-container>
          <ng-container *ngIf="isEdit">
            <button fxHide.gt-lg mat-icon-button
                    matTooltip="{{ 'entity.aliases' | translate }}"
                    matTooltipPosition="below"
                    (click)="openEntityAliases($event)">
              <mat-icon>devices_other</mat-icon>
            </button>
            <button fxHide.lt-xl mat-button
                    matTooltip="{{ 'entity.aliases' | translate }}"
                    matTooltipPosition="below"
                    (click)="openEntityAliases($event)">
              <mat-icon>devices_other</mat-icon>
              {{ 'entity.aliases-short' | translate }}
            </button>
          </ng-container>
          <ng-container *ngIf="isEdit">
            <button fxHide.gt-lg mat-icon-button
                    matTooltip="{{ 'dashboard.settings' | translate }}"
                    matTooltipPosition="below"
                    (click)="openDashboardSettings($event)">
              <mat-icon>settings</mat-icon>
            </button>
            <button fxHide.lt-xl mat-button
                    matTooltip="{{ 'dashboard.settings' | translate }}"
                    matTooltipPosition="below"
                    (click)="openDashboardSettings($event)">
              <mat-icon>settings</mat-icon>
              {{ 'dashboard.settings' | translate }}
            </button>
          </ng-container>
          <button [fxShow]="currentDashboardId && !isEdit && !isMobileApp && isTenantAdmin() && displayUpdateDashboardImage()" mat-icon-button
                  matTooltip="{{'dashboard.update-image' | translate}}"
                  matTooltipPosition="below"
                  (click)="updateDashboardImage($event)">
            <mat-icon>wallpaper</mat-icon>
          </button>
          <ng-container *ngIf="isEdit; else timewindowTemplate">
            <tb-timewindow fxHide.lt-xl asButton
                           flatButton
                           [displayTimewindowValue]="false"
                           [isEdit]="true"
                           tooltipPosition="below"
                           aggregation="true"
                           timezone="true"
                           [(ngModel)]="dashboardCtx.dashboardTimewindow">
            </tb-timewindow>
            <tb-timewindow fxHide.gt-lg
                           hideLabel
                           [isEdit]="true"
                           tooltipPosition="below"
                           aggregation="true"
                           timezone="true"
                           [(ngModel)]="dashboardCtx.dashboardTimewindow">
            </tb-timewindow>
          </ng-container>
          <ng-template #timewindowTemplate>
            <ng-container *ngIf="displayDashboardTimewindow()">
              <tb-timewindow fxHide.gt-md
                             [isEdit]="false"
                             hideLabel
                             tooltipPosition="below"
                             aggregation="true"
                             timezone="true"
                             [(ngModel)]="dashboardCtx.dashboardTimewindow">
              </tb-timewindow>
              <tb-timewindow fxHide.lt-lg
                             [isEdit]="false"
                             tooltipPosition="below"
                             aggregation="true"
                             timezone="true"
                             [(ngModel)]="dashboardCtx.dashboardTimewindow">
              </tb-timewindow>
            </ng-container>
          </ng-template>
          <ng-container *ngIf="isEdit">
            <button fxHide.gt-xs mat-icon-button
                    matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
                    matTooltipPosition="below"
                    (click)="addWidget($event)">
              <mat-icon>add</mat-icon>
            </button>
            <button fxHide.lt-sm mat-stroked-button
                    matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
                    matTooltipPosition="below"
                    (click)="addWidget($event)">
              <mat-icon>add</mat-icon>
              {{ 'dashboard.add-widget-button-text' | translate }}
            </button>
          </ng-container>
          <tb-filters-edit [fxShow]="!isEdit && displayFilters()"
                           tooltipPosition="below"
                           [aliasController]="dashboardCtx.aliasController">
          </tb-filters-edit>
          <tb-aliases-entity-select [fxShow]="!isEdit && displayEntitiesSelect()"
                                    tooltipPosition="below"
                                    [aliasController]="dashboardCtx.aliasController">
          </tb-aliases-entity-select>
          <tb-dashboard-select *ngIf="!isEdit && !widgetEditMode && !embedded && displayDashboardsSelect()"
                               [(ngModel)]="currentDashboardId"
                               (ngModelChange)="currentDashboardIdChanged(currentDashboardId)"
                               [customerId]="currentCustomerId"
                               [dashboardsScope]="currentDashboardScope">
          </tb-dashboard-select>
        </div>
      </div>
    </tb-dashboard-toolbar>
  </section>
  <section class="tb-dashboard-container tb-absolute-fill"
           tb-toast toastTarget="dashboardRoot"
           #dashboardContainer
           [ngClass]="{ 'is-fullscreen': forceFullscreen,
           'tb-dashboard-toolbar-opened': toolbarOpened,
           'tb-dashboard-toolbar-animated': isToolbarOpenedAnimate,
           'tb-dashboard-toolbar-closed': !toolbarOpened }">
    <mat-drawer-container hasBackdrop="false" class="tb-absolute-fill tb-dashboard-drawer-container">
      <mat-drawer-content fxLayout="column" fxLayoutAlign="center start">
        <section *ngIf="!widgetEditMode" class="tb-dashboard-title"
                 [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
          <h3 [fxShow]="!isEdit && displayTitle()">{{ translatedDashboardTitle }}</h3>
          <mat-form-field [fxShow]="isEdit" class="mat-block tb-appearance-transparent" subscriptSizing="dynamic">
            <mat-label translate [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">dashboard.title</mat-label>
            <input matInput class="tb-dashboard-title"
                   [ngStyle]="{'color': dashboard.configuration.settings.titleColor}"
                   required name="title" [(ngModel)]="dashboard.title">
          </mat-form-field>
        </section>
        <mat-drawer-container class="tb-dashboard-layouts" fxFlex
                              [class]="{'tb-shrinked' : isEditingWidget,
                                        'diagonal-stripes': !layouts.right.show && layouts.main.layoutCtx.breakpoint !== 'default'}">
          <mat-drawer *ngIf="layouts.right.show"
                      id="tb-right-layout"
                      [ngStyle]="{minWidth: rightLayoutSize.width,
                                  maxWidth: rightLayoutSize.width,
                                  height: rightLayoutSize.height,
                                  borderLeft: 'none'}"
              disableClose="true"
              [@.disabled]="!isMobile"
              position="end"
              [mode]="isMobile ? 'over' : 'side'"
              [(opened)]="rightLayoutOpened">
            <tb-dashboard-layout style="height: 100%;"
              [dashboardCheatSheet]="cheatSheetComponent"
              [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.main.layoutCtx : layouts.right.layoutCtx"
              [dashboardCtx]="dashboardCtx"
              [isEdit]="isEdit"
              [isEditingWidget]="isEditingWidget"
              [isMobile]="forceDashboardMobileMode"
              [widgetEditMode]="widgetEditMode"
              [parentDashboard]="parentDashboard"
              [popoverComponent]="popoverComponent">
            </tb-dashboard-layout>
          </mat-drawer>
          <mat-drawer-content [fxShow]="layouts.main.show"
                              id="tb-main-layout"
                              [style]="{width: mainLayoutSize.width,
                                        height: mainLayoutSize.height,
                                        maxWidth: mainLayoutSize.maxWidth}">
            <tb-dashboard-layout
              [dashboardCheatSheet]="cheatSheetComponent"
              [layoutCtx]="mobileDisplayRightLayoutFirst ? layouts.right.layoutCtx : layouts.main.layoutCtx"
              [dashboardCtx]="dashboardCtx"
              [isEdit]="isEdit"
              [isEditingWidget]="isEditingWidget"
              [isMobile]="forceDashboardMobileMode"
              [widgetEditMode]="widgetEditMode"
              [parentDashboard]="parentDashboard"
              [popoverComponent]="popoverComponent">
            </tb-dashboard-layout>
          </mat-drawer-content>
        </mat-drawer-container>
        <section data-html2canvas-ignore fxLayout="row" class="layout-wrap tb-header-buttons tb-enter-edit-mode" fxLayoutAlign="start end" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
          <button [fxShow]="!isEdit"
                  color="primary"
                  mat-mini-fab
                  class="tb-btn-header tb-btn-edit"
                  (click)="toggleDashboardEditMode()"
                  matTooltip="{{ 'action.enter-edit-mode' | translate }}"
                  matTooltipPosition="above">
            <mat-icon>edit</mat-icon>
          </button>
          <button [fxShow]="isEdit"
                  color="primary"
                  mat-mini-fab
                  class="tb-btn-header tb-btn-edit"
                  (click)="saveDashboard()"
                  matTooltip="{{'action.save' | translate}}"
                  matTooltipPosition="below">
            <mat-icon>done</mat-icon></button>
          <button [fxShow]="isEdit"
                  color="primary"
                  mat-mini-fab
                  class="tb-btn-header tb-btn-edit"
                  (click)="toggleDashboardEditMode()"
                  matTooltip="{{'action.cancel' | translate}}"
                  matTooltipPosition="below">
            <mat-icon>close</mat-icon></button>
        </section>
        <section *ngIf="!embedded" data-html2canvas-ignore class="tb-powered-by-footer" [ngStyle]="{'color': dashboard.configuration.settings.titleColor}">
          <span>Powered by <a href="https://thingsboard.io" target="_blank">Thingsboard v.{{ thingsboardVersion }}</a></span>
        </section>
      </mat-drawer-content>
      <mat-drawer class="tb-details-drawer"
                  [opened]="isEditingWidget || isAddingWidget"
                  (openedStart)="detailsDrawerOpenedStart()"
                  (closed)="detailsDrawerClosed()"
                  disableClose
                  mode="over"
                  position="end">
        <tb-details-panel *ngIf="!isEditingWidgetClosed" fxFlex
                          headerTitle="{{editingWidget?.config.title}}"
                          headerSubtitle="{{ editingWidgetSubtitle }}"
                          [isReadOnly]="true"
                          (closeDetails)="onEditWidgetClosed()">
          <div class="details-buttons" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
            <tb-toggle-select *ngIf="tbEditWidget.widgetConfig?.hasBasicMode" appearance="fill-invert" selectMediaBreakpoint="xs" [(ngModel)]="tbEditWidget.widgetConfigMode">
              <tb-toggle-option value="basic">{{ 'widget.basic-mode' | translate }}</tb-toggle-option>
              <tb-toggle-option value="advanced">{{ 'widget.advanced-mode' | translate }}</tb-toggle-option>
            </tb-toggle-select>
            <div [tb-help]="helpLinkIdForWidgetType()"></div>
          </div>
          <tb-edit-widget #tbEditWidget
                          [dashboard]="dashboard"
                          [aliasController]="dashboardCtx.aliasController"
                          [stateController]="dashboardCtx.stateController"
                          [widgetEditMode]="widgetEditMode"
                          [widget]="editingWidget"
                          [widgetLayout]="editingWidgetLayout"
                          (revertWidgetConfig)="onRevertWidgetEdit()"
                          (applyWidgetConfig)="saveWidget()">
          </tb-edit-widget>
        </tb-details-panel>
        <tb-details-panel *ngIf="!isAddingWidgetClosed && !widgetEditMode" fxFlex
                          headerTitle="{{ isAddingWidget ?
                            ((dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets' ? ('dashboard.select-widget-value' | translate: { title: ('widget.all-widgets' | translate) }) :
                               (!dashboardWidgetSelectComponent?.widgetsBundle ?
                                   'widget.select-widgets-bundle' : 'dashboard.select-widget-value') | translate: dashboardWidgetSelectComponent?.widgetsBundle)) : ''
                          }}"
                          headerHeightPx="64"
                          [isShowSearch]="true"
                          [isReadOnly]="true"
                          [isEdit]="false"
                          backgroundColor="#cfd8dc"
                          (closeDetails)="onAddWidgetClosed()"
                          (closeSearch)="dashboardWidgetSelectComponent.search = ''">
          <div class="prefix-title-buttons" [fxShow]="!!(isAddingWidget && (dashboardWidgetSelectComponent?.widgetsBundle || dashboardWidgetSelectComponent?.selectWidgetMode === 'allWidgets'))" style="height: 28px; margin-right: 12px">
            <button class="tb-mat-28" mat-icon-button type="button" (click)="clearSelectedWidgetBundle()">
              <mat-icon>arrow_back</mat-icon>
            </button>
          </div>
          <div class="search-pane" *ngIf="isAddingWidget && dashboardWidgetSelectComponent" fxLayout="row">
            <tb-widgets-bundle-search fxFlex
                                      [(ngModel)]="dashboardWidgetSelectComponent.search"
                                      placeholder="{{ ((!dashboardWidgetSelectComponent.widgetsBundle && dashboardWidgetSelectComponent.selectWidgetMode === 'bundles')
                                                        ? 'widgets-bundle.search' : 'widget.search') | translate }}">
            </tb-widgets-bundle-search>
          </div>
          <div class="details-buttons" *ngIf="isAddingWidget" fxLayout="row" fxLayoutAlign="start center">
            <button mat-button type="button" (click)="importWidget($event)"
                    *ngIf="dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle">
              <mat-icon>file_upload</mat-icon>{{ 'dashboard.import-widget' | translate }}</button>
            <tb-toggle-select *ngIf="dashboardWidgetSelectComponent?.selectWidgetMode === 'bundles' && !dashboardWidgetSelectComponent?.widgetsBundle"
                              appearance="fill-invert"
                              disablePagination
                              selectMediaBreakpoint="xs"
                              [(ngModel)]="dashboardWidgetSelectComponent.selectWidgetMode">
              <tb-toggle-option value="bundles">{{ 'widgets-bundle.widgets-bundles' | translate }}</tb-toggle-option>
              <tb-toggle-option value="allWidgets">{{ 'widget.all-widgets' | translate }}</tb-toggle-option>
            </tb-toggle-select>
            <button mat-icon-button type="button"
                    *ngIf="dashboardWidgetSelectComponent?.widgetTypes.size > 1"
                    (click)="editWidgetsTypesToDisplay($event)"
                    matTooltip="{{ 'widget.filter' | translate }}"
                    matTooltipPosition="above">
              <mat-icon>filter_list</mat-icon>
            </button>
            <tb-toggle-select *ngIf="dashboardWidgetSelectComponent?.hasDeprecated"
                              appearance="fill-invert"
                              disablePagination
                              selectMediaBreakpoint="xs"
                              [(ngModel)]="dashboardWidgetSelectComponent.deprecatedFilter">
              <tb-toggle-option value="ALL">{{ 'widget.all' | translate }}</tb-toggle-option>
              <tb-toggle-option value="ACTUAL">{{ 'widget.actual' | translate }}</tb-toggle-option>
              <tb-toggle-option value="DEPRECATED">{{ 'widget.deprecated' | translate }}</tb-toggle-option>
            </tb-toggle-select>
          </div>
          <tb-dashboard-widget-select #dashboardWidgetSelect
                                      *ngIf="isAddingWidget"
                                      [aliasController]="dashboardCtx.aliasController"
                                      [filterWidgetTypes]="filterWidgetTypes"
                                      [scadaFirst]="layouts.main.layoutCtx.gridSettings.layoutType === LayoutType.scada"
                                      (widgetSelected)="addWidgetFromType($event)">
          </tb-dashboard-widget-select>
        </tb-details-panel>
      </mat-drawer>
    </mat-drawer-container>
  </section>
</div>