dashboardjavacloudcoapiotiot-analyticsiot-platformiot-solutionskafkalwm2mmicroservicesmiddlewaremqttnettyplatformsnmpthingsboardvisualizationwebsocketswidgets
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
11 KiB
209 lines
11 KiB
<!--
|
|
|
|
Copyright © 2016-2017 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-content flex class="md-padding tb-absolute-fill" layout="column">
|
|
<section ng-show="!disableAttributeScopeSelection">
|
|
<md-input-container class="md-block" style="width: 200px;">
|
|
<label translate>attribute.attributes-scope</label>
|
|
<md-select ng-model="attributeScope" ng-disabled="loading() || attributeScopeSelectionReadonly">
|
|
<md-option ng-repeat="scope in attributeScopes" ng-value="scope">
|
|
{{scope.name | translate}}
|
|
</md-option>
|
|
</md-select>
|
|
</md-input-container>
|
|
</section>
|
|
<div class="md-whiteframe-z1" ng-class="{flex: mode==='widget'}">
|
|
<md-toolbar class="md-table-toolbar md-default" ng-show="mode==='default'
|
|
&& !selectedAttributes.length
|
|
&& query.search === null">
|
|
<div class="md-toolbar-tools">
|
|
<span translate>{{ attributeScope.name }}</span>
|
|
<span flex></span>
|
|
<md-button ng-show="!attributeScope.clientSide" class="md-icon-button" ng-click="addAttribute($event)">
|
|
<md-icon>add</md-icon>
|
|
<md-tooltip md-direction="top">
|
|
{{ 'action.add' | translate }}
|
|
</md-tooltip>
|
|
</md-button>
|
|
<md-button class="md-icon-button" ng-click="enterFilterMode()">
|
|
<md-icon>search</md-icon>
|
|
<md-tooltip md-direction="top">
|
|
{{ 'action.search' | translate }}
|
|
</md-tooltip>
|
|
</md-button>
|
|
<md-button ng-show="!attributeScope.clientSide" class="md-icon-button" ng-click="getEntityAttributes()">
|
|
<md-icon>refresh</md-icon>
|
|
<md-tooltip md-direction="top">
|
|
{{ 'action.refresh' | translate }}
|
|
</md-tooltip>
|
|
</md-button>
|
|
</div>
|
|
</md-toolbar>
|
|
<md-toolbar class="md-table-toolbar md-default" ng-show="mode==='default'
|
|
&& !selectedAttributes.length
|
|
&& query.search != null">
|
|
<div class="md-toolbar-tools">
|
|
<md-button class="md-icon-button" aria-label="{{ 'action.search' | translate }}">
|
|
<md-icon aria-label="{{ 'action.search' | translate }}" class="material-icons">search</md-icon>
|
|
<md-tooltip md-direction="top">
|
|
{{ 'action.search' | translate }}
|
|
</md-tooltip>
|
|
</md-button>
|
|
<md-input-container flex>
|
|
<label> </label>
|
|
<input ng-model="query.search" placeholder="{{ 'common.enter-search' | translate }}"/>
|
|
</md-input-container>
|
|
<md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="exitFilterMode()">
|
|
<md-icon aria-label="{{ 'action.close' | translate }}" class="material-icons">close</md-icon>
|
|
<md-tooltip md-direction="top">
|
|
{{ 'action.close' | translate }}
|
|
</md-tooltip>
|
|
</md-button>
|
|
</div>
|
|
</md-toolbar>
|
|
<md-toolbar class="md-table-toolbar alternate" ng-show="mode==='default' && selectedAttributes.length">
|
|
<div class="md-toolbar-tools">
|
|
<span translate="{{attributeScope === types.latestTelemetry
|
|
? 'attribute.selected-telemetry'
|
|
: 'attribute.selected-attributes'}}"
|
|
translate-values="{count: selectedAttributes.length}"
|
|
translate-interpolation="messageformat"></span>
|
|
<span flex></span>
|
|
<md-button ng-show="!attributeScope.clientSide" class="md-icon-button" ng-click="deleteAttributes($event)">
|
|
<md-icon>delete</md-icon>
|
|
<md-tooltip md-direction="top">
|
|
{{ 'action.delete' | translate }}
|
|
</md-tooltip>
|
|
</md-button>
|
|
<md-button class="md-accent md-hue-2 md-raised" ng-click="enterWidgetMode()">
|
|
<md-tooltip md-direction="top">
|
|
{{ 'attribute.show-on-widget' | translate }}
|
|
</md-tooltip>
|
|
<md-icon>now_widgets</md-icon>
|
|
<span translate>attribute.show-on-widget</span>
|
|
</md-button>
|
|
</div>
|
|
</md-toolbar>
|
|
<md-toolbar class="md-table-toolbar alternate" ng-show="mode==='widget'">
|
|
<div class="md-toolbar-tools">
|
|
<div flex layout="row" layout-align="start">
|
|
<span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
|
|
<tb-widgets-bundle-select flex-offset="5"
|
|
flex
|
|
ng-model="widgetsBundle"
|
|
select-first-bundle="false"
|
|
select-bundle-alias="selectedWidgetsBundleAlias">
|
|
</tb-widgets-bundle-select>
|
|
</div>
|
|
<md-button ng-show="widgetsList.length > 0" class="md-accent md-hue-2 md-raised" ng-click="addWidgetToDashboard($event)">
|
|
<md-tooltip md-direction="top">
|
|
{{ 'attribute.add-to-dashboard' | translate }}
|
|
</md-tooltip>
|
|
<md-icon>dashboard</md-icon>
|
|
<span translate>attribute.add-to-dashboard</span>
|
|
</md-button>
|
|
<md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="exitWidgetMode()">
|
|
<md-icon aria-label="{{ 'action.close' | translate }}" class="material-icons">close</md-icon>
|
|
<md-tooltip md-direction="top">
|
|
{{ 'action.close' | translate }}
|
|
</md-tooltip>
|
|
</md-button>
|
|
</div>
|
|
</md-toolbar>
|
|
<md-table-container ng-show="mode!='widget'">
|
|
<table class="tb-attribute-table" md-table md-row-select multiple="" ng-model="selectedAttributes" md-progress="attributesDeferred.promise">
|
|
<thead md-head md-order="query.order" md-on-reorder="onReorder">
|
|
<tr md-row>
|
|
<th md-column md-order-by="lastUpdateTs"><span translate>attribute.last-update-time</span></th>
|
|
<th md-column md-order-by="key"><span translate>attribute.key</span></th>
|
|
<th md-column><span translate>attribute.value</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody md-body>
|
|
<tr md-row md-select="attribute" md-select-id="key" md-auto-select ng-repeat="attribute in attributes.data">
|
|
<td md-cell>{{attribute.lastUpdateTs | date : 'yyyy-MM-dd HH:mm:ss'}}</td>
|
|
<td md-cell>{{attribute.key}}</td>
|
|
<td md-cell class="tb-value-cell" ng-click="editAttribute($event, attribute)">
|
|
<span>{{attribute.value}}</span>
|
|
<span ng-show="!attributeScope.clientSide"><ng-md-icon size="16" icon="edit"></ng-md-icon></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</md-table-container>
|
|
<md-table-pagination ng-show="mode!='widget'" md-limit="query.limit" md-limit-options="[5, 10, 15]"
|
|
md-page="query.page" md-total="{{attributes.count}}"
|
|
md-on-paginate="onPaginate" md-page-select>
|
|
</md-table-pagination>
|
|
<ul flex rn-carousel ng-if="mode==='widget'" class="widgets-carousel"
|
|
rn-carousel-index="widgetsCarousel.index"
|
|
rn-carousel-buffered
|
|
rn-carousel-transition="fadeAndSlide"
|
|
rn-swipe-disabled="true">
|
|
<li ng-repeat="widgets in widgetsList">
|
|
<tb-dashboard
|
|
alias-controller="aliasController"
|
|
widgets="widgets"
|
|
columns="20"
|
|
is-edit="false"
|
|
is-mobile-disabled="true"
|
|
is-edit-action-enabled="false"
|
|
is-remove-action-enabled="false">
|
|
</tb-dashboard>
|
|
</li>
|
|
<span translate ng-if="widgetsLoaded &&
|
|
widgetsList.length === 0 &&
|
|
widgetsBundle"
|
|
layout-align="center center"
|
|
style="text-transform: uppercase; display: flex;"
|
|
class="md-headline tb-absolute-fill">widgets-bundle.empty</span>
|
|
<span translate ng-if="!widgetsBundle"
|
|
layout-align="center center"
|
|
style="text-transform: uppercase; display: flex;"
|
|
class="md-headline tb-absolute-fill">widget.select-widgets-bundle</span>
|
|
<div ng-show="widgetsList.length > 1"
|
|
style="position: absolute; left: 0; height: 100%;" layout="column" layout-align="center">
|
|
<md-button ng-show="widgetsCarousel.index > 0"
|
|
class="md-icon-button"
|
|
ng-click="prevWidget()">
|
|
<md-icon>navigate_before</md-icon>
|
|
<md-tooltip md-direction="top">
|
|
{{ 'attribute.prev-widget' | translate }}
|
|
</md-tooltip>
|
|
</md-button>
|
|
</div>
|
|
<div ng-show="widgetsList.length > 1"
|
|
style="position: absolute; right: 0; height: 100%;" layout="column" layout-align="center">
|
|
<md-button ng-show="widgetsCarousel.index < widgetsList.length-1"
|
|
class="md-icon-button"
|
|
ng-click="nextWidget()">
|
|
<md-icon>navigate_next</md-icon>
|
|
<md-tooltip md-direction="top">
|
|
{{ 'attribute.next-widget' | translate }}
|
|
</md-tooltip>
|
|
</md-button>
|
|
</div>
|
|
<div style="position: absolute; bottom: 0; width: 100%; font-size: 24px;" layout="row" layout-align="center">
|
|
<div rn-carousel-indicators
|
|
ng-if="widgetsList.length > 1"
|
|
slides="widgetsList"
|
|
rn-carousel-index="widgetsCarousel.index">
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</md-content>
|
|
|