From 4444b97d3bf021ea5cbe4b5c4d8e62b7a6afb73c Mon Sep 17 00:00:00 2001
From: Philip Schell <philip.schell@fit.fraunhofer.de>
Date: Fri, 29 Mar 2019 13:46:41 +0100
Subject: [PATCH] add alert border and open device info

---
 Lora-Map/resources/css/global.css |  7 +++++++
 Lora-Map/resources/js/marker.js   | 14 ++++++--------
 Lora-Map/resources/js/menu.js     |  6 ++++++
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/Lora-Map/resources/css/global.css b/Lora-Map/resources/css/global.css
index 958e741..f890970 100644
--- a/Lora-Map/resources/css/global.css
+++ b/Lora-Map/resources/css/global.css
@@ -3,6 +3,13 @@
 #bigmap {
     height: 100%;
 }
+#bigmap .marker-alert {
+  border: red 5px dashed;
+  top: -5px;
+  left: -5px;
+  border-radius: 5px;
+  box-shadow: rgba(0, 0, 0, 0.4) 10px 10px;
+}
 
 /* Optional: Makes the sample page fill the window. */
 html, body {
diff --git a/Lora-Map/resources/js/marker.js b/Lora-Map/resources/js/marker.js
index 55690ce..6d54fb7 100644
--- a/Lora-Map/resources/js/marker.js
+++ b/Lora-Map/resources/js/marker.js
@@ -53,14 +53,12 @@ function parseAjaxPanic() {
       if (panics.hasOwnProperty(id)) {
         var panicitem = panics[id];
         if (markers.hasOwnProperty(id)) {
-          if (typeof markers[id].getPopup() === "undefined") {
-            markers[id].bindPopup("");
-          }
-          if (timeDiffRaw(panicitem["Triggerdtime"]) <= 10 && !markers[id].isPopupOpen()) {
-            markers[id].setPopupContent("ALERT!");
-            markers[id].openPopup();
-          } else if (timeDiffRaw(panicitem["Triggerdtime"]) > 10 && markers[id].isPopupOpen()) {
-            markers[id].closePopup();
+          var marker = markers[id];
+          if (timeDiffRaw(panicitem["Triggerdtime"]) <= 10 && marker._icon.className.indexOf(" marker-alert") === -1) {
+            marker._icon.className += " marker-alert";
+            showMarkerInfoPerId(id);
+          } else if (timeDiffRaw(panicitem["Triggerdtime"]) > 10 && marker._icon.className.indexOf(" marker-alert") !== -1) {
+            marker._icon.className = marker._icon.className.replace(" marker-alert", "");
           }
         }
       }
diff --git a/Lora-Map/resources/js/menu.js b/Lora-Map/resources/js/menu.js
index d423dc9..442d619 100644
--- a/Lora-Map/resources/js/menu.js
+++ b/Lora-Map/resources/js/menu.js
@@ -24,6 +24,12 @@ function showMarkerInfo(e) {
   updateDeviceStatus();
 }
 
+function showMarkerInfoPerId(id) {
+  showHidePanel("pannels_info");
+  statusToDevice = id;
+  updateDeviceStatus();
+}
+
 function showMarkerInfoMenu() {
   showHidePanel("pannels_info");
   statusToDevice = this.getAttribute("rel");