You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.2 KiB
67 lines
2.2 KiB
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Smart Parking</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="parking.css">
|
||
|
|
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function getParkingStatus() {
|
||
|
|
jQuery.ajax({
|
||
|
|
url: "http://192.168.1.13:8080/",
|
||
|
|
type: "GET",
|
||
|
|
|
||
|
|
contentType: "application/json; charset=utf-8",
|
||
|
|
success: function(resultData) {
|
||
|
|
$.each(resultData, function(key, val) {
|
||
|
|
console.log(key + " -> " + val);
|
||
|
|
if (val == "1")
|
||
|
|
$("#" + key).removeClass("full").addClass("empty");
|
||
|
|
else if (val == "0")
|
||
|
|
$("#" + key).removeClass("empty").addClass("full");
|
||
|
|
});
|
||
|
|
},
|
||
|
|
error: function(jqXHR, testStatus, errorThrown) {
|
||
|
|
},
|
||
|
|
|
||
|
|
timeout: 12000,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$(document).ready(function(){
|
||
|
|
setInterval(getParkingStatus, 1000);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>Parking</h1>
|
||
|
|
<table width="100%">
|
||
|
|
<tr>
|
||
|
|
<td id="park4" width="30%">No4<div id="4" class="full"></div></td>
|
||
|
|
<td width="20%" bgcolor="lightgrey"><div class="road"></div></td>
|
||
|
|
<td width="20%" bgcolor="lightgrey"><div class="road"></div></td>
|
||
|
|
<td id="park5" width="30%">No5<div id="5" class="full left"></div></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td id="park3" width="30%">No3<div id="3" class="full"></div></td>
|
||
|
|
<td width="20%" bgcolor="lightgrey"><div class="road"></div></td>
|
||
|
|
<td width="20%" bgcolor="lightgrey"><div class="road"></div></td>
|
||
|
|
<td id="park6" width="30%">No6<div id="6" class="full left"></div></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td id="park2" width="30%">No2<div id="2" class="full"></div></td>
|
||
|
|
<td width="20%" bgcolor="lightgrey"><div class="road"></div></td>
|
||
|
|
<td width="20%" bgcolor="lightgrey"><div class="road"></div></td>
|
||
|
|
<td id="park7" width="30%">No7<div id="7" class="full left"></div></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td id="park1" width="30%">No1<div id="1" class="full"></div></td>
|
||
|
|
<td width="20%" bgcolor="lightgrey"><div class="road"></div></td>
|
||
|
|
<td width="20%" bgcolor="lightgrey"><div class="road"></div></td>
|
||
|
|
<td id="park8" width="30%">No8<div id="8" class="full left"></div></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</body>
|
||
|
|
</html>
|