Added html templates/examples for configurator

src/zutil/ui/configurator.dynamic.tmpl

@@ -0,0 +1,100 @@
+<script>
+    $(function(){
+        initDynamicModalForm("action");
+    });
+
+
+    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="actionModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
+                <h4 class="modal-title">Action</h4>
+            </div>
+            <form method="POST">
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label class="control-label">Type:</label>
+                        <select class="form-control" name="type">
+                            {{#availableActions}}
+                            <option>{{.getName()}}</option>
+                            {{/availableActions}}
+                        </select>
+                    </div>
+
+                    <hr>
+                    <div id="action-data-conf">
+                        <!-- Dynamic form -->
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div id="data-conf-template" class="hidden">
+    {{#actionConf}}
+    <div id="{{.clazz.getName()}}">
+        {{#.params}}
+        <div class="form-group">
+            <label class="control-label">{{.getNiceName()}}:</label>
+            {{#.isTypeString()}}<input type="text" class="form-control" name="{{.getName()}}">{{/#.isTypeString()}}
+            {{#.isTypeInt()}}<input type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeInt()}}
+            {{#.isTypeBoolean()}}<input type="checkbox" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}}
+            {{#.isTypeEnum()}}
+            <select class="form-control" name="{{.getName()}}">
+                {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
+            </select>
+            {{/#.isTypeEnum()}}
+        </div>
+        {{/.params}}
+    </div>
+    {{/actionConf}}
+</div>

src/zutil/ui/configurator.form.tmpl

@@ -0,0 +1,20 @@
+{{#conf}}
+<div id="{{.clazz.getName()}}">
+    {{#.params}}
+    <div class="form-group">
+        <label class="control-label">{{.getNiceName()}}:</label>
+        {{#.isTypeString()}}<input type="text" class="form-control" name="{{.getName()}}">{{/#.isTypeString()}}
+        {{#.isTypeInt()}}<input type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeInt()}}
+        {{#.isTypeBoolean()}}
+        <input type="hidden" name="{{.getName()}}" value="false">
+        <input type="checkbox" name="{{.getName()}}" value="true">
+        {{/#.isTypeBoolean()}}
+        {{#.isTypeEnum()}}
+        <select class="form-control" name="{{.getName()}}">
+            {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
+        </select>
+        {{/#.isTypeEnum()}}
+    </div>
+    {{/.params}}
+</div>
+{{/conf}}