105 lines
3.5 KiB
HTML
105 lines
3.5 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() {
|
|
$("#target").hide();
|
|
$("#button").click(function() {
|
|
var $v = "nix";
|
|
if ($("#flip-checkbox-1").is(":checked")) {
|
|
$v = "on";
|
|
} else {
|
|
$v = "off";
|
|
}
|
|
var $w = $("#target").text();
|
|
$.ajax({
|
|
url: 'http://172.16.2.15:8080/switch?target=' + $w + '&state=' + $v
|
|
});
|
|
// $("#bla").text($v + $w);
|
|
});
|
|
$(".switchlink").click(function() {
|
|
var $v = $(this).attr("id");
|
|
var $w = $("span:first", this).text();
|
|
$("#dialogTitle").text($w);
|
|
$("#target").text($v);
|
|
});
|
|
(function worker1() {
|
|
$.ajax({
|
|
url: 'http://172.16.2.15:8080/kitchen',
|
|
success: function(data) {
|
|
$('#stateKueche').text(data);
|
|
},
|
|
complete: function() {
|
|
// Schedule the next request when the current one's complete
|
|
setTimeout(worker1, 1000);
|
|
}
|
|
});
|
|
})();
|
|
(function worker2() {
|
|
$.ajax({
|
|
url: 'http://172.16.2.15:8080/oven',
|
|
success: function(data) {
|
|
$('#stateHerd').text(data);
|
|
},
|
|
complete: function() {
|
|
// Schedule the next request when the current one's complete
|
|
setTimeout(worker2, 1000);
|
|
}
|
|
});
|
|
})();
|
|
(function worker3() {
|
|
$.ajax({
|
|
url: 'http://172.16.2.15:8080/laundry',
|
|
success: function(data) {
|
|
$('#stateWaschkueche').text(data);
|
|
},
|
|
complete: function() {
|
|
// Schedule the next request when the current one's complete
|
|
setTimeout(worker3, 1000);
|
|
}
|
|
});
|
|
})();
|
|
});
|
|
</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 data-role="listview" data-inset="true" data-count-theme="b">
|
|
<li><a class="switchlink" id="kitchen" href="#dialog?switch=kitchen"><span>Küche Rest</span> <span id="stateKueche" class="ui-li-count">on</span></a></li>
|
|
<li><a class="switchlink" id="oven" href="#dialog?switch=oven"><span>Herd</span> <span id="stateHerd" class="ui-li-count">on</span></a></li>
|
|
<li><a class="switchlink" id="laundry" href="#dialog?switch=laundry"><span>Waschküche</span> <span id="stateWaschkueche" class="ui-li-count">off</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>
|
|
|