#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

@@ -98,6 +98,10 @@ object {
 #pannels #pannels_pos .item {
   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;
   width: 2px;

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,6 +49,9 @@
               }
             }
           }
+          if (positionItem.Group !== null && this.VisibleMarkers.hasOwnProperty("___isset") && !this.VisibleMarkers.hasOwnProperty(positionItem.Group)) {
+            this._Markers[key]._icon.style.opacity = 0;
+          } else {
             var lasttime = FunctionsObject.TimeCalculation(positionItem['Recievedtime'], "diffraw");
             if (lasttime <= 5 * 60) {
               this._Markers[key]._icon.style.opacity = 1;
@@ -63,6 +67,7 @@
           }
         }
       }
+    }
     MenuObject.UpdateStatus();
     MenuObject._Update_pannels_info();
   }, 
@@ -73,6 +78,7 @@
         var alertItem = this.PanicData[id];
         if (this._Markers.hasOwnProperty(id)) {
           var marker = this._Markers[id];
+          if (!(this.LocationData[id].Group !== null && this.VisibleMarkers.hasOwnProperty("___isset") && !this.VisibleMarkers.hasOwnProperty(this.LocationData[id].Group))) {
             if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") <= 10 && marker._icon.className.indexOf(" marker-alert") === -1) {
               marker._icon.className += " marker-alert";
               MenuObject.ShowMarkerInfoPerId(id);
@@ -83,4 +89,16 @@
         }
       }
     }
+  },
+  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");