104 lines
3.7 KiB
HTML
104 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
|
|
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
|
|
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
|
|
<script>
|
|
$("document").ready(function() {
|
|
$.ajaxSetup({
|
|
async: false
|
|
});
|
|
var switchMapping = $.getJSON('/switchMapping').responseJSON;
|
|
var sortedKeys = Object.keys(switchMapping).sort(function(a,b){return switchMapping[a]['index'] - switchMapping[b]['index']});
|
|
var firstListItem = $("li:first", "#switchlist");
|
|
for (var i = 0; i < sortedKeys.length; i++) {
|
|
var key = sortedKeys[i];
|
|
var newListItem = firstListItem.clone()
|
|
var href = newListItem.children('a')
|
|
href.attr('id', key);
|
|
href.attr('href', '#dialog?switch=' + switchMapping[key]['index'])
|
|
var span = newListItem.find("#statusEmpty0");
|
|
span.attr('id', 'state' + key);
|
|
span = newListItem.find("#labelEmpty0");
|
|
span.attr('id', 'label' + key);
|
|
span.text(switchMapping[key]['label']);
|
|
newListItem.appendTo("#switchlist");
|
|
}
|
|
firstListItem.hide();
|
|
$("#target").hide();
|
|
$("#button").click(function() {
|
|
var v = ($("#flip-checkbox-1").is(":checked")) ? 1 : 0;
|
|
var w = switchMapping[$("#target").text()]['index'];
|
|
console.debug('y:' + v + ', ' + w);
|
|
$.ajax({
|
|
url: '/switchCommand?target=' + w + '&state=' + v
|
|
});
|
|
});
|
|
$(".switchlink").click(function() {
|
|
var v = $(this).attr("id");
|
|
$("#target").text(v);
|
|
var w = $("span:first", this).text();
|
|
$("#dialogTitle").text(w);
|
|
var x = $("span:last", this).text();
|
|
console.debug(x);
|
|
if (x == 'an') {
|
|
console.debug('x:on');
|
|
$("#flip-checkbox-1").prop('checked', true);
|
|
} else {
|
|
console.debug('x:off');
|
|
$("#flip-checkbox-1").prop('checked', false);
|
|
}
|
|
$("#flip-checkbox-1").flipswitch( "refresh" );
|
|
});
|
|
function updateState() {
|
|
for (var key in switchMapping) {
|
|
$.ajax({
|
|
url: '/switchStatus?target=' + switchMapping[key]['index'],
|
|
success: function(data) {
|
|
$('#state' + key).text(data);
|
|
}
|
|
});
|
|
}
|
|
setTimeout(updateState, 1000);
|
|
}
|
|
updateState();
|
|
});
|
|
</script>
|
|
<style>
|
|
.red { background-color: red; }
|
|
.green { background-color: green; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page" id="mainpage">
|
|
<div data-role="header">
|
|
<h1>RelayBox</h1>
|
|
</div>
|
|
<div data-role="main" class="ui-content">
|
|
<ul id="switchlist" data-role="listview" data-inset="true" data-count-theme="b">
|
|
<li><a class="switchlink" id="itemEmpty0" href="#dialog?switch=0"><span id="labelEmpty0">Vorlage</span> <span id="statusEmpty0" class="ui-li-count">on</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-role="dialog" id="dialog">
|
|
<div data-role="header">
|
|
<h1 id="dialogTitle">Switching</h1>
|
|
</div>
|
|
<div data-role="main" class="ui-content">
|
|
<center>
|
|
<input name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox" data-role="flipswitch">
|
|
<span id="target">x</span>
|
|
</center>
|
|
<a href="#mainpage" id="button" data-role="button" data-rel="back">Ok</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|