#16 filter nach kategorien/tracker einbauen

CHANGELOG

@@ -7,6 +7,7 @@
 * #24 Add information about weather/warning
 * #28 Fightdedection Plygon on Map
 * #27 Draw Camera-Desity bock on map
+* #16 filter nach kategorien/tracker einbauen
 ### Bugfixes
 * Add Correct Dispose Handling
 * TimeCalculation now handle negative values correct

Lora-Map/Model/PositionItem.cs

@@ -34,6 +34,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model {
       } else {
         this.Name = id;
         this.Icon = null;
+        this.Group = null;
       }
     }
     public static Boolean CheckJson(JsonData json) => json.ContainsKey("Rssi") && json["Rssi"].IsDouble

Lora-Map/resources/admin/js/menu.js

@@ -210,6 +210,9 @@ var NamesEditor = {
     var name = el.children[1].children[0].value;
     var url = null;
     var gfilter = el.children[3].children[0].selectedOptions[0].value;
+    if (gfilter === "---") {
+      gfilter = "no";
+    }
     if (el.children[2].children.length === 2) {
       url = el.children[2].children[1].data;
     }

Lora-Map/resources/css/global.css

@@ -96,7 +96,11 @@ object {
   display: none;
 }
 #pannels #pannels_pos .item {
-margin: 4px;
+  margin: 4px;
+}
+#pannels #pannels_pos .item.filter {
+  opacity: 0.4;
+  background-color: rgba(1,1,1,0.2);
 }
 #pannels #pannels_pos .item .color {
   float: left;

Lora-Map/resources/index.html

@@ -23,7 +23,7 @@
     </div>
     <div id="pannels_filter">
       <h1>Angezeigte Gruppen</h1>
-      <select multiple>
+      <select multiple onchange="MarkerObject.ChangeFilter(this);">
         <option value="fw">Feuerwehr</option>
         <option value="sani">Sanitäter</option>
         <option value="pol">Polizei</option>

Lora-Map/resources/js/marker.js

@@ -2,6 +2,7 @@
   _Markers: {},
   PanicData: {},
   LocationData: {},
+  VisibleMarkers: {},
   Start: function () {
     return this;
   },
@@ -48,17 +49,21 @@
               }
             }
           }
-          var lasttime = FunctionsObject.TimeCalculation(positionItem['Recievedtime'], "diffraw");
+          if (positionItem.Group !== null && this.VisibleMarkers.hasOwnProperty("___isset") && !this.VisibleMarkers.hasOwnProperty(positionItem.Group)) {
-          if (lasttime <= 5 * 60) {
+            this._Markers[key]._icon.style.opacity = 0;
-            this._Markers[key]._icon.style.opacity = 1;
+          } else {
-          } else if (lasttime > 5 * 60 && lasttime <= 15 * 60) {
+            var lasttime = FunctionsObject.TimeCalculation(positionItem['Recievedtime'], "diffraw");
-            this._Markers[key]._icon.style.opacity = 0.9 - (lasttime - 5 * 60) / (15 * 60 - 5 * 60) * (0.9 - 0.7);
+            if (lasttime <= 5 * 60) {
-          } else if (lasttime > 15 * 60 && lasttime <= 30 * 60) {
+              this._Markers[key]._icon.style.opacity = 1;
-            this._Markers[key]._icon.style.opacity = 0.7 - (lasttime - 15 * 60) / (30 * 60 - 15 * 60) * (0.7 - 0.5);
+            } else if (lasttime > 5 * 60 && lasttime <= 15 * 60) {
-          } else if (lasttime > 30 * 60 && lasttime <= 60 * 60) {
+              this._Markers[key]._icon.style.opacity = 0.9 - (lasttime - 5 * 60) / (15 * 60 - 5 * 60) * (0.9 - 0.7);
-            this._Markers[key]._icon.style.opacity = 0.5 - (lasttime - 30 * 60) / (30 * 60 - 30 * 60) * (0.5 - 0.25);
+            } else if (lasttime > 15 * 60 && lasttime <= 30 * 60) {
-          } else if (lasttime > 60 * 60) {
+              this._Markers[key]._icon.style.opacity = 0.7 - (lasttime - 15 * 60) / (30 * 60 - 15 * 60) * (0.7 - 0.5);
-            this._Markers[key]._icon.style.opacity = 0.25;
+            } else if (lasttime > 30 * 60 && lasttime <= 60 * 60) {
+              this._Markers[key]._icon.style.opacity = 0.5 - (lasttime - 30 * 60) / (30 * 60 - 30 * 60) * (0.5 - 0.25);
+            } else if (lasttime > 60 * 60) {
+              this._Markers[key]._icon.style.opacity = 0.25;
+            }
           }
         }
       }
@@ -73,14 +78,27 @@
         var alertItem = this.PanicData[id];
         if (this._Markers.hasOwnProperty(id)) {
           var marker = this._Markers[id];
-          if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") <= 10 && marker._icon.className.indexOf(" marker-alert") === -1) {
+          if (!(this.LocationData[id].Group !== null && this.VisibleMarkers.hasOwnProperty("___isset") && !this.VisibleMarkers.hasOwnProperty(this.LocationData[id].Group))) {
-            marker._icon.className += " marker-alert";
+            if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") <= 10 && marker._icon.className.indexOf(" marker-alert") === -1) {
-            MenuObject.ShowMarkerInfoPerId(id);
+              marker._icon.className += " marker-alert";
-          } else if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") > 10 && marker._icon.className.indexOf(" marker-alert") !== -1) {
+              MenuObject.ShowMarkerInfoPerId(id);
-            marker._icon.className = marker._icon.className.replace(" marker-alert", "");
+            } else if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") > 10 && marker._icon.className.indexOf(" marker-alert") !== -1) {
+              marker._icon.className = marker._icon.className.replace(" marker-alert", "");
+            }
           }
         }
       }
     }
+  },
+  ChangeFilter: function (select) {
+    this.VisibleMarkers = {};
+    if (select.selectedOptions.length > 0) {
+      for (var i = 0; i < select.selectedOptions.length; i++) {
+        this.VisibleMarkers[select.selectedOptions[i].value] = true;
+      }
+      this.VisibleMarkers["no"] = true;
+      this.VisibleMarkers["___isset"] = true;
+    }
+    this._ParseAJAXLoc(this.LocationData);
   }
 }.Start();

Lora-Map/resources/js/menu.js

@@ -40,6 +40,15 @@
           this._overviewStatus[id] = this._CreateOverviewElement(positionItem, id);
           document.getElementById("pannels_pos").appendChild(this._overviewStatus[id]);
         }
+        if (positionItem.Group !== null && MarkerObject.VisibleMarkers.hasOwnProperty("___isset") && !MarkerObject.VisibleMarkers.hasOwnProperty(positionItem.Group)) {
+          if (this._overviewStatus[id].className.indexOf("filter") === -1) {
+            this._overviewStatus[id].className = "item filter";
+          }
+        } else {
+          if (this._overviewStatus[id].className.indexOf("filter") !== -1) {
+            this._overviewStatus[id].className = "item";
+          }
+        }
         this._UpdateOverviewElement(positionItem, id);
       }
     }
@@ -172,7 +181,7 @@
         html += "<div class='alertitem " + walert.Level +" "+ walert.Type + "'>" +
           "<span class='head'>" + walert.Headline + "</span>" +
           "<span class='ort'>" + walert.Location + "</span>" +
-          "<span class='text'>" + walert.Body + (walert.Instructions != "" ? "<br><br>" + walert.Instructions : "") + "</span>" +
+          "<span class='text'>" + walert.Body + (walert.Instructions !== "" ? "<br><br>" + walert.Instructions : "") + "</span>" +
           "<span class='time'><b>Von:</b> ";
         if (FunctionsObject.TimeCalculation(walert.From, "diffraw") < 0) {
           html += "in " + FunctionsObject.TimeCalculation(walert.From, "difftextn");