From 3fda36ecbc86af0c491ecdafc5f0340e15bddb4a Mon Sep 17 00:00:00 2001
From: BlubbFish <git@blubbfish.net>
Date: Sun, 25 Aug 2019 19:15:46 +0200
Subject: [PATCH] #16 Start of Frontend

---
 Lora-Map/Model/Marker.cs            |  2 +-
 Lora-Map/Model/PositionItem.cs      | 30 +++++------------------------
 Lora-Map/resources/admin/js/menu.js |  2 +-
 Lora-Map/resources/css/global.css   | 13 +++++++++++++
 Lora-Map/resources/index.html       | 16 +++++++++++++++
 Lora-Map/resources/js/map.js        |  8 ++++----
 6 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/Lora-Map/Model/Marker.cs b/Lora-Map/Model/Marker.cs
index fedef22..e6b1510 100644
--- a/Lora-Map/Model/Marker.cs
+++ b/Lora-Map/Model/Marker.cs
@@ -37,7 +37,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model
           }
         }
       }
-      ret += (ret.Contains("?")) ? "&name=" + name : "?name=" + name;
+      ret += ret.Contains("?") ? "&name=" + name : "?name=" + name;
       return ret;
     }
 
diff --git a/Lora-Map/Model/PositionItem.cs b/Lora-Map/Model/PositionItem.cs
index d081bf7..64e4e46 100644
--- a/Lora-Map/Model/PositionItem.cs
+++ b/Lora-Map/Model/PositionItem.cs
@@ -19,8 +19,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model {
     public Double Height { get; private set; }
     public String Name { get; private set; }
     public String Icon { get; private set; }
-
-    
+    public String Group { get; private set; }
 
     public PositionItem(JsonData json, JsonData marker) {
       this.Update(json);
@@ -29,18 +28,9 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model {
 
     public void UpdateMarker(JsonData marker, String id) {
       if(marker.ContainsKey(id)) {
-        if(marker[id].ContainsKey("name") && marker[id]["name"].IsString) {
-          this.Name = (String)marker[id]["name"];
-        } else {
-          this.Name = id;
-        }
-        if(marker[id].ContainsKey("marker.svg") && marker[id]["marker.svg"].IsObject) {
-          this.Icon = Marker.ParseMarkerConfig(marker[id]["marker.svg"], this.Name);
-        } else if(marker[id].ContainsKey("icon") && marker[id]["icon"].IsString) {
-          this.Icon = (String)marker[id]["icon"];
-        } else {
-          this.Icon = null;
-        }
+        this.Name = marker[id].ContainsKey("name") && marker[id]["name"].IsString ? (String)marker[id]["name"] : id;
+        this.Icon = marker[id].ContainsKey("marker.svg") && marker[id]["marker.svg"].IsObject ? Marker.ParseMarkerConfig(marker[id]["marker.svg"], this.Name) : marker[id].ContainsKey("icon") && marker[id]["icon"].IsString ? (String)marker[id]["icon"] : null;
+        this.Group = marker[id].ContainsKey("Group") && marker[id]["Group"].IsString ? (String)marker[id]["Group"] : "no";
       } else {
         this.Name = id;
         this.Icon = null;
@@ -71,17 +61,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model {
       }
       this.Recievedtime = DateTime.UtcNow;
       this.Battery = Math.Round((Double)json["BatteryLevel"], 2);
-      if(this.Battery < 3.44) {
-        this.Batterysimple = 0;
-      } else if(this.Battery < 3.53) {
-        this.Batterysimple = 1;
-      } else if(this.Battery < 3.6525) {
-        this.Batterysimple = 2;
-      } else if(this.Battery < 3.8825) {
-        this.Batterysimple = 3;
-      } else {
-        this.Batterysimple = 4;
-      }
+      this.Batterysimple = this.Battery < 3.44 ? 0 : this.Battery < 3.53 ? 1 : this.Battery < 3.6525 ? 2 : this.Battery < 3.8825 ? 3 : 4;
       this.Latitude = (Double)json["Gps"]["Latitude"];
       this.Longitude = (Double)json["Gps"]["Longitude"];
       this.Fix = (Boolean)json["Gps"]["Fix"];
diff --git a/Lora-Map/resources/admin/js/menu.js b/Lora-Map/resources/admin/js/menu.js
index 17ee7a2..8a25847 100644
--- a/Lora-Map/resources/admin/js/menu.js
+++ b/Lora-Map/resources/admin/js/menu.js
@@ -74,7 +74,7 @@ var NamesEditor = {
         } else {
           html += "<td><img src='../js/leaflet/images/marker-icon.png'></td>";
         }
-        var gfilter = (typeof nameentry.Group === "undefined") ? "no" : nameentry.Group;
+        var gfilter = typeof nameentry.Group === "undefined" ? "no" : nameentry.Group;
         html += "<td rel='" + gfilter + "'>" + this.filterGropus[gfilter] + "</td>";
         html += "<td><img src='../icons/general/edit.png' onclick='NamesEditor.Edit(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='NamesEditor.Delete(this.parentNode.parentNode)' class='pointer'></td>" +
           "</tr>";
diff --git a/Lora-Map/resources/css/global.css b/Lora-Map/resources/css/global.css
index 6015c47..24f1a65 100644
--- a/Lora-Map/resources/css/global.css
+++ b/Lora-Map/resources/css/global.css
@@ -211,6 +211,7 @@ margin: 4px;
 
 #pannels #pannels_weather {
   margin: 5px;
+  display: none;
 }
 #pannels #pannels_weather h1 {
   margin: 0;
@@ -247,6 +248,18 @@ margin: 4px;
   margin-bottom: 10px;
 }
 
+#pannels #pannels_filter {
+  margin: 5px;
+  display: none;
+}
+#pannels #pannels_filter h1 {
+  font-size: 16px;
+}
+#pannels #pannels_filter select {
+  height: 140px;
+  width: 235px;
+}
+
 #overlays #cameracount {
   position: absolute;
   top: 10px;
diff --git a/Lora-Map/resources/index.html b/Lora-Map/resources/index.html
index f78e38b..d04c16c 100644
--- a/Lora-Map/resources/index.html
+++ b/Lora-Map/resources/index.html
@@ -11,6 +11,7 @@
   <div id="bigmap"></div>
   <div id="menucollumn">
     <span class="pos" onclick="MenuObject.ShowHidePanel('pannels_pos');"></span>
+    <span class="filter" onclick="MenuObject.ShowHidePanel('pannels_filter');"></span>
     <span class="weather" onclick="MenuObject.ShowHidePanel('pannels_weather');" id="menucol_weather_icon"></span>
     <span class="admin" onclick="MenuObject.ShowHidePanel('pannels_admin');"></span>
     <span class="info" onclick="MenuObject.ShowHidePanel('pannels_version');"></span>
@@ -20,6 +21,21 @@
     <div id="pannels_info">
       <!-- Shows infos about selected device here, this will be cleand by js -->
     </div>
+    <div id="pannels_filter">
+      <h1>Angezeigte Gruppen</h1>
+      <select multiple>
+        <option value="fw">Feuerwehr</option>
+        <option value="sani">Sanitäter</option>
+        <option value="pol">Polizei</option>
+        <option value="oa">Ordnungsamt</option>
+        <option value="si">Sicherheitsdienst</option>
+        <option value="thw">Technisches Hilfswerk</option>
+        <option value="crew">Veranstalter</option>
+        <option value="dev">Entwickler</option>
+      </select><br />
+      <span>(Klicken Sie mit <strong>STRG</strong> in das Formular um mehrere Gruppen auszuwählen)</span><br /><br />
+      <span>Sind keine Gruppen ausgewählt, werden alle Icons angezeigt, egal welcher Gruppe sie angehören.</span>
+    </div>
     <div id="pannels_weather">
       <h1>Keine Gefahren</h1>
     </div>
diff --git a/Lora-Map/resources/js/map.js b/Lora-Map/resources/js/map.js
index 3fb6321..2a08bf0 100644
--- a/Lora-Map/resources/js/map.js
+++ b/Lora-Map/resources/js/map.js
@@ -77,10 +77,10 @@
         var box = this._FightDedection[cameraid];
         var diff = FunctionsObject.TimeCalculation(fight["LastUpdate"], "diffraw");
         if (diff <= 10 && box.options.color === "black") {
-          box.setStyle({ color: 'rgb(' + (fight["FightProbability"]*255)+',0,0)' });
+          box.setStyle({ color: 'rgb(' + fight["FightProbability"]*255+',0,0)' });
         } else if (diff <= 10 && box.options.color !== "black") {
-          if (diff % 2 == 0) {
-            box.setStyle({ color: 'rgb(' + (fight["FightProbability"] * 255) + ',0,0)' });
+          if (diff % 2 === 0) {
+            box.setStyle({ color: 'rgb(' + fight["FightProbability"] * 255 + ',0,0)' });
           } else {
             box.setStyle({ color: 'green' });
           }
@@ -116,7 +116,7 @@
     }
   },
   _createRGB: function (current, max) {
-    return "hsl(" + (120 * (1 - (current / max))) + ",100%,50%)";
+    return "hsl(" + 120 * (1 - current / max) + ",100%,50%)";
   },
   _ParseAJAXGeo: function (geo) {
     if (!(Object.keys(geo).length === 0 && geo.constructor === Object)) {