diff --git a/Lora-Map/Lora-Map.csproj b/Lora-Map/Lora-Map.csproj index c6dac2c..f0baca8 100644 --- a/Lora-Map/Lora-Map.csproj +++ b/Lora-Map/Lora-Map.csproj @@ -70,15 +70,18 @@ PreserveNewest - - - PreserveNewest - + + PreserveNewest + + + PreserveNewest + + PreserveNewest @@ -120,7 +123,6 @@ PreserveNewest - PreserveNewest diff --git a/Lora-Map/Server.cs b/Lora-Map/Server.cs index 4901f79..cbf1d31 100644 --- a/Lora-Map/Server.cs +++ b/Lora-Map/Server.cs @@ -50,30 +50,30 @@ namespace Fraunhofer.Fit.IoT.LoraMap { } protected override void SendResponse(HttpListenerContext cont) { - if (cont.Request.Url.PathAndQuery.StartsWith("/loc")) { - try { + try { + if (cont.Request.Url.PathAndQuery.StartsWith("/loc")) { Dictionary ret = new Dictionary(); 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; + } + 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); + if (!this.markertable.ContainsKey(hash)) { + this.markertable.Add(hash, new Marker(hash)); + } + cont.Response.ContentType = "image/svg+xml"; + Byte[] buf = Encoding.UTF8.GetBytes(this.markertable[hash].ToString()); + cont.Response.ContentLength64 = buf.Length; + cont.Response.OutputStream.Write(buf, 0, buf.Length); + Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery); return; } - } - 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); - if(!this.markertable.ContainsKey(hash)) { - this.markertable.Add(hash, new Marker(hash)); - } - cont.Response.ContentType = "image/svg+xml"; - Byte[] buf = Encoding.UTF8.GetBytes(this.markertable[hash].ToString()); - cont.Response.ContentLength64 = buf.Length; - cont.Response.OutputStream.Write(buf, 0, buf.Length); - Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery); + } catch (Exception e) { + Helper.WriteError("500 - " + e.Message); + cont.Response.StatusCode = 500; return; } base.SendResponse(cont); diff --git a/Lora-Map/names.json b/Lora-Map/names.json index 65ce723..5b506ee 100644 --- a/Lora-Map/names.json +++ b/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": { diff --git a/Lora-Map/resources/css/global.css b/Lora-Map/resources/css/global.css index 502bdd4..2698765 100644 --- a/Lora-Map/resources/css/global.css +++ b/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; - width: 30px; - background-image: url("icons/marker.png"); + height: 32px; + width: 32px; + 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"); +} +/*
Icons made by Smashicons from www.flaticon.com is licensed by CC 3.0 BY
*/ +/*
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
*/ +/**
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
*/ #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; diff --git a/Lora-Map/resources/css/icons/admin-with-cogwheels.png b/Lora-Map/resources/css/icons/admin-with-cogwheels.png new file mode 100644 index 0000000..629ebfb Binary files /dev/null and b/Lora-Map/resources/css/icons/admin-with-cogwheels.png differ diff --git a/Lora-Map/resources/css/icons/information.png b/Lora-Map/resources/css/icons/information.png new file mode 100644 index 0000000..7a97beb Binary files /dev/null and b/Lora-Map/resources/css/icons/information.png differ diff --git a/Lora-Map/resources/css/icons/marker.png b/Lora-Map/resources/css/icons/marker.png deleted file mode 100644 index 4135182..0000000 Binary files a/Lora-Map/resources/css/icons/marker.png and /dev/null differ diff --git a/Lora-Map/resources/css/icons/placeholder.png b/Lora-Map/resources/css/icons/placeholder.png new file mode 100644 index 0000000..687f3e5 Binary files /dev/null and b/Lora-Map/resources/css/icons/placeholder.png differ diff --git a/Lora-Map/resources/index.html b/Lora-Map/resources/index.html index d7088db..8817893 100644 --- a/Lora-Map/resources/index.html +++ b/Lora-Map/resources/index.html @@ -2,24 +2,27 @@ - - Dashboard - - + + Dashboard + + -
- -
vx.x.x
-
-
-
-
- - - - +
+ +
vx.x.x
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/Lora-Map/resources/js/menu.js b/Lora-Map/resources/js/menu.js index 45e7d01..e886ce3 100644 --- a/Lora-Map/resources/js/menu.js +++ b/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"; - document.getElementById(visiblePanel).style.display = "none"; + if (visiblePanel !== null) { + document.getElementById(visiblePanel).style.display = "none"; + } visiblePanel = null; } else { document.getElementById(visiblePanel).style.display = "none"; @@ -48,71 +50,61 @@ function updateDeviceStatus() { } } +var overviewStatus = new Array(); + function updateStatus() { - document.getElementById("pannels_pos").innerHTML = ""; - for (var name in serverLocation) { - if (serverLocation.hasOwnProperty(name)) { - var markeritem = serverLocation[name]; - var divItem = document.createElement("div"); - divItem.className = "item"; - divItem.onclick = showMarkerInfoMenu; - divItem.setAttribute("rel", name); - 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"; + for (var id in serverLocation) { + if (serverLocation.hasOwnProperty(id)) { + var markeritem = serverLocation[id]; + if (typeof (overviewStatus[id]) == "undefined") { + overviewStatus[id] = createOverviewElement(markeritem, id); + document.getElementById("pannels_pos").appendChild(overviewStatus[id]); } - divItem.appendChild(spanColor); - var spanIcon = document.createElement("span"); - spanIcon.className = "icon"; - if (markeritem['Icon'] !== null) { - var objectIcon = document.createElement("object"); - objectIcon.data = markeritem['Icon'] + "&marker-bg=hidden"; - objectIcon.type = "image/svg+xml"; - // - spanIcon.appendChild(objectIcon); - } else { - 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 = 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); + 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", id); + divItem.innerHTML = ""; + if (markeritem['Icon'] !== null) { + divItem.innerHTML += ""; + } else { + divItem.innerHTML += ""; + } + divItem.innerHTML += "
" + + "" + + "" + + "
"; + divItem.innerHTML += "
kein GPS-Empfang
"; + divItem.innerHTML += "
Letzter Datenempfang: vor " + timeDiffToText(markeritem["Upatedtime"]) + "
"; + return divItem; +} + function timeDiffToText(time) { var diff = Date.now() - Date.parse(time); diff = Math.round(diff / 1000);