add new Icons

not redraw the icons in the devices list

Lora-Map/Lora-Map.csproj

@@ -70,15 +70,18 @@
     <None Include="resources\icons\marker\din1451m.woff">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </None>
-    <None Include="resources\js\leaflet\leaflet-src.esm.js.map" />
-    <None Include="resources\js\leaflet\leaflet-src.js.map" />
-    <None Include="resources\js\leaflet\leaflet.js.map" />
   </ItemGroup>
   <ItemGroup>
     <Content Include="resources\css\global.css">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
-    <Content Include="resources\css\icons\marker.png">
+    <Content Include="resources\css\icons\admin-with-cogwheels.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\css\icons\information.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\css\icons\placeholder.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
     <Content Include="resources\icons\akku\0-4.png">
@@ -120,7 +123,6 @@
     <Content Include="resources\js\leaflet\images\marker-shadow.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
-    <Content Include="resources\js\leaflet\leaflet-src.esm.js" />
     <Content Include="resources\js\leaflet\leaflet-src.js" />
     <Content Include="resources\js\leaflet\leaflet.css">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>

Lora-Map/Server.cs

@@ -50,23 +50,18 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
     }
 
     protected override void SendResponse(HttpListenerContext cont) {
-      if (cont.Request.Url.PathAndQuery.StartsWith("/loc")) {
       try {
+        if (cont.Request.Url.PathAndQuery.StartsWith("/loc")) {
           Dictionary<String, Object> ret = new Dictionary<String, Object>();
           Byte[] buf = Encoding.UTF8.GetBytes(JsonMapper.ToJson(this.locations));
           cont.Response.ContentLength64 = buf.Length;
           cont.Response.OutputStream.Write(buf, 0, buf.Length);
           Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery);
           return;
-        } catch (Exception e) {
-          Helper.WriteError("500 - " + e.Message);
-          cont.Response.StatusCode = 500;
-          return;
         }
-      }
+        if (cont.Request.Url.PathAndQuery.StartsWith("/icons/marker/Marker.svg") && cont.Request.Url.PathAndQuery.Contains("?")) {
-      if(cont.Request.Url.PathAndQuery.StartsWith("/icons/marker/Marker.svg") && cont.Request.Url.PathAndQuery.Contains("?")) {
+          String hash = cont.Request.Url.PathAndQuery.Substring(cont.Request.Url.PathAndQuery.IndexOf('?') + 1);
-        String hash = cont.Request.Url.PathAndQuery.Substring(cont.Request.Url.PathAndQuery.IndexOf('?')+1);
+          if (!this.markertable.ContainsKey(hash)) {
-        if(!this.markertable.ContainsKey(hash)) {
             this.markertable.Add(hash, new Marker(hash));
           }
           cont.Response.ContentType = "image/svg+xml";
@@ -76,6 +71,11 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
           Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery);
           return;
         }
+      } catch (Exception e) {
+        Helper.WriteError("500 - " + e.Message);
+        cont.Response.StatusCode = 500;
+        return;
+      }
       base.SendResponse(cont);
     }
   }

Lora-Map/names.json

@@ -1,5 +1,5 @@
 {
-  "A": {
+  "R": {
     "name": "26/91",
     "marker.svg": {
       "person": {
@@ -10,7 +10,7 @@
       }
     }
   },
-  "C": {
+  "L": {
     "name": "27/92",
     "marker.svg": {
       "person": {

Lora-Map/resources/css/global.css

@@ -11,8 +11,12 @@ html, body {
   padding: 0;
 }
 
+object {
+    pointer-events: none;
+}
+
 #menucollumn {
-  width: 30px;
+  width: 32px;
   background-color: white;
   position: absolute;
   top: 85px;
@@ -23,12 +27,24 @@ html, body {
   border: rgba(0,0,0,0.4) 2px solid;
   border-radius: 4px
 }
-#menucollumn .pos {
+#menucollumn span {
   display: block;
-  height: 30px;
+  height: 32px;
-  width: 30px;
+  width: 32px;
-  background-image: url("icons/marker.png");
+  margin-bottom: 5px;
 }
+#menucollumn .pos {
+  background-image: url("icons/placeholder.png");
+}
+#menucollumn .admin {
+  background-image: url("icons/admin-with-cogwheels.png");
+}
+#menucollumn .info {
+  background-image: url("icons/information.png");
+}
+/*<div>Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>*/
+/*<div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>*/
+/**<div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" 			    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 			    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>*/
 
 #version {
   position: absolute;
@@ -46,7 +62,7 @@ html, body {
 #pannels {
   position: absolute;
   top: 85px;
-  left: 45px;
+  left: 47px;
   bottom: 35px;
   width: 250px;
   z-index: 50000;

Lora-Map/resources/index.html

@@ -11,11 +11,14 @@
   <div id="bigmap"></div>
   <div id="menucollumn">
     <span class="pos" onclick="showHidePanel('pannels_pos');"></span>
+    <span class="admin" onclick="showHidePanel('pannels_admin');"></span>
+    <span class="info" onclick="showHidePanel('pannels_info');"></span>
   </div>
   <div id="version">vx.x.x</div>
   <div id="pannels">
     <div id="pannels_pos"></div>
     <div id="pannels_info"></div>
+    <div id="pannels_admin"></div>
   </div>
   <script type="text/javascript" src="js/leaflet/leaflet.js"></script>
   <script type="text/javascript" src="js/nav.js"></script>

Lora-Map/resources/js/menu.js

@@ -1,12 +1,14 @@
 var visiblePanel = null;
 function showHidePanel(name) {
-  if (visiblePanel === null) {
+  if (visiblePanel === null && name !== null) {
     document.getElementById("pannels").style.display = "block";
     document.getElementById(name).style.display = "block";
     visiblePanel = name;
   } else if (visiblePanel === name && name !== "pannels_info" || name === null) {
     document.getElementById("pannels").style.display = "none";
+    if (visiblePanel !== null) {
       document.getElementById(visiblePanel).style.display = "none";
+    }
     visiblePanel = null;
   } else {
     document.getElementById(visiblePanel).style.display = "none";
@@ -48,69 +50,59 @@ function updateDeviceStatus() {
   }
 }
 
+var overviewStatus = new Array();
+
 function updateStatus() {
-  document.getElementById("pannels_pos").innerHTML = "";
+  for (var id in serverLocation) {
-  for (var name in serverLocation) {
+    if (serverLocation.hasOwnProperty(id)) {
-    if (serverLocation.hasOwnProperty(name)) {
+      var markeritem = serverLocation[id];
-      var markeritem = serverLocation[name];
+      if (typeof (overviewStatus[id]) == "undefined") {
+        overviewStatus[id] = createOverviewElement(markeritem, id);
+        document.getElementById("pannels_pos").appendChild(overviewStatus[id]);
+      }
+      updateOverviewElement(markeritem, id);
+    }
+  }
+}
+
+function updateOverviewElement(markeritem, id) {
+  if (markeritem["Batterysimple"] === 0) {
+    document.getElementById("overview-color-id-" + id).style.backgroundColor = "red";
+  } else if (markeritem["Batterysimple"] === 1 || markeritem["Batterysimple"] === 2) {
+    document.getElementById("overview-color-id-" + id).style.backgroundColor = "yellow";
+  } else if (markeritem["Batterysimple"] === 3 || markeritem["Batterysimple"] === 4) {
+    document.getElementById("overview-color-id-" + id).style.backgroundColor = "green";
+  }
+  document.getElementById("overview-name-id-" + id).innerText = markeritem["Name"];
+  document.getElementById("overview-akkuimg-id-" + id).src = "icons/akku/" + markeritem["Batterysimple"] + "-4.png";
+  if (markeritem["Fix"]) {
+    document.getElementById("overview-gps-id-" + id).innerText = "GPS-Empfang";
+    document.getElementById("overview-gps-id-" + id).style.color = "green";
+  } else {
+    document.getElementById("overview-gps-id-" + id).innerText = "kein GPS-Empfang";
+    document.getElementById("overview-gps-id-" + id).style.color = "red";
+  }
+  document.getElementById("overview-update-id-" + id).innerText = "Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]);
+}
+
+function createOverviewElement(markeritem, id) {
   var divItem = document.createElement("div");
   divItem.className = "item";
   divItem.onclick = showMarkerInfoMenu;
-      divItem.setAttribute("rel", name);
+  divItem.setAttribute("rel", id);
-      var spanColor = document.createElement("span");
+  divItem.innerHTML = "<span class=\"color\" id=\"overview-color-id-" + id + "\"></span>";
-      spanColor.className = "color";
-      if (markeritem["Batterysimple"] === 0) {
-        spanColor.style.backgroundColor = "red";
-      } else if (markeritem["Batterysimple"] === 1 || markeritem["Batterysimple"] === 2) {
-        spanColor.style.backgroundColor = "yellow";
-      } else if (markeritem["Batterysimple"] === 3 || markeritem["Batterysimple"] === 4) {
-        spanColor.style.backgroundColor = "green";
-      }
-      divItem.appendChild(spanColor);
-      var spanIcon = document.createElement("span");
-      spanIcon.className = "icon";
   if (markeritem['Icon'] !== null) {
-        var objectIcon = document.createElement("object");
+    divItem.innerHTML += "<span class=\"icon\"><object data=\"" + markeritem['Icon'] + "&marker-bg=hidden" + "\" type=\"image/svg+xml\"></object></span>";
-        objectIcon.data = markeritem['Icon'] + "&marker-bg=hidden";
-        objectIcon.type = "image/svg+xml";
-        //<object data="'+markeritem['Icon']+'" type="image/svg+xml" style="height:80px; width:56px;"></object>
-        spanIcon.appendChild(objectIcon);
   } else {
-        var imgIcon = document.createElement("img");
+    divItem.innerHTML += "<span class=\"icon\"><img src=\"icons/marker/map-marker.png\"></span>";
-        imgIcon.src = "icons/marker/map-marker.png";
-        spanIcon.appendChild(imgIcon)
-      }
-      divItem.appendChild(spanIcon);
-      var divLine1 = document.createElement("div");
-      divLine1.className = "line1";
-      var spanName = document.createElement("span");
-      spanName.className = "name";
-      spanName.innerText = markeritem["Name"];
-      divLine1.appendChild(spanName);
-      var spanAkku = document.createElement("span");
-      spanAkku.className = "akku";
-      var imgAkku = document.createElement("img");
-      imgAkku.src = "icons/akku/" + markeritem["Batterysimple"] + "-4.png";
-      spanAkku.appendChild(imgAkku);
-      divLine1.appendChild(spanAkku);
-      divItem.appendChild(divLine1);
-      var divLine2 = document.createElement("div");
-      divLine2.className = "line2";
-      if (markeritem["Fix"]) {
-        divLine2.style.color = "green";
-        divLine2.innerText = "GPS-Empfang";
-      } else {
-        divLine2.style.color = "red";
-        divLine2.innerText = "kein GPS-Empfang";
-      }
-      divItem.appendChild(divLine2);
-      var divLine3 = document.createElement("div");
-      divLine3.className = "line3";
-      divLine3.innerText = "Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]);
-      divItem.appendChild(divLine3);
-      document.getElementById("pannels_pos").appendChild(divItem);
-    }
   }
+  divItem.innerHTML += "<div class=\"line1\">" +
+    "<span class=\"name\" id=\"overview-name-id-" + id + "\"></span>" +
+    "<span class=\"akku\"><img id=\"overview-akkuimg-id-" + id + "\" src=\"icons/akku/" + markeritem["Batterysimple"] + "-4.png\"></span>" +
+    "</div>";
+  divItem.innerHTML += "<div class=\"line2\" style=\"color: red;\" id=\"overview-gps-id-" + id + "\">kein GPS-Empfang</div>";
+  divItem.innerHTML += "<div class=\"line3\" id=\"overview-update-id-" + id + "\">Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]) + "</div>";
+  return divItem;
 }
 
 function timeDiffToText(time) {