Skip to content

Commit

Permalink
[1.1.3] #1 Click on icon and show details
Browse files Browse the repository at this point in the history
  • Loading branch information
@blubbfish
blubbfish committed Mar 8, 2019
1 parent 452543e commit bed3e4b
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 81 deletions.
32 changes: 29 additions & 3 deletions Lora-Map/resources/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,14 @@ html, body {
border: rgba(0,0,0,0.4) 2px solid;
border-radius: 4px;
display: none;
font-size: 11px;
font-family: Verdana;
}
#pannels #pannels_pos {
display: none;
}
#pannels #pannels_pos .item {
margin: 4px;
font-size: 11px;
font-family: Verdana;
}
#pannels #pannels_pos .item .color {
float: left;
Expand All @@ -88,6 +88,32 @@ html, body {
margin-left: 5px;
}

#pannels #pannel_info {
#pannels #pannels_info {
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 changes: 1 addition & 1 deletion Lora-Map/resources/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div id="version">vx.x.x</div>
<div id="pannels">
<div id="pannels_pos"></div>
<div id="pannel_info"></div>
<div id="pannels_info"></div>
</div>
<script type="text/javascript" src="js/leaflet/leaflet.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
Expand Down
84 changes: 8 additions & 76 deletions Lora-Map/resources/js/marker.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
var markers = {};
var serverLocation = {};

setInterval(datarunner, 1000);
function datarunner() {
Expand All @@ -11,89 +12,20 @@ function datarunner() {
//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];
serverLocation = JSON.parse(this.responseText);
for (var key in serverLocation) {
if (serverLocation.hasOwnProperty(key)) {
var markeritem = serverLocation[key];
if (markeritem['Latitude'] != 0 || markeritem['Longitude'] != 0) {
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 {
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 changes: 106 additions & 1 deletion Lora-Map/resources/js/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,117 @@ function showHidePanel(name) {
document.getElementById("pannels").style.display = "block";
document.getElementById(name).style.display = "block";
visiblePanel = name;
} else if (visiblePanel === name) {
} else if (visiblePanel === name && name !== "pannels_info") {
document.getElementById("pannels").style.display = "none";
visiblePanel = null;
} else {
document.getElementById(visiblePanel).style.display = "none";
document.getElementById(name).style.display = "block";
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";
}

0 comments on commit bed3e4b

Please sign in to comment.