Added description to config params and migrated examples to Bootstrap 5.0

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

View file

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

View file

@ -1,27 +1,32 @@
<script>
$(function(){
initDynamicModalForm("actionModal", "action-data-conf", "data-conf-template");
initDynamicModalForm("actionModal", "action-conf-inputs", "action-conf-template");
});
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)
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) {
if (formTemplateId != null) {
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()]);
});
}
// Listen to 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
if (formTemplateId != null)
modal.find("#" + formTemplateId).empty(); // clear form div
// select dynamic form
var selector = modal.find("select[name=type]");
@ -40,7 +45,7 @@
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' />");
input.parent().prepend("<input type='hidden' name='" + input.attr("name") + "' value='false' />");
} else {
input.val(value);
}
@ -54,14 +59,14 @@
<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>
<h5 class="modal-title">Action</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<form method="POST">
<div class="modal-body">
<div class="form-group">
<label class="control-label">Type:</label>
<select class="form-control" name="type">
<div>
<label for="input-type" class="form-label">Type:</label>
<select id="input-type" class="form-control" name="type">
{{#availableActions}}
<option>{{.getName()}}</option>
{{/availableActions}}
@ -69,12 +74,12 @@
</div>
<hr>
<div id="action-data-conf">
<div id="action-conf-inputs">
<!-- Dynamic form -->
</div>
</div>
<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>
</div>
</form>
@ -82,20 +87,25 @@
</div>
</div>
<div id="data-conf-template" class="hidden">
<div id="action-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()}}
<label for="input-{{.getName()}}" class="form-label">{{.getNiceName()}}:</label>
{{#.isTypeString()}}<input type="text" class="form-control" id="input-{{.getName()}}" name="{{.getName()}}">{{/#.isTypeString()}}
{{#.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()}}
<select class="form-control" name="{{.getName()}}">
<select class="form-control" id="input-{{.getName()}}" name="{{.getName()}}">
{{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
</select>
{{/#.isTypeEnum()}}
{{#.getDescription()}}
<div class="form-text">{{.getDescription()}}</div>
{{/#.getDescription()}}
</div>
{{/.params}}
</div>

View file

@ -2,18 +2,20 @@
<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()}}
<label for="input-{{.getName()}}" class="form-label">{{.getNiceName()}}:</label>
{{#.isTypeString()}}<input type="text" class="form-control" id="input-{{.getName()}}" name="{{.getName()}}">{{/#.isTypeString()}}
{{#.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()}}
<select class="form-control" name="{{.getName()}}">
<select class="form-control" id="input-{{.getName()}}" name="{{.getName()}}">
{{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
</select>
{{/#.isTypeEnum()}}
{{#.getDescription()}}
<div class="form-text">{{.getDescription()}}</div>
{{/#.getDescription()}}
</div>
{{/.params}}
</div>