<!--
#Authors: Oulis Evangelos, Oulis Nikolaos, Katsibras Drosos
#===================================================================
-->
<!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>
$(document).ready(function(){
$("#approve").click(function() {
server_ip = $("#server_ip").val();
server_port = $("#server_port").val();
alert(server_ip + " " + server_port + ". Started!!!")
$("#msg").empty();
if (server_ip !== "" && server_ip !== null && server_port !== "" && server_port !== null) {
$("#msg").html("<font color='red'>ok!</font>");
setInterval(function () {
jQuery.ajax({
url: "http://" + server_ip + ":" + server_port + "/",
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,
});
}, 1000);
} else {
$("#msg").html("<font color='red'>Something went wrong. Try again</font>");
}
});
});
</script>
</head>
<body>
<h1>Parking</h1>
<h3>Server Settings</h3>
<table>
<tr>
<td>Server IP:</td>
<td><input type="text" id="server_ip" placeholder="xxx.xxx.xxx.xxx"/></td>
</tr>
<tr>
<td>Server PORT:</td>
<td><input type="text" id="server_port" placeholder="xxxx"/></td>
</tr>
<tr>
<td><div id="msg"></div></td>
<td><input type="button" id="approve" value="ok"/></td>
</tr>
</table>
<h3>Parking Diagram</h3>
<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>