177 lines
8.5 KiB
HTML
177 lines
8.5 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2021 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()">
|
|
<mat-toolbar color="primary">
|
|
<h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
|
|
<span fxFlex></span>
|
|
<button mat-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>
|
|
<fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="16px">
|
|
<div *ngIf="settings" [formGroup]="settingsFormGroup">
|
|
<mat-form-field class="mat-block">
|
|
<mat-label translate>dashboard.state-controller</mat-label>
|
|
<mat-select required formControlName="stateControllerId">
|
|
<mat-option *ngFor="let stateControllerId of stateControllerIds" [value]="stateControllerId">
|
|
{{stateControllerId}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-md="column" fxLayoutAlign.lt-md fxLayoutGap="8px">
|
|
<mat-checkbox fxFlex formControlName="toolbarAlwaysOpen">
|
|
{{ 'dashboard.toolbar-always-open' | translate }}
|
|
</mat-checkbox>
|
|
<mat-checkbox fxFlex formControlName="showTitle">
|
|
{{ 'dashboard.display-title' | translate }}
|
|
</mat-checkbox>
|
|
<tb-color-input fxFlex
|
|
label="{{'dashboard.title-color' | translate}}"
|
|
icon="format_color_fill"
|
|
openOnInput
|
|
formControlName="titleColor">
|
|
</tb-color-input>
|
|
</div>
|
|
<div fxLayout="row" fxLayoutAlign="start center" style="margin-bottom: 8px;"
|
|
fxLayout.lt-md="column" fxLayoutAlign.lt-md fxLayoutGap="8px">
|
|
<mat-checkbox fxFlex formControlName="showDashboardsSelect">
|
|
{{ 'dashboard.display-dashboards-selection' | translate }}
|
|
</mat-checkbox>
|
|
<mat-checkbox fxFlex formControlName="showEntitiesSelect">
|
|
{{ 'dashboard.display-entities-selection' | translate }}
|
|
</mat-checkbox>
|
|
<mat-checkbox fxFlex formControlName="showFilters">
|
|
{{ 'dashboard.display-filters' | translate }}
|
|
</mat-checkbox>
|
|
<mat-checkbox fxFlex formControlName="showDashboardTimewindow">
|
|
{{ 'dashboard.display-dashboard-timewindow' | translate }}
|
|
</mat-checkbox>
|
|
<mat-checkbox fxFlex formControlName="showDashboardExport">
|
|
{{ 'dashboard.display-dashboard-export' | translate }}
|
|
</mat-checkbox>
|
|
</div>
|
|
<mat-checkbox formControlName="showDashboardLogo">
|
|
{{ 'dashboard.display-dashboard-logo' | translate }}
|
|
</mat-checkbox>
|
|
<tb-image-input fxFlex *ngIf="settingsFormGroup.get('showDashboardLogo').value"
|
|
label="{{'dashboard.dashboard-logo-image' | translate}}"
|
|
formControlName="dashboardLogoUrl">
|
|
</tb-image-input>
|
|
</div>
|
|
<div *ngIf="gridSettings" [formGroup]="gridSettingsFormGroup">
|
|
<tb-color-input fxFlex
|
|
label="{{'layout.color' | translate}}"
|
|
icon="format_color_fill"
|
|
openOnInput
|
|
formControlName="color">
|
|
</tb-color-input>
|
|
<mat-form-field class="mat-block">
|
|
<mat-label translate>dashboard.columns-count</mat-label>
|
|
<input matInput formControlName="columns" type="number" step="any" min="10"
|
|
max="1000" required>
|
|
<mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('required')">
|
|
{{ 'dashboard.columns-count-required' | translate }}
|
|
</mat-error>
|
|
<mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('min')">
|
|
{{ 'dashboard.min-columns-count-message' | translate }}
|
|
</mat-error>
|
|
<mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('max')">
|
|
{{ 'dashboard.max-columns-count-message' | translate }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex class="mat-block">
|
|
<mat-label translate>dashboard.widgets-margins</mat-label>
|
|
<input matInput formControlName="margin" type="number" step="any" min="0"
|
|
max="50" required>
|
|
<mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('required')">
|
|
{{ 'dashboard.margin-required' | translate }}
|
|
</mat-error>
|
|
<mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('min')">
|
|
{{ 'dashboard.min-margin-message' | translate }}
|
|
</mat-error>
|
|
<mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('max')">
|
|
{{ 'dashboard.max-margin-message' | translate }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
<mat-checkbox fxFlex formControlName="autoFillHeight" style="display: block; padding-bottom: 12px;">
|
|
{{ 'dashboard.autofill-height' | translate }}
|
|
</mat-checkbox>
|
|
<tb-color-input fxFlex
|
|
label="{{'dashboard.background-color' | translate}}"
|
|
icon="format_color_fill"
|
|
openOnInput
|
|
formControlName="backgroundColor">
|
|
</tb-color-input>
|
|
<tb-image-input fxFlex
|
|
label="{{'dashboard.background-image' | translate}}"
|
|
formControlName="backgroundImageUrl">
|
|
</tb-image-input>
|
|
<mat-form-field class="mat-block">
|
|
<mat-label translate>dashboard.background-size-mode</mat-label>
|
|
<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>
|
|
<small translate>dashboard.mobile-layout</small>
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs fxLayoutGap="8px" style="margin-top: 8px">
|
|
<mat-checkbox fxFlex formControlName="mobileAutoFillHeight">
|
|
{{ 'dashboard.autofill-height' | translate }}
|
|
</mat-checkbox>
|
|
<mat-form-field fxFlex class="mat-block">
|
|
<mat-label translate>dashboard.mobile-row-height</mat-label>
|
|
<input matInput formControlName="mobileRowHeight" type="number" step="any" min="5"
|
|
max="200" required>
|
|
<mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('required')">
|
|
{{ 'dashboard.mobile-row-height-required' | translate }}
|
|
</mat-error>
|
|
<mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('min')">
|
|
{{ 'dashboard.min-mobile-row-height-message' | translate }}
|
|
</mat-error>
|
|
<mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('max')">
|
|
{{ 'dashboard.max-mobile-row-height-message' | translate }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div mat-dialog-actions fxLayoutAlign="end center">
|
|
<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>
|