#15 suche nach ständen einbauen

CHANGELOG

@@ -8,6 +8,7 @@
 * #28 Fightdedection Plygon on Map
 * #27 Draw Camera-Desity bock on map
 * #16 filter nach kategorien/tracker einbauen
+* #15 suche nach ständen einbauen
 ### Bugfixes
 * Add Correct Dispose Handling
 * TimeCalculation now handle negative values correct

Lora-Map/Lora-Map.csproj

@@ -111,6 +111,9 @@
     <Content Include="resources\css\icons\placeholder.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\css\icons\search.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="resources\css\icons\storm-ac.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>

Lora-Map/resources/css/global.css

@@ -74,6 +74,9 @@ object {
 #menucollumn .weather.ac {
   background-image: url("icons/storm-ac.png");
 }
+#menucollumn .suche {
+  background-image: url("icons/search.png");
+}
 
 #pannels {
   position: absolute;
@@ -271,6 +274,48 @@ object {
   width: 235px;
 }
 
+#pannels #pannels_suche {
+  display: none;
+  padding: 5px;
+}
+#pannels #pannels_suche .searchtitle {
+  font-weight: bold;
+  font-size: 13px;
+}
+#pannels #pannels_suche input {
+  width: 220px;
+  margin-top: 5px;
+}
+#pannels #pannels_suche #search_results {
+  border-top: 1px solid black;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+#pannels #pannels_suche #search_results .result {
+  background-color: rgba(0,0,0,0.2);
+  margin-bottom: 5px;
+  cursor: pointer;
+}
+#pannels #pannels_suche #search_results .result .text {
+  display: inline-block;
+  width: 200px;
+}
+#pannels #pannels_suche #search_results .result .text .title {
+  font-weight: bold;
+  display: block;
+}
+#pannels #pannels_suche #search_results .result .text .desc {
+  display: block;
+}
+#pannels #pannels_suche #search_results .result .box {
+  display: inline-block;
+  height: 25px;
+  width: 15px;
+  border-style: solid;
+  border-width: 2px;
+  vertical-align: top;
+}
+
 #overlays #cameracount {
   position: absolute;
   top: 10px;

Lora-Map/resources/index.html

@@ -12,6 +12,7 @@
   <div id="menucollumn">
     <span class="pos" onclick="MenuObject.ShowHidePanel('pannels_pos');"></span>
     <span class="filter" onclick="MenuObject.ShowHidePanel('pannels_filter');"></span>
+    <span class="suche" onclick="MenuObject.ShowHidePanel('pannels_suche');"></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>
@@ -55,9 +56,15 @@
           <li><a href="http://www.famfamfam.com/about/" title="Silk Iconset">Silk Iconset</a> licensed <a href="http://creativecommons.org/licenses/by/2.5/" title="Creative Commons BY 2.5" target="_blank">CC 2.5 BY</a></li>
           <li><a href="https://www.flaticon.com/authors/those-icons" title="Those Icons">Those Icons</a> licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
           <li><a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
+          <li><a href="https://www.flaticon.com/authors/dimitry-miroliubov" title="Dimitry Miroliubov">Dimitry Miroliubov</a> from <a href="https://www.flaticon.com/" title="Flaticon">flaticon.com</a></li>
         </ul>
       </div>
     </div>
+    <div id="pannels_suche">
+      <span class="searchtitle">Standnummer:</span><br />
+      <input onkeyup="MenuObject.SearchInGeoJson(this.value);"/>
+      <div id="search_results"></div>
+    </div>
   </div>
   <div id="overlays">
     <div id="cameracount"></div>

Lora-Map/resources/js/map.js

@@ -1,5 +1,6 @@
 var MapObject = {
   Map: {},
+  GeoJson: {},
   _FightDedection: {},
   _DensityAreas: {},
   _SpecialMarkers: new Array(),
@@ -77,7 +78,7 @@
         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)' });
@@ -120,6 +121,7 @@
   },
   _ParseAJAXGeo: function (geo) {
     if (!(Object.keys(geo).length === 0 && geo.constructor === Object)) {
+      this.GeoJson = geo;
       L.geoJSON(geo, {
         style: function (features) {
           return {
@@ -254,5 +256,8 @@
   },
   _HidePanel: function (e) {
     MenuObject.ShowHidePanel(null);
+  },
+  JumpTo: function (lat, lon) {
+    this.Map.flyTo([lat, lon], 19);
   }
 }.Start();

Lora-Map/resources/js/menu.js

@@ -197,5 +197,23 @@
       document.getElementById("pannels_weather").innerHTML = "<h1>Keine Gefahren</h1>";
       document.getElementById("menucol_weather_icon").className = "weather";
     }
+  },
+  SearchInGeoJson: function (searchtext) {
+    var html = "";
+    if (MapObject.GeoJson.features.length > 0) {
+      for (var i = 0; i < MapObject.GeoJson.features.length; i++) {
+        var feature = MapObject.GeoJson.features[i];
+        if (feature.properties.name.indexOf(searchtext) !== -1 && feature.geometry.type === "Polygon") {
+          if (feature.geometry.coordinates.length > 0 && feature.geometry.coordinates[0].length > 0 && feature.geometry.coordinates[0][0].length > 0) {
+            html += "<div class='result' onclick='MapObject.JumpTo(" + feature.geometry.coordinates[0][0][1] + "," + feature.geometry.coordinates[0][0][0]+");'><span class='text'>" +
+              "<span class='title'>" + feature.properties.name + "</span>" +
+              "<span class='desc'>" + (typeof feature.properties.description !== "undefined" ? feature.properties.description : "") + "</span></span>" +
+              "<span class='box' style='background-color: " + feature.properties.fill + "; border-color: " + feature.properties.stroke + "'></span>" +
+              "</div>";
+          }
+        }
+      }
+    }
+    document.getElementById("search_results").innerHTML = html;
   }
 }.Start();