Lora/Lora-Map
1
0
Fork 0
Code Issues 8 Pull Requests Releases 23 Wiki Activity

[1.1.3] #1 Click on icon and show details

Browse Source
This commit is contained in:
BlubbFish 2019-03-08 18:33:11 +01:00
parent 452543e04f
commit bed3e4b22c
4 changed files with 144 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
Lora-Map/resources/css/global.css
View File

@ -55,14 +55,14 @@ html, body {
border: rgba(0,0,0,0.4) 2px solid; border: rgba(0,0,0,0.4) 2px solid;
border-radius: 4px; border-radius: 4px;
display: none; display: none;
font-size: 11px;
font-family: Verdana;
} }
#pannels #pannels_pos { #pannels #pannels_pos {
display: none; display: none;
} }
#pannels #pannels_pos .item { #pannels #pannels_pos .item {
margin: 4px; margin: 4px;
font-size: 11px;
font-family: Verdana;
} }
#pannels #pannels_pos .item .color { #pannels #pannels_pos .item .color {
float: left; float: left;
@ -88,6 +88,32 @@ html, body {
margin-left: 5px; margin-left: 5px;
} }
#pannels #pannel_info { #pannels #pannels_info {
display: none; display: none;
padding: 5px;
}
#pannels #pannels_info .bold {
font-weight: bold;
}
#pannels #pannels_info .name {
font-size: 16px;
}
#pannels #pannels_info .batt {
margin-bottom: 10px;
}
#pannels #pannels_info .batt img {
vertical-align: middle;
}
#pannels #pannels_info .gps {
font-size: 20px;
}
#pannels #pannels_info .coord {
font-family: monospace;
font-size: 14px;
}
#pannels #pannels_info .hdop {
margin-bottom: 10px;
}
#pannels #pannels_info .update {
margin-bottom: 10px;
} }

2
Lora-Map/resources/index.html
View File

@ -15,7 +15,7 @@
<div id="version">vx.x.x</div> <div id="version">vx.x.x</div>
<div id="pannels"> <div id="pannels">
<div id="pannels_pos"></div> <div id="pannels_pos"></div>
<div id="pannel_info"></div> <div id="pannels_info"></div>
</div> </div>
<script type="text/javascript" src="js/leaflet/leaflet.js"></script> <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/nav.js"></script>

84
Lora-Map/resources/js/marker.js
View File

@ -1,4 +1,5 @@
var markers = {}; var markers = {};
var serverLocation = {};
setInterval(datarunner, 1000); setInterval(datarunner, 1000);
function datarunner() { function datarunner() {
@ -11,89 +12,20 @@ function datarunner() {
//https://leafletjs.com/reference-1.4.0.html#marker //https://leafletjs.com/reference-1.4.0.html#marker
function parsedata() { function parsedata() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
var items = JSON.parse(this.responseText); serverLocation = JSON.parse(this.responseText);
for (var key in items) { for (var key in serverLocation) {
if (items.hasOwnProperty(key)) { if (serverLocation.hasOwnProperty(key)) {
var markeritem = items[key]; var markeritem = serverLocation[key];
if (markeritem['Latitude'] != 0 || markeritem['Longitude'] != 0) { if (markeritem['Latitude'] != 0 || markeritem['Longitude'] != 0) {
if (!markers.hasOwnProperty(key)) { if (!markers.hasOwnProperty(key)) {
markers[key] = L.marker([markeritem['Latitude'], markeritem['Longitude']]).addTo(mymap); markers[key] = L.marker([markeritem['Latitude'], markeritem['Longitude']], { 'title': key }).addTo(mymap).on("click", showMarkerInfo, key);
} else { } else {
markers[key].setLatLng([markeritem['Latitude'], markeritem['Longitude']]); markers[key].setLatLng([markeritem['Latitude'], markeritem['Longitude']]);
} }
} }
} }
} }
parseStatus(items); updateStatus();
updateDeviceStatus();
} }
}
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";
} }

107
Lora-Map/resources/js/menu.js
View File

@ -4,7 +4,7 @@ function showHidePanel(name) {
document.getElementById("pannels").style.display = "block"; document.getElementById("pannels").style.display = "block";
document.getElementById(name).style.display = "block"; document.getElementById(name).style.display = "block";
visiblePanel = name; visiblePanel = name;
} else if (visiblePanel === name) { } else if (visiblePanel === name && name !== "pannels_info") {
document.getElementById("pannels").style.display = "none"; document.getElementById("pannels").style.display = "none";
visiblePanel = null; visiblePanel = null;
} else { } else {
@ -12,4 +12,109 @@ function showHidePanel(name) {
document.getElementById(name).style.display = "block"; document.getElementById(name).style.display = "block";
visiblePanel = name; visiblePanel = name;
} }
}
var statusToDevice = null;
function showMarkerInfo(e) {
showHidePanel("pannels_info");
statusToDevice = this;
updateDeviceStatus();
}
function showMarkerInfoMenu() {
showHidePanel("pannels_info");
statusToDevice = this.getAttribute("rel");
updateDeviceStatus();
}
function updateDeviceStatus() {
document.getElementById("pannels_info").innerHTML = "";
if (serverLocation.hasOwnProperty(statusToDevice)) {
var markeritem = serverLocation[statusToDevice];
var html = "<div class=\"name\">Name: <span class=\"bold\">" + statusToDevice + "</span></div>";
html += "<div class=\"batt\"><span class=\"bold\">Batterie:</span> " + markeritem["Battery"] + "V <img src=\"icons/akku/" + markeritem["Batterysimple"] + "-4.png\"></div>";
if (markeritem["Fix"]) {
html += "<div class=\"gps\" style=\"color: green;\">GPS-Empfang</div>";
} else {
html += "<div class=\"gps\" style=\"color: red;\">kein GPS-Empfang</div>";
}
html += "<div class=\"coord\">" + markeritem["Latitude"].toFixed(7) + ", " + markeritem["Longitude"].toFixed(7) + "</div>";
html += "<div class=\"height\"><span class=\"bold\">Höhe:</span> " + markeritem["Height"].toFixed(1) + " m</div>";
html += "<div class=\"hdop\"><span class=\"bold\">HDOP:</span> " + markeritem["Hdop"].toFixed(1) + "</div>";
html += "<div class=\"update\"><span class=\"bold\">Update:</span> " + markeritem["Upatedtime"] + "<br><span class=\"bold\">Vor:</span> " + timeDiffToText(markeritem["Upatedtime"]) + "</div>";
html += "<div><span class=\"bold\">RSSI:</span> " + markeritem["Rssi"] + ", <span class=\"bold\">SNR:</span> " + markeritem["Snr"] + "</div>";
document.getElementById("pannels_info").innerHTML = html;
}
}
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";
}
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";
} }