简柏林 / 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 +}
@@ -120,6 +120,18 @@ export default function ExtensionFormHttpDirective($compile, $templateCache, $tr @@ -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 $compile(element.contents())(scope); 136 $compile(element.contents())(scope);
125 }; 137 };
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 </md-card-title-text> 22 </md-card-title-text>
23 </md-card-title> 23 </md-card-title>
24 <md-card-content> 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 <v-pane id="http-converters-pane" expanded="true"> 26 <v-pane id="http-converters-pane" expanded="true">
27 <v-pane-header> 27 <v-pane-header>
28 {{ 'extension.converter-configurations' | translate }} 28 {{ 'extension.converter-configurations' | translate }}
@@ -55,8 +55,8 @@ @@ -55,8 +55,8 @@
55 <label translate>extension.token</label> 55 <label translate>extension.token</label>
56 <input name="httpToken" ng-model="config.token" parse-to-null> 56 <input name="httpToken" ng-model="config.token" parse-to-null>
57 </md-input-container> 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 <v-pane-header> 60 <v-pane-header>
61 {{ 'extension.converters' | translate }} 61 {{ 'extension.converters' | translate }}
62 </v-pane-header> 62 </v-pane-header>
@@ -93,8 +93,8 @@ @@ -93,8 +93,8 @@
93 </div> 93 </div>
94 </md-input-container> 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 <v-pane-header> 98 <v-pane-header>
99 {{ 'extension.attributes' | translate }} 99 {{ 'extension.attributes' | translate }}
100 </v-pane-header> 100 </v-pane-header>
@@ -185,8 +185,8 @@ @@ -185,8 +185,8 @@
185 </v-accordion> 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 <v-pane-header> 190 <v-pane-header>
191 {{ 'extension.timeseries' | translate }} 191 {{ 'extension.timeseries' | translate }}
192 </v-pane-header> 192 </v-pane-header>
@@ -321,6 +321,18 @@ export default function ExtensionFormHttpDirective($compile, $templateCache, $tr @@ -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 $compile(element.contents())(scope); 336 $compile(element.contents())(scope);
325 }; 337 };
326 338
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 </md-card-title-text> 22 </md-card-title-text>
23 </md-card-title> 23 </md-card-title>
24 <md-card-content> 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 <v-pane id="mqtt-brokers-pane" expanded="true"> 26 <v-pane id="mqtt-brokers-pane" expanded="true">
27 <v-pane-header> 27 <v-pane-header>
28 {{ 'extension.brokers' | translate }} 28 {{ 'extension.brokers' | translate }}
@@ -161,8 +161,8 @@ @@ -161,8 +161,8 @@
161 </div> 161 </div>
162 </section> 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 <v-pane-header> 166 <v-pane-header>
167 {{ 'extension.mapping' | translate }} 167 {{ 'extension.mapping' | translate }}
168 </v-pane-header> 168 </v-pane-header>
@@ -286,8 +286,8 @@ @@ -286,8 +286,8 @@
286 </div> 286 </div>
287 </div> 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 <v-pane-header> 291 <v-pane-header>
292 {{ 'extension.attributes' | translate }} 292 {{ 'extension.attributes' | translate }}
293 </v-pane-header> 293 </v-pane-header>
@@ -346,8 +346,8 @@ @@ -346,8 +346,8 @@
346 </v-pane> 346 </v-pane>
347 </v-accordion> 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 <v-pane-header> 351 <v-pane-header>
352 {{ 'extension.timeseries' | translate }} 352 {{ 'extension.timeseries' | translate }}
353 </v-pane-header> 353 </v-pane-header>
@@ -422,8 +422,8 @@ @@ -422,8 +422,8 @@
422 </v-pane> 422 </v-pane>
423 </v-accordion> 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 <v-pane-header> 427 <v-pane-header>
428 {{ 'extension.connect-requests' | translate }} 428 {{ 'extension.connect-requests' | translate }}
429 </v-pane-header> 429 </v-pane-header>
@@ -489,8 +489,8 @@ @@ -489,8 +489,8 @@
489 </v-pane> 489 </v-pane>
490 </v-accordion> 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 <v-pane-header> 494 <v-pane-header>
495 {{ 'extension.disconnect-requests' | translate }} 495 {{ 'extension.disconnect-requests' | translate }}
496 </v-pane-header> 496 </v-pane-header>
@@ -556,8 +556,8 @@ @@ -556,8 +556,8 @@
556 </v-pane> 556 </v-pane>
557 </v-accordion> 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 <v-pane-header> 561 <v-pane-header>
562 {{ 'extension.attribute-requests' | translate }} 562 {{ 'extension.attribute-requests' | translate }}
563 </v-pane-header> 563 </v-pane-header>
@@ -701,8 +701,8 @@ @@ -701,8 +701,8 @@
701 </v-pane> 701 </v-pane>
702 </v-accordion> 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 <v-pane-header> 706 <v-pane-header>
707 {{ 'extension.attribute-updates' | translate }} 707 {{ 'extension.attribute-updates' | translate }}
708 </v-pane-header> 708 </v-pane-header>
@@ -764,8 +764,8 @@ @@ -764,8 +764,8 @@
764 </v-pane> 764 </v-pane>
765 </v-accordion> 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 <v-pane-header> 769 <v-pane-header>
770 {{ 'extension.server-side-rpc' | translate }} 770 {{ 'extension.server-side-rpc' | translate }}
771 </v-pane-header> 771 </v-pane-header>
@@ -148,6 +148,18 @@ export default function ExtensionFormOpcDirective($compile, $templateCache, $tra @@ -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 return { 165 return {
@@ -23,8 +23,8 @@ @@ -23,8 +23,8 @@
23 </md-card-title> 23 </md-card-title>
24 24
25 <md-card-content> 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 <v-pane-header> 28 <v-pane-header>
29 {{ 'extension.opc-server' | translate }} 29 {{ 'extension.opc-server' | translate }}
30 </v-pane-header> 30 </v-pane-header>
@@ -197,8 +197,8 @@ @@ -197,8 +197,8 @@
197 </md-input-container> 197 </md-input-container>
198 </div> 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 <v-pane-header> 202 <v-pane-header>
203 {{ 'extension.opc-keystore' | translate }} 203 {{ 'extension.opc-keystore' | translate }}
204 </v-pane-header> 204 </v-pane-header>
@@ -277,10 +277,10 @@ @@ -277,10 +277,10 @@
277 </v-accordion> 277 </v-accordion>
278 278
279 279
280 - <v-accordion id="opc-attributes-accordion" 280 + <v-accordion id="opc-mapping-accordion"
281 class="vAccordion--default" 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 <v-pane-header> 284 <v-pane-header>
285 {{ 'extension.mapping' | translate }} 285 {{ 'extension.mapping' | translate }}
286 </v-pane-header> 286 </v-pane-header>
@@ -333,8 +333,8 @@ @@ -333,8 +333,8 @@
333 333
334 <v-accordion id="opc-attributes-accordion" 334 <v-accordion id="opc-attributes-accordion"
335 class="vAccordion--default" 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 <v-pane-header> 338 <v-pane-header>
339 {{ 'extension.attributes' | translate }} 339 {{ 'extension.attributes' | translate }}
340 </v-pane-header> 340 </v-pane-header>
@@ -425,8 +425,8 @@ @@ -425,8 +425,8 @@
425 </v-pane> 425 </v-pane>
426 </v-accordion> 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 <v-pane-header> 430 <v-pane-header>
431 {{ 'extension.timeseries' | translate }} 431 {{ 'extension.timeseries' | translate }}
432 </v-pane-header> 432 </v-pane-header>
@@ -33,6 +33,9 @@ @@ -33,6 +33,9 @@
33 .dropdown-section { 33 .dropdown-section {
34 margin-bottom: 30px; 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 .extension-form.extension-mqtt { 41 .extension-form.extension-mqtt {