From 3f75dba452a12ea7e78318baf61c7dfd1238beea Mon Sep 17 00:00:00 2001
From: BlubbFish <git@blubbfish.net>
Date: Fri, 8 Mar 2019 10:39:43 +0100
Subject: [PATCH] Begin of #1

---
 Lora-Map/Lora-Map.csproj                |   3 +
 Lora-Map/resources/css/global.css       |  43 +++++++++-
 Lora-Map/resources/css/icons/marker.png | Bin 0 -> 1486 bytes
 Lora-Map/resources/index.html           |  20 ++++-
 Lora-Map/resources/js/nav.js            | 107 ++++--------------------
 5 files changed, 78 insertions(+), 95 deletions(-)
 create mode 100644 Lora-Map/resources/css/icons/marker.png

diff --git a/Lora-Map/Lora-Map.csproj b/Lora-Map/Lora-Map.csproj
index df752e9..16279d6 100644
--- a/Lora-Map/Lora-Map.csproj
+++ b/Lora-Map/Lora-Map.csproj
@@ -71,6 +71,9 @@
     <Content Include="resources\css\global.css">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\css\icons\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" />
diff --git a/Lora-Map/resources/css/global.css b/Lora-Map/resources/css/global.css
index b8cadb4..1e5e9aa 100644
--- a/Lora-Map/resources/css/global.css
+++ b/Lora-Map/resources/css/global.css
@@ -26,8 +26,9 @@ html, body {
 
 #menucollumn .pos {
     display: block;
-    height: 32px;
-    width: 32px;
+    height: 30px;
+    width: 30px;
+    background-image: url("icons/marker.png");
 }
 
 #version {
@@ -41,4 +42,40 @@ html, body {
     width: 40px;
     border: #707070 2px solid;
     border: rgba(0,0,0,0.4) 2px solid;
-}
\ No newline at end of file
+}
+
+#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;
+}
+#pannels #pannels_pos {
+    display: none;
+}
+#pannels #pannels_pos .item {
+    margin: 4px;
+    font-size: 11px;
+    font-family: Verdana;
+}
+#pannels #pannels_pos .item .color {
+    float: left;
+    width: 2px;
+    height: 38px;
+}
+#pannels #pannels_pos .item .icon {
+    float: left;
+    height: 38px;
+    width: 40px;
+    margin-right: 5px;
+}
+#pannels #pannels_pos .item .line1 .name {
+    font-weight: bold;
+}
diff --git a/Lora-Map/resources/css/icons/marker.png b/Lora-Map/resources/css/icons/marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..4135182ed670d715e18bc2bd7872ea817aee5fbc
GIT binary patch
literal 1486
zcmV;<1u^=GP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00004XF*Lt006O%
z3;baP0000WV@Og>004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006
zVoOIv00000008+zyMF)x010qNS#tmY4#NNd4#NS*Z>VGd00lBhL_t(Y$DNkXZ`))T
z$3OlN$Bmo1Ym=^{j4h=DCQX}GAvo-UKxn5)^ulEq5Qpxv{{V4BToM1r0Ks91frPX}
z)rqapPP9dBU}#NCY2qYy>iBhR4t9#;y4l1lSxWr+eZJ50eV+Guz7o&3a`W@^=PQ-U
zhl--S8w9~zx7!_a97nP&t6Q(vZOgKD+U@qEUaz+SY{k!0pbmIxgX%K?<r_C{oS&JQ
z`Bc~S1tEmyx-Okg2hWRasj8~$x~>-rg_02Bvg0^SU>#Tm9sv)4O`r_~eZ$Hy(8a~Y
zg>&c5-OcCo^S<vZj^kii76%6h92^|bYPC2#JVXeA@B4JSU4#%i@FFk^oCQiTU<>E~
z;joC6+qZ8oj*pLj?)$##I1aU1jqUAis?{o%Wet2RNfIL?BZOg?d_4|a0j7W#;{QJa
zJ3ucBSh{uV)_bQ;o%+J}eYw$Su)e;|^71mBPAAjLFbq%H%g3MvU?hI`J+OO>>g(69
z&r~XvZ-O8gZ8RFJtgLYV{(XcH{LiJt%udD*>;tuQ#JNhP@>v*$W!tvd*w|ocY3W#i
zK(C)GK#Gk^L%>yF6u3%M={p0!*REZg({=rQ*LB(5-DP=sIc=Z^WQFd>#!svnKqe}*
zH-QZ~xq0TynGb{znr+)ut5qDwc^=RtxDSxa<%Usy7Py-9uprCwJFe?uSr*l5HBE0C
zQ~*uDiucEXaaC1EP1BTmy&jE5Bl&$l$WdS}32X*I@N%cq!Llss^?LG9kOJ)xb*7(*
znnOr*Z(lbI<4UPiDhMIc!2KFffzt!P-EOz&c^<ZHr)f$8ix~7v;2u%2gurQ_s%hHz
z)YR0)jO&#wzOezS9mkO*Ny2sAA*rMVJOq9Ke&N49ybpw?X}&c%IeAf*<zY4o$z844
zY<jkBXWiN4cWvNLpvGYH_krC?rGjaisOqr-Pqww(fLo15qwP2jzVD|ibEx}AxiU@V
z!i5WO<n#F~){?+s(x7NIn>E|E@jMU1Fw*(ydr}0>6SYDu@r`=(=FLxv#p1LOf?BPX
z1|F!BBp*(z)moKh`LZm_Syc7gs|n1<bcevx>FMd*!otGG6B833IgZ2L-X2?9Tj}$?
z#P3ehdP@lL*tTs)Q4~W}RSd&OHxWfuRijueUeYve!ZgjdXJ=>Sxw*M{!!XQFr^DXf
z9;>UXS<xn`ZVdnf+pg<wNs@F~RaI0~Mb~va&m#x|a=9F1V`EaORMN}k@@%<Wo;6LA
zUav>9*`(2Eu(r0wlP6Eoz<%oY-vd+w)i4YnhGF=c=Xsjvd1#tOKA%UDBs5J!*L4&{
zAqWCo*F};f+U+)u<FLKG&F1E2R<uDHM@@OM1FQjm0IvXeo`)>UXqrY41bCizG<#jw
zMNt&`LuG$|pNu6^PV50|=?eOXNGGij$(I6f6rJz;2qEZpyR_SFWLZWCaZHh<f=TAq
z0e%A>rh#4HcOrrIDsYK}F7ti=NL%$C8nS|n-2MeD1Djc5&x;RD12cd@YRHFSnATV6
zl{L-kz)!%pz*ZKp4;%tI@DkDR&M{nJq(QwD#UAh&_zGA8?33iJ2Xy0Tr-`~%j^|q<
z1uB3laF<Bv?Ev9PzyV;#k3lr@3eN!V)0<3uKd;{bUlYx44~7eRpGaYJ;)u&c5;aTM
zWr6nM=<We`fL~)<JPWu_lSOn5#)$HrCsGko0yLe|9<WPPOm~Qs%3$w(j+}LYMtraU
oOb|^aB>|dTY0w8Ta|74lUo6jLDK21_SO5S307*qoM6N<$f)}i~N&o-=

literal 0
HcmV?d00001

diff --git a/Lora-Map/resources/index.html b/Lora-Map/resources/index.html
index 736a8be..9fc4b91 100644
--- a/Lora-Map/resources/index.html
+++ b/Lora-Map/resources/index.html
@@ -10,9 +10,27 @@
 <body>
     <div id="bigmap"></div>
     <div id="menucollumn">
-        <span class="pos"></span>
+        <span class="pos" onclick="showHidePanel('pannels_pos');"></span>
     </div>
     <div id="version">vx.x.x</div>
+    <div id="pannels">
+        <div id="pannels_pos">
+            <div class="item">
+                <span class="color" style="background-color: red;"></span>
+                <span class="icon"></span>
+                <div class="line1">
+                    <span class="name">A</span>
+                    <span class="akku"></span>
+                </div>
+                <div class="line2" style="color: green;">
+                    GPS-Empfang
+                </div>
+                <div class="line3">
+                    Letzter Datenempfang: vor 10 s
+                </div>
+            </div>
+        </div>
+    </div>
     <script type="text/javascript" src="js/leaflet/leaflet.js"></script>
     <script type="text/javascript" src="js/nav.js"></script>
 </body>
diff --git a/Lora-Map/resources/js/nav.js b/Lora-Map/resources/js/nav.js
index a4c99a9..334f023 100644
--- a/Lora-Map/resources/js/nav.js
+++ b/Lora-Map/resources/js/nav.js
@@ -16,6 +16,7 @@ function datarunner() {
   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) {
@@ -33,94 +34,18 @@ function parsedata() {
   }
 }
 
-
-
-/*var devices = {};
-function get_elm() {
-    var colors = new Array(
-        "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
-        "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
-        "http://maps.google.com/mapfiles/ms/icons/purple-dot.png",
-        "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
-    );
-    var xhttp = new XMLHttpRequest();
-    xhttp.onreadystatechange = function () {
-        if (this.readyState == 4 && this.status == 200) {
-            var obj = JSON.parse(this.responseText);
-            var i = 0;
-            for (var names in obj) {
-                if (obj.hasOwnProperty(names)) {
-                    if (!devices.hasOwnProperty(names)) {
-                        devices[names] = 0;
-                    }
-                    var list = obj[names];
-                    var j = devices[names];
-                    for (var pos in list) {
-                        if (list.hasOwnProperty(pos)) {
-                            var m = new google.maps.Marker({
-                                icon: colors[i % colors.length],
-                                position: new google.maps.LatLng(list[pos]["Latitude"], list[pos]["Longitude"]),
-                                animation: google.maps.Animation.DROP
-                            });
-                            var infowindow = new google.maps.InfoWindow({
-                                content: "<div>" +
-                                    "Name: " + names + "<br>" +
-                                    "PacketRssi: " + list[pos]["PacketRssi"] + "<br>" +
-                                    "Rssi: " + list[pos]["Rssi"] + "<br>" +
-                                    "Snr: " + list[pos]["Snr"] + "<br>" +
-                                    "Upatedtime: " + list[pos]["Upatedtime"] + "<br>" +
-                                    "Hdop: " + list[pos]["Hdop"] + "<br>" +
-                                    "Battery: " + list[pos]["Battery"] + "<br>" +
-                                    "Fix: " + list[pos]["Fix"] +
-                                    "</div>"
-                            });
-                            m.addListener('click', function () {
-                                infowindow.open(map, m);
-                            });
-                            m.setMap(map);
-                            if (!center_set) {
-                                map.setCenter(new google.maps.LatLng(list[pos]["Latitude"], list[pos]["Longitude"]));
-                                smoothZoom(15, map.getZoom());
-                                center_set = true;
-                            }
-                            j++;
-                        }
-                    }
-                    devices[names] = j;
-                    i++;
-                }
-            }
-        }
-    };
-    var qstring = "";
-    for (var item in devices) {
-        if (devices.hasOwnProperty(item)) {
-            qstring += item + ":" + devices[item];
-        }
-        qstring += ";";
-    }
-    xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc?i=" + qstring.substr(0, qstring.length - 1), true);
-    xhttp.send();
-}
-setInterval(get_elm, 5000);
-function smoothZoom(max, current) {
-    if (current >= max) {
-        return;
-    } else {
-        var z = google.maps.event.addListener(map, 'zoom_changed', function (event) {
-            google.maps.event.removeListener(z);
-            smoothZoom(max, current + 1);
-        });
-        setTimeout(function () { map.setZoom(current) }, 150);
-    }
-}
-*/
-/*var map;
-var center_set = false;
-function initMap() {
-    map = new google.maps.Map(document.getElementById('map'), {
-        zoom: 3,
-        center: new google.maps.LatLng(0, 0)
-    });
-}
-*/
\ No newline at end of file
+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;
+  }
+}
\ No newline at end of file