2 files changed, 76 insertions, 31 deletions

diff --git a/fg21sim/webui/static/js/configs.js b/fg21sim/webui/static/js/configs.js
index a011379..158d776 100644
--- a/fg21sim/webui/static/js/configs.js
+++ b/fg21sim/webui/static/js/configs.js
@@ -44,28 +44,61 @@ var joinPath = function (path1, path2) {
 };
 
 
+/**
+ * Set custom error messages for the form fields that failed the server-side
+ * validations.
+ *
+ * NOTE:
+ * Add "error" class for easier manipulations, e.g., clearFormConfigErrors().
+ *
+ * References: Constraint Validation API
+ *
+ * @param {String} name - The name of filed name
+ * @param {String} error - The custom error message to be set for the field
+ */
+var setFormConfigErrorSingle = function (name, error) {
+  var selector = null;
+  if (name === "userconfig") {
+    selector = "input[name=configfile]";
+  } else {
+    selector = "input[name='" + name + "']";
+  }
+  $(selector).each(function () {
+    // Reset the error message
+    this.setCustomValidity(error);
+    // Also add the "error" class for easier use later
+    $(this).addClass("error");
+  });
+};
+
 
 /**
- * Clear the error states previously marked on the fields with invalid values.
+ * Clear the custom error states marked on the form fields that failed the
+ * server-side validations.
+ *
+ * NOTE: The form fields marked custom errors has the "error" class.
+ *
+ * References: Constraint Validation API
  */
-var clearConfigFormErrors = function () {
-  // TODO
-  $("#conf-form").find(":input").each(function () {
-    // TODO
+var clearFormConfigErrors = function () {
+  $("input.error").each(function () {
+    // Remove the dynamically added "error" class
+    $(this).removeClass("error");
+    // Reset the error message
+    this.setCustomValidity("");
   });
 };
 
 
 /**
- * Reset the form to its defaults as written in the HTML.
+ * Reset the configuration form to its defaults as written in the HTML.
  */
-var resetConfigForm = function () {
+var resetFormConfigs = function () {
   // Credit: http://stackoverflow.com/a/6364313
   $("#conf-form")[0].reset();
 
-  // TODO: whether this is required ??
   // Clear previously marked errors
-  clearConfigFormErrors();
+  clearFormConfigErrors();
 };
 
 
@@ -107,20 +140,20 @@ var getFormConfigSingle = function (name) {
  * Set the value of one single form field according to the given
  * name and value.
  *
- * NOTE:
- * Change the value of an input element using JavaScript (e.g., `.val()`)
- * won't fire the "change" event, so manually trigger this event.
+ * NOTE: Do NOT manually trigger the "change" event.
  *
  * @param {String} name - The name of filed name
  * @param {String|Number|Array} value - The value to be set for the field
  */
 var setFormConfigSingle = function (name, value) {
-  if (name === "userconfig" && value) {
-    // Split the absolute path to "workdir" and "configfile"
-    var workdir = dirname(value);
-    var configfile = basename(value);
-    $("input[name=workdir]").val(workdir).trigger("change");
-    $("input[name=configfile]").val(configfile).trigger("change");
+  if (name === "userconfig") {
+    if (value) {
+      // Split the absolute path to "workdir" and "configfile"
+      var workdir = dirname(value);
+      var configfile = basename(value);
+      $("input[name=workdir]").val(workdir);
+      $("input[name=configfile]").val(configfile);
+    }
   } else {
     var selector = "input[name='" + name + "']";
     var target = $(selector);
@@ -140,8 +173,6 @@ var setFormConfigSingle = function (name, value) {
       } else {
         target.val(value);
       }
-      // Manually trigger the "change" event
-      target.trigger("change");
     } else {
       console.error("No such element:", selector);
     }
@@ -157,20 +188,25 @@ var setFormConfigSingle = function (name, value) {
  * @param {Object} errors - The config options with invalid values.
  */
 var setFormConfigs = function (data, errors) {
-  // Clear previously marked errors
-  clearConfigFormErrors();
-
   // Set the values of form field to the input configurations data
   $.each(data, function (name, value) {
+    if (value == null) {
+      value = "";  // Default to empty string
+    }
     var val_old = getFormConfigSingle(name);
-    if (val_old != null) {
+    if (val_old != null && val_old !== value) {
       setFormConfigSingle(name, value);
-      console.debug("Set input '" + name + "' to:", value, " <-", val_old);
+      console.log("Set input '" + name + "' to:", value, " <-", val_old);
     }
   });
 
-  // Mark error states on fields with invalid values
-  // TODO: mark the error states
+  // Clear previously marked errors
+  clearFormConfigErrors();
+
+  // Mark custom errors on fields with invalid values validated by the server
+  $.each(errors, function (name, error) {
+    setFormConfigErrorSingle(name, error);
+  });
 };
 
 
diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js
index 07de907..968a3de 100644
--- a/fg21sim/webui/static/js/websocket.js
+++ b/fg21sim/webui/static/js/websocket.js
@@ -129,7 +129,7 @@ var connectWebSocket = function (url) {
     var msg = JSON.parse(e.data);
     console.log("WebSocket received message: type:", msg.type,
                 ", success:", msg.success);
-    console.debug(msg);
+    console.log(msg);
     // Delegate appropriate actions to handle the received message
     if (msg.type === "configs") {
       handleMsgConfigs(msg);
@@ -178,7 +178,7 @@ $(document).ready(function () {
       // TODO:
       // * add a confirmation dialog;
       // * add pop up to indicate success/fail
-      resetConfigForm(g_ws);
+      resetFormConfigs();
       resetServerConfigs(g_ws);
       getServerConfigs(g_ws);
     });
@@ -187,8 +187,8 @@ $(document).ready(function () {
     $("#load-configfile").on("click", function () {
       // TODO:
       // * add pop up to indicate success/fail
-      var userconfig = getFormUserconfig();
-      resetConfigForm(g_ws);
+      var userconfig = getFormConfigSingle("userconfig");
+      resetFormConfigs();
       loadServerConfigFile(g_ws, userconfig);
       getServerConfigs(g_ws);
     });
@@ -202,6 +202,15 @@ $(document).ready(function () {
       saveServerConfigFile(g_ws, true);  // clobber=true
     });
 
+    // Sync changed field to server, validate and update form
+    $("#conf-form input").on("change", function (e) {
+      console.log("Element changed:", e);
+      var name = $(e.target).attr("name");
+      var value = getFormConfigSingle(name);
+      // Sync form configuration to the server
+      setServerConfigs(g_ws, {name: value});
+    });
+
   } else {
     // WebSocket NOT supported
     console.error("Oops, WebSocket is NOT supported!");