简柏林 / thingskit · Commits

Commit 9e9b0d7595c6731c1ebd785cafd73481c038c5c1

Authored by Chantsova Ekaterina
Committed by Andrew Shvayka
1 parent e253b644

Update widget settings

Inline Side-by-side
Showing 4 changed files with 127 additions and 103 deletions
... ... @@ -320,7 +320,7 @@
320 320 "templateHtml": "<tb-multiple-input-widget \n form-id=\"formId\"\n ctx=\"ctx\">\n</tb-multiple-input-widget>",
321 321 "templateCss": "",
322 322 "controllerScript": "let $scope;\r\nlet settings;\r\nlet attributeService;\r\nlet toast;\r\nlet utils;\r\nlet types;\r\n\r\nself.onInit = function() {\r\n var scope = self.ctx.$scope;\r\n var id = self.ctx.$scope.$injector.get('utils').guid();\r\n scope.formId = \"form-\"+id;\r\n scope.ctx = self.ctx;\r\n}\r\n\r\nself.onDataUpdated = function() {\r\n self.ctx.$scope.$broadcast('multiple-input-data-updated', self.ctx.$scope.formId);\r\n}\r\n\r\nself.onResize = function() {\r\n self.ctx.$scope.$broadcast('multiple-input-resize', self.ctx.$scope.formId);\r\n}\r\n",
323   - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"MultipleInput\",\n \"properties\": {\n \"widgetTitle\": {\n \"title\": \"Widget title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"showActionButtons\":{\n \"title\":\"Show action buttons\",\n \"type\":\"boolean\",\n \"default\": true\n },\n \"showResultMessage\":{\n \"title\":\"Show result message\",\n \"type\":\"boolean\",\n \"default\": true\n },\n \"fieldsAlignment\": {\n \"title\": \"Fields alignment\",\n \"type\": \"string\",\n \"default\": \"row\"\n },\n \"fieldsInRow\": {\n \"title\": \"Number of fields in the row\",\n \"type\": \"number\",\n \"default\": \"2\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"widgetTitle\",\n \"showActionButtons\",\n \"showResultMessage\",\n {\n \"key\": \"fieldsAlignment\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"row\",\n \"label\": \"Row (default)\"\n },\n {\n \"value\": \"column\",\n \"label\": \"Column\"\n }\n ]\n },\n \"fieldsInRow\"\n ]\n}",
  323 + "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"MultipleInput\",\n \"properties\": {\n \"widgetTitle\": {\n \"title\": \"Widget title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"showActionButtons\":{\n \"title\":\"Show action buttons\",\n \"type\":\"boolean\",\n \"default\": true\n },\n \"updateAllValues\": {\n \"title\":\"Update all values, not only modified (only if action buttons are visible)\",\n \"type\":\"boolean\",\n \"default\": false\n },\n \"showResultMessage\":{\n \"title\":\"Show result message\",\n \"type\":\"boolean\",\n \"default\": true\n },\n \"showGroupTitle\": {\n \"title\":\"Show title for group of fields, related to different entities\",\n \"type\":\"boolean\",\n \"default\": false\n },\n \"groupTitle\": {\n \"title\": \"Group title\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"fieldsAlignment\": {\n \"title\": \"Fields alignment\",\n \"type\": \"string\",\n \"default\": \"row\"\n },\n \"fieldsInRow\": {\n \"title\": \"Number of fields in the row\",\n \"type\": \"number\",\n \"default\": \"2\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"widgetTitle\",\n \"showActionButtons\",\n \"updateAllValues\",\n \"showResultMessage\",\n \"showGroupTitle\",\n \"groupTitle\",\n {\n \"key\": \"fieldsAlignment\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"row\",\n \"label\": \"Row (default)\"\n },\n {\n \"value\": \"column\",\n \"label\": \"Column\"\n }\n ]\n },\n \"fieldsInRow\"\n ]\n}",
324 324 "dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"dataKeyType\": {\n \"title\": \"Datakey type\",\n \"type\": \"string\",\n \"default\": \"server\"\n },\n \"dataKeyValueType\": {\n \"title\": \"Datakey value type\",\n \"type\": \"string\",\n \"default\": \"string\"\n },\n \"required\": {\n \"title\": \"Value is required\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"isEditable\": {\n \"title\": \"Ability to edit attribute\",\n \"type\": \"string\",\n \"default\": \"editable\"\n },\n \"disabledOnDataKey\": {\n \"title\": \"Disable on false value of another datakey (specify datakey name)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"dataKeyHidden\": {\n \"title\": \"Hide input field\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"step\": {\n \"title\": \"Step interval between values (only for numbers)\",\n \"type\": \"number\",\n \"default\": \"1\"\n },\n \"requiredErrorMessage\": {\n \"title\": \"'Required' error message\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"icon\": {\n \"title\": \"Icon to show before input cell\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n {\n \"key\": \"dataKeyType\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"server\",\n \"label\": \"Server attribute (default)\"\n },\n {\n \"value\": \"shared\",\n \"label\": \"Shared attribute\"\n },\n {\n \"value\": \"timeseries\",\n \"label\": \"Timeseries\"\n }\n ]\n },\n {\n \"key\": \"dataKeyValueType\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"string\",\n \"label\": \"String\"\n },\n {\n \"value\": \"double\",\n \"label\": \"Double\"\n },\n {\n \"value\": \"integer\",\n \"label\": \"Integer\"\n },\n {\n \"value\": \"booleanCheckbox\",\n \"label\": \"Boolean (Checkbox)\"\n },\n {\n \"value\": \"booleanSwitch\",\n \"label\": \"Boolean (Switch)\"\n },\n {\n \"value\": \"dateTime\",\n \"label\": \"Date & Time\"\n },\n {\n \"value\": \"date\",\n \"label\": \"Date\"\n },\n {\n \"value\": \"time\",\n \"label\": \"Time\"\n }\n ]\n },\n \"required\",\n {\n \"key\": \"isEditable\",\n \"type\": \"rc-select\",\n \"multiple\": false,\n \"items\": [\n {\n \"value\": \"editable\",\n \"label\": \"Editable (default)\"\n },\n {\n \"value\": \"disabled\",\n \"label\": \"Disabled\"\n },\n {\n \"value\": \"readonly\",\n \"label\": \"Read-only\"\n }\n ]\n },\n \"disabledOnDataKey\",\n \"dataKeyHidden\",\n \"step\",\n \"requiredErrorMessage\",\n\t\t{\n \t\t\"key\": \"icon\",\n\t\t\t\"type\": \"icon\"\n\t\t}\n ]\n}\n",
325 325 "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Sin\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.23592248334107624,\"funcBody\":\"return Math.round(1000*Math.sin(time/5000));\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Update Multiple Attributes\",\"dropShadow\":true,\"enableFullscreen\":false,\"enableDataExport\":false,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{}}"
326 326 }
... ...
... ... @@ -53,6 +53,7 @@ function MultipleInputWidgetController($q, $scope, $translate, attributeService,
53 53 vm.discardAll = discardAll;
54 54 vm.inputChanged = inputChanged;
55 55 vm.save = save;
  56 + vm.getGroupTitle = getGroupTitle;
56 57
57 58 $scope.$watch('vm.ctx', function () {
58 59 if (vm.ctx && vm.ctx.defaultSubscription) {
... ... @@ -114,7 +115,7 @@ function MultipleInputWidgetController($q, $scope, $translate, attributeService,
114 115 var serverAttributes = [], sharedAttributes = [], telemetry = [];
115 116 for (let j = 0; j < data[i].keys.length; j++) {
116 117 var key = data[i].keys[j];
117   - if (key.data.currentValue !== key.data.originalValue) {
  118 + if ((key.data.currentValue !== key.data.originalValue) || vm.settings.updateAllValues) {
118 119 var attribute = {
119 120 key: key.name
120 121 };
... ... @@ -131,7 +132,11 @@ function MultipleInputWidgetController($q, $scope, $translate, attributeService,
131 132 attribute.value = key.data.currentValue;
132 133 }
133 134 } else {
134   - attribute.value = key.data.currentValue;
  135 + if (key.data.currentValue === '') {
  136 + attribute.value = null;
  137 + } else {
  138 + attribute.value = key.data.currentValue;
  139 + }
135 140 }
136 141
137 142 switch (key.settings.dataKeyType) {
... ... @@ -201,6 +206,8 @@ function MultipleInputWidgetController($q, $scope, $translate, attributeService,
201 206
202 207 vm.ctx.widgetTitle = vm.widgetTitle;
203 208
  209 + vm.settings.groupTitle = vm.settings.groupTitle || "${entityName}";
  210 +
204 211 //For backward compatibility
205 212 if (angular.isUndefined(vm.settings.showActionButtons)) {
206 213 vm.settings.showActionButtons = true;
... ... @@ -329,4 +336,8 @@ function MultipleInputWidgetController($q, $scope, $translate, attributeService,
329 336 vm.changeAlignment = (vm.ctx.$container[0].offsetWidth < 620);
330 337 vm.smallWidthContainer = (vm.ctx.$container[0].offsetWidth < 420);
331 338 }
  339 +
  340 + function getGroupTitle(datasource) {
  341 + return utils.createLabelFromDatasource(datasource, vm.settings.groupTitle);
  342 + }
332 343 }
... ...
... ... @@ -18,6 +18,16 @@
18 18 overflow-x: hidden;
19 19 overflow-y: auto;
20 20
  21 + .fields-group {
  22 + padding: 0 8px;
  23 + margin: 10px 0;
  24 + border: 1px groove rgba(0, 0, 0, .25);
  25 +
  26 + legend {
  27 + color: rgba(0, 0, 0, .7);
  28 + }
  29 + }
  30 +
21 31 .input-field {
22 32 padding-right: 10px;
23 33
... ...
... ... @@ -17,118 +17,121 @@
17 17 -->
18 18 <form class="tb-multiple-input" name="multipleInputForm" ng-submit="vm.save()" novalidate autocomplete="off">
19 19 <div style="padding: 0 8px;" ng-if="vm.entityDetected && vm.isAllParametersValid">
20   - <div layout="row" ng-repeat="source in vm.sources" layout-wrap ng-class="{'vertical-alignment': vm.isVerticalAlignment || vm.changeAlignment}">
21   - <div ng-repeat="key in source.keys" ng-if="!key.settings.dataKeyHidden" ng-style="{'width': (vm.isVerticalAlignment || vm.changeAlignment) ? '100%' : vm.inputWidthSettings}">
22   - <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'string')">
23   - <md-input-container class="md-block">
24   - <label>{{key.label}}</label>
25   - <md-icon class="material-icons" ng-if="key.settings.icon">
26   - {{key.settings.icon}}
27   - </md-icon>
28   - <input name="{{key.name}}"
29   - ng-disabled="(key.settings.isEditable === 'disabled') || key.settings.disabledOnCondition"
30   - ng-readonly="key.settings.isEditable === 'readonly'"
31   - ng-model="key.data.currentValue"
32   - ng-required="key.settings.required"
33   - type="text"
34   - md-select-on-focus
35   - ng-blur="vm.inputChanged(source,key)">
36   - <div ng-messages="multipleInputForm[key.name].$error">
37   - <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
38   - </div>
39   - </md-input-container>
40   - </div>
41   - <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'double')">
42   - <md-input-container class="md-block">
43   - <label>{{key.label}}</label>
44   - <md-icon class="material-icons" ng-if="key.settings.icon">
45   - {{key.settings.icon}}
46   - </md-icon>
47   - <input name="{{key.name}}"
48   - ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
49   - ng-readonly="key.settings.isEditable === 'readonly'"
50   - ng-model="key.data.currentValue"
51   - ng-required="key.settings.required"
52   - type="number"
53   - step="key.settings.step"
54   - md-select-on-focus
55   - ng-blur="vm.inputChanged(source,key)">
56   - <div ng-messages="multipleInputForm[key.name].$error">
57   - <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
58   - </div>
59   - </md-input-container>
60   - </div>
61   - <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'integer')">
62   - <md-input-container class="md-block">
63   - <label>{{key.label}}</label>
64   - <md-icon class="material-icons" ng-if="key.settings.icon">
65   - {{key.settings.icon}}
66   - </md-icon>
67   - <input name="{{key.name}}"
68   - ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
69   - ng-readonly="key.settings.isEditable === 'readonly'"
70   - ng-model="key.data.currentValue"
71   - ng-required="key.settings.required"
72   - type="number"
73   - step="key.settings.step"
74   - md-select-on-focus
75   - ng-pattern="/^-?[0-9]+$/"
76   - ng-blur="vm.inputChanged(source,key)">
77   - <div ng-messages="multipleInputForm[key.name].$error">
78   - <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
79   - <div translate ng-message="pattern">value.invalid-integer-value</div>
80   - </div>
81   - </md-input-container>
82   - </div>
83   - <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'booleanCheckbox')" class="md-block">
  20 + <fieldset ng-repeat="source in vm.sources" ng-class="{'fields-group': vm.settings.showGroupTitle}">
  21 + <legend class="group-title" ng-if="vm.settings.showGroupTitle">{{ vm.getGroupTitle(source.datasource) }}</legend>
  22 + <div layout="row" layout-wrap ng-class="{'vertical-alignment': vm.isVerticalAlignment || vm.changeAlignment}">
  23 + <div ng-repeat="key in source.keys" ng-if="!key.settings.dataKeyHidden" ng-style="{'width': (vm.isVerticalAlignment || vm.changeAlignment) ? '100%' : vm.inputWidthSettings}">
  24 + <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'string')">
  25 + <md-input-container class="md-block">
  26 + <label>{{key.label}}</label>
  27 + <md-icon class="material-icons" ng-if="key.settings.icon">
  28 + {{key.settings.icon}}
  29 + </md-icon>
  30 + <input name="{{key.name}}"
  31 + ng-disabled="(key.settings.isEditable === 'disabled') || key.settings.disabledOnCondition"
  32 + ng-readonly="key.settings.isEditable === 'readonly'"
  33 + ng-model="key.data.currentValue"
  34 + ng-required="key.settings.required"
  35 + type="text"
  36 + md-select-on-focus
  37 + ng-blur="vm.inputChanged(source,key)">
  38 + <div ng-messages="multipleInputForm[key.name].$error">
  39 + <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
  40 + </div>
  41 + </md-input-container>
  42 + </div>
  43 + <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'double')">
  44 + <md-input-container class="md-block">
  45 + <label>{{key.label}}</label>
  46 + <md-icon class="material-icons" ng-if="key.settings.icon">
  47 + {{key.settings.icon}}
  48 + </md-icon>
  49 + <input name="{{key.name}}"
  50 + ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
  51 + ng-readonly="key.settings.isEditable === 'readonly'"
  52 + ng-model="key.data.currentValue"
  53 + ng-required="key.settings.required"
  54 + type="number"
  55 + step="key.settings.step"
  56 + md-select-on-focus
  57 + ng-blur="vm.inputChanged(source,key)">
  58 + <div ng-messages="multipleInputForm[key.name].$error">
  59 + <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
  60 + </div>
  61 + </md-input-container>
  62 + </div>
  63 + <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'integer')">
  64 + <md-input-container class="md-block">
  65 + <label>{{key.label}}</label>
  66 + <md-icon class="material-icons" ng-if="key.settings.icon">
  67 + {{key.settings.icon}}
  68 + </md-icon>
  69 + <input name="{{key.name}}"
  70 + ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
  71 + ng-readonly="key.settings.isEditable === 'readonly'"
  72 + ng-model="key.data.currentValue"
  73 + ng-required="key.settings.required"
  74 + type="number"
  75 + step="key.settings.step"
  76 + md-select-on-focus
  77 + ng-pattern="/^-?[0-9]+$/"
  78 + ng-blur="vm.inputChanged(source,key)">
  79 + <div ng-messages="multipleInputForm[key.name].$error">
  80 + <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
  81 + <div translate ng-message="pattern">value.invalid-integer-value</div>
  82 + </div>
  83 + </md-input-container>
  84 + </div>
  85 + <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'booleanCheckbox')" class="md-block">
84 86 <md-checkbox name="{{key.name}}"
85 87 ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
86 88 ng-model="key.data.currentValue"
87 89 ng-change="vm.inputChanged(source,key)">
88 90 {{key.label}}
89 91 </md-checkbox>
90   - </div>
91   - <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'booleanSwitch')" class="md-block">
  92 + </div>
  93 + <div class="input-field" ng-if="(key.settings.dataKeyValueType === 'booleanSwitch')" class="md-block">
92 94 <md-switch name="{{key.name}}"
93   - ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
94   - ng-model="key.data.currentValue"
95   - ng-change="vm.inputChanged(source,key)"
96   - aria-label="{{key.label}}"
97   - md-invert>
  95 + ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
  96 + ng-model="key.data.currentValue"
  97 + ng-change="vm.inputChanged(source,key)"
  98 + aria-label="{{key.label}}"
  99 + md-invert>
98 100 {{key.label}}
99 101 </md-switch>
100   - </div>
101   - <div ng-if="(key.settings.dataKeyValueType === 'dateTime') ||
102   - (key.settings.dataKeyValueType === 'date') ||
103   - (key.settings.dataKeyValueType === 'time')"
104   - class="md-block input-field date-time-input" layout="column">
105   - <label class="date-time-input__label">{{key.label}}</label>
106   - <div layout="row" ng-class="{'vertically-aligned': vm.smallWidthContainer}">
107   - <mdp-date-picker name="{{key.name + 'Date'}}"
108   - ng-if="key.settings.dataKeyValueType !== 'time'"
109   - mdp-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
110   - ng-model="key.data.currentValue"
111   - ng-change="vm.inputChanged(source,key)"
112   - mdp-placeholder="{{ 'widgets.input-widgets.date' | translate }}">
113   - <div ng-messages="multipleInputForm[key.name].$error">
114   - <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
115   - </div>
116   - </mdp-date-picker>
117   - <mdp-time-picker name="{{key.name + 'Time'}}"
118   - ng-if="key.settings.dataKeyValueType !== 'date'"
119   - mdp-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
120   - ng-model="key.data.currentValue"
121   - ng-change="vm.inputChanged(source,key)"
122   - mdp-placeholder="{{ 'widgets.input-widgets.time' | translate }}"
123   - mdp-auto-switch="true">
124   - <div ng-messages="multipleInputForm[key.name].$error">
125   - <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
126   - </div>
127   - </mdp-time-picker>
  102 + </div>
  103 + <div ng-if="(key.settings.dataKeyValueType === 'dateTime') ||
  104 + (key.settings.dataKeyValueType === 'date') ||
  105 + (key.settings.dataKeyValueType === 'time')"
  106 + class="md-block input-field date-time-input" layout="column">
  107 + <label class="date-time-input__label">{{key.label}}</label>
  108 + <div layout="row" ng-class="{'vertically-aligned': vm.smallWidthContainer}">
  109 + <mdp-date-picker name="{{key.name + 'Date'}}"
  110 + ng-if="key.settings.dataKeyValueType !== 'time'"
  111 + mdp-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
  112 + ng-model="key.data.currentValue"
  113 + ng-change="vm.inputChanged(source,key)"
  114 + mdp-placeholder="{{ 'widgets.input-widgets.date' | translate }}">
  115 + <div ng-messages="multipleInputForm[key.name].$error">
  116 + <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
  117 + </div>
  118 + </mdp-date-picker>
  119 + <mdp-time-picker name="{{key.name + 'Time'}}"
  120 + ng-if="key.settings.dataKeyValueType !== 'date'"
  121 + mdp-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
  122 + ng-model="key.data.currentValue"
  123 + ng-change="vm.inputChanged(source,key)"
  124 + mdp-placeholder="{{ 'widgets.input-widgets.time' | translate }}"
  125 + mdp-auto-switch="true">
  126 + <div ng-messages="multipleInputForm[key.name].$error">
  127 + <div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
  128 + </div>
  129 + </mdp-time-picker>
  130 + </div>
128 131 </div>
129 132 </div>
130 133 </div>
131   - </div>
  134 + </fieldset>
132 135 <div class="md-padding" layout="row" layout-align="end center" ng-if="vm.entityDetected && vm.settings.showActionButtons">
133 136 <md-button class="md-primary" ng-click="vm.discardAll()" style="max-height: 50px; margin-right:20px;" ng-disabled="!multipleInputForm.$dirty">
134 137 {{ 'action.undo' | translate }}
... ...