From bed3e4b22c6bd28ec93c5bd54c5a29e211cf675f Mon Sep 17 00:00:00 2001
From: BlubbFish <git@blubbfish.net>
Date: Fri, 8 Mar 2019 18:33:11 +0100
Subject: [PATCH] [1.1.3] #1 Click on icon and show details

---
 Lora-Map/resources/css/global.css |  32 ++++++++-
 Lora-Map/resources/index.html     |   2 +-
 Lora-Map/resources/js/marker.js   |  84 +++--------------------
 Lora-Map/resources/js/menu.js     | 107 +++++++++++++++++++++++++++++-
 4 files changed, 144 insertions(+), 81 deletions(-)

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 @@
     <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>
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 = "<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";
 }
\ No newline at end of file