ziver/zutil
1
0
Fork 0
Code Issues Pull requests Activity Actions

Added html templates/examples for configurator

Browse source
This commit is contained in:
Ziver Koc 2017-03-13 18:09:14 +01:00
parent a6c34fa7ba
commit 7e3305bea2
2 changed files with 120 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/zutil/ui/configurator.dynamic.tmpl Executable file
View file

@ -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>

20
src/zutil/ui/configurator.form.tmpl Executable file
View file

@ -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}}