thingsboard-aplcache
Changes
ui/src/app/api/widget.service.js 3(+2 -1)
ui/src/app/extension/extension-table.scss 12(+12 -0)
ui/src/app/extension/extension-table.tpl.html 23(+12 -11)
ui/src/app/widget/lib/extensions-table-widget.js 117(+117 -0)
Details
ui/src/app/api/widget.service.js 3(+2 -1)
diff --git a/ui/src/app/api/widget.service.js b/ui/src/app/api/widget.service.js
index 0df17b7..3c74ecb 100644
--- a/ui/src/app/api/widget.service.js
+++ b/ui/src/app/api/widget.service.js
@@ -21,6 +21,7 @@ import thingsboardLedLight from '../components/led-light.directive';
import thingsboardTimeseriesTableWidget from '../widget/lib/timeseries-table-widget';
import thingsboardAlarmsTableWidget from '../widget/lib/alarms-table-widget';
import thingsboardEntitiesTableWidget from '../widget/lib/entities-table-widget';
+import thingsboardExtensionsTableWidget from '../widget/lib/extensions-table-widget';
import thingsboardRpcWidgets from '../widget/lib/rpc';
@@ -42,7 +43,7 @@ import thingsboardTypes from '../common/types.constant';
import thingsboardUtils from '../common/utils.service';
export default angular.module('thingsboard.api.widget', ['oc.lazyLoad', thingsboardLedLight, thingsboardTimeseriesTableWidget,
- thingsboardAlarmsTableWidget, thingsboardEntitiesTableWidget, thingsboardRpcWidgets, thingsboardTypes, thingsboardUtils])
+ thingsboardAlarmsTableWidget, thingsboardEntitiesTableWidget, thingsboardExtensionsTableWidget, thingsboardRpcWidgets, thingsboardTypes, thingsboardUtils])
.factory('widgetService', WidgetService)
.name;
diff --git a/ui/src/app/extension/extension-table.directive.js b/ui/src/app/extension/extension-table.directive.js
index 8ad8275..7fe7139 100644
--- a/ui/src/app/extension/extension-table.directive.js
+++ b/ui/src/app/extension/extension-table.directive.js
@@ -34,7 +34,9 @@ export default function ExtensionTableDirective() {
scope: true,
bindToController: {
entityId: '=',
- entityType: '@'
+ entityType: '@',
+ inWidget: '@?',
+ ctx: '=?'
},
controller: ExtensionTableController,
controllerAs: 'vm',
@@ -70,7 +72,6 @@ function ExtensionTableController($scope, $filter, $document, $translate, types,
vm.reloadExtensions = reloadExtensions;
vm.updateExtensions = updateExtensions;
-
$scope.$watch("vm.entityId", function(newVal) {
if (newVal) {
if ($scope.subscriber) {
@@ -92,13 +93,50 @@ function ExtensionTableController($scope, $filter, $document, $translate, types,
}
});
+ $scope.$watch('vm.selectedExtensions.length', function (newLength) {
+ var selectionMode = newLength ? true : false;
+ if (vm.ctx) {
+ if (selectionMode) {
+ vm.ctx.hideTitlePanel = true;
+ $scope.$emit("selectedExtensions", true);
+ } else if (vm.query.search == null) {
+ vm.ctx.hideTitlePanel = false;
+ $scope.$emit("selectedExtensions", false);
+ }
+ }
+ });
+
+ $scope.$on("showSearch", function($event, source) {
+ if(source.entityId == vm.entityId) {
+ enterFilterMode();
+ $scope.$emit("filterMode", true);
+ }
+ });
+ $scope.$on("refreshExtensions", function($event, source) {
+ if(source.entityId == vm.entityId) {
+ reloadExtensions();
+ }
+ });
+ $scope.$on("addExtension", function($event, source) {
+ if(source.entityId == vm.entityId) {
+ addExtension();
+ }
+ });
+
function enterFilterMode() {
vm.query.search = '';
+ if(vm.inWidget) {
+ vm.ctx.hideTitlePanel = true;
+ }
}
function exitFilterMode() {
vm.query.search = null;
updateExtensions();
+ if(vm.inWidget) {
+ vm.ctx.hideTitlePanel = false;
+ $scope.$emit("filterMode", false);
+ }
}
function onReorder() {
@@ -256,8 +294,7 @@ function ExtensionTableController($scope, $filter, $document, $translate, types,
vm.extensions = result.slice(startIndex, startIndex + vm.query.limit);
vm.extensionsJSON = angular.toJson(vm.extensions);
- checkForSync()
-
+ checkForSync();
}
function subscribeForClientAttributes() {
@@ -320,7 +357,6 @@ function ExtensionTableController($scope, $filter, $document, $translate, types,
d = d.getFullYear() +'/'+ addZero(d.getMonth()+1) +'/'+ addZero(d.getDate()) + ' ' + addZero(d.getHours()) + ':' + addZero(d.getMinutes()) +':'+ addZero(d.getSeconds());
return d;
-
function addZero(num) {
if ((angular.isNumber(num) && num < 10) || (angular.isString(num) && num.length === 1)) {
num = '0' + num;
ui/src/app/extension/extension-table.scss 12(+12 -0)
diff --git a/ui/src/app/extension/extension-table.scss b/ui/src/app/extension/extension-table.scss
index ee2a570..ac57d4a 100644
--- a/ui/src/app/extension/extension-table.scss
+++ b/ui/src/app/extension/extension-table.scss
@@ -20,6 +20,18 @@
min-height: 0;
}
+.extension-table {
+ .sync-widget {
+ max-height: 90px;
+ overflow: hidden;
+ }
+ .toolbar-widget {
+ min-height: 39px;
+ max-height: 39px;
+ }
+}
+
+
.extension__syncStatus--black {
color: #000000!important;
}
ui/src/app/extension/extension-table.tpl.html 23(+12 -11)
diff --git a/ui/src/app/extension/extension-table.tpl.html b/ui/src/app/extension/extension-table.tpl.html
index 428a146..e155e9e 100644
--- a/ui/src/app/extension/extension-table.tpl.html
+++ b/ui/src/app/extension/extension-table.tpl.html
@@ -17,9 +17,9 @@
-->
<md-content flex class="md-padding tb-absolute-fill tb-data-table extension-table" layout="column">
- <div layout="column" class="md-whiteframe-z1">
- <md-toolbar class="md-table-toolbar md-default" ng-show="!vm.selectedExtensions.length
- && vm.query.search === null">
+ <div layout="column" class="md-whiteframe-z1" ng-class="{'tb-absolute-fill' : vm.inWidget}">
+ <md-toolbar ng-if="!vm.inWidget" class="md-table-toolbar md-default" ng-show="!vm.selectedExtensions.length
+ && vm.query.search === null">
<div class="md-toolbar-tools">
<span translate>{{ 'extension.extensions' }}</span>
<span flex></span>
@@ -44,7 +44,7 @@
</div>
</md-toolbar>
<md-toolbar class="md-table-toolbar md-default" ng-show="!vm.selectedExtensions.length
- && vm.query.search != null"">
+ && vm.query.search != null" ng-class="{'toolbar-widget' : vm.inWidget}">
<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>
@@ -58,13 +58,13 @@
</md-input-container>
<md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.exitFilterMode()">
<md-icon aria-label="{{ 'action.close' | translate }}" class="material-icons">close</md-icon>
- <md-tooltip md-direction="top">
+ <md-tooltip md-direction="{{vm.ctx.dashboard.isWidgetExpanded ? 'bottom' : 'top'}}">
{{ 'action.close' | translate }}
</md-tooltip>
</md-button>
</div>
</md-toolbar>
- <md-toolbar class="md-table-toolbar alternate" ng-show="vm.selectedExtensions.length">
+ <md-toolbar class="md-table-toolbar alternate" ng-show="vm.selectedExtensions.length" ng-class="{'toolbar-widget' : vm.inWidget}">
<div class="md-toolbar-tools">
<span translate
translate-values="{count: vm.selectedExtensions.length}"
@@ -72,14 +72,14 @@
<span flex></span>
<md-button class="md-icon-button" ng-click="vm.deleteExtensions($event)">
<md-icon>delete</md-icon>
- <md-tooltip md-direction="top">
+ <md-tooltip md-direction="{{vm.ctx.dashboard.isWidgetExpanded ? 'bottom' : 'top'}}">
{{ 'action.delete' | translate }}
</md-tooltip>
</md-button>
</div>
</md-toolbar>
- <div class="md-padding" flex layout="row">
+ <div class="md-padding" flex layout="row" ng-class="{'sync-widget' : vm.inWidget}">
<md-input-container flex="50" class="md-block">
<label translate>extension.sync.status</label>
<input ng-model="vm.syncStatus"
@@ -97,7 +97,7 @@
</md-input-container>
</div>
- <md-table-container>
+ <md-table-container flex>
<table md-table md-row-select multiple="" ng-model="vm.selectedExtensions" md-progress="vm.extensionsDeferred.promise">
<thead md-head md-order="vm.query.order" md-on-reorder="vm.onReorder">
<tr md-row>
@@ -117,7 +117,7 @@
{{ 'extension.edit' | translate }}
</md-tooltip>
</md-button>
- <md-button class="md-icon-button" aria-label="{{ 'action.delete' | translate }}" ng-click="vm.deleteExtension($event, extension)"> <!-- add click-function -->
+ <md-button class="md-icon-button" aria-label="{{ 'action.delete' | translate }}" ng-click="vm.deleteExtension($event, extension)">
<md-icon aria-label="{{ 'action.delete' | translate }}" class="material-icons">delete</md-icon>
<md-tooltip md-direction="top">
{{ 'extension.delete' | translate }}
@@ -127,11 +127,12 @@
</tr>
</tbody>
</table>
+ <md-divider ng-if="vm.inWidget"></md-divider>
</md-table-container>
<md-table-pagination md-limit="vm.query.limit" md-limit-options="[5, 10, 15]"
md-page="vm.query.page" md-total="{{vm.extensionsCount}}"
md-on-paginate="vm.onPaginate" md-page-select>
</md-table-pagination>
</div>
- <div></div> <!-- div for testing values -->
+
</md-content>
\ No newline at end of file
ui/src/app/widget/lib/extensions-table-widget.js 117(+117 -0)
diff --git a/ui/src/app/widget/lib/extensions-table-widget.js b/ui/src/app/widget/lib/extensions-table-widget.js
new file mode 100644
index 0000000..ded52ff
--- /dev/null
+++ b/ui/src/app/widget/lib/extensions-table-widget.js
@@ -0,0 +1,117 @@
+/*
+ * 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.
+ */
+
+import './extensions-table-widget.scss';
+
+/* eslint-disable import/no-unresolved, import/default */
+
+import extensionsTableWidgetTemplate from './extensions-table-widget.tpl.html';
+
+/* eslint-enable import/no-unresolved, import/default */
+
+export default angular.module('thingsboard.widgets.extensionsTableWidget', [])
+ .directive('tbExtensionsTableWidget', ExtensionsTableWidget)
+ .name;
+
+/*@ngInject*/
+function ExtensionsTableWidget() {
+ return {
+ restrict: "E",
+ scope: true,
+ bindToController: {
+ ctx: '='
+ },
+ controller: ExtensionsTableWidgetController,
+ controllerAs: 'vm',
+ templateUrl: extensionsTableWidgetTemplate
+ };
+}
+
+/*@ngInject*/
+function ExtensionsTableWidgetController($scope, $translate, utils) {
+ var vm = this;
+
+ vm.datasources = null;
+ vm.tabsHidden = false;
+
+ $scope.$watch('vm.ctx', function() {
+ if (vm.ctx && vm.ctx.defaultSubscription) {
+ vm.settings = vm.ctx.settings;
+ vm.subscription = vm.ctx.defaultSubscription;
+ vm.datasources = vm.subscription.datasources;
+ initializeConfig();
+ updateDatasources();
+ }
+ });
+
+ function initializeConfig() {
+
+ if (vm.settings.extensionsTitle && vm.settings.extensionsTitle.length) {
+ vm.extensionsTitle = utils.customTranslation(vm.settings.extensionsTitle, vm.settings.extensionsTitle);
+ } else {
+ vm.extensionsTitle = $translate.instant('extension.extensions');
+ }
+ vm.ctx.widgetTitle = vm.extensionsTitle;
+
+ vm.ctx.widgetActions = [vm.addAction, vm.searchAction, vm.refreshAction];
+ }
+
+ function updateDatasources() {
+
+ var datasource = vm.datasources[0];
+ vm.selectedSource = vm.datasources[0];
+ vm.ctx.widgetTitle = utils.createLabelFromDatasource(datasource, vm.extensionsTitle);
+ }
+
+ vm.changeSelectedSource = function(source) {
+ vm.selectedSource = source;
+ }
+
+ vm.searchAction = {
+ name: "action.search",
+ show: true,
+ onAction: function() {
+ $scope.$broadcast("showSearch", vm.selectedSource);
+ },
+ icon: "search"
+ };
+
+ vm.refreshAction = {
+ name: "action.refresh",
+ show: true,
+ onAction: function() {
+ $scope.$broadcast("refreshExtensions", vm.selectedSource);
+ },
+ icon: "refresh"
+ }
+
+ vm.addAction = {
+ name: "action.add",
+ show: true,
+ onAction: function() {
+ $scope.$broadcast("addExtension", vm.selectedSource);
+ },
+ icon: "add"
+ }
+
+ $scope.$on("filterMode", function($event, mode) {
+ vm.tabsHidden = mode;
+ });
+
+ $scope.$on("selectedExtensions", function($event, mode) {
+ vm.tabsHidden = mode;
+ });
+}
\ No newline at end of file
diff --git a/ui/src/app/widget/lib/extensions-table-widget.scss b/ui/src/app/widget/lib/extensions-table-widget.scss
new file mode 100644
index 0000000..26ab5d9
--- /dev/null
+++ b/ui/src/app/widget/lib/extensions-table-widget.scss
@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+
+tb-extension-table {
+ md-content {
+ background-color: #fff;
+ }
+}
+md-tabs.hide-tabs-menu {
+ md-tabs-wrapper {
+ display: none;
+ }
+ md-tabs-content-wrapper {
+ top: 0 !important;
+ }
+}
\ No newline at end of file
diff --git a/ui/src/app/widget/lib/extensions-table-widget.tpl.html b/ui/src/app/widget/lib/extensions-table-widget.tpl.html
new file mode 100644
index 0000000..0671938
--- /dev/null
+++ b/ui/src/app/widget/lib/extensions-table-widget.tpl.html
@@ -0,0 +1,27 @@
+<!--
+
+ 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-tabs id="tabs" md-border-bottom flex class="tb-absolute-fill" ng-class="{'hide-tabs-menu': vm.datasources.length == 1 || vm.tabsHidden}">
+ <md-tab ng-repeat="source in vm.datasources" label="{{ source.name }}" md-on-select="vm.changeSelectedSource(source)">
+ <tb-extension-table flex
+ entity-id="source.entityId"
+ entity-type="{{source.entityType}}"
+ in-widget="true"
+ ctx="vm.ctx">
+ </tb-extension-table>
+ </md-tab>
+</md-tabs>
\ No newline at end of file