Configuration of Events and Sensors are working with dynamic forms

Former-commit-id: ff81dee3365eee865099badc73ca70bc7cb222c6
This commit is contained in:
Ziver Koc 2016-01-18 13:09:28 +01:00
parent 02e15810ec
commit 42064e5209
7 changed files with 173 additions and 134 deletions

View file

@ -86,7 +86,7 @@ public class EventConfigHttpPage extends HalHttpPage {
// Output
Templator tmpl = new Templator(FileUtil.find(TEMPLATE));
tmpl.set("user", localUser);
tmpl.set("localEvent", Event.getLocalEvents(db));
tmpl.set("localEvents", Event.getLocalEvents(db));
tmpl.set("localEventConf", eventConfigurations);
tmpl.set("detectedEvents", ControllerManager.getInstance().getDetectedEvents());

View file

@ -15,7 +15,7 @@ import java.util.logging.Logger;
/**
* Created by Ziver on 2015-12-15.
*/
@DBBean.DBTable("event")
@DBBean.DBTable(value="event", superBean=true)
public class Event extends AbstractDevice<HalEventData>{
private static final Logger logger = LogUtil.getLogger();

View file

@ -22,7 +22,7 @@
<tr>
<td>{{.getName()}}</td>
<td>{{.getType()}}</td>
<td>{{.getConfig()}}</td>
<td>{{.getDeviceData()}}</td>
<td>
<form method="POST">
<input type="hidden" name="action" value="remove_local_event">
@ -34,7 +34,10 @@
data-id="{{.getId()}}"
data-name="{{.getName()}}"
data-type="{{.getType()}}"
data-config="{{.getConfig()}}">
{{#.getDeviceConfig().getConfiguration()}}
data-{{.getName()}}="{{.getString()}}"
{{/.getDeviceConfig().getConfiguration()}}
>
<span class="glyphicon glyphicon-pencil"></span>
</button>
@ -64,7 +67,10 @@
<button type="button" class="btn btn-default btn-xs" data-toggle="modal"
data-target="#eventModal"
data-type="{{.getClass().getName()}}"
data-config="{{.}}">
{{#.getDeviceConfig().getConfiguration()}}
data-{{.getName()}}="{{.getString()}}"
{{/.getDeviceConfig().getConfiguration()}}
>
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
@ -96,18 +102,21 @@
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");
modal.find("input[name=id]").val(button.data("id"));
modal.find("input[name=name]").val(button.data("name"));
modal.find("select[name=type]").val(button.data("type"));
modal.find("input[name=config]").val(button.data("config"));
modal.find("select[name=type]").change(); // Update dynamic inputs
$.each(button.attr(), function(name, value) {
if(name.startsWith("data-")) {
name = name.substring(5);
console.log(name, value);
modal.find("input[name="+name+"]").val(value);
}
});
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);
}
// Update dynamic inputs
modal.find("select[name=type]").change();
});
});
</script>

View file

@ -10,10 +10,12 @@
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/hal.css" rel="stylesheet">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/hal.js"></script>
</head>
<body>

19
web-resource/js/hal.js Executable file
View file

@ -0,0 +1,19 @@
(function(old) {
$.fn.attr = function() {
if(arguments.length === 0) {
if(this.length === 0) {
return null;
}
var obj = {};
$.each(this[0].attributes, function() {
if(this.specified) {
obj[this.name] = this.value;
}
});
return obj;
}
return old.apply(this, arguments);
};
})($.fn.attr);

View file

@ -24,7 +24,7 @@
<td>{{.getName()}}</td>
<td>{{.getType()}}</td>
<td>{{.isSynced()}}</td>
<td>{{.getDeviceConfig()}}</td>
<td>{{.getDeviceData()}}</td>
<td>
<form method="POST">
<input type="hidden" name="action" value="remove_local_sensor">
@ -37,7 +37,10 @@
data-name="{{.getName()}}"
data-type="{{.getType()}}"
data-sync="{{.isSynced()}}"
data-config="{{.getConfig()}}">
{{#.getDeviceConfig().getConfiguration()}}
data-{{.getName()}}="{{.getString()}}"
{{/.getDeviceConfig().getConfiguration()}}
>
<span class="glyphicon glyphicon-pencil"></span>
</button>
@ -67,7 +70,10 @@
<button type="button" class="btn btn-default btn-xs" data-toggle="modal"
data-target="#sensorModal"
data-type="{{.getClass().getName()}"
data-config="{{.}}">
{{#.getDeviceConfig().getConfiguration()}}
data-{{.getName()}}="{{.getString()}}"
{{/.getDeviceConfig().getConfiguration()}}
>
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
@ -148,7 +154,7 @@
<tr>
<td>{{.getName()}}</td>
<td>{{.getType()}}</td>
<td>{{.getDeviceConfig()}}</td>
<td>{{.getDeviceData()}}</td>
<td>
<form method="POST">
<div class="btn-toolbar pull-right">
@ -196,20 +202,23 @@
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=id]").val(button.data("id"));
modal.find("input[name=name]").val(button.data("name"));
modal.find("select[name=type]").val(button.data("type"));
modal.find("select[name=type]").change(); // Update dynamic inputs
$.each(button.attr(), function(name, value) {
if(name.startsWith("data-")) {
name = name.substring(5);
console.log(name, value);
modal.find("input[name="+name+"]").val(value);
}
});
modal.find("input[name=action]").val("modify_local_sensor");
modal.find("input[name=sync]").prop("checked", button.data("sync"));
modal.find("input[name=config]").val(button.data("config"));
}
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");
}
// Update dynamic inputs
modal.find("select[name=type]").change();
});