118 lines
5.9 KiB
HTML
118 lines
5.9 KiB
HTML
<!--
|
|
|
|
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 layout="column" class="tb-progress-cover" layout-align="center center"
|
|
ng-show="(vm.loading() || vm.dashboardLoading) && !vm.isEdit">
|
|
<md-progress-circular md-mode="indeterminate" class="md-warn" md-diameter="100"></md-progress-circular>
|
|
</md-content>
|
|
<md-menu md-position-mode="target target" tb-mousepoint-menu>
|
|
<md-content id="gridster-parent" class="tb-dashboard-content" flex layout-wrap ng-click="" tb-contextmenu="vm.openDashboardContextMenu($event, $mdOpenMousepointMenu)">
|
|
<div ng-style="vm.dashboardStyle" id="gridster-background" style="height: auto; min-height: 100%;">
|
|
<div id="gridster-child" gridster="vm.gridsterOpts">
|
|
<ul>
|
|
<!-- ng-click="widgetClicked($event, widget)" -->
|
|
<li gridster-item="widget" ng-repeat="widget in vm.widgets">
|
|
<md-menu md-position-mode="target target" tb-mousepoint-menu>
|
|
<div tb-expand-fullscreen
|
|
expand-button-id="expand-button" on-fullscreen-changed="vm.onWidgetFullscreenChanged(expanded, widget)" layout="column" class="tb-widget md-whiteframe-4dp"
|
|
ng-class="{'tb-highlighted': vm.isHighlighted(widget), 'tb-not-highlighted': vm.isNotHighlighted(widget)}"
|
|
tb-mousedown="vm.widgetMouseDown($event, widget)"
|
|
tb-mousemove="vm.widgetMouseMove($event, widget)"
|
|
tb-mouseup="vm.widgetMouseUp($event, widget)"
|
|
ng-click=""
|
|
tb-contextmenu="vm.openWidgetContextMenu($event, widget, $mdOpenMousepointMenu)"
|
|
ng-style="{cursor: 'pointer',
|
|
color: vm.widgetColor(widget),
|
|
backgroundColor: vm.widgetBackgroundColor(widget),
|
|
padding: vm.widgetPadding(widget)}">
|
|
<div class="tb-widget-title" layout="column" ng-show="vm.showWidgetTitle(widget) || vm.hasTimewindow(widget)">
|
|
<span ng-show="vm.showWidgetTitle(widget)" class="md-subhead">{{widget.config.title}}</span>
|
|
<tb-timewindow ng-if="vm.hasTimewindow(widget)" ng-model="widget.config.timewindow"></tb-timewindow>
|
|
</div>
|
|
<div class="tb-widget-actions" layout="row" layout-align="start center">
|
|
<md-button id="expand-button"
|
|
ng-show="!vm.isEdit"
|
|
aria-label="{{ 'fullscreen.fullscreen' | translate }}"
|
|
class="md-icon-button md-primary"></md-button>
|
|
<md-button ng-show="vm.isEditActionEnabled && !vm.isWidgetExpanded"
|
|
ng-disabled="vm.loading()"
|
|
class="md-icon-button md-primary"
|
|
ng-click="vm.editWidget($event, widget)"
|
|
aria-label="{{ 'widget.edit' | translate }}">
|
|
<md-tooltip md-direction="top">
|
|
{{ 'widget.edit' | translate }}
|
|
</md-tooltip>
|
|
<md-icon class="material-icons">
|
|
edit
|
|
</md-icon>
|
|
</md-button>
|
|
<md-button ng-show="vm.isExportActionEnabled && !vm.isWidgetExpanded"
|
|
ng-disabled="vm.loading()"
|
|
class="md-icon-button md-primary"
|
|
ng-click="vm.exportWidget($event, widget)"
|
|
aria-label="{{ 'widget.export' | translate }}">
|
|
<md-tooltip md-direction="top">
|
|
{{ 'widget.export' | translate }}
|
|
</md-tooltip>
|
|
<md-icon class="material-icons">
|
|
file_download
|
|
</md-icon>
|
|
</md-button>
|
|
<md-button ng-show="vm.isRemoveActionEnabled && !vm.isWidgetExpanded"
|
|
ng-disabled="vm.loading()"
|
|
class="md-icon-button md-primary"
|
|
ng-click="vm.removeWidget($event, widget)"
|
|
aria-label="{{ 'widget.remove' | translate }}">
|
|
<md-tooltip md-direction="top">
|
|
{{ 'widget.remove' | translate }}
|
|
</md-tooltip>
|
|
<md-icon class="material-icons">
|
|
close
|
|
</md-icon>
|
|
</md-button>
|
|
</div>
|
|
<div flex layout="column" class="tb-widget-content">
|
|
<div flex tb-widget
|
|
locals="{ visibleRect: vm.visibleRect, widget: widget, deviceAliasList: vm.deviceAliasList, isPreview: vm.isEdit }">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<md-menu-content id="menu" width="4" ng-mouseleave="$mdCloseMousepointMenu()">
|
|
<md-menu-item ng-repeat ="item in vm.widgetContextMenuItems">
|
|
<md-button ng-disabled="!item.enabled" ng-click="item.action(vm.widgetContextMenuEvent, widget)">
|
|
<md-icon ng-if="item.icon" md-menu-align-target aria-label="{{ item.value | translate }}" class="material-icons">{{item.icon}}</md-icon>
|
|
<span translate>{{item.value}}</span>
|
|
<span ng-if="item.shortcut" class="tb-alt-text"> {{ item.shortcut | keyboardShortcut }}</span>
|
|
</md-button>
|
|
</md-menu-item>
|
|
</md-menu-content>
|
|
</md-menu>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</md-content>
|
|
<md-menu-content id="menu" width="4" ng-mouseleave="$mdCloseMousepointMenu()">
|
|
<md-menu-item ng-repeat ="item in vm.contextMenuItems">
|
|
<md-button ng-disabled="!item.enabled" ng-click="item.action(vm.contextMenuEvent)">
|
|
<md-icon ng-if="item.icon" md-menu-align-target aria-label="{{ item.value | translate }}" class="material-icons">{{item.icon}}</md-icon>
|
|
<span translate>{{item.value}}</span>
|
|
<span ng-if="item.shortcut" class="tb-alt-text"> {{ item.shortcut | keyboardShortcut }}</span>
|
|
</md-button>
|
|
</md-menu-item>
|
|
</md-menu-content>
|
|
</md-menu> |