Merge pull request #18 from bcmi-labs/configuration-ux-improvement

Configuration ux improvement

Author: ilcato

arduino-cloud.html

@@ -2,15 +2,19 @@
   window.connectionManager = [];
 
   function validator(v) {
-    return (v !== null && v !== "" && v !== undefined);
+    return (v !== null && v !== undefined && v !== "");
+  }
+
+  function validateConnection(v) {
+    return (v !== null && v !== undefined && v !== "" && v !== "_ADD_");
   }
 
   function validateTime(v) {
     return (v !== null && v !== "" && v !== undefined && Number.isInteger(parseInt(v)) && parseInt(v) !== 0);
   }
 
   function getDefaults(nodeName){
-    var ret={connection: { type: "arduino-connection", validate: validator },
+    var ret={connection: { type: "arduino-connection", validate: validateConnection },
         thing: { value: "", validate: validator },
         property: { value: "", validate: validator },
         name: { value: "", validate: validator },
@@ -43,27 +47,35 @@
           initThings(this.connection, this.thing);
           initProperties(this.connection, this.thing, this.property, outs);
         }
-        $("select#node-input-connection").change(() => {
+        $("select#node-input-connection").change((e) => {
           const connection = $("#node-input-connection").val();
+          const thing_id = $("#node-input-thing").val();
           $("select#node-input-thing").empty();
           $("select#node-input-property").empty();
-          if(this.defaultname && connection === "_ADD_") {
-            $("#node-input-name").val("");
+          if(connection === "_ADD_") {
+            $("<option value='" + "" + "'> " + "No connection selected" + "</option>").appendTo("#node-input-thing");
+            if(this.defaultname){
+              $("#node-input-name").val("");
+            }
           }
-          if (this.connection !== connection && connection !== "_ADD_") {
+          if ((this.connection !== connection && connection !== "_ADD_") || thing_id === "") {
             initThings(connection);
           }
           $("#node-input-thing").trigger("change");
         });
         $("#node-input-thing").change(() => {
-
           const thing_id = $("#node-input-thing").val();
+          const connection = $("#node-input-connection").val();
+          const thing_text = $("#node-input-thing").find('option:selected').text()
           if (thing_id && thing_id !== "") {
-            const connection = $("#node-input-connection").val();
             initProperties(connection, thing_id, undefined, outs);
+          } else if (connection === "_ADD_") {
+            $("select#node-input-property").empty();
+            $("<option value='" + "" + "'> " + "No connection selected" + "</option>").appendTo("#node-input-property");
           } else {
             $("select#node-input-property").empty();
-          }
+            $("<option value='" + "" + "'> " + "No thing selected" + "</option>").appendTo("#node-input-property");
+          } 
           $("#node-input-property").trigger("change");
         });
         $("#node-input-property").change(() => {
@@ -166,7 +178,10 @@
     $.getJSON(`things?${queryString}`, things => {
       $("select#node-input-thing").empty();
       if (things && typeof (things) == "object" && things.error) {
+        $("select#node-input-thing").empty();
         $("<option value='" + "" + "'> " + things.error + "</option>").appendTo("#node-input-thing");
+        $("select#node-input-property").empty();
+        $("<option value='" + "" + "'> " + things.error + "</option>").appendTo("#node-input-property");
       } else if (things && Array.isArray(things) && things.length !== 0) {
         $("<option value='" + "" + "'> " + "Select a thing" + "</option>").appendTo("#node-input-thing");
         for (const t of things) {
@@ -176,6 +191,11 @@
           $("#node-input-thing").val(thing_id);
         }
         $("#node-input-property").trigger("change");
+      } else if (things && Array.isArray(things) && things.length === 0) {
+        $("select#node-input-thing").empty();
+        $("<option value='" + "" + "'> " + "No things available" + "</option>").appendTo("#node-input-thing");
+        $("select#node-input-property").empty();
+        $("<option value='" + "" + "'> " + "No things available" + "</option>").appendTo("#node-input-property");
       }
     });
   }
@@ -190,7 +210,10 @@
     $.getJSON(`properties?${queryString}`, properties => {
       $("select#node-input-property").empty();
       if (properties && typeof (properties) == "object" && properties.error) {
+        $("select#node-input-thing").empty();
         $("<option value='" + "" + "'> " + things.error + "</option>").appendTo("#node-input-thing");
+        $("select#node-input-property").empty();
+        $("<option value='" + "" + "'> " + things.error + "</option>").appendTo("#node-input-property");
       } else if ((properties && Array.isArray(properties) && properties.length !== 0)) {
         $("<option value='" + "" + "'> " + "Select a property" + "</option>").appendTo("#node-input-property");
         for (const p of properties) {
@@ -201,6 +224,8 @@
           $("#node-input-property").val(property_id);
         }
         $("#node-input-name").trigger("change");
+      } else if (properties && Array.isArray(properties) && properties.length === 0) {
+        $("<option value='" + "" + "'> " + "No properties available" + "</option>").appendTo("#node-input-property");
       }
     });
   }