Working on #1, List with devices now finished

Lora-Map/Lora-Map.csproj

@@ -45,7 +45,7 @@
     <Reference Include="System.Xml" />
   </ItemGroup>
   <ItemGroup>
-    <Compile Include="Googlelocation.cs" />
+    <Compile Include="Server.cs" />
     <Compile Include="Model\Botclient.cs" />
     <Compile Include="Program.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
@@ -74,6 +74,24 @@
     <Content Include="resources\css\icons\marker.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\icons\akku\0-4.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\icons\akku\1-4.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\icons\akku\2-4.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\icons\akku\3-4.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\icons\akku\4-4.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\icons\marker\map-marker.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="resources\js\leaflet\images\layers-2x.png" />
     <Content Include="resources\js\leaflet\images\layers.png" />
     <Content Include="resources\js\leaflet\images\marker-icon-2x.png" />
@@ -91,9 +109,15 @@
     <Content Include="resources\js\leaflet\leaflet.js">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\js\menu.js">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="resources\js\nav.js">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\js\marker.js">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <None Include="config-example\requests.conf.example">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </None>

Lora-Map/Model/Botclient.cs

@@ -25,10 +25,14 @@ namespace Fraunhofer.Fit.IoT.LoraMap.Model {
         this.Battery = Math.Round((Double)json["BatteryLevel"], 2);
         if(this.Battery < 3) {
           this.Batterysimple = 0;
-        } else if(this.Battery < 3.5) {
+        } else if(this.Battery < 3.2) {
           this.Batterysimple = 1;
-        } else {
+        } else if(this.Battery < 3.5) {
           this.Batterysimple = 2;
+        } else if(this.Battery < 3.8) {
+          this.Batterysimple = 3;
+        } else {
+          this.Batterysimple = 4;
         }
       }
       if (json.ContainsKey("Gps") && json["Gps"].IsObject) {

Lora-Map/Program.cs

@@ -19,7 +19,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
       }
       InIReader ini = InIReader.GetInstance("settings");
       ADataBackend b = (ADataBackend)ABackend.GetInstance(ini.GetSection("mqtt"), ABackend.BackendType.Data);
-      new Googlelocation(b, ini.GetSection("webserver"), InIReader.GetInstance("requests"));
+      new Server(b, ini.GetSection("webserver"), InIReader.GetInstance("requests"));
       while(true) {
         System.Threading.Thread.Sleep(1000);
       }

Lora-Map/Properties/AssemblyInfo.cs

@@ -34,10 +34,11 @@ using System.Runtime.InteropServices;
 // Sie können alle Werte angeben oder Standardwerte für die Build- und Revisionsnummern verwenden,
 // übernehmen, indem Sie "*" eingeben:
 // [assembly: AssemblyVersion("1.0.*")]
-[assembly: AssemblyVersion("1.1.2")]
-[assembly: AssemblyFileVersion("1.1.2")]
+[assembly: AssemblyVersion("1.1.3")]
+[assembly: AssemblyFileVersion("1.1.3")]
 
 /*
 * 1.1.1 Add Debian package config
 * 1.1.2 #2 Show versions number in Site
+* 1.1.3 #1 Click on icon and show details
 */

Lora-Map/Server.cs

@@ -10,13 +10,11 @@ using Fraunhofer.Fit.IoT.LoraMap.Model;
 using LitJson;
 
 namespace Fraunhofer.Fit.IoT.LoraMap {
-
-
-  class Googlelocation : Webserver
+  class Server : Webserver
   {
-    private readonly Dictionary<String, Botclient> locations = new Dictionary<String, Botclient>();
+    private readonly SortedDictionary<String, Botclient> locations = new SortedDictionary<String, Botclient>();
     
-    public Googlelocation(ADataBackend backend, Dictionary<String, String> settings, InIReader requests) : base(backend, settings, requests) { }
+    public Server(ADataBackend backend, Dictionary<String, String> settings, InIReader requests) : base(backend, settings, requests) { }
 
     protected override void Backend_MessageIncomming(Object sender, BackendEvent e) {
       try {

Lora-Map/resources/css/global.css

@@ -6,76 +6,88 @@
 
 /* Optional: Makes the sample page fill the window. */
 html, body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 #menucollumn {
-    width: 30px;
-    background-color: white;
-    position: absolute;
-    top: 85px;
-    bottom: 35px;
-    left: 10px;
-    z-index: 5000;
-    border: #707070 2px solid;
-    border: rgba(0,0,0,0.4) 2px solid;
-    border-radius: 4px
+  width: 30px;
+  background-color: white;
+  position: absolute;
+  top: 85px;
+  bottom: 35px;
+  left: 10px;
+  z-index: 5000;
+  border: #707070 2px solid;
+  border: rgba(0,0,0,0.4) 2px solid;
+  border-radius: 4px
 }
-
 #menucollumn .pos {
-    display: block;
-    height: 30px;
-    width: 30px;
-    background-image: url("icons/marker.png");
+  display: block;
+  height: 30px;
+  width: 30px;
+  background-image: url("icons/marker.png");
 }
 
 #version {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 50000;
-    background-color: white;
-    border-radius: 5px;
-    height: 20px;
-    width: 40px;
-    border: #707070 2px solid;
-    border: rgba(0,0,0,0.4) 2px solid;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 50000;
+  background-color: white;
+  border-radius: 5px;
+  height: 20px;
+  width: 40px;
+  border: #707070 2px solid;
+  border: rgba(0,0,0,0.4) 2px solid;
 }
 
 #pannels {
-    position: absolute;
-    top: 85px;
-    left: 45px;
-    bottom: 35px;
-    width: 250px;
-    z-index: 50000;
-    background-color: white;
-    border: #707070 2px solid;
-    border: rgba(0,0,0,0.4) 2px solid;
-    border-radius: 4px;
-    display: none;
+  position: absolute;
+  top: 85px;
+  left: 45px;
+  bottom: 35px;
+  width: 250px;
+  z-index: 50000;
+  background-color: white;
+  border: #707070 2px solid;
+  border: rgba(0,0,0,0.4) 2px solid;
+  border-radius: 4px;
+  display: none;
 }
 #pannels #pannels_pos {
-    display: none;
+  display: none;
 }
 #pannels #pannels_pos .item {
-    margin: 4px;
-    font-size: 11px;
-    font-family: Verdana;
+  margin: 4px;
+  font-size: 11px;
+  font-family: Verdana;
 }
 #pannels #pannels_pos .item .color {
-    float: left;
-    width: 2px;
-    height: 38px;
+  float: left;
+  width: 2px;
+  height: 38px;
 }
 #pannels #pannels_pos .item .icon {
-    float: left;
-    height: 38px;
-    width: 40px;
-    margin-right: 5px;
+  float: left;
+  height: 38px;
+  width: 40px;
+  margin-right: 5px;
+}
+#pannels #pannels_pos .item .icon img {
+  height: 40px;
+  width: 40px;
+  margin-left: 3px;
 }
 #pannels #pannels_pos .item .line1 .name {
-    font-weight: bold;
+  font-weight: bold;
 }
+#pannels #pannels_pos .item .line1 .akku img {
+  vertical-align: middle;
+  margin-left: 5px;
+}
+
+#pannels #pannel_info {
+  display: none;
+}

Lora-Map/resources/index.html

@@ -15,8 +15,11 @@
     <div id="version">vx.x.x</div>
     <div id="pannels">
         <div id="pannels_pos"></div>
+        <div id="pannel_info"></div>
     </div>
     <script type="text/javascript" src="js/leaflet/leaflet.js"></script>
     <script type="text/javascript" src="js/nav.js"></script>
+    <script type="text/javascript" src="js/menu.js"></script>
+    <script type="text/javascript" src="js/marker.js"></script>
 </body>
 </html>

Lora-Map/resources/js/marker.js

@@ -0,0 +1,99 @@
+var markers = {};
+
+setInterval(datarunner, 1000);
+function datarunner() {
+  var xhttp = new XMLHttpRequest();
+  xhttp.onreadystatechange = parsedata;
+  xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc", true);
+  xhttp.send();
+}
+
+//https://leafletjs.com/reference-1.4.0.html#marker
+function parsedata() {
+  if (this.readyState == 4 && this.status == 200) {
+    var items = JSON.parse(this.responseText);
+    for (var key in items) {
+      if (items.hasOwnProperty(key)) {
+        var markeritem = items[key];
+        if (markeritem['Latitude'] != 0 || markeritem['Longitude'] != 0) {
+          if (!markers.hasOwnProperty(key)) {
+            markers[key] = L.marker([markeritem['Latitude'], markeritem['Longitude']]).addTo(mymap);
+          } else {
+            markers[key].setLatLng([markeritem['Latitude'], markeritem['Longitude']]);
+          }
+        }
+      }
+    }
+    parseStatus(items);
+  }
+}
+
+function parseStatus(items) {
+  document.getElementById("pannels_pos").innerHTML = "";
+  for (var name in items) {
+    if (items.hasOwnProperty(name)) {
+      var markeritem = items[name];
+      var divItem = document.createElement("div");
+      divItem.className = "item";
+      var spanColor = document.createElement("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";
+      var imgIcon = document.createElement("img");
+      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 = 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);
+    }
+  }
+}
+
+function timeDiffToText(time) {
+  var diff = Date.now() - Date.parse(time);
+  diff = Math.round(diff / 1000);
+  if (diff < 60) {
+    return diff + " s";
+  }
+  if (diff < (60 * 60)) {
+    return Math.floor(diff / 60) + " m";
+  }
+  if (diff < (60 * 60 * 24)) {
+    return Math.floor(diff / (60 * 60)) + " h";
+  }
+  return Math.floor(diff / (60 * 60 * 24)) + " d";
+}

Lora-Map/resources/js/menu.js

@@ -0,0 +1,15 @@
+var visiblePanel = null;
+function showHidePanel(name) {
+  if (visiblePanel === null) {
+    document.getElementById("pannels").style.display = "block";
+    document.getElementById(name).style.display = "block";
+    visiblePanel = name;
+  } else if (visiblePanel === name) {
+    document.getElementById("pannels").style.display = "none";
+    visiblePanel = null;
+  } else {
+    document.getElementById(visiblePanel).style.display = "none";
+    document.getElementById(name).style.display = "block";
+    visiblePanel = name;
+  }
+}

Lora-Map/resources/js/nav.js

@@ -5,114 +5,4 @@ L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={
   maxZoom: 20,
   id: 'mapbox.streets',
   accessToken: '{%YOUR_API_KEY%}'
-}).addTo(mymap);
-
-var markers = {};
-
-setInterval(datarunner, 1000);
-function datarunner() {
-  var xhttp = new XMLHttpRequest();
-  xhttp.onreadystatechange = parsedata;
-  xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc", true);
-  xhttp.send();
-}
-
-//https://leafletjs.com/reference-1.4.0.html#marker
-function parsedata() {
-  if (this.readyState == 4 && this.status == 200) {
-    var items = JSON.parse(this.responseText);
-    for (var key in items) {
-      if (items.hasOwnProperty(key)) {
-        var markeritem = items[key];
-        if (markeritem['Latitude'] != 0 || markeritem['Longitude'] != 0) {
-          if (!markers.hasOwnProperty(key)) {
-            markers[key] = L.marker([markeritem['Latitude'], markeritem['Longitude']]).addTo(mymap);
-          } else {
-            markers[key].setLatLng([markeritem['Latitude'], markeritem['Longitude']]);
-          }
-        }
-      }
-    }
-    parseStatus(items);
-  }
-}
-
-function parseStatus(items) {
-  document.getElementById("pannels_pos").innerHTML = "";
-  for (var name in items) {
-    if (items.hasOwnProperty(name)) {
-      var markeritem = items[name];
-      var divItem = document.createElement("div");
-      divItem.className = "item";
-      var spanColor = document.createElement("span");
-      spanColor.className = "color";
-      if (markeritem["Batterysimple"] == 0) {
-        spanColor.style.backgroundColor = "red";
-      } else if (markeritem["Batterysimple"] == 1) {
-        spanColor.style.backgroundColor = "yellow";
-      } else if (markeritem["Batterysimple"] == 2) {
-        spanColor.style.backgroundColor = "green";
-      }
-      divItem.appendChild(spanColor);
-      var spanIcon = document.createElement("span");
-      spanIcon.className = "icon";
-      divItem.appendChild(spanIcon);
-      var divLine1 = document.createElement("div");
-      divLine1.className = "line1";
-      var spanName = document.createElement("span");
-      spanName.className = "name";
-      spanName.innerText = name;
-      divLine1.appendChild(spanName);
-      var spanAkku = document.createElement("span");
-      spanAkku.className = "akku";
-      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);
-    }
-  }
-}
-
-function timeDiffToText(time) {
-  var diff = Date.now() - Date.parse(time);
-  diff = Math.round(diff / 1000);
-  if (diff < 60) {
-    return diff + " s";
-  }
-  if (diff < (60 * 60)) {
-    return Math.floor(diff / 60) + " m";
-  }
-  if (diff < (60 * 60 * 24)) {
-    return Math.floor(diff / (60 * 60)) + " h";
-  }
-  return Math.floor(diff / (60 * 60 * 24)) + " d";
-}
-
-var visiblePanel = null;
-function showHidePanel(name) {
-  if (visiblePanel == null) {
-    document.getElementById("pannels").style.display = "block";
-    document.getElementById(name).style.display = "block";
-    visiblePanel = name;
-  } else if (visiblePanel == name) {
-    document.getElementById("pannels").style.display = "none";
-    visiblePanel = null;
-  } else {
-    document.getElementById(visiblePanel).style.display = "none";
-    document.getElementById(name).style.display = "block";
-    visiblePanel = name;
-  }
-}
+}).addTo(mymap);