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 // Output
Templator tmpl = new Templator(FileUtil.find(TEMPLATE)); Templator tmpl = new Templator(FileUtil.find(TEMPLATE));
tmpl.set("user", localUser); tmpl.set("user", localUser);
tmpl.set("localEvent", Event.getLocalEvents(db)); tmpl.set("localEvents", Event.getLocalEvents(db));
tmpl.set("localEventConf", eventConfigurations); tmpl.set("localEventConf", eventConfigurations);
tmpl.set("detectedEvents", ControllerManager.getInstance().getDetectedEvents()); tmpl.set("detectedEvents", ControllerManager.getInstance().getDetectedEvents());

View file

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

View file

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

View file

@ -10,10 +10,12 @@
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet"> <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/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script src="js/hal.js"></script>
</head> </head>
<body> <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>{{.getName()}}</td>
<td>{{.getType()}}</td> <td>{{.getType()}}</td>
<td>{{.isSynced()}}</td> <td>{{.isSynced()}}</td>
<td>{{.getDeviceConfig()}}</td> <td>{{.getDeviceData()}}</td>
<td> <td>
<form method="POST"> <form method="POST">
<input type="hidden" name="action" value="remove_local_sensor"> <input type="hidden" name="action" value="remove_local_sensor">
@ -37,7 +37,10 @@
data-name="{{.getName()}}" data-name="{{.getName()}}"
data-type="{{.getType()}}" data-type="{{.getType()}}"
data-sync="{{.isSynced()}}" data-sync="{{.isSynced()}}"
data-config="{{.getConfig()}}"> {{#.getDeviceConfig().getConfiguration()}}
data-{{.getName()}}="{{.getString()}}"
{{/.getDeviceConfig().getConfiguration()}}
>
<span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-pencil"></span>
</button> </button>
@ -67,7 +70,10 @@
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" <button type="button" class="btn btn-default btn-xs" data-toggle="modal"
data-target="#sensorModal" data-target="#sensorModal"
data-type="{{.getClass().getName()}" data-type="{{.getClass().getName()}"
data-config="{{.}}"> {{#.getDeviceConfig().getConfiguration()}}
data-{{.getName()}}="{{.getString()}}"
{{/.getDeviceConfig().getConfiguration()}}
>
<span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-plus"></span>
</button> </button>
</div> </div>
@ -148,7 +154,7 @@
<tr> <tr>
<td>{{.getName()}}</td> <td>{{.getName()}}</td>
<td>{{.getType()}}</td> <td>{{.getType()}}</td>
<td>{{.getDeviceConfig()}}</td> <td>{{.getDeviceData()}}</td>
<td> <td>
<form method="POST"> <form method="POST">
<div class="btn-toolbar pull-right"> <div class="btn-toolbar pull-right">
@ -196,20 +202,23 @@
var modal = $(this); var modal = $(this);
modal.find("input[type=text]").val(""); // Reset all inputs modal.find("input[type=text]").val(""); // Reset all inputs
if(button.data("id") >= 0){ // edit 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]").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=sync]").prop("checked", button.data("sync"));
modal.find("input[name=config]").val(button.data("config"));
} }
else{ // create else{ // create
modal.find("input[name=action]").val("create_local_sensor"); modal.find("input[name=action]").val("create_local_sensor");
modal.find("input[name=id]").val(-1); modal.find("input[name=id]").val(-1);
modal.find("input[name=sync]").prop("checked", "false"); modal.find("input[name=sync]").prop("checked", "false");
} }
// Update dynamic inputs
modal.find("select[name=type]").change();
}); });