Add rowClick and CellButton action sources to timeseries_table widget. The actionHadler will receive selected row[] array as additionalParams
This commit is contained in:
pgrisu
parent
12280f817a
commit
6bf6aa4541
@ -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 @@
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user