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

Added description to config params and migrated examples to Bootstrap 5.0

Browse source
This commit is contained in:
Ziver Koc 2021-04-29 01:20:16 +02:00
parent 72d61ddbfc
commit e85f00c652
3 changed files with 60 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/zutil/ui/Configurator.java
View file

@ -69,6 +69,8 @@ public class Configurator<T> {
public @interface Configurable{ public @interface Configurable{
/** Nice name of this parameter **/ /** Nice name of this parameter **/
String value(); String value();
/** A longer human friendly description of the parameter **/
String description();
/** Defines the order the parameters, in ascending order **/ /** Defines the order the parameters, in ascending order **/
int order() default Integer.MAX_VALUE; int order() default Integer.MAX_VALUE;
} }
@ -234,6 +236,7 @@ public class Configurator<T> {
protected Field field; protected Field field;
protected String name; protected String name;
protected String niceName; protected String niceName;
protected String description;
protected ConfigType type; protected ConfigType type;
protected Object value; protected Object value;
protected int order; protected int order;
@ -247,6 +250,7 @@ public class Configurator<T> {
value = field.get(obj); value = field.get(obj);
if (field.isAnnotationPresent(Configurable.class)) { if (field.isAnnotationPresent(Configurable.class)) {
niceName = field.getAnnotation(Configurable.class).value(); niceName = field.getAnnotation(Configurable.class).value();
description = field.getAnnotation(Configurable.class).description();
order = field.getAnnotation(Configurable.class).order(); order = field.getAnnotation(Configurable.class).order();
} }
else { else {
@ -264,13 +268,14 @@ public class Configurator<T> {
} }
public String getName() { return name;} public String getName() { return name;}
public String getNiceName() { return niceName;} public String getNiceName() { return niceName;}
public ConfigType getType() { return type;} public String getDescription() { return description;}
public boolean isTypeString() { return type == ConfigType.STRING;} public ConfigType getType() { return type;}
public boolean isTypeInt() { return type == ConfigType.INT;} public boolean isTypeString() { return type == ConfigType.STRING;}
public boolean isTypeBoolean() {return type == ConfigType.BOOLEAN;} public boolean isTypeInt() { return type == ConfigType.INT;}
public boolean isTypeEnum() { return type == ConfigType.ENUM;} public boolean isTypeBoolean() { return type == ConfigType.BOOLEAN;}
public boolean isTypeEnum() { return type == ConfigType.ENUM;}
public String getString() { public String getString() {
if (value == null) if (value == null)

66
src/zutil/ui/configurator.dynamic.tmpl
View file

@ -1,27 +1,32 @@
<script> <script>
$(function(){ $(function(){
initDynamicModalForm("actionModal", "action-data-conf", "data-conf-template"); initDynamicModalForm("actionModal", "action-conf-inputs", "action-conf-template");
}); });
var dynamicConf = {}; var dynamicConf = {};
function initDynamicModalForm(modalId, formTemplateId, templateID){ function initDynamicModalForm(modalId, formTemplateId = null, templateID = null){
// read in all configurations into global variable (to skip naming issues) // read in all configurations into global variable (to skip naming issues)
dynamicConf[formTemplateId] = []; if (formTemplateId != null) {
$("#"+templateID+" div").each(function(){ dynamicConf[formTemplateId] = [];
dynamicConf[formTemplateId][$(this).attr("id")] = $(this).html(); $("#" + templateID + " div").each(function(){
}); dynamicConf[formTemplateId][$(this).attr("id")] = $(this).html();
// Update dynamic inputs });
$("#"+modalId+" select[name=type]").change(function(){ // Update dynamic inputs
$("#"+modalId+" #"+formTemplateId).html(dynamicConf[formTemplateId][$(this).val()]); $("#" + modalId + " select[name=type]").change(function(){
}); $("#" + modalId + " #" + formTemplateId).html(dynamicConf[formTemplateId][$(this).val()]);
// click event });
$("#"+modalId).on('show.bs.modal', function (event) { }
// Listen to click event
$("#" + modalId).on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); var button = $(event.relatedTarget);
var modal = $(this); var modal = $(this);
// Reset all inputs // Reset all inputs
modal.find("#"+formTemplateId).empty(); // clear form div if (formTemplateId != null)
modal.find("#" + formTemplateId).empty(); // clear form div
// select dynamic form // select dynamic form
var selector = modal.find("select[name=type]"); var selector = modal.find("select[name=type]");
@ -40,7 +45,7 @@
if (value=="true") input.attr("checked", "true"); if (value=="true") input.attr("checked", "true");
else input.removeAttr("checked"); else input.removeAttr("checked");
// Add default false value as a unchecked checkbox is not included in the post // 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' />"); input.parent().prepend("<input type='hidden' name='" + input.attr("name") + "' value='false' />");
} else { } else {
input.val(value); input.val(value);
} }
@ -54,14 +59,14 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button> <h5 class="modal-title">Action</h5>
<h4 class="modal-title">Action</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div> </div>
<form method="POST"> <form method="POST">
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div>
<label class="control-label">Type:</label> <label for="input-type" class="form-label">Type:</label>
<select class="form-control" name="type"> <select id="input-type" class="form-control" name="type">
{{#availableActions}} {{#availableActions}}
<option>{{.getName()}}</option> <option>{{.getName()}}</option>
{{/availableActions}} {{/availableActions}}
@ -69,12 +74,12 @@
</div> </div>
<hr> <hr>
<div id="action-data-conf"> <div id="action-conf-inputs">
<!-- Dynamic form --> <!-- Dynamic form -->
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button> <button type="submit" class="btn btn-primary">Save</button>
</div> </div>
</form> </form>
@ -82,20 +87,25 @@
</div> </div>
</div> </div>
<div id="data-conf-template" class="hidden"> <div id="action-conf-template" class="hidden">
{{#actionConf}} {{#actionConf}}
<div id="{{.clazz.getName()}}"> <div id="{{.clazz.getName()}}">
{{#.params}} {{#.params}}
<div class="form-group"> <div class="form-group">
<label class="control-label">{{.getNiceName()}}:</label> <label for="input-{{.getName()}}" class="form-label">{{.getNiceName()}}:</label>
{{#.isTypeString()}}<input type="text" class="form-control" name="{{.getName()}}">{{/#.isTypeString()}}
{{#.isTypeInt()}}<input type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeInt()}} {{#.isTypeString()}}<input type="text" class="form-control" id="input-{{.getName()}}" name="{{.getName()}}">{{/#.isTypeString()}}
{{#.isTypeBoolean()}}<input type="checkbox" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}} {{#.isTypeInt()}}<input type="number" class="form-control" id="input-{{.getName()}}" name="{{.getName()}}">{{/#.isTypeInt()}}
{{#.isTypeBoolean()}}<input type="checkbox" id="input-{{.getName()}}" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}}
{{#.isTypeEnum()}} {{#.isTypeEnum()}}
<select class="form-control" name="{{.getName()}}"> <select class="form-control" id="input-{{.getName()}}" name="{{.getName()}}">
{{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}} {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
</select> </select>
{{/#.isTypeEnum()}} {{/#.isTypeEnum()}}
{{#.getDescription()}}
<div class="form-text">{{.getDescription()}}</div>
{{/#.getDescription()}}
</div> </div>
{{/.params}} {{/.params}}
</div> </div>

18
src/zutil/ui/configurator.form.tmpl
View file

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