[1.1.3] #1 Click on icon and show details
This commit is contained in:
parent
452543e04f
commit
bed3e4b22c
@ -55,14 +55,14 @@ html, body {
|
||||
border: rgba(0,0,0,0.4) 2px solid;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#pannels #pannels_pos {
|
||||
display: none;
|
||||
}
|
||||
#pannels #pannels_pos .item {
|
||||
margin: 4px;
|
||||
font-size: 11px;
|
||||
font-family: Verdana;
|
||||
}
|
||||
#pannels #pannels_pos .item .color {
|
||||
float: left;
|
||||
@ -88,6 +88,32 @@ html, body {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#pannels #pannel_info {
|
||||
#pannels #pannels_info {
|
||||
display: none;
|
||||
padding: 5px;
|
||||
}
|
||||
#pannels #pannels_info .bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
#pannels #pannels_info .name {
|
||||
font-size: 16px;
|
||||
}
|
||||
#pannels #pannels_info .batt {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#pannels #pannels_info .batt img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#pannels #pannels_info .gps {
|
||||
font-size: 20px;
|
||||
}
|
||||
#pannels #pannels_info .coord {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
#pannels #pannels_info .hdop {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#pannels #pannels_info .update {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
<div id="version">vx.x.x</div>
|
||||
<div id="pannels">
|
||||
<div id="pannels_pos"></div>
|
||||
<div id="pannel_info"></div>
|
||||
<div id="pannels_info"></div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/leaflet/leaflet.js"></script>
|
||||
<script type="text/javascript" src="js/nav.js"></script>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
var markers = {};
|
||||
var serverLocation = {};
|
||||
|
||||
setInterval(datarunner, 1000);
|
||||
function datarunner() {
|
||||
@ -11,89 +12,20 @@ function datarunner() {
|
||||
//https://leafletjs.com/reference-1.4.0.html#marker
|
||||
function parsedata() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var items = JSON.parse(this.responseText);
|
||||
for (var key in items) {
|
||||
if (items.hasOwnProperty(key)) {
|
||||
var markeritem = items[key];
|
||||
serverLocation = JSON.parse(this.responseText);
|
||||
for (var key in serverLocation) {
|
||||
if (serverLocation.hasOwnProperty(key)) {
|
||||
var markeritem = serverLocation[key];
|
||||
if (markeritem['Latitude'] != 0 || markeritem['Longitude'] != 0) {
|
||||
if (!markers.hasOwnProperty(key)) {
|
||||
markers[key] = L.marker([markeritem['Latitude'], markeritem['Longitude']]).addTo(mymap);
|
||||
markers[key] = L.marker([markeritem['Latitude'], markeritem['Longitude']], { 'title': key }).addTo(mymap).on("click", showMarkerInfo, key);
|
||||
} else {
|
||||
markers[key].setLatLng([markeritem['Latitude'], markeritem['Longitude']]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
parseStatus(items);
|
||||
updateStatus();
|
||||
updateDeviceStatus();
|
||||
}
|
||||
}
|
||||
|
||||
function parseStatus(items) {
|
||||
document.getElementById("pannels_pos").innerHTML = "";
|
||||
for (var name in items) {
|
||||
if (items.hasOwnProperty(name)) {
|
||||
var markeritem = items[name];
|
||||
var divItem = document.createElement("div");
|
||||
divItem.className = "item";
|
||||
var spanColor = document.createElement("span");
|
||||
spanColor.className = "color";
|
||||
if (markeritem["Batterysimple"] == 0) {
|
||||
spanColor.style.backgroundColor = "red";
|
||||
} else if (markeritem["Batterysimple"] == 1 || markeritem["Batterysimple"] == 2) {
|
||||
spanColor.style.backgroundColor = "yellow";
|
||||
} else if (markeritem["Batterysimple"] == 3 || markeritem["Batterysimple"] == 4) {
|
||||
spanColor.style.backgroundColor = "green";
|
||||
}
|
||||
divItem.appendChild(spanColor);
|
||||
var spanIcon = document.createElement("span");
|
||||
spanIcon.className = "icon";
|
||||
var imgIcon = document.createElement("img");
|
||||
imgIcon.src = "icons/marker/map-marker.png";
|
||||
spanIcon.appendChild(imgIcon);
|
||||
divItem.appendChild(spanIcon);
|
||||
var divLine1 = document.createElement("div");
|
||||
divLine1.className = "line1";
|
||||
var spanName = document.createElement("span");
|
||||
spanName.className = "name";
|
||||
spanName.innerText = name;
|
||||
divLine1.appendChild(spanName);
|
||||
var spanAkku = document.createElement("span");
|
||||
spanAkku.className = "akku";
|
||||
var imgAkku = document.createElement("img");
|
||||
imgAkku.src = "icons/akku/" + markeritem["Batterysimple"] + "-4.png";
|
||||
spanAkku.appendChild(imgAkku);
|
||||
divLine1.appendChild(spanAkku);
|
||||
divItem.appendChild(divLine1);
|
||||
var divLine2 = document.createElement("div");
|
||||
divLine2.className = "line2";
|
||||
if (markeritem["Fix"]) {
|
||||
divLine2.style.color = "green";
|
||||
divLine2.innerText = "GPS-Empfang";
|
||||
} else {
|
||||
divLine2.style.color = "red";
|
||||
divLine2.innerText = "kein GPS-Empfang";
|
||||
}
|
||||
divItem.appendChild(divLine2);
|
||||
var divLine3 = document.createElement("div");
|
||||
divLine3.className = "line3";
|
||||
divLine3.innerText = "Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]);
|
||||
divItem.appendChild(divLine3);
|
||||
document.getElementById("pannels_pos").appendChild(divItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function timeDiffToText(time) {
|
||||
var diff = Date.now() - Date.parse(time);
|
||||
diff = Math.round(diff / 1000);
|
||||
if (diff < 60) {
|
||||
return diff + " s";
|
||||
}
|
||||
if (diff < (60 * 60)) {
|
||||
return Math.floor(diff / 60) + " m";
|
||||
}
|
||||
if (diff < (60 * 60 * 24)) {
|
||||
return Math.floor(diff / (60 * 60)) + " h";
|
||||
}
|
||||
return Math.floor(diff / (60 * 60 * 24)) + " d";
|
||||
}
|
||||
@ -4,7 +4,7 @@ function showHidePanel(name) {
|
||||
document.getElementById("pannels").style.display = "block";
|
||||
document.getElementById(name).style.display = "block";
|
||||
visiblePanel = name;
|
||||
} else if (visiblePanel === name) {
|
||||
} else if (visiblePanel === name && name !== "pannels_info") {
|
||||
document.getElementById("pannels").style.display = "none";
|
||||
visiblePanel = null;
|
||||
} else {
|
||||
@ -13,3 +13,108 @@ function showHidePanel(name) {
|
||||
visiblePanel = name;
|
||||
}
|
||||
}
|
||||
|
||||
var statusToDevice = null;
|
||||
function showMarkerInfo(e) {
|
||||
showHidePanel("pannels_info");
|
||||
statusToDevice = this;
|
||||
updateDeviceStatus();
|
||||
}
|
||||
|
||||
function showMarkerInfoMenu() {
|
||||
showHidePanel("pannels_info");
|
||||
statusToDevice = this.getAttribute("rel");
|
||||
updateDeviceStatus();
|
||||
}
|
||||
|
||||
function updateDeviceStatus() {
|
||||
document.getElementById("pannels_info").innerHTML = "";
|
||||
if (serverLocation.hasOwnProperty(statusToDevice)) {
|
||||
var markeritem = serverLocation[statusToDevice];
|
||||
var html = "<div class=\"name\">Name: <span class=\"bold\">" + statusToDevice + "</span></div>";
|
||||
html += "<div class=\"batt\"><span class=\"bold\">Batterie:</span> " + markeritem["Battery"] + "V <img src=\"icons/akku/" + markeritem["Batterysimple"] + "-4.png\"></div>";
|
||||
if (markeritem["Fix"]) {
|
||||
html += "<div class=\"gps\" style=\"color: green;\">GPS-Empfang</div>";
|
||||
} else {
|
||||
html += "<div class=\"gps\" style=\"color: red;\">kein GPS-Empfang</div>";
|
||||
}
|
||||
html += "<div class=\"coord\">" + markeritem["Latitude"].toFixed(7) + ", " + markeritem["Longitude"].toFixed(7) + "</div>";
|
||||
html += "<div class=\"height\"><span class=\"bold\">Höhe:</span> " + markeritem["Height"].toFixed(1) + " m</div>";
|
||||
html += "<div class=\"hdop\"><span class=\"bold\">HDOP:</span> " + markeritem["Hdop"].toFixed(1) + "</div>";
|
||||
html += "<div class=\"update\"><span class=\"bold\">Update:</span> " + markeritem["Upatedtime"] + "<br><span class=\"bold\">Vor:</span> " + timeDiffToText(markeritem["Upatedtime"]) + "</div>";
|
||||
html += "<div><span class=\"bold\">RSSI:</span> " + markeritem["Rssi"] + ", <span class=\"bold\">SNR:</span> " + markeritem["Snr"] + "</div>";
|
||||
document.getElementById("pannels_info").innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
function updateStatus() {
|
||||
document.getElementById("pannels_pos").innerHTML = "";
|
||||
for (var name in serverLocation) {
|
||||
if (serverLocation.hasOwnProperty(name)) {
|
||||
var markeritem = serverLocation[name];
|
||||
var divItem = document.createElement("div");
|
||||
divItem.className = "item";
|
||||
divItem.onclick = showMarkerInfoMenu;
|
||||
divItem.setAttribute("rel", name);
|
||||
var spanColor = document.createElement("span");
|
||||
spanColor.className = "color";
|
||||
if (markeritem["Batterysimple"] == 0) {
|
||||
spanColor.style.backgroundColor = "red";
|
||||
} else if (markeritem["Batterysimple"] == 1 || markeritem["Batterysimple"] == 2) {
|
||||
spanColor.style.backgroundColor = "yellow";
|
||||
} else if (markeritem["Batterysimple"] == 3 || markeritem["Batterysimple"] == 4) {
|
||||
spanColor.style.backgroundColor = "green";
|
||||
}
|
||||
divItem.appendChild(spanColor);
|
||||
var spanIcon = document.createElement("span");
|
||||
spanIcon.className = "icon";
|
||||
var imgIcon = document.createElement("img");
|
||||
imgIcon.src = "icons/marker/map-marker.png";
|
||||
spanIcon.appendChild(imgIcon);
|
||||
divItem.appendChild(spanIcon);
|
||||
var divLine1 = document.createElement("div");
|
||||
divLine1.className = "line1";
|
||||
var spanName = document.createElement("span");
|
||||
spanName.className = "name";
|
||||
spanName.innerText = name;
|
||||
divLine1.appendChild(spanName);
|
||||
var spanAkku = document.createElement("span");
|
||||
spanAkku.className = "akku";
|
||||
var imgAkku = document.createElement("img");
|
||||
imgAkku.src = "icons/akku/" + markeritem["Batterysimple"] + "-4.png";
|
||||
spanAkku.appendChild(imgAkku);
|
||||
divLine1.appendChild(spanAkku);
|
||||
divItem.appendChild(divLine1);
|
||||
var divLine2 = document.createElement("div");
|
||||
divLine2.className = "line2";
|
||||
if (markeritem["Fix"]) {
|
||||
divLine2.style.color = "green";
|
||||
divLine2.innerText = "GPS-Empfang";
|
||||
} else {
|
||||
divLine2.style.color = "red";
|
||||
divLine2.innerText = "kein GPS-Empfang";
|
||||
}
|
||||
divItem.appendChild(divLine2);
|
||||
var divLine3 = document.createElement("div");
|
||||
divLine3.className = "line3";
|
||||
divLine3.innerText = "Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]);
|
||||
divItem.appendChild(divLine3);
|
||||
document.getElementById("pannels_pos").appendChild(divItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function timeDiffToText(time) {
|
||||
var diff = Date.now() - Date.parse(time);
|
||||
diff = Math.round(diff / 1000);
|
||||
if (diff < 60) {
|
||||
return diff + " s";
|
||||
}
|
||||
if (diff < (60 * 60)) {
|
||||
return Math.floor(diff / 60) + " m";
|
||||
}
|
||||
if (diff < (60 * 60 * 24)) {
|
||||
return Math.floor(diff / (60 * 60)) + " h";
|
||||
}
|
||||
return Math.floor(diff / (60 * 60 * 24)) + " d";
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user