diff --git a/Lora-Map/resources/css/global.css b/Lora-Map/resources/css/global.css
index 3d6adab..502bdd4 100644
--- a/Lora-Map/resources/css/global.css
+++ b/Lora-Map/resources/css/global.css
@@ -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;
}
\ No newline at end of file
diff --git a/Lora-Map/resources/index.html b/Lora-Map/resources/index.html
index 469e070..d7088db 100644
--- a/Lora-Map/resources/index.html
+++ b/Lora-Map/resources/index.html
@@ -15,7 +15,7 @@
vx.x.x
diff --git a/Lora-Map/resources/js/marker.js b/Lora-Map/resources/js/marker.js
index 66fd1fa..90319ec 100644
--- a/Lora-Map/resources/js/marker.js
+++ b/Lora-Map/resources/js/marker.js
@@ -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";
}
\ No newline at end of file
diff --git a/Lora-Map/resources/js/menu.js b/Lora-Map/resources/js/menu.js
index d6ae7df..2dd4520 100644
--- a/Lora-Map/resources/js/menu.js
+++ b/Lora-Map/resources/js/menu.js
@@ -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 {
@@ -12,4 +12,109 @@ function showHidePanel(name) {
document.getElementById(name).style.display = "block";
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 = "Name: " + statusToDevice + "
";
+ html += "Batterie: " + markeritem["Battery"] + "V

";
+ if (markeritem["Fix"]) {
+ html += "GPS-Empfang
";
+ } else {
+ html += "kein GPS-Empfang
";
+ }
+ html += "" + markeritem["Latitude"].toFixed(7) + ", " + markeritem["Longitude"].toFixed(7) + "
";
+ html += "Höhe: " + markeritem["Height"].toFixed(1) + " m
";
+ html += "HDOP: " + markeritem["Hdop"].toFixed(1) + "
";
+ html += "Update: " + markeritem["Upatedtime"] + "
Vor: " + timeDiffToText(markeritem["Upatedtime"]) + "
";
+ html += "RSSI: " + markeritem["Rssi"] + ", SNR: " + markeritem["Snr"] + "
";
+ 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";
}
\ No newline at end of file