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.
200 lines
8.6 KiB
200 lines
8.6 KiB
<!--
|
|
#Authors: Oulis Evangelos, Oulis Nikolaos, Katsibras Drosos
|
|
#===================================================================
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<meta charset="UTF-8">
|
|
<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();
|
|
server_protocol = $("#server_protocol").val();
|
|
alert(server_protocol + "://" + server_ip + " " + server_port + ". Started!!!")
|
|
$("#msg").empty();
|
|
if (server_ip !== "" && server_ip !== null && server_port !== "" && server_port !== null && server_protocol !== "" && server_protocol != null) {
|
|
all_parks = 0;
|
|
$("#msg").html("<font color='red'>ok!</font>");
|
|
|
|
$("#approve").prop("disabled", true);
|
|
jQuery.ajax({
|
|
url: server_protocol + "://" + server_ip + ":" + server_port + "/",
|
|
type: "GET",
|
|
|
|
contentType: "application/json; charset=utf-8",
|
|
success: function(resultData) {
|
|
row = 1, pos = "r";
|
|
$("talbe#tab2").append("<tr id=\"row0\"></tr>");
|
|
$("tr#row0").append("<td width=\"30%\" bgcolor=\"lightgrey\"><div class=\"road\"></div></td>");
|
|
$("tr#row0").append("<td width=\"20%\" bgcolor=\"lightgrey\"><div class=\"road\"></div></td>");
|
|
$("tr#row0").append("<td width=\"20%\" bgcolor=\"lightgrey\"><div class=\"road\"></div></td>");
|
|
$("tr#row0").append("<td width=\"30%\" bgcolor=\"lightgrey\"><div class=\"road\"></div></td>");
|
|
$.each(resultData, function(key, val) {
|
|
console.log("Parking No " + val.no + ", val: " + val.status);
|
|
content = "";
|
|
key ++;
|
|
|
|
if (val.status == true) {
|
|
if (pos == "l") {
|
|
content = "<td id=\"park" + val.no + "\" width=\"30%\">No" + val.no + "<div id=\"" + val.no + "\" class=\"full left\"></div></td>";
|
|
} else {
|
|
content = "<td id=\"park" + val.no + "\" width=\"30%\">No" + val.no + "<div id=\"" + val.no + "\" class=\"full\"></div></td>";
|
|
}
|
|
} else {
|
|
if (pos == "l") {
|
|
content = "<td id=\"park" + val.no + "\" width=\"30%\">No" + val.no + "<div id=\"" + val.no + "\" class=\"empty left\"></div></td>";
|
|
}
|
|
else {
|
|
content = "<td id=\"park" + val.no + "\" width=\"30%\">No" + val.no + "<div id=\"" + val.no + "\" class=\"empty\"></div></td>";
|
|
}
|
|
}
|
|
if (pos == "r") {
|
|
$("table#tab2").append("<tr id=\"row" + row + "\"></tr>");
|
|
$("tr#row" + row).append(content);
|
|
$("tr#row" + row).append("<td width=\"20%\" bgcolor=\"lightgrey\"><div class=\"road\"></div></td>");
|
|
pos = "l";
|
|
} else if (pos == "l") {
|
|
$("tr#row" + row).append("<td width=\"20%\" bgcolor=\"lightgrey\"><div class=\"road\"></div></td>");
|
|
$("tr#row" + row).append(content);
|
|
row++;
|
|
pos = "r";
|
|
}
|
|
|
|
all_parks = all_parks + 1;
|
|
});
|
|
},
|
|
error: function(jqXHR, testStatus, errorThrown) {
|
|
},
|
|
|
|
timeout: 120000,
|
|
});
|
|
|
|
|
|
setInterval(function () {
|
|
jQuery.ajax({
|
|
url: server_protocol + "://" + server_ip + ":" + server_port + "/",
|
|
type: "GET",
|
|
|
|
contentType: "application/json; charset=utf-8",
|
|
success: function(resultData) {
|
|
$.each(resultData, function(key, val) {
|
|
console.log("Parking No " + val.no + " -> " + val.status);
|
|
if (val.status == true)
|
|
$("div#" + val.no).removeClass("full").addClass("empty");
|
|
else if (val.status == false)
|
|
$("div#" + val.no).removeClass("empty").addClass("full");
|
|
});
|
|
},
|
|
error: function(jqXHR, testStatus, errorThrown) {
|
|
},
|
|
|
|
timeout: 120000,
|
|
});
|
|
|
|
jQuery.ajax({
|
|
url: server_protocol + "://" + server_ip + ":" + server_port + "/chart",
|
|
type: "GET",
|
|
|
|
contentType: "application/json; charset=utf-8",
|
|
success: function(resultData) {
|
|
min = 0;
|
|
max = all_parks;
|
|
chart = "<img src='http://chart.apis.google.com/chart?cht=lc&chs=400x300&chxt=x,x,y,y&chxp=1,50|3,50&chxr=2," + min + "," + max + "|0,0,24&chds=" + min + "," + max + "&chxl=1:|Time|3:|" + "Ελεύθερες Θέσεις" + "&chd=t:"
|
|
$.each(resultData, function(key, val) {
|
|
console.log("Parking No " + val.usage + " -> " + val.time);
|
|
|
|
if (key > 1) {
|
|
chart += "," + val.usage;
|
|
} else {
|
|
chart += val.usage;
|
|
}
|
|
|
|
});
|
|
chart += "'>";
|
|
$("div#tab3").html(chart);
|
|
},
|
|
error: function(jqXHR, testStatus, errorThrown) {
|
|
},
|
|
|
|
timeout: 120000,
|
|
});
|
|
}, 1000);
|
|
} else {
|
|
$("#msg").html("<font color='red'>Something went wrong. Try again</font>");
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Parking</h1>
|
|
<h3>Server Settings</h3>
|
|
<form autocomplete="on">
|
|
<table id="tab1">
|
|
<tr>
|
|
<td>Server Protocol:</td>
|
|
<td><select type="text" id="server_protocol">
|
|
<option value="https">https</option>
|
|
<option value="http">http</option>
|
|
<td>
|
|
</tr>
|
|
<tr>
|
|
<td>Server IP:</td>
|
|
<td><input type="text" id="server_ip" placeholder="xxx.xxx.xxx.xxx" value="iot-smart-parking.herokuapp.com"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Server PORT:</td>
|
|
<td><input type="text" id="server_port" placeholder="xxxx" value="443" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div id="msg"></div></td>
|
|
<td><input type="button" id="approve" value="ok"/></td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
|
|
<h3>Διάγραμμα Χώρου Στάθμευσης</h3>
|
|
<div id="tab3">
|
|
</div>
|
|
|
|
<h3>Parking Diagram</h3>
|
|
<table width="100%" id="tab2">
|
|
<!--<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>
|
|
|