124 lines
6.3 KiB
HTML
124 lines
6.3 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" ng-disabled="!vm.loading() && !vm.dashboardLoading || vm.isEdit" 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-class="vm.dashboardClass" id="gridster-background" style="height: auto; min-height: 100%;">
|
|
<div id="gridster-child" gridster="vm.gridsterOpts">
|
|
<ul>
|
|
<li gridster-item="vm.widgetItemMap" class="tb-noselect" ng-repeat="widget in vm.widgets">
|
|
<md-menu md-position-mode="target target" tb-mousepoint-menu>
|
|
<div tb-expand-fullscreen
|
|
fullscreen-background-style="vm.dashboardStyle"
|
|
expand-button-id="expand-button"
|
|
expand-button-size="20"
|
|
on-fullscreen-changed="vm.onWidgetFullscreenChanged(expanded, widget)"
|
|
layout="column"
|
|
class="tb-widget"
|
|
ng-class="{'tb-highlighted': vm.isHighlighted(widget),
|
|
'tb-not-highlighted': vm.isNotHighlighted(widget),
|
|
'md-whiteframe-4dp': vm.dropWidgetShadow(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" layout-align="center start" ng-show="vm.showWidgetTitle(widget) || vm.hasTimewindow(widget)">
|
|
<span ng-show="vm.showWidgetTitle(widget)" ng-style="vm.widgetTitleStyle(widget)" class="md-subhead">{{widget.config.title}}</span>
|
|
<tb-timewindow aggregation 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 && vm.enableWidgetFullscreen(widget)"
|
|
aria-label="{{ 'fullscreen.fullscreen' | translate }}"
|
|
class="md-icon-button"></md-button>
|
|
<md-button ng-show="vm.isEditActionEnabled && !vm.isWidgetExpanded"
|
|
ng-disabled="vm.loading()"
|
|
class="md-icon-button"
|
|
ng-click="vm.editWidget($event, widget)"
|
|
aria-label="{{ 'widget.edit' | translate }}">
|
|
<md-tooltip md-direction="top">
|
|
{{ 'widget.edit' | translate }}
|
|
</md-tooltip>
|
|
<ng-md-icon size="20" icon="edit"></ng-md-icon>
|
|
</md-button>
|
|
<md-button ng-show="vm.isExportActionEnabled && !vm.isWidgetExpanded"
|
|
ng-disabled="vm.loading()"
|
|
class="md-icon-button"
|
|
ng-click="vm.exportWidget($event, widget)"
|
|
aria-label="{{ 'widget.export' | translate }}">
|
|
<md-tooltip md-direction="top">
|
|
{{ 'widget.export' | translate }}
|
|
</md-tooltip>
|
|
<ng-md-icon size="20" icon="file_download"></ng-md-icon>
|
|
</md-button>
|
|
<md-button ng-show="vm.isRemoveActionEnabled && !vm.isWidgetExpanded"
|
|
ng-disabled="vm.loading()"
|
|
class="md-icon-button"
|
|
ng-click="vm.removeWidget($event, widget)"
|
|
aria-label="{{ 'widget.remove' | translate }}">
|
|
<md-tooltip md-direction="top">
|
|
{{ 'widget.remove' | translate }}
|
|
</md-tooltip>
|
|
<ng-md-icon size="20" icon="close"></ng-md-icon>
|
|
</md-button>
|
|
</div>
|
|
<div flex layout="column" class="tb-widget-content">
|
|
<div flex tb-widget
|
|
locals="{ visibleRect: vm.visibleRect,
|
|
widget: widget,
|
|
aliasesInfo: vm.aliasesInfo,
|
|
isEdit: vm.isEdit,
|
|
stDiff: vm.stDiff,
|
|
dashboardTimewindow: vm.dashboardTimewindow,
|
|
dashboardTimewindowApi: vm.dashboardTimewindowApi }">
|
|
</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> |