299 lines
18 KiB
HTML
299 lines
18 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2018 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.
|
|
|
|
-->
|
|
<md-tabs ng-class="{'tb-headless': (widgetType === types.widgetType.static.value && !displayAdvanced())}"
|
|
id="tabs" md-border-bottom flex class="tb-widget-config tb-absolute-fill"
|
|
md-selected="selectedTab">
|
|
<md-tab label="{{ 'widget-config.data' | translate }}"
|
|
ng-show="widgetType !== types.widgetType.static.value">
|
|
<md-content class="md-padding" layout="column">
|
|
<div ng-show="widgetType === types.widgetType.timeseries.value || widgetType === types.widgetType.alarm.value" layout='column' layout-align="center"
|
|
layout-gt-sm='row' layout-align-gt-sm="start center">
|
|
<md-checkbox flex aria-label="{{ 'widget-config.use-dashboard-timewindow' | translate }}"
|
|
ng-model="useDashboardTimewindow">{{ 'widget-config.use-dashboard-timewindow' | translate }}
|
|
</md-checkbox>
|
|
<section flex layout="row" layout-align="start center" style="margin-bottom: 16px;">
|
|
<span ng-class="{'tb-disabled-label': useDashboardTimewindow}" translate style="padding-right: 8px;">widget-config.timewindow</span>
|
|
<tb-timewindow ng-disabled="useDashboardTimewindow" as-button="true" aggregation="{{ widgetType === types.widgetType.timeseries.value }}"
|
|
flex ng-model="timewindow"></tb-timewindow>
|
|
</section>
|
|
</div>
|
|
<div ng-show="widgetType === types.widgetType.alarm.value" layout='column' layout-align="center"
|
|
layout-gt-sm='row' layout-align-gt-sm="start center">
|
|
<md-input-container class="md-block" flex>
|
|
<label translate>alarm.alarm-status</label>
|
|
<md-select ng-model="alarmSearchStatus" style="padding-bottom: 24px;">
|
|
<md-option ng-repeat="searchStatus in types.alarmSearchStatus" ng-value="searchStatus">
|
|
{{ ('alarm.search-status.' + searchStatus) | translate }}
|
|
</md-option>
|
|
</md-select>
|
|
</md-input-container>
|
|
<md-input-container flex class="md-block">
|
|
<label translate>alarm.polling-interval</label>
|
|
<input ng-required="widgetType === types.widgetType.alarm.value"
|
|
type="number"
|
|
step="1"
|
|
min="1"
|
|
name="alarmsPollingInterval"
|
|
ng-model="alarmsPollingInterval"/>
|
|
<div ng-messages="theForm.alarmsPollingInterval.$error" multiple md-auto-hide="false">
|
|
<div ng-message="required" translate>alarm.polling-interval-required</div>
|
|
<div ng-message="min" translate>alarm.min-polling-interval-message</div>
|
|
</div>
|
|
</md-input-container>
|
|
</div>
|
|
<v-accordion id="datasources-accordion" control="datasourcesAccordion" class="vAccordion--default"
|
|
ng-show="widgetType !== types.widgetType.rpc.value
|
|
&& widgetType !== types.widgetType.alarm.value
|
|
&& widgetType !== types.widgetType.static.value
|
|
&& isDataEnabled">
|
|
<v-pane id="datasources-pane" expanded="true">
|
|
<v-pane-header>
|
|
<div layout="column">
|
|
<div>{{ 'widget-config.datasources' | translate }}</div>
|
|
<div class="md-caption" style="color: rgba(0,0,0,0.57);" ng-if="typeParameters.maxDatasources > -1"
|
|
translate="widget-config.maximum-datasources"
|
|
translate-values="{count: typeParameters.maxDatasources}"
|
|
translate-interpolation="messageformat"
|
|
></div>
|
|
</div>
|
|
</v-pane-header>
|
|
<v-pane-content>
|
|
<div ng-if="datasources.length === 0">
|
|
<span translate layout-align="center center"
|
|
class="tb-prompt">datasource.add-datasource-prompt</span>
|
|
</div>
|
|
<div ng-if="datasources.length > 0">
|
|
<div flex layout="row" layout-align="start center">
|
|
<span flex="5"></span>
|
|
<div flex layout="row" layout-align="start center"
|
|
style="padding: 0 0 0 10px; margin: 5px;">
|
|
<span translate style="min-width: 110px;">widget-config.datasource-type</span>
|
|
<span hide show-gt-sm translate flex
|
|
style="padding-left: 10px;">widget-config.datasource-parameters</span>
|
|
<span style="min-width: 40px;"></span>
|
|
</div>
|
|
</div>
|
|
<div style="overflow: auto; padding-bottom: 15px;">
|
|
<div flex layout="row" layout-align="start center"
|
|
ng-repeat="datasource in datasources">
|
|
<span flex="5">{{$index + 1}}.</span>
|
|
<div class="md-whiteframe-4dp" flex layout="row" layout-align="start center"
|
|
style="padding: 0 0 0 10px; margin: 5px;">
|
|
<tb-datasource flex ng-model="datasource.value"
|
|
widget-type="widgetType"
|
|
max-data-keys="typeParameters.maxDataKeys"
|
|
opt-data-keys="typeParameters.dataKeysOptional"
|
|
alias-controller="aliasController"
|
|
functions-only="functionsOnly"
|
|
datakey-settings-schema="datakeySettingsSchema"
|
|
generate-data-key="generateDataKey(chip,type)"
|
|
fetch-entity-keys="fetchEntityKeys({entityAliasId: entityAliasId, query: query, type: type})"
|
|
on-create-entity-alias="onCreateEntityAlias({event: event, alias: alias})"></tb-datasource>
|
|
<md-button ng-disabled="$root.loading" class="md-icon-button md-primary"
|
|
style="min-width: 40px;"
|
|
ng-click="removeDatasource($event, datasource)"
|
|
aria-label="{{ 'action.remove' | translate }}">
|
|
<md-tooltip md-direction="top">
|
|
{{ 'widget-config.remove-datasource' | translate }}
|
|
</md-tooltip>
|
|
<md-icon aria-label="{{ 'action.delete' | translate }}"
|
|
class="material-icons">
|
|
close
|
|
</md-icon>
|
|
</md-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div flex layout="row" layout-align="start center">
|
|
<md-button ng-show="typeParameters.maxDatasources == -1 || datasources.length < typeParameters.maxDatasources" ng-disabled="$root.loading" class="md-primary md-raised"
|
|
ng-click="addDatasource($event)" aria-label="{{ 'action.add' | translate }}">
|
|
<md-tooltip md-direction="top">
|
|
{{ 'widget-config.add-datasource' | translate }}
|
|
</md-tooltip>
|
|
<md-icon class="material-icons">add</md-icon>
|
|
<span translate>action.add</span>
|
|
</md-button>
|
|
</div>
|
|
</v-pane-content>
|
|
</v-pane>
|
|
</v-accordion>
|
|
<v-accordion id="target-devices-accordion" control="targetDevicesAccordion" class="vAccordion--default"
|
|
ng-show="widgetType === types.widgetType.rpc.value && isDataEnabled">
|
|
<v-pane id="target-devices-pane" expanded="true">
|
|
<v-pane-header>
|
|
{{ 'widget-config.target-device' | translate }}
|
|
</v-pane-header>
|
|
<v-pane-content style="padding: 0 5px;">
|
|
<tb-entity-alias-select flex
|
|
tb-required="widgetType === types.widgetType.rpc.value && !widgetEditMode"
|
|
alias-controller="aliasController"
|
|
allowed-entity-types="[types.entityType.device]"
|
|
ng-model="targetDeviceAlias.value"
|
|
on-create-entity-alias="onCreateEntityAlias({event: event, alias: alias, allowedEntityTypes: allowedEntityTypes})">
|
|
</tb-entity-alias-select>
|
|
</v-pane-content>
|
|
</v-pane>
|
|
</v-accordion>
|
|
<v-accordion id="alarm-source-accordion" control="alarmSourceAccordion" class="vAccordion--default"
|
|
ng-if="widgetType === types.widgetType.alarm.value && isDataEnabled">
|
|
<v-pane id="alarm-source-pane" expanded="true">
|
|
<v-pane-header>
|
|
{{ 'widget-config.alarm-source' | translate }}
|
|
</v-pane-header>
|
|
<v-pane-content style="padding: 0 5px;">
|
|
<tb-datasource flex
|
|
ng-model="alarmSource.value"
|
|
widget-type="widgetType"
|
|
functions-only="functionsOnly"
|
|
alias-controller="aliasController"
|
|
datakey-settings-schema="datakeySettingsSchema"
|
|
generate-data-key="generateDataKey(chip,type)"
|
|
on-create-entity-alias="onCreateEntityAlias({event: event, alias: alias})"></tb-datasource>
|
|
</v-pane-content>
|
|
</v-pane>
|
|
</v-accordion>
|
|
</md-content>
|
|
</md-tab>
|
|
<md-tab label="{{ 'widget-config.settings' | translate }}">
|
|
<div id="settings-tab">
|
|
<md-content class="md-padding" layout="column">
|
|
<span translate>widget-config.general-settings</span>
|
|
<div layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center">
|
|
<md-input-container flex class="md-block">
|
|
<label translate>widget-config.title</label>
|
|
<input name="title" ng-model="title">
|
|
</md-input-container>
|
|
<div flex ng-show="showTitle">
|
|
<label translate>widget-config.title-style</label>
|
|
<div ui-ace="styleEditorOptions" ng-model="titleStyle" ng-style="{ minHeight: '100px' }">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center">
|
|
<div layout="row" layout-padding>
|
|
<md-checkbox aria-label="{{ 'widget-config.display-title' | translate }}"
|
|
ng-model="showTitle">{{ 'widget-config.display-title' | translate }}
|
|
</md-checkbox>
|
|
</div>
|
|
<div layout="row" layout-padding>
|
|
<md-checkbox aria-label="{{ 'widget-config.drop-shadow' | translate }}"
|
|
ng-model="dropShadow">{{ 'widget-config.drop-shadow' | translate }}
|
|
</md-checkbox>
|
|
</div>
|
|
<div layout="row" layout-padding>
|
|
<md-checkbox aria-label="{{ 'widget-config.enable-fullscreen' | translate }}"
|
|
ng-model="enableFullscreen">{{ 'widget-config.enable-fullscreen' | translate }}
|
|
</md-checkbox>
|
|
</div>
|
|
<div flex>
|
|
<label translate>widget-config.widget-style</label>
|
|
<div ui-ace="styleEditorOptions" ng-model="widgetStyle" ng-style="{ minHeight: '100px' }">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center">
|
|
<div flex
|
|
md-color-picker
|
|
ng-model="backgroundColor"
|
|
label="{{ 'widget-config.background-color' | translate }}"
|
|
icon="format_color_fill"
|
|
default="#fff"
|
|
md-color-clear-button="false"
|
|
open-on-input="true"
|
|
md-color-generic-palette="false"
|
|
md-color-history="false"
|
|
></div>
|
|
<div flex
|
|
md-color-picker
|
|
ng-model="color"
|
|
label="{{ 'widget-config.text-color' | translate }}"
|
|
icon="format_color_fill"
|
|
default="rgba(0, 0, 0, 0.87)"
|
|
md-color-clear-button="false"
|
|
open-on-input="true"
|
|
md-color-generic-palette="false"
|
|
md-color-history="false"
|
|
></div>
|
|
<md-input-container flex>
|
|
<label translate>widget-config.padding</label>
|
|
<input ng-model="padding">
|
|
</md-input-container>
|
|
<md-input-container flex>
|
|
<label translate>widget-config.margin</label>
|
|
<input ng-model="margin">
|
|
</md-input-container>
|
|
</div>
|
|
<div layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center">
|
|
<md-input-container flex>
|
|
<label translate>widget-config.units</label>
|
|
<input name="units" ng-model="units">
|
|
</md-input-container>
|
|
<md-input-container flex>
|
|
<label translate>widget-config.decimals</label>
|
|
<input ng-model="decimals" type="number" min="0" max="15" step="1" ng-pattern="/^\d*$/">
|
|
</md-input-container>
|
|
</div>
|
|
<div ng-show="widgetType === types.widgetType.timeseries.value ||
|
|
widgetType === types.widgetType.latest.value" layout='column' layout-align="center"
|
|
layout-gt-sm='row' layout-align-gt-sm="start center">
|
|
<md-checkbox flex aria-label="{{ 'widget-config.display-legend' | translate }}"
|
|
ng-model="showLegend">{{ 'widget-config.display-legend' | translate }}
|
|
</md-checkbox>
|
|
<section flex layout="row" layout-align="start center" style="margin-bottom: 16px;">
|
|
<tb-legend-config ng-disabled="!showLegend" flex ng-model="legendConfig"></tb-legend-config>
|
|
</section>
|
|
</div>
|
|
<span translate>widget-config.mobile-mode-settings</span>
|
|
<div layout='column' layout-align="center" layout-gt-sm='row' layout-align-gt-sm="start center">
|
|
<md-input-container flex>
|
|
<label translate>widget-config.order</label>
|
|
<input ng-model="mobileOrder" type="number" step="1" ng-pattern="/^-?[0-9]+$/">
|
|
</md-input-container>
|
|
<md-input-container flex>
|
|
<label translate>widget-config.height</label>
|
|
<input ng-model="mobileHeight" min="1" max="10" type="number" step="1" ng-pattern="/^\d*$/">
|
|
</md-input-container>
|
|
</div>
|
|
</md-content>
|
|
</div>
|
|
</md-tab>
|
|
<md-tab ng-if="displayAdvanced()" label="{{ 'widget-config.advanced' | translate }}">
|
|
<md-content flex class="md-padding tb-advanced-widget-config" layout="column">
|
|
<ng-form flex name="ngform"
|
|
layout="column"
|
|
layout-padding>
|
|
<tb-json-form flex schema="currentSettingsSchema"
|
|
form="currentSettingsForm"
|
|
model="currentSettings"
|
|
form-control="ngform">
|
|
</tb-json-form>
|
|
</ng-form>
|
|
</md-content>
|
|
</md-tab>
|
|
<md-tab label="{{ 'widget-config.actions' | translate }}">
|
|
<md-content class="md-padding" layout="column">
|
|
<tb-manage-widget-actions
|
|
action-sources="actionSources"
|
|
widget-actions="actions"
|
|
fetch-dashboard-states="fetchDashboardStates({query: query})">
|
|
</tb-manage-widget-actions>
|
|
</md-content>
|
|
</md-tab>
|
|
</md-tabs>
|