Merge pull request #1672 from pgrisu/features/add_row_and_cell_action_sources_on…

…_timeseries_table_widget Add rowClick and actionButtonClick action sources to timeseries_table widget…

Merge pull request #1672 from pgrisu/features/add_row_and_cell_action_sources_on…
…_timeseries_table_widget Add rowClick and actionButtonClick action sources to timeseries_table widget…
Igor Kulikov · GitHub
2 parents 9b7d1080 6bf6aa45
Showing 3 changed files with 44 additions and 5 deletions
application/src/main/data/json/system/widget_bundles/cards.json
ui/src/app/widget/lib/timeseries-table-widget.js
ui/src/app/widget/lib/timeseries-table-widget.tpl.html
--- a/application/src/main/data/json/system/widget_bundles/cards.json
View file @e0ffd50
+++ b/application/src/main/data/json/system/widget_bundles/cards.json
View file @e0ffd50
@@ -111,7 +111,7 @@
         "resources": [],
         "templateHtml": "<tb-timeseries-table-widget \n    table-id=\"tableId\"\n    ctx=\"ctx\">\n</tb-timeseries-table-widget>",
         "templateCss": "",
-        "controllerScript": "self.onInit = function() {\n    var scope = self.ctx.$scope;\n    var id = self.ctx.$scope.$injector.get('utils').guid();\n    scope.tableId = \"table-\"+id;\n    scope.ctx = self.ctx;\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.$broadcast('timeseries-table-data-updated', self.ctx.$scope.tableId);\n}\n\nself.onDestroy = function() {\n}",
+        "controllerScript": "self.onInit = function() {\n    var scope = self.ctx.$scope;\n    var id = self.ctx.$scope.$injector.get('utils').guid();\n    scope.tableId = \"table-\"+id;\n    scope.ctx = self.ctx;\n}\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.$broadcast('timeseries-table-data-updated', self.ctx.$scope.tableId);\n}\n\nself.actionSources = function() {\n    return {\n        'actionCellButton': {\n            name: 'widget-action.action-cell-button',\n            multiple: true\n        },\n        'rowClick': {\n            name: 'widget-action.row-click',\n            multiple: false\n        }\n    };\n}\n\nself.onDestroy = function() {\n}",
         "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"TimeseriesTableSettings\",\n        \"properties\": {\n            \"showTimestamp\": {\n                \"title\": \"Display timestamp column\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },\n            \"displayPagination\": {\n                \"title\": \"Display pagination\",\n                \"type\": \"boolean\",\n                \"default\": true\n            },            \n            \"defaultPageSize\": {\n                \"title\": \"Default page size\",\n                \"type\": \"number\",\n                \"default\": 10\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"showTimestamp\",\n        \"displayPagination\",\n        \"defaultPageSize\"\n    ]\n}",
         "dataKeySettingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"DataKeySettings\",\n        \"properties\": {\n            \"useCellStyleFunction\": {\n                \"title\": \"Use cell style function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellStyleFunction\": {\n                \"title\": \"Cell style function: f(value)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"useCellContentFunction\": {\n                \"title\": \"Use cell content function\",\n                \"type\": \"boolean\",\n                \"default\": false\n            },\n            \"cellContentFunction\": {\n                \"title\": \"Cell content function: f(value, rowData, filter)\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            }\n        },\n        \"required\": []\n    },\n    \"form\": [\n        \"useCellStyleFunction\",\n        {\n            \"key\": \"cellStyleFunction\",\n            \"type\": \"javascript\"\n        },\n        \"useCellContentFunction\",\n        {\n            \"key\": \"cellContentFunction\",\n            \"type\": \"javascript\"\n        }\n    ]\n}",
         "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature  °C\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n    var percent = (value + 60)/120 * 100;\\n    var color = tinycolor.mix('blue', 'red', amount = percent);\\n    color.setAlpha(.5);\\n    return {\\n      paddingLeft: '20px',\\n      color: '#ffffff',\\n      background: color.toRgbString(),\\n      fontSize: '18px'\\n    };\\n} else {\\n    return {};\\n}\"},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Humidity, %\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n    var percent = value;\\n    var backgroundColor = tinycolor('blue');\\n    backgroundColor.setAlpha(value/100);\\n    var color = 'blue';\\n    if (value > 50) {\\n        color = 'white';\\n    }\\n    \\n    return {\\n      paddingLeft: '20px',\\n      color: color,\\n      background: backgroundColor.toRgbString(),\\n      fontSize: '18px'\\n    };\\n} else {\\n    return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 20 - 10;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":60000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"showTimestamp\":true,\"displayPagination\":true,\"defaultPageSize\":10},\"title\":\"Timeseries table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":false,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{}}"
@@ -134,4 +134,4 @@
       }
     }
   ]
-}
+}
--- a/ui/src/app/widget/lib/timeseries-table-widget.js
View file @e0ffd50
+++ b/ui/src/app/widget/lib/timeseries-table-widget.js
View file @e0ffd50
@@ -58,6 +58,9 @@ function TimeseriesTableWidgetController($element, $scope, $filter, $timeout, ty
     vm.enterFilterMode = enterFilterMode;
     vm.exitFilterMode = exitFilterMode;
+    vm.onRowClick = onRowClick;
+    vm.onActionButtonClick = onActionButtonClick;
+    vm.actionCellDescriptors = [];
     function enterFilterMode () {
         vm.query.search = '';
@@ -93,6 +96,7 @@ function TimeseriesTableWidgetController($element, $scope, $filter, $timeout, ty
     function initialize() {
         vm.ctx.widgetActions = [ vm.searchAction ];
+        vm.actionCellDescriptors = vm.ctx.actionsApi.getActionDescriptors('actionCellButton');
         vm.showTimestamp = vm.settings.showTimestamp !== false;
         var origColor = vm.widgetConfig.color || 'rgba(0, 0, 0, 0.87)';
         var defaultColor = tinycolor(origColor);
@@ -179,6 +183,28 @@ function TimeseriesTableWidgetController($element, $scope, $filter, $timeout, ty
         updatePage(source);
     }
+    function onRowClick($event, row) {
+        if ($event) {
+            $event.stopPropagation();
+        }
+        var descriptors = vm.ctx.actionsApi.getActionDescriptors('rowClick');
+        if (descriptors.length) {
+						var entityId = vm.ctx.activeEntityInfo.entityId;
+            var entityName = vm.ctx.activeEntityInfo.entityName;
+            vm.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName, row);
+        }
+    }
+
+    function onActionButtonClick($event, row, actionDescriptor) {
+        if ($event) {
+            $event.stopPropagation();
+        }
+				var entityId = vm.ctx.activeEntityInfo.entityId;
+        var entityName = vm.ctx.activeEntityInfo.entityName;
+        vm.ctx.actionsApi.handleWidgetAction($event, actionDescriptor, entityId, entityName, row);
+    }
+
+
     vm.cellStyle = function(source, index, value) {
         var style = {};
         if (index > 0) {
@@ -402,4 +428,4 @@ function TimeseriesTableWidgetController($element, $scope, $filter, $timeout, ty
         updatePage(source);
     }
-}
+}
--- a/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
View file @e0ffd50
+++ b/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
View file @e0ffd50
@@ -60,13 +60,26 @@
                         </thead>
                         <tbody md-body>
-                            <tr md-row ng-repeat="row in source.ts.data track by $index">
+                            <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)">
                                 <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)"
                                     md-cell
                                     ng-repeat="d in row track by $index"
                                     ng-style="vm.cellStyle(source, $index, d)"
                                     ng-bind-html="vm.cellContent(source, $index, row, d)"
                                 ></td>
+                                <td md-cell class="tb-action-cell"
+                                    ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px',
+                                               maxWidth: vm.actionCellDescriptors.length*36+'px',
+                                               width: vm.actionCellDescriptors.length*36+'px'}">
+                                    <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
+                                               aria-label="{{ actionDescriptor.displayName }}"
+                                               ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading">
+                                       <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
+                                       <md-tooltip md-direction="top">
+                                           {{ actionDescriptor.displayName }}
+                                       </md-tooltip>
+                                    </md-button>
+                                </td>
                             </tr>
                         </tbody>
                     </table>
@@ -86,4 +99,4 @@
                              md-page-select>
         </md-table-pagination>
     </div>
-</div>
+</div>