ziver/hal
1
1
Fork 0
Code Pull requests Releases Activity

Configuration of Events and Sensors are working with dynamic forms

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

2
src/se/hal/page/EventConfigHttpPage.java
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());

2
src/se/hal/struct/Event.java
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();

224
web-resource/css/main.css → web-resource/css/hal.css
View file

@ -1,113 +1,113 @@
/* /*
* Base structure * Base structure
*/ */
/* Move down content because we have a fixed navbar that is 50px tall */ /* Move down content because we have a fixed navbar that is 50px tall */
body { body {
padding-top: 50px; padding-top: 50px;
} }
/* /*
* Global add-ons * Global add-ons
*/ */
.sub-header { .sub-header {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
/* /*
* Top navigation * Top navigation
* Hide default border to remove 1px line. * Hide default border to remove 1px line.
*/ */
.navbar-fixed-top { .navbar-fixed-top {
border: 0; border: 0;
} }
/* /*
* Sidebar * Sidebar
*/ */
/* Hide for mobile, show later */ /* Hide for mobile, show later */
.sidebar { .sidebar {
display: none; display: none;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.sidebar { .sidebar {
position: fixed; position: fixed;
top: 51px; top: 51px;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1000; z-index: 1000;
display: block; display: block;
padding: 20px; padding: 20px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5; background-color: #f5f5f5;
border-right: 1px solid #eee; border-right: 1px solid #eee;
} }
} }
/* Sidebar navigation */ /* Sidebar navigation */
.nav-sidebar { .nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */ margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px; margin-bottom: 20px;
margin-left: -20px; margin-left: -20px;
} }
.nav-sidebar > li > a { .nav-sidebar > li > a {
padding-right: 20px; padding-right: 20px;
padding-left: 20px; padding-left: 20px;
} }
.nav-sidebar > .active > a, .nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus { .nav-sidebar > .active > a:focus {
color: #fff; color: #fff;
background-color: #428bca; background-color: #428bca;
} }
/* /*
* Main content * Main content
*/ */
.main { .main {
padding: 20px; padding: 20px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.main { .main {
padding-right: 40px; padding-right: 40px;
padding-left: 40px; padding-left: 40px;
} }
} }
.main .page-header { .main .page-header {
margin-top: 0; margin-top: 0;
} }
/* /*
* Placeholder dashboard ideas * Placeholder dashboard ideas
*/ */
.placeholders { .placeholders {
margin-bottom: 200px; margin-bottom: 200px;
text-align: center; text-align: center;
} }
.placeholders h4 { .placeholders h4 {
margin-bottom: 0; margin-bottom: 0;
} }
.placeholder { .placeholder {
margin-bottom: 20px; margin-bottom: 20px;
} }
.placeholder img { .placeholder img {
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
} }
.panel{ .panel{
margin-bottom: 70px; margin-bottom: 70px;
} }
.drop-shadow { .drop-shadow {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
} }

27
web-resource/event_config.tmpl
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>

4
web-resource/index.tmpl
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);

29
web-resource/sensor_config.tmpl
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();
}); });