Configuration of Events and Sensors are working with dynamic forms
Former-commit-id: ff81dee3365eee865099badc73ca70bc7cb222c6
This commit is contained in:
parent
02e15810ec
commit
42064e5209
7 changed files with 173 additions and 134 deletions
|
|
@ -1,113 +1,113 @@
|
|||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
/* Move down content because we have a fixed navbar that is 50px tall */
|
||||
body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Global add-ons
|
||||
*/
|
||||
|
||||
.sub-header {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
/*
|
||||
* Top navigation
|
||||
* Hide default border to remove 1px line.
|
||||
*/
|
||||
.navbar-fixed-top {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
/* Hide for mobile, show later */
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 51px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar navigation */
|
||||
.nav-sidebar {
|
||||
margin-right: -21px; /* 20px padding + 1px border */
|
||||
margin-bottom: 20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.nav-sidebar > li > a {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.nav-sidebar > .active > a,
|
||||
.nav-sidebar > .active > a:hover,
|
||||
.nav-sidebar > .active > a:focus {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Main content
|
||||
*/
|
||||
|
||||
.main {
|
||||
padding: 20px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.main {
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
.main .page-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Placeholder dashboard ideas
|
||||
*/
|
||||
|
||||
.placeholders {
|
||||
margin-bottom: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.placeholders h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.placeholder {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.placeholder img {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.panel{
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.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)
|
||||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
/* Move down content because we have a fixed navbar that is 50px tall */
|
||||
body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Global add-ons
|
||||
*/
|
||||
|
||||
.sub-header {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
/*
|
||||
* Top navigation
|
||||
* Hide default border to remove 1px line.
|
||||
*/
|
||||
.navbar-fixed-top {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
/* Hide for mobile, show later */
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 51px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar navigation */
|
||||
.nav-sidebar {
|
||||
margin-right: -21px; /* 20px padding + 1px border */
|
||||
margin-bottom: 20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.nav-sidebar > li > a {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.nav-sidebar > .active > a,
|
||||
.nav-sidebar > .active > a:hover,
|
||||
.nav-sidebar > .active > a:focus {
|
||||
color: #fff;
|
||||
background-color: #428bca;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Main content
|
||||
*/
|
||||
|
||||
.main {
|
||||
padding: 20px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.main {
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
.main .page-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Placeholder dashboard ideas
|
||||
*/
|
||||
|
||||
.placeholders {
|
||||
margin-bottom: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.placeholders h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.placeholder {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.placeholder img {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.panel{
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.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)
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
19
web-resource/js/hal.js
Executable 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);
|
||||
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue