简柏林 / thingskit · Commits

Commit e0ffd509afe6e268aa3560353563ec2b1236a2d5

Authored by Igor Kulikov
Committed by GitHub
2 parents 9b7d1080 6bf6aa45

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…
Inline Side-by-side
Showing 3 changed files with 44 additions and 5 deletions
... ... @@ -111,7 +111,7 @@
111 111 "resources": [],
112 112 "templateHtml": "<tb-timeseries-table-widget \n table-id=\"tableId\"\n ctx=\"ctx\">\n</tb-timeseries-table-widget>",
113 113 "templateCss": "",
114   - "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}",
  114 + "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}",
115 115 "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}",
116 116 "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}",
117 117 "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 @@
134 134 }
135 135 }
136 136 ]
137   -}
\ No newline at end of file
  137 +}
... ...
... ... @@ -58,6 +58,9 @@ function TimeseriesTableWidgetController($element, $scope, $filter, $timeout, ty
58 58
59 59 vm.enterFilterMode = enterFilterMode;
60 60 vm.exitFilterMode = exitFilterMode;
  61 + vm.onRowClick = onRowClick;
  62 + vm.onActionButtonClick = onActionButtonClick;
  63 + vm.actionCellDescriptors = [];
61 64
62 65 function enterFilterMode () {
63 66 vm.query.search = '';
... ... @@ -93,6 +96,7 @@ function TimeseriesTableWidgetController($element, $scope, $filter, $timeout, ty
93 96
94 97 function initialize() {
95 98 vm.ctx.widgetActions = [ vm.searchAction ];
  99 + vm.actionCellDescriptors = vm.ctx.actionsApi.getActionDescriptors('actionCellButton');
96 100 vm.showTimestamp = vm.settings.showTimestamp !== false;
97 101 var origColor = vm.widgetConfig.color || 'rgba(0, 0, 0, 0.87)';
98 102 var defaultColor = tinycolor(origColor);
... ... @@ -179,6 +183,28 @@ function TimeseriesTableWidgetController($element, $scope, $filter, $timeout, ty
179 183 updatePage(source);
180 184 }
181 185
  186 + function onRowClick($event, row) {
  187 + if ($event) {
  188 + $event.stopPropagation();
  189 + }
  190 + var descriptors = vm.ctx.actionsApi.getActionDescriptors('rowClick');
  191 + if (descriptors.length) {
  192 + var entityId = vm.ctx.activeEntityInfo.entityId;
  193 + var entityName = vm.ctx.activeEntityInfo.entityName;
  194 + vm.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName, row);
  195 + }
  196 + }
  197 +
  198 + function onActionButtonClick($event, row, actionDescriptor) {
  199 + if ($event) {
  200 + $event.stopPropagation();
  201 + }
  202 + var entityId = vm.ctx.activeEntityInfo.entityId;
  203 + var entityName = vm.ctx.activeEntityInfo.entityName;
  204 + vm.ctx.actionsApi.handleWidgetAction($event, actionDescriptor, entityId, entityName, row);
  205 + }
  206 +
  207 +
182 208 vm.cellStyle = function(source, index, value) {
183 209 var style = {};
184 210 if (index > 0) {
... ... @@ -402,4 +428,4 @@ function TimeseriesTableWidgetController($element, $scope, $filter, $timeout, ty
402 428 updatePage(source);
403 429 }
404 430
405   -}
\ No newline at end of file
  431 +}
... ...
... ... @@ -60,13 +60,26 @@
60 60 </thead>
61 61
62 62 <tbody md-body>
63   - <tr md-row ng-repeat="row in source.ts.data track by $index">
  63 + <tr md-row ng-repeat="row in source.ts.data track by $index" ng-click="vm.onRowClick($event, row)">
64 64 <td ng-show="$index > 0 || ($index === 0 && vm.showTimestamp)"
65 65 md-cell
66 66 ng-repeat="d in row track by $index"
67 67 ng-style="vm.cellStyle(source, $index, d)"
68 68 ng-bind-html="vm.cellContent(source, $index, row, d)"
69 69 ></td>
  70 + <td md-cell class="tb-action-cell"
  71 + ng-style="{minWidth: vm.actionCellDescriptors.length*36+'px',
  72 + maxWidth: vm.actionCellDescriptors.length*36+'px',
  73 + width: vm.actionCellDescriptors.length*36+'px'}">
  74 + <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
  75 + aria-label="{{ actionDescriptor.displayName }}"
  76 + ng-click="vm.onActionButtonClick($event, row, actionDescriptor)" ng-disabled="$root.loading">
  77 + <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
  78 + <md-tooltip md-direction="top">
  79 + {{ actionDescriptor.displayName }}
  80 + </md-tooltip>
  81 + </md-button>
  82 + </td>
70 83 </tr>
71 84 </tbody>
72 85 </table>
... ... @@ -86,4 +99,4 @@
86 99 md-page-select>
87 100 </md-table-pagination>
88 101 </div>
89   -</div>
\ No newline at end of file
  102 +</div>
... ...