262 lines
14 KiB
HTML
262 lines
14 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2025 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.
|
|
|
|
-->
|
|
<form (ngSubmit)="save()" style="width: 750px;">
|
|
<mat-toolbar color="primary">
|
|
<h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
|
|
<span class="flex-1"></span>
|
|
<button mat-icon-button
|
|
(click)="cancel()"
|
|
type="button">
|
|
<mat-icon class="material-icons">close</mat-icon>
|
|
</button>
|
|
</mat-toolbar>
|
|
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
|
|
</mat-progress-bar>
|
|
<div mat-dialog-content class="tb-form-panel no-border no-padding">
|
|
<div *ngIf="settings" class="tb-form-panel no-border no-padding" [formGroup]="settingsFormGroup">
|
|
<div class="tb-form-row space-between">
|
|
<div>{{ 'dashboard.state-controller' | translate }}</div>
|
|
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
|
|
<mat-select required formControlName="stateControllerId">
|
|
<mat-option *ngFor="let stateControllerId of stateControllerIds" [value]="stateControllerId">
|
|
{{ getStatesControllerTranslation(stateControllerId) }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate>dashboard.title-settings</div>
|
|
<div class="tb-form-row space-between">
|
|
<mat-slide-toggle class="mat-slide" formControlName="showTitle">
|
|
{{ 'dashboard.title' | translate }}
|
|
</mat-slide-toggle>
|
|
<tb-color-input asBoxInput
|
|
colorClearButton
|
|
formControlName="titleColor">
|
|
</tb-color-input>
|
|
</div>
|
|
</div>
|
|
<div class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate>dashboard.dashboard-logo-settings</div>
|
|
<div class="tb-form-row">
|
|
<mat-slide-toggle class="mat-slide" formControlName="showDashboardLogo">
|
|
{{ 'dashboard.display-dashboard-logo' | translate }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<tb-gallery-image-input class="flex-1"
|
|
label="{{'dashboard.dashboard-logo-image' | translate}}"
|
|
formControlName="dashboardLogoUrl">
|
|
</tb-gallery-image-input>
|
|
</div>
|
|
<div class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate>dashboard.toolbar-settings</div>
|
|
<mat-slide-toggle class="mat-slide" formControlName="hideToolbar">
|
|
{{ 'dashboard.hide-toolbar' | translate }}
|
|
</mat-slide-toggle>
|
|
<mat-slide-toggle class="mat-slide" formControlName="toolbarAlwaysOpen">
|
|
{{ 'dashboard.toolbar-always-open' | translate }}
|
|
</mat-slide-toggle>
|
|
<mat-slide-toggle class="mat-slide" formControlName="showDashboardsSelect">
|
|
{{ 'dashboard.display-dashboards-selection' | translate }}
|
|
</mat-slide-toggle>
|
|
<mat-slide-toggle class="mat-slide" formControlName="showEntitiesSelect">
|
|
{{ 'dashboard.display-entities-selection' | translate }}
|
|
</mat-slide-toggle>
|
|
<mat-slide-toggle class="mat-slide" formControlName="showFilters">
|
|
{{ 'dashboard.display-filters' | translate }}
|
|
</mat-slide-toggle>
|
|
<mat-slide-toggle class="mat-slide" formControlName="showDashboardTimewindow">
|
|
{{ 'dashboard.display-dashboard-timewindow' | translate }}
|
|
</mat-slide-toggle>
|
|
<mat-slide-toggle class="mat-slide" formControlName="showDashboardExport">
|
|
{{ 'dashboard.display-dashboard-export' | translate }}
|
|
</mat-slide-toggle>
|
|
<mat-slide-toggle class="mat-slide" formControlName="showUpdateDashboardImage">
|
|
{{ 'dashboard.display-update-dashboard-image' | translate }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<mat-expansion-panel class="tb-settings">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-description class="flex items-stretch justify-end" translate>
|
|
dashboard.advanced-settings
|
|
</mat-panel-description>
|
|
</mat-expansion-panel-header>
|
|
<ng-template matExpansionPanelContent>
|
|
<tb-css
|
|
label="{{ 'dashboard.dashboard-css' | translate }}"
|
|
formControlName="dashboardCss"
|
|
></tb-css>
|
|
</ng-template>
|
|
</mat-expansion-panel>
|
|
</div>
|
|
<div *ngIf="gridSettings" class="tb-form-panel no-border no-padding" [formGroup]="gridSettingsFormGroup">
|
|
<div class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate [translateParams]="{type: layoutSettingsType}">dashboard.layout-settings-type</div>
|
|
<div *ngIf="isDefaultLayout && !isDefaultBreakpoint" class="tb-form-row space-between">
|
|
<div class="fixed-title-width" translate>dashboard.view-format</div>
|
|
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
|
|
<mat-select formControlName="viewFormat">
|
|
<mat-option *ngFor="let type of viewFormatTypes" [value]="type">
|
|
{{ viewFormatTypeTranslationMap.get(type) | translate }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="tb-form-row space-between">
|
|
<div translate>dashboard.columns-count</div>
|
|
<mat-form-field *ngIf="!isScada()" appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic"
|
|
matTooltipPosition="above"
|
|
matTooltipClass="tb-error-tooltip"
|
|
[matTooltipDisabled]="!(gridSettingsFormGroup.get('columns').invalid && gridSettingsFormGroup.get('columns').touched)"
|
|
[matTooltip]="(gridSettingsFormGroup.get('columns').hasError('required') ? 'dashboard.columns-count-required' :
|
|
(gridSettingsFormGroup.get('columns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate">
|
|
<input matInput formControlName="columns" type="number" min="10" max="1008" step="1"
|
|
required
|
|
placeholder="{{ 'widget-config.set' | translate }}">
|
|
</mat-form-field>
|
|
<mat-form-field *ngIf="isScada()"
|
|
class="medium-width" appearance="outline" subscriptSizing="dynamic">
|
|
<mat-select required formControlName="columns">
|
|
<mat-option *ngFor="let columns of scadaColumns" [value]="columns">
|
|
{{ columns }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="tb-form-row space-between">
|
|
<div translate>dashboard.min-layout-width</div>
|
|
<mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
|
|
matTooltipPosition="above"
|
|
matTooltipClass="tb-error-tooltip"
|
|
[matTooltipDisabled]="!(gridSettingsFormGroup.get('minColumns').invalid && gridSettingsFormGroup.get('minColumns').touched)"
|
|
[matTooltip]="(gridSettingsFormGroup.get('minColumns').hasError('required') ? 'dashboard.columns-count-required' :
|
|
(gridSettingsFormGroup.get('minColumns').hasError('min') ? 'dashboard.min-columns-count-message' : 'dashboard.max-columns-count-message')) | translate">
|
|
<input matInput formControlName="minColumns" type="number" min="10" max="1008" step="1"
|
|
required
|
|
placeholder="{{ 'widget-config.set' | translate }}">
|
|
<span translate matSuffix>dashboard.columns-suffix</span>
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="!isScada()" class="tb-form-row space-between">
|
|
<div translate>dashboard.widgets-margins</div>
|
|
<mat-form-field appearance="outline" class="number medium-width tb-suffix-absolute" subscriptSizing="dynamic"
|
|
matTooltipPosition="above"
|
|
matTooltipClass="tb-error-tooltip"
|
|
[matTooltipDisabled]="!(gridSettingsFormGroup.get('margin').invalid && gridSettingsFormGroup.get('margin').touched)"
|
|
[matTooltip]="(gridSettingsFormGroup.get('margin').hasError('required') ? 'dashboard.margin-required' :
|
|
(gridSettingsFormGroup.get('margin').hasError('min') ? 'dashboard.min-margin-message' : 'dashboard.max-margin-message')) | translate">
|
|
<input matInput formControlName="margin" type="number" min="0" max="50" step="any"
|
|
required
|
|
placeholder="{{ 'widget-config.set' | translate }}">
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="!isScada()" class="tb-form-row">
|
|
<mat-slide-toggle class="mat-slide" formControlName="outerMargin">
|
|
{{ 'dashboard.apply-outer-margin' | translate }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<div *ngIf="!isScada()" class="tb-form-row">
|
|
<mat-slide-toggle class="mat-slide" formControlName="autoFillHeight">
|
|
{{ 'dashboard.autofill-height' | translate }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<div *ngIf="isDefaultLayout && !isDefaultBreakpoint" class="tb-form-row space-between">
|
|
<div translate>dashboard.row-height</div>
|
|
<mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
|
|
matTooltipPosition="above"
|
|
matTooltipClass="tb-error-tooltip"
|
|
[matTooltipDisabled]="!(gridSettingsFormGroup.get('rowHeight').invalid && gridSettingsFormGroup.get('rowHeight').touched)"
|
|
[matTooltip]="(gridSettingsFormGroup.get('rowHeight').hasError('required') ? 'dashboard.row-height-required' :
|
|
(gridSettingsFormGroup.get('rowHeight').hasError('min') ?
|
|
'dashboard.min-row-height-message' : 'dashboard.max-row-height-message')) | translate">
|
|
<input matInput formControlName="rowHeight" type="number" min="5" max="200" step="any"
|
|
required
|
|
placeholder="{{ 'widget-config.set' | translate }}">
|
|
<span matSuffix>px</span>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="tb-form-row space-between">
|
|
<div translate>dashboard.background-color</div>
|
|
<tb-color-input asBoxInput
|
|
colorClearButton
|
|
formControlName="backgroundColor">
|
|
</tb-color-input>
|
|
</div>
|
|
<tb-gallery-image-input class="flex-1"
|
|
label="{{'dashboard.background-image' | translate}}"
|
|
formControlName="backgroundImageUrl">
|
|
</tb-gallery-image-input>
|
|
<div class="tb-form-row space-between">
|
|
<div>{{ 'dashboard.background-size-mode' | translate }}</div>
|
|
<mat-form-field class="medium-width" appearance="outline" subscriptSizing="dynamic">
|
|
<mat-select formControlName="backgroundSizeMode">
|
|
<mat-option value="100%">Fit width</mat-option>
|
|
<mat-option value="auto 100%">Fit height</mat-option>
|
|
<mat-option value="cover">Cover</mat-option>
|
|
<mat-option value="contain">Contain</mat-option>
|
|
<mat-option value="auto">Original size</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="!isScada() && isDefaultBreakpoint" class="tb-form-panel stroked">
|
|
<div class="tb-form-panel-title" translate>dashboard.mobile-layout</div>
|
|
<div *ngIf="isRightLayout" class="tb-form-row">
|
|
<mat-slide-toggle class="mat-slide" formControlName="mobileDisplayLayoutFirst">
|
|
{{ 'dashboard.display-first-in-mobile-view' | translate }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<div *ngIf="!isScada()" class="tb-form-row">
|
|
<mat-slide-toggle class="mat-slide" formControlName="mobileAutoFillHeight">
|
|
{{ 'dashboard.autofill-height' | translate }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<div *ngIf="!isScada()" class="tb-form-row space-between">
|
|
<div translate>dashboard.mobile-row-height</div>
|
|
<mat-form-field appearance="outline" class="number medium-width" subscriptSizing="dynamic"
|
|
matTooltipPosition="above"
|
|
matTooltipClass="tb-error-tooltip"
|
|
[matTooltipDisabled]="!(gridSettingsFormGroup.get('mobileRowHeight').invalid && gridSettingsFormGroup.get('mobileRowHeight').touched)"
|
|
[matTooltip]="(gridSettingsFormGroup.get('mobileRowHeight').hasError('required') ? 'dashboard.mobile-row-height-required' :
|
|
(gridSettingsFormGroup.get('mobileRowHeight').hasError('min') ?
|
|
'dashboard.min-mobile-row-height-message' : 'dashboard.max-mobile-row-height-message')) | translate">
|
|
<input matInput formControlName="mobileRowHeight" type="number" min="5" max="200" step="any"
|
|
required
|
|
placeholder="{{ 'widget-config.set' | translate }}">
|
|
<span matSuffix>px</span>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div mat-dialog-actions class="flex items-center justify-end">
|
|
<button mat-button color="primary"
|
|
type="button"
|
|
[disabled]="(isLoading$ | async)"
|
|
(click)="cancel()" cdkFocusInitial>
|
|
{{ 'action.cancel' | translate }}
|
|
</button>
|
|
<button mat-raised-button color="primary"
|
|
type="submit"
|
|
[disabled]="(isLoading$ | async) || settingsFormGroup.invalid || gridSettingsFormGroup.invalid
|
|
|| (!settingsFormGroup.dirty && !gridSettingsFormGroup.dirty)">
|
|
{{ 'action.save' | translate }}
|
|
</button>
|
|
</div>
|
|
</form>
|