简柏林 / thingskit · Commits

Commit ae85dd66851955f46a5abf2f5526ea14cb4a2660

Authored by Sergey Tarnavskiy
1 parent f5c80afa

add new widget bundle and collapsed accordion validation

Inline Side-by-side
Showing 8 changed files with 99 additions and 35 deletions
  1 +{
  2 + "widgetsBundle": {
  3 + "alias": "gateway_widgets",
  4 + "title": "Gateway widgets",
  5 + "image": null
  6 + },
  7 + "widgetTypes": [
  8 + {
  9 + "alias": "extension_configuration_widget",
  10 + "name": "Extensions table",
  11 + "descriptor": {
  12 + "type": "latest",
  13 + "sizeX": 9,
  14 + "sizeY": 6.5,
  15 + "resources": [],
  16 + "templateHtml": "<tb-extensions-table-widget \n ctx=\"ctx\">\n</tb-extensions-table-widget>",
  17 + "templateCss": "#container {\n overflow: auto;\n}",
  18 + "controllerScript": "self.onInit = function() {\n var scope = self.ctx.$scope;\n scope.ctx = self.ctx;\n}\n\nself.onDataUpdated = function() {\n}\n\nself.onResize = function() {\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1\n };\n}\n\nself.onDestroy = function() {\n}\n",
  19 + "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"ExtensionTableSettings\",\n \"properties\": {\n \"extensionsTitle\": {\n \"title\": \"Extension table title\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"extensionsTitle\"\n ]\n}",
  20 + "dataKeySettingsSchema": "{}\n",
  21 + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{},\"title\":\"Extensions table\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"18px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{}}"
  22 + }
  23 + }
  24 + ]
  25 +}
\ No newline at end of file
... ...
... ... @@ -120,6 +120,18 @@ export default function ExtensionFormHttpDirective($compile, $templateCache, $tr
120 120 }
121 121 }
122 122 };
  123 +
  124 + scope.collapseValidation = function(index, id) {
  125 + var invalidState = angular.element('#'+id+':has(.ng-invalid)');
  126 + if(invalidState.length) {
  127 + invalidState.addClass('inner-invalid');
  128 + }
  129 + };
  130 +
  131 + scope.expandValidation = function (index, id) {
  132 + var invalidState = angular.element('#'+id);
  133 + invalidState.removeClass('inner-invalid');
  134 + };
123 135
124 136 $compile(element.contents())(scope);
125 137 };
... ...
... ... @@ -22,7 +22,7 @@
22 22 </md-card-title-text>
23 23 </md-card-title>
24 24 <md-card-content>
25   - <v-accordion id="http-converter-configs-accordion" class="vAccordion--default">
  25 + <v-accordion id="http-converter-configs-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
26 26 <v-pane id="http-converters-pane" expanded="true">
27 27 <v-pane-header>
28 28 {{ 'extension.converter-configurations' | translate }}
... ... @@ -55,8 +55,8 @@
55 55 <label translate>extension.token</label>
56 56 <input name="httpToken" ng-model="config.token" parse-to-null>
57 57 </md-input-container>
58   - <v-accordion id="http-converters-accordion" class="vAccordion--default">
59   - <v-pane id="http-converters-pane" expanded="true">
  58 + <v-accordion id="http-converters-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  59 + <v-pane id="http-converters-pane_{{configIndex}}" expanded="true">
60 60 <v-pane-header>
61 61 {{ 'extension.converters' | translate }}
62 62 </v-pane-header>
... ... @@ -93,8 +93,8 @@
93 93 </div>
94 94 </md-input-container>
95 95
96   - <v-accordion id="http-attributes-accordion" class="vAccordion--default">
97   - <v-pane id="http-attributes-pane">
  96 + <v-accordion id="http-attributes-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  97 + <v-pane id="http-attributes-pane_{{configIndex}}{{converterIndex}}">
98 98 <v-pane-header>
99 99 {{ 'extension.attributes' | translate }}
100 100 </v-pane-header>
... ... @@ -185,8 +185,8 @@
185 185 </v-accordion>
186 186
187 187
188   - <v-accordion id="http-timeseries-accordion" class="vAccordion--default">
189   - <v-pane id="http-timeseries-pane">
  188 + <v-accordion id="http-timeseries-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  189 + <v-pane id="http-timeseries-pane_{{configIndex}}{{converterIndex}}">
190 190 <v-pane-header>
191 191 {{ 'extension.timeseries' | translate }}
192 192 </v-pane-header>
... ...
... ... @@ -321,6 +321,18 @@ export default function ExtensionFormHttpDirective($compile, $templateCache, $tr
321 321 }
322 322 };
323 323
  324 + scope.collapseValidation = function(index, id) {
  325 + var invalidState = angular.element('#'+id+':has(.ng-invalid)');
  326 + if(invalidState.length) {
  327 + invalidState.addClass('inner-invalid');
  328 + }
  329 + };
  330 +
  331 + scope.expandValidation = function (index, id) {
  332 + var invalidState = angular.element('#'+id);
  333 + invalidState.removeClass('inner-invalid');
  334 + };
  335 +
324 336 $compile(element.contents())(scope);
325 337 };
326 338
... ...
... ... @@ -22,7 +22,7 @@
22 22 </md-card-title-text>
23 23 </md-card-title>
24 24 <md-card-content>
25   - <v-accordion id="mqtt-brokers-accordion" class="vAccordion--default">
  25 + <v-accordion id="mqtt-brokers-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
26 26 <v-pane id="mqtt-brokers-pane" expanded="true">
27 27 <v-pane-header>
28 28 {{ 'extension.brokers' | translate }}
... ... @@ -161,8 +161,8 @@
161 161 </div>
162 162 </section>
163 163
164   - <v-accordion id="mqtt-mapping-accordion" class="vAccordion--default">
165   - <v-pane id="mqtt-mapping-pane">
  164 + <v-accordion id="mqtt-mapping-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  165 + <v-pane id="mqtt-mapping-pane_{{brokerIndex}}">
166 166 <v-pane-header>
167 167 {{ 'extension.mapping' | translate }}
168 168 </v-pane-header>
... ... @@ -286,8 +286,8 @@
286 286 </div>
287 287 </div>
288 288
289   - <v-accordion ng-if='map.converterType =="json"' id="mqtt-attributes-accordion" class="vAccordion--default">
290   - <v-pane id="mqtt-attributes-pane">
  289 + <v-accordion ng-if='map.converterType =="json"' id="mqtt-attributes-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  290 + <v-pane id="mqtt-attributes-pane_{{brokerIndex}}{{mapIndex}}">
291 291 <v-pane-header>
292 292 {{ 'extension.attributes' | translate }}
293 293 </v-pane-header>
... ... @@ -346,8 +346,8 @@
346 346 </v-pane>
347 347 </v-accordion>
348 348
349   - <v-accordion ng-if='map.converterType =="json"' id="mqtt-timeseries-accordion" class="vAccordion--default">
350   - <v-pane id="mqtt-timeseries-pane">
  349 + <v-accordion ng-if='map.converterType =="json"' id="mqtt-timeseries-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  350 + <v-pane id="mqtt-timeseries-pane_{{brokerIndex}}{{mapIndex}}">
351 351 <v-pane-header>
352 352 {{ 'extension.timeseries' | translate }}
353 353 </v-pane-header>
... ... @@ -422,8 +422,8 @@
422 422 </v-pane>
423 423 </v-accordion>
424 424
425   - <v-accordion id="mqtt-connect-requests-accordion" class="vAccordion--default">
426   - <v-pane id="mqtt-connect-requests-pane">
  425 + <v-accordion id="mqtt-connect-requests-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  426 + <v-pane id="mqtt-connect-requests-pane_{{brokerIndex}}">
427 427 <v-pane-header>
428 428 {{ 'extension.connect-requests' | translate }}
429 429 </v-pane-header>
... ... @@ -489,8 +489,8 @@
489 489 </v-pane>
490 490 </v-accordion>
491 491
492   - <v-accordion id="mqtt-disconnect-requests-accordion" class="vAccordion--default">
493   - <v-pane id="mqtt-disconnect-requests-pane">
  492 + <v-accordion id="mqtt-disconnect-requests-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  493 + <v-pane id="mqtt-disconnect-requests-pane_{{brokerIndex}}">
494 494 <v-pane-header>
495 495 {{ 'extension.disconnect-requests' | translate }}
496 496 </v-pane-header>
... ... @@ -556,8 +556,8 @@
556 556 </v-pane>
557 557 </v-accordion>
558 558
559   - <v-accordion id="mqtt-attribute-requests-accordion" class="vAccordion--default">
560   - <v-pane id="mqtt-attribute-requests-pane">
  559 + <v-accordion id="mqtt-attribute-requests-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  560 + <v-pane id="mqtt-attribute-requests-pane_{{brokerIndex}}">
561 561 <v-pane-header>
562 562 {{ 'extension.attribute-requests' | translate }}
563 563 </v-pane-header>
... ... @@ -701,8 +701,8 @@
701 701 </v-pane>
702 702 </v-accordion>
703 703
704   - <v-accordion id="mqtt-attribute-updates-accordion" class="vAccordion--default">
705   - <v-pane id="mqtt-attribute-updates-pane">
  704 + <v-accordion id="mqtt-attribute-updates-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  705 + <v-pane id="mqtt-attribute-updates-pane_{{brokerIndex}}">
706 706 <v-pane-header>
707 707 {{ 'extension.attribute-updates' | translate }}
708 708 </v-pane-header>
... ... @@ -764,8 +764,8 @@
764 764 </v-pane>
765 765 </v-accordion>
766 766
767   - <v-accordion id="mqtt-server-side-rpc-accordion" class="vAccordion--default">
768   - <v-pane id="mqtt-server-side-rpc-pane">
  767 + <v-accordion id="mqtt-server-side-rpc-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  768 + <v-pane id="mqtt-server-side-rpc-pane_{{brokerIndex}}">
769 769 <v-pane-header>
770 770 {{ 'extension.server-side-rpc' | translate }}
771 771 </v-pane-header>
... ...
... ... @@ -148,6 +148,18 @@ export default function ExtensionFormOpcDirective($compile, $templateCache, $tra
148 148
149 149 };
150 150
  151 + scope.collapseValidation = function(index, id) {
  152 + var invalidState = angular.element('#'+id+':has(.ng-invalid)');
  153 + if(invalidState.length) {
  154 + invalidState.addClass('inner-invalid');
  155 + }
  156 + };
  157 +
  158 + scope.expandValidation = function (index, id) {
  159 + var invalidState = angular.element('#'+id);
  160 + invalidState.removeClass('inner-invalid');
  161 + };
  162 +
151 163 };
152 164
153 165 return {
... ...
... ... @@ -23,8 +23,8 @@
23 23 </md-card-title>
24 24
25 25 <md-card-content>
26   - <v-accordion id="http-server-configs-accordion" class="vAccordion--default">
27   - <v-pane id="http-servers-pane" expanded="true">
  26 + <v-accordion id="opc-server-configs-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  27 + <v-pane id="opc-servers-pane" expanded="true">
28 28 <v-pane-header>
29 29 {{ 'extension.opc-server' | translate }}
30 30 </v-pane-header>
... ... @@ -197,8 +197,8 @@
197 197 </md-input-container>
198 198 </div>
199 199
200   - <v-accordion id="opc-attributes-accordion" class="vAccordion--default">
201   - <v-pane id="opc-attributes-pane" expanded="true">
  200 + <v-accordion id="opc-keystore-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  201 + <v-pane id="opc-keystore-pane__{{serverIndex}}" expanded="true">
202 202 <v-pane-header>
203 203 {{ 'extension.opc-keystore' | translate }}
204 204 </v-pane-header>
... ... @@ -277,10 +277,10 @@
277 277 </v-accordion>
278 278
279 279
280   - <v-accordion id="opc-attributes-accordion"
  280 + <v-accordion id="opc-mapping-accordion"
281 281 class="vAccordion--default"
282   - >
283   - <v-pane id="opc-attributes-pane">
  282 + onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  283 + <v-pane id="opc-mapping-pane_{{serverIndex}}">
284 284 <v-pane-header>
285 285 {{ 'extension.mapping' | translate }}
286 286 </v-pane-header>
... ... @@ -333,8 +333,8 @@
333 333
334 334 <v-accordion id="opc-attributes-accordion"
335 335 class="vAccordion--default"
336   - >
337   - <v-pane id="opc-attributes-pane">
  336 + onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  337 + <v-pane id="opc-attributes-pane_{{serverIndex}}{{mapIndex}}">
338 338 <v-pane-header>
339 339 {{ 'extension.attributes' | translate }}
340 340 </v-pane-header>
... ... @@ -425,8 +425,8 @@
425 425 </v-pane>
426 426 </v-accordion>
427 427
428   - <v-accordion id="opc-timeseries-accordion" class="vAccordion--default">
429   - <v-pane id="opc-timeseries-pane">
  428 + <v-accordion id="opc-timeseries-accordion" class="vAccordion--default" onexpand="expandValidation(index, id)" oncollapse="collapseValidation(index, id)">
  429 + <v-pane id="opc-timeseries-pane_{{serverIndex}}{{mapIndex}}">
430 430 <v-pane-header>
431 431 {{ 'extension.timeseries' | translate }}
432 432 </v-pane-header>
... ...
... ... @@ -33,6 +33,9 @@
33 33 .dropdown-section {
34 34 margin-bottom: 30px;
35 35 }
  36 + v-pane.inner-invalid > v-pane-header {
  37 + border-bottom: 2px solid rgb(221,44,0);
  38 + }
36 39 }
37 40
38 41 .extension-form.extension-mqtt {
... ...