469 lines
27 KiB
HTML
469 lines
27 KiB
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 flex-1" [class.mobile-app]="isMobileApp && !isEdit" tb-toast
|
|
tb-fullscreen [fullscreenElement]="elRef.nativeElement" [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
|
|
<tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
|
|
<section class="tb-dashboard-toolbar"
|
|
[class.tb-dashboard-toolbar-opened]="toolbarOpened"
|
|
[class.tb-dashboard-toolbar-closed]="!toolbarOpened">
|
|
<tb-dashboard-toolbar [class.!hidden]="widgetEditMode || hideToolbar" [forceFullscreen]="forceFullscreen"
|
|
[toolbarOpened]="toolbarOpened" (triggerClick)="openToolbar()">
|
|
<div class="tb-dashboard-action-panels flex flex-col justify-center items-stretch gt-sm:flex-row gt-sm:justify-between gt-sm:items-center">
|
|
<div class="tb-dashboard-action-panel tb-left-panel" [class.!hidden]="isMobileApp && !isEdit">
|
|
<tb-user-menu *ngIf="!isPublicUser() && forceFullscreen" class="gt-sm:!hidden" displayUserInfo="true">
|
|
</tb-user-menu>
|
|
<ng-container *ngIf="isEdit">
|
|
<div style="flex: 1 1 100%" class="gt-sm:!hidden"></div>
|
|
<div class="flex flex-row justify-end items-center lt-md:flex-1 gt-sm:justify-start gt-sm:items-center lt-lg:gap-0.75 lg:gap-1.5 gt-lg:gap-3">
|
|
<mat-divider class="tb-toolbar-divider" vertical></mat-divider>
|
|
<button class="gt-md:!hidden" mat-icon-button
|
|
matTooltip="{{'layout.manage' | translate}}"
|
|
matTooltipPosition="below"
|
|
(click)="manageDashboardLayouts($event)">
|
|
<mat-icon>view_compact</mat-icon>
|
|
</button>
|
|
<button class="lt-lg:!hidden" mat-button
|
|
matTooltip="{{'layout.manage' | translate}}"
|
|
matTooltipPosition="below"
|
|
(click)="manageDashboardLayouts($event)">
|
|
<mat-icon>view_compact</mat-icon>
|
|
{{'layout.layouts' | translate}}
|
|
</button>
|
|
<tb-select-dashboard-breakpoint
|
|
[dashboardCtrl]="this">
|
|
</tb-select-dashboard-breakpoint>
|
|
</div>
|
|
</ng-container>
|
|
<tb-states-component class="lt-md:flex-1"
|
|
[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>
|
|
<ng-container *ngIf="isEdit">
|
|
<button class="gt-md:!hidden" mat-icon-button
|
|
matTooltip="{{'dashboard.manage-states' | translate}}"
|
|
matTooltipPosition="below"
|
|
(click)="manageDashboardStates($event)">
|
|
<mat-icon>layers</mat-icon>
|
|
</button>
|
|
<button class="lt-lg:!hidden" mat-button
|
|
matTooltip="{{'dashboard.manage-states' | translate}}"
|
|
matTooltipPosition="below"
|
|
(click)="manageDashboardStates($event)">
|
|
<mat-icon>layers</mat-icon>
|
|
{{'dashboard.states-short' | translate}}
|
|
</button>
|
|
</ng-container>
|
|
<img *ngIf="showDashboardLogo()" [src]="dashboardLogo | image | async"
|
|
aria-label="dashboard_logo" class="dashboard_logo"/>
|
|
</div>
|
|
<div class="tb-dashboard-action-panel">
|
|
<button [class.!hidden]="!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" class="lt-md:!hidden" displayUserInfo="true">
|
|
</tb-user-menu>
|
|
<button [class.!hidden]="!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 [class.!hidden]="hideFullscreenButton()" class="xs:!hidden" 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 [class.!hidden]="!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 class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
|
|
matTooltip="{{'dashboard.edit-mode' | translate}}"
|
|
matTooltipPosition="below">
|
|
<mat-icon>edit</mat-icon></button>
|
|
<button class="lt-lg:!hidden" mat-stroked-button (click)="toggleDashboardEditMode()">
|
|
<mat-icon>edit</mat-icon>{{'dashboard.edit-mode' | translate}}</button>
|
|
</ng-container>
|
|
<ng-container *ngIf="isEdit">
|
|
<button class="gt-md:!hidden" mat-icon-button (click)="saveDashboard()" [disabled]="isLoading$ | async"
|
|
matTooltip="{{'action.save' | translate}}"
|
|
matTooltipPosition="below">
|
|
<mat-icon>done</mat-icon></button>
|
|
<button class="lt-lg:!hidden" mat-stroked-button [disabled]="isLoading$ | async" (click)="saveDashboard()">
|
|
<mat-icon>done</mat-icon>{{ 'action.save' | translate }}</button>
|
|
<button class="gt-md:!hidden" mat-icon-button (click)="toggleDashboardEditMode()"
|
|
matTooltip="{{'action.cancel' | translate}}"
|
|
[disabled]="isLoading$ | async"
|
|
matTooltipPosition="below">
|
|
<mat-icon>close</mat-icon></button>
|
|
<button class="lt-lg:!hidden" mat-button (click)="toggleDashboardEditMode()" [disabled]="isLoading$ | async">
|
|
<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 class="lt-lg:!hidden gt-lg:!hidden" mat-icon-button
|
|
#versionControlIconButton
|
|
matTooltip="{{'version-control.version-control' | translate}}"
|
|
matTooltipPosition="below"
|
|
(click)="toggleVersionControl($event, versionControlIconButton)">
|
|
<mat-icon>history</mat-icon>
|
|
</button>
|
|
<button class="lt-xl:!hidden" 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 class="gt-lg:!hidden" mat-icon-button
|
|
matTooltip="{{ 'filter.filters' | translate }}"
|
|
matTooltipPosition="below"
|
|
(click)="openFilters($event)">
|
|
<mat-icon>filter_list</mat-icon>
|
|
</button>
|
|
<button class="lt-xl:!hidden" 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 class="gt-lg:!hidden" mat-icon-button
|
|
matTooltip="{{ 'entity.aliases' | translate }}"
|
|
matTooltipPosition="below"
|
|
(click)="openEntityAliases($event)">
|
|
<mat-icon>devices_other</mat-icon>
|
|
</button>
|
|
<button class="lt-xl:!hidden" 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 class="gt-lg:!hidden" mat-icon-button
|
|
matTooltip="{{ 'dashboard.settings' | translate }}"
|
|
matTooltipPosition="below"
|
|
(click)="openDashboardSettings($event)">
|
|
<mat-icon>settings</mat-icon>
|
|
</button>
|
|
<button class="lt-xl:!hidden" mat-button
|
|
matTooltip="{{ 'dashboard.settings' | translate }}"
|
|
matTooltipPosition="below"
|
|
(click)="openDashboardSettings($event)">
|
|
<mat-icon>settings</mat-icon>
|
|
{{ 'dashboard.settings' | translate }}
|
|
</button>
|
|
</ng-container>
|
|
<button [class.!hidden]="!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 class="lt-xl:!hidden" asButton
|
|
flatButton
|
|
[displayTimewindowValue]="false"
|
|
[isEdit]="true"
|
|
tooltipPosition="below"
|
|
aggregation="true"
|
|
timezone="true"
|
|
[(ngModel)]="dashboardCtx.dashboardTimewindow">
|
|
</tb-timewindow>
|
|
<tb-timewindow class="gt-lg:!hidden"
|
|
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 class="gt-md:!hidden"
|
|
[isEdit]="false"
|
|
hideLabel
|
|
tooltipPosition="below"
|
|
aggregation="true"
|
|
timezone="true"
|
|
[(ngModel)]="dashboardCtx.dashboardTimewindow">
|
|
</tb-timewindow>
|
|
<tb-timewindow class="lt-lg:!hidden"
|
|
[isEdit]="false"
|
|
tooltipPosition="below"
|
|
aggregation="true"
|
|
timezone="true"
|
|
[(ngModel)]="dashboardCtx.dashboardTimewindow">
|
|
</tb-timewindow>
|
|
</ng-container>
|
|
</ng-template>
|
|
<ng-container *ngIf="isEdit">
|
|
<button class="gt-md:!hidden" mat-icon-button
|
|
matTooltip="{{ 'dashboard.add-widget-button-text' | translate }}"
|
|
matTooltipPosition="below"
|
|
(click)="addWidget($event)">
|
|
<mat-icon>add</mat-icon>
|
|
</button>
|
|
<button class="lt-lg:!hidden" 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 [class.!hidden]="isEdit || !displayFilters()"
|
|
tooltipPosition="below"
|
|
[aliasController]="dashboardCtx.aliasController">
|
|
</tb-filters-edit>
|
|
<tb-aliases-entity-select [class.!hidden]="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
|
|
[class.is-fullscreen]="forceFullscreen"
|
|
[class.tb-dashboard-toolbar-opened]="toolbarOpened"
|
|
[class.tb-dashboard-toolbar-animated]="isToolbarOpenedAnimate"
|
|
[class.tb-dashboard-toolbar-closed]="!toolbarOpened">
|
|
<mat-drawer-container hasBackdrop="false" class="tb-absolute-fill tb-dashboard-drawer-container">
|
|
<mat-drawer-content #dashboardContent class="flex flex-col justify-center items-start">
|
|
<section *ngIf="!widgetEditMode" class="tb-dashboard-title"
|
|
[style.color]="dashboard.configuration.settings.titleColor">
|
|
<h3 [class.!hidden]="isEdit || !displayTitle()">{{ translatedDashboardTitle }}</h3>
|
|
<mat-form-field [class.!hidden]="!isEdit" class="mat-block tb-appearance-transparent" subscriptSizing="dynamic">
|
|
<mat-label translate [style.color]="dashboard.configuration.settings.titleColor">dashboard.title</mat-label>
|
|
<input matInput class="tb-dashboard-title"
|
|
[style.color]="dashboard.configuration.settings.titleColor"
|
|
required name="title" [(ngModel)]="dashboard.title">
|
|
</mat-form-field>
|
|
</section>
|
|
<mat-drawer-container class="tb-dashboard-layouts flex-1"
|
|
[class.tb-shrinked]="isEditingWidget">
|
|
<mat-drawer *ngIf="layouts.right.show"
|
|
id="tb-right-layout"
|
|
style="border-left: none"
|
|
[style.min-width]="rightLayoutSize.width"
|
|
[style.max-width]="rightLayoutSize.width"
|
|
[style.height]="rightLayoutSize.height"
|
|
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 [class.!hidden]="!layouts.main.show"
|
|
id="tb-main-layout"
|
|
[style.width]="mainLayoutSize.width"
|
|
[style.height]="mainLayoutSize.height">
|
|
<tb-dashboard-layout
|
|
[style.max-width]="mainLayoutSize.maxWidth"
|
|
[style.min-width]="mainLayoutSize.minWidth"
|
|
[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>
|
|
<div class="layout-filler"
|
|
*ngIf="isEdit"
|
|
[class.!hidden]="!showMainLayoutFiller">
|
|
{{ 'dashboard.breakpoint-value' | translate : {value: currentBreakpointValue } }}
|
|
</div>
|
|
</mat-drawer-content>
|
|
</mat-drawer-container>
|
|
<section data-html2canvas-ignore class="tb-header-buttons tb-enter-edit-mode flex flex-row flex-wrap justify-start items-end" *ngIf="!readonly && (hideToolbar || widgetEditMode)">
|
|
<button [class.!hidden]="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 [class.!hidden]="!isEdit"
|
|
color="primary"
|
|
mat-mini-fab
|
|
class="tb-btn-header tb-btn-edit"
|
|
(click)="saveDashboard()"
|
|
[disabled]="isLoading$ | async"
|
|
matTooltip="{{'action.save' | translate}}"
|
|
matTooltipPosition="below">
|
|
<mat-icon>done</mat-icon></button>
|
|
<button [class.!hidden]="!isEdit"
|
|
color="primary"
|
|
mat-mini-fab
|
|
class="tb-btn-header tb-btn-edit"
|
|
(click)="toggleDashboardEditMode()"
|
|
[disabled]="isLoading$ | async"
|
|
matTooltip="{{'action.cancel' | translate}}"
|
|
matTooltipPosition="below">
|
|
<mat-icon>close</mat-icon></button>
|
|
</section>
|
|
<section *ngIf="!embedded" data-html2canvas-ignore class="tb-powered-by-footer" [style.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" class="flex-1"
|
|
headerTitle="{{editingWidget?.config.title}}"
|
|
headerSubtitle="{{ editingWidgetSubtitle }}"
|
|
[isReadOnly]="true"
|
|
(closeDetails)="onEditWidgetClosed()">
|
|
<div class="details-buttons flex flex-row justify-start items-center gap-4">
|
|
<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"
|
|
[showLayoutConfig]="showLayoutConfigInEdit(editingLayoutCtx)"
|
|
[isDefaultBreakpoint]="editingLayoutCtx?.breakpoint === 'default'"
|
|
(revertWidgetConfig)="onRevertWidgetEdit()"
|
|
(applyWidgetConfig)="saveWidget()">
|
|
</tb-edit-widget>
|
|
</tb-details-panel>
|
|
<tb-details-panel *ngIf="!isAddingWidgetClosed && !widgetEditMode" class="flex-1"
|
|
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" [class.!hidden]="!(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 flex flex-row" *ngIf="isAddingWidget && dashboardWidgetSelectComponent">
|
|
<tb-widgets-bundle-search class="flex-1"
|
|
[(ngModel)]="dashboardWidgetSelectComponent.search"
|
|
placeholder="{{ ((!dashboardWidgetSelectComponent.widgetsBundle && dashboardWidgetSelectComponent.selectWidgetMode === 'bundles')
|
|
? 'widgets-bundle.search' : 'widget.search') | translate }}">
|
|
</tb-widgets-bundle-search>
|
|
</div>
|
|
<div class="details-buttons flex flex-row justify-start items-center" *ngIf="isAddingWidget">
|
|
<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>
|