Refactoring of duplicate JS form code

resource/web/event_config.tmpl

@@ -89,49 +89,8 @@
 
 <!------------- MODALS --------------->
 <script>
-    var eventDataConf = {};
-
     $(function(){
-        // initialize event modal things
+        initDynamicModalForm("eventModal", "event-data-conf", "event-data-conf-template");
-        $("#event-data-conf-template div").each(function(){
-            eventDataConf[$(this).attr("id")] = $(this).html();
-        });
-        $("#eventModal select[name=type]").change(function(){
-            // Update dynamic inputs
-            $("#eventModal #event-data-conf").html(eventDataConf[$(this).val()]);
-        });
-        // click event
-        $("#eventModal").on('show.bs.modal', function (event) {
-            var button = $(event.relatedTarget);
-            var modal = $(this);
-            modal.find("input[type=text]").val(""); // Reset all inputs
-            if(button.data("id") >= 0){ // edit
-                modal.find("input[name=action]").val("modify_local_event");
-            }
-            else{ // create
-                modal.find("input[name=action]").val("create_local_event");
-                modal.find("input[name=id]").val(-1);
-            }
-            // Set dynamic data
-            modal.find("select[name=type]").val(button.data("type"));
-            modal.find("select[name=type]").change(); // Update dynamic inputs
-            $.each(button.attr(), function(fieldName, value) {
-                if(fieldName.startsWith("data-")) {
-                    fieldName = fieldName.substring(5);
-                    input = modal.find("input").filter(function() {
-                           return this.name.toLowerCase() == fieldName;
-                    });
-                    if (input.attr("type") == "checkbox") { // special handling for checkboxes
-                        if (value=="true") input.attr("checked", "true");
-                        else               input.removeAttr("checked", "true");
-                        // Add default false value as a unchecked checkbox is not included in the post
-                        input.parent().prepend("<input type='hidden' name='"+input.attr("name")+"' value='false' />");
-                    } else {
-                        input.val(value);
-                    }
-                }
-            });
-        });
     });
 </script>
 

resource/web/js/hal.js

@@ -5,7 +5,7 @@ $(function(){
     $(".timestamp").relTimestamp();
 });
 
-////////////////////////////////////// JQuery functions
+////////////////////////////////////// JQuery helper functions
 
 // $.attr() # returns all attributes of an element
 (function(old) {
@@ -121,4 +121,49 @@ function getChartData(json){
         axes: dataYaxis,
         unload: true,
     };
+}
+
+////////////// Dynamic forms
+var dynamicConf = {};
+
+function initDynamicModalForm(modalId, formTemplateId, templateID){
+    // read in all configurations into global variable (to skip naming issues)
+    dynamicConf[formTemplateId] = [];
+    $("#"+templateID+" div").each(function(){
+        dynamicConf[formTemplateId][$(this).attr("id")] = $(this).html();
+    });
+    // Update dynamic inputs
+    $("#"+modalId+" select[name=type]").change(function(){
+        $("#"+modalId+" #"+formTemplateId).html(dynamicConf[formTemplateId][$(this).val()]);
+    });
+    // click event
+    $("#"+modalId).on('show.bs.modal', function (event) {
+        var button = $(event.relatedTarget);
+        var modal = $(this);
+        // Reset all inputs
+        modal.find("#"+formTemplateId).empty(); // clear form div
+
+        // select dynamic form
+        var selector = modal.find("select[name=type]");
+        selector.val(button.data("type"));
+        selector.change(); // Update dynamic inputs
+        // set dynamic form data
+        $.each(button.attr(), function(fieldName, value) {
+            if(fieldName.startsWith("data-")) {
+                fieldName = fieldName.substring(5);
+                // case insensitive search
+                input = modal.find("input").filter(function() {
+                       return this.name.toLowerCase() == fieldName;
+                });
+                if (input.attr("type") == "checkbox") { // special handling for checkboxes
+                    if (value=="true") input.attr("checked", "true");
+                    else               input.removeAttr("checked");
+                    // Add default false value as a unchecked checkbox is not included in the post
+                    input.parent().prepend("<input type='hidden' name='"+input.attr("name")+"' value='false' />");
+                } else {
+                    input.val(value);
+                }
+            }
+        });
+    });
 }

resource/web/sensor_config.tmpl

@@ -194,53 +194,8 @@
 
 <!------------- MODALS --------------->
 <script>
-    var sensorDataConf = {};
-
     $(function(){
-        // initialize sensor modal things
+        initDynamicModalForm("sensorModal", "sensor-data-conf", "sensor-data-conf-template");
-        $("#sensor-data-conf-template div").each(function(){
-            sensorDataConf[$(this).attr("id")] = $(this).html();
-        });
-        $("#sensorModal select[name=type]").change(function(){
-            // Update dynamic inputs
-            $("#sensorModal #sensor-data-conf").html(sensorDataConf[$(this).val()]);
-        });
-        // click event
-        $("#sensorModal").on('show.bs.modal', function (event) {
-            var button = $(event.relatedTarget);
-            var modal = $(this);
-            modal.find("input[type=text]").val(""); // Reset all inputs
-            if(button.data("id") >= 0){ // edit
-                modal.find("input[name=action]").val("modify_local_sensor");
-                modal.find("input[name=sync]").prop("checked", button.data("sync"));
-            }
-            else{ // create
-                modal.find("input[name=action]").val("create_local_sensor");
-                modal.find("input[name=id]").val(-1);
-                modal.find("input[name=sync]").prop("checked", "false");
-            }
-            // set dynamic form data
-            modal.find("select[name=type]").val(button.data("type"));
-            modal.find("select[name=type]").change(); // Update dynamic inputs
-            $.each(button.attr(), function(fieldName, value) {
-                if(fieldName.startsWith("data-")) {
-                    fieldName = fieldName.substring(5);
-                    console.log(fieldName, value);
-                    input = modal.find("input").filter(function() {
-                           return this.name.toLowerCase() == fieldName;
-                    });
-                    if (input.attr("type") == "checkbox") { // special handling for checkboxes
-                        if (value=="true") input.attr("checked", "true");
-                        else               input.removeAttr("checked", "true");
-                        // Add default false value as a unchecked checkbox is not included in the post
-                        input.parent().prepend("<input type='hidden' name='"+input.attr("name")+"' value='false' />");
-                    } else {
-                        input.val(value);
-                    }
-                }
-            });
-        });
-
 
         $("#userModal").on('show.bs.modal', function (event) {
             var button = $(event.relatedTarget);

resource/web/trigger.tmpl

@@ -140,52 +140,9 @@
 <!-------------------------------- MODALS -------------------------------->
 <script>
     $(function(){
-        initDynamicModalForm("trigger");
+        initDynamicModalForm("triggerModal", "trigger-data-conf", "trigger-data-conf-template");
-        initDynamicModalForm("action");
+        initDynamicModalForm("actionModal", "action-data-conf", "action-data-conf-template");
     });
-
-
-    var dynamicConf = {};
-
-    function initDynamicModalForm(name){
-        // read in all configurations into global variable (to skip naming issues)
-        dynamicConf[name] = [];
-        $("#"+name+"-data-conf-template div").each(function(){
-            dynamicConf[name][$(this).attr("id")] = $(this).html();
-        });
-        // Update dynamic inputs
-        $("#"+name+"Modal select[name=type]").change(function(){
-            $("#"+name+"Modal #"+name+"-data-conf").html(dynamicConf[name][$(this).val()]);
-        });
-        // click event
-        $("#"+name+"Modal").on('show.bs.modal', function (event) {
-            var button = $(event.relatedTarget);
-            var modal = $(this);
-            modal.find("input").val(""); // Reset all inputs
-
-            // set dynamic form data
-            modal.find("select[name=type]").val(button.data("type"));
-            modal.find("select[name=type]").change(); // Update dynamic inputs
-            $.each(button.attr(), function(fieldName, value) {
-                if(fieldName.startsWith("data-")) {
-                    fieldName = fieldName.substring(5);
-                    console.log(fieldName, value);
-                    // case insensitive search
-                    input = modal.find("input").filter(function() {
-                           return this.name.toLowerCase() == fieldName;
-                    });
-                    if (input.attr("type") == "checkbox") { // special handling for checkboxes
-                        if (value=="true") input.attr("checked", "true");
-                        else               input.removeAttr("checked", "true");
-                        // Add default false value as a unchecked checkbox is not included in the post
-                        input.parent().prepend("<input type='hidden' name='"+input.attr("name")+"' value='false' />");
-                    } else {
-                        input.val(value);
-                    }
-                }
-            });
-        });
-    }
 </script>
 
 <div class="modal fade" id="triggerModal" tabindex="-1">