1
0
Fork 0
mirror of https://github.com/Ysurac/openmptcprouter-feeds.git synced 2025-03-09 15:40:03 +00:00
openmptcprouter-feeds/luci-app-gpoint-main/luasrc/view/gpoint/overview.htm
2022-11-22 03:23:41 +08:00

140 lines
4.5 KiB
HTML

<%#
Module for providing data from a mobile satellite navigation system ( mobile modems, etc.)
-= Design and Development 2021-2022 =-
Licensed to the public under the Apache License 2.0.
-%>
<%+gpoint/css/style%>
<%+header%>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.8.1/css/ol.css" type="text/css">
<style type="text/css">
#marker {
width: 200px;
height: 200px;
background: url("<%=resource%>/icons/gpoint_icons/spiner.gif") no-repeat scroll 0% 0% transparent;
}
</style>
<h2>
<div>GPoint: Router Location
<span class="status" id="stat"></span>
</div>
</h2>
<body>
<div id="map" class="map"></div>
<div style="display: none;">
<div id="marker" title="Marker"></div>
</div>
<div><a id="address" href=""></a></div>
<div class="cbi-section fade-in" style="">
<h3><%:Details:%></h3>
<div>
<table class="table">
<tr class="tr">
<td class="td left" width="33.3%"><%:Longitude:%></td>
<td class="td left" id="longitude">-</td>
<td class="td left" width="33.3%"><%:Latitude:%></td>
<td class="td left" id="latitude">-</td>
<td class="td left" width="33.3%"><%:Altitude:%></td>
<td class="td left" id="altitude">-</td>
</tr>
<tr class="tr">
<td class="td left" width="33.3%"><%:Time (UTC):%></td>
<td class="td left" id="utc">-</td>
<td class="td left" width="33.3%"><%:Date:%></td>
<td class="td left" id="date">-</td>
<td class="td left" width="33.3%"><%:Satellites:%></td>
<td class="td left" id="nsat">-</td>
</tr>
<tr class="tr">
<td class="td left" width="33.3%"><%:Hdop:%></td>
<td class="td left" id="hdop">-</td>
<td class="td left" width="33.3%"><%:Course:%></td>
<td class="td left" id="cog">-</td>
<td class="td left" width="33.3%"><%:Speed:%></td>
<td class="td left" id="spkm">-</td>
</tr>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.8.1/build/ol.js"></script>
<%+gpoint/js/js%>
<script type="text/javascript">
var prev = true; // show geolocation (auto zoom) <%=resource%>/gpoint
const keys = ["longitude", "latitude", "altitude", "utc", "date", "nsat", "hdop", "cog", "spkm"];
function cleanTable() {
for(var key of keys) {
document.getElementById(key).innerHTML = "-";
}
}
function preview(prev) {
if(prev) {
document.getElementById('fmr').click();
prev = false;
} else {
document.getElementById('fmr').click();
document.getElementById('address').innerHTML = "";
prev = true;
}
return prev
}
XHR.poll(4, '<%=build_url("admin/services/gpoint/geopoint")%>', null,
// x - luci json header, geopoint - payload;
function(x, geopoint) {
// GP Data
if(!geopoint.warning.app[0]) {
if(geopoint.gp.latitude != '-' && geopoint.gp.longitude != '-') {
getAddress(geopoint.gp.latitude, geopoint.gp.longitude);
addMarker(geopoint.gp.latitude, geopoint.gp.longitude, icon);
}
for(const key of keys) {document.getElementById(key).innerHTML = String.format(geopoint.gp[key]);}
if (prev) {
document.getElementById('fmr').click();
prev = false;
}
}
else {
addSpiner();
if (!prev) {
cleanTable();
document.getElementById('fmr').click();
document.getElementById('address').innerHTML = "";
prev = true;
}
}
var color = "orange";
var error_status = "";
if(geopoint.warning.locator[1] == "Data received from locator...") {
error_status = geopoint.warning.locator[1];
if(geopoint.warning.app[0]) {
error_status = error_status + " (Service: "+geopoint.warning.app[1]+')';
}
}
else if(geopoint.warning.app[0]) {
color = "red";
error_status = geopoint.warning.app[1];
}
else if(geopoint.warning.gp[0]) {
color = "orange"
error_status = geopoint.warning.gp[1]
}
else if(!geopoint.warning.app[0] && !geopoint.warning.gp[0]) {
color = "greenyellow";
error_status = geopoint.warning.gp[1];
}
else{}
document.querySelector("#stat").style.color = color;
document.getElementById("stat").title = error_status;
});
</script>
<%+footer%>