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

Refactoring of all JS finished.

Browse Source
This commit is contained in:
Philip Schell 2019-07-17 14:23:06 +02:00
parent b214aaecee
commit f4efe2ab66
7 changed files with 321 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG
View File

@ -4,6 +4,7 @@
### New Features ### New Features
### Bugfixes ### Bugfixes
### Changes ### Changes
* Refactoring of all JS
## 1.2.8 ## 1.2.8
### New Features ### New Features

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

@ -10,9 +10,9 @@
<body> <body>
<div id="bigmap"></div> <div id="bigmap"></div>
<div id="menucollumn"> <div id="menucollumn">
<span class="pos" onclick="showHidePanel('pannels_pos');"></span> <span class="pos" onclick="MenuObject.ShowHidePanel('pannels_pos');"></span>
<span class="admin" onclick="showHidePanel('pannels_admin');"></span> <span class="admin" onclick="MenuObject.ShowHidePanel('pannels_admin');"></span>
<span class="info" onclick="showHidePanel('pannels_version');"></span> <span class="info" onclick="MenuObject.ShowHidePanel('pannels_version');"></span>
</div> </div>
<div id="pannels"> <div id="pannels">
<div id="pannels_pos"></div> <div id="pannels_pos"></div>

6
Lora-Map/resources/js/functions.js
View File

@ -1,11 +1,11 @@
var FunctionsObject = { var FunctionsObject = {
_internalTimeOffset: 0, _internalTimeOffset: 0,
Start: function () { Start: function () {
setInterval(this._Runner, 60000); setInterval(this._Runner60000, 60000);
this._Runner(); this._Runner60000();
return this; return this;
}, },
_Runner: function () { _Runner60000: function () {
var timecorrection = new XMLHttpRequest(); var timecorrection = new XMLHttpRequest();
timecorrection.onreadystatechange = function () { timecorrection.onreadystatechange = function () {
if (timecorrection.readyState === 4 && timecorrection.status === 200) { if (timecorrection.readyState === 4 && timecorrection.status === 200) {

292
Lora-Map/resources/js/map.js
View File

@ -1,11 +1,14 @@
var MapObject = { var MapObject = {
Map: {}, Map: {},
_SpecialMarkers: new Array(),
Start: function () { Start: function () {
this.Map = L.map('bigmap').setView(["{%START_LOCATION%}"], 16); this.Map = L.map('bigmap').setView(["{%START_LOCATION%}"], 16);
this._GetMapLayers(); this._RunnerOnce();
this._SetupMapZoomFontsize();
this._SetupClickHandler();
return this; return this;
}, },
_GetMapLayers: function () { _RunnerOnce: function () {
var layergetter = new XMLHttpRequest(); var layergetter = new XMLHttpRequest();
layergetter.onreadystatechange = function () { layergetter.onreadystatechange = function () {
if (layergetter.readyState === 4 && layergetter.status === 200) { if (layergetter.readyState === 4 && layergetter.status === 200) {
@ -14,6 +17,15 @@
}; };
layergetter.open("GET", "/getlayer", true); layergetter.open("GET", "/getlayer", true);
layergetter.send(); layergetter.send();
var geogetter = new XMLHttpRequest();
geogetter.onreadystatechange = function () {
if (geogetter.readyState === 4 && geogetter.status === 200) {
MapObject._ParseAJAXGeo(JSON.parse(geogetter.responseText));
}
};
geogetter.open("GET", "/getgeo", true);
geogetter.send();
}, },
_ParseAJAXLayers: function (maps) { _ParseAJAXLayers: function (maps) {
var i = 0; var i = 0;
@ -53,152 +65,142 @@
} }
L.control.layers(baseMaps).addTo(this.Map); L.control.layers(baseMaps).addTo(this.Map);
} }
} },
}.Start(); _ParseAJAXGeo: function (geo) {
if (!(Object.keys(geo).length === 0 && geo.constructor === Object)) {
var SpecialMarkers = new Array(); L.geoJSON(geo, {
GetGeoLayer(); style: function (features) {
function GetGeoLayer() { return {
var geogetter = new XMLHttpRequest(); color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"],
geogetter.onreadystatechange = function () { weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"],
if (geogetter.readyState === 4 && geogetter.status === 200) { opacity: typeof features.properties["stroke-opacity"] === "undefined" ? 1 : features.properties["stroke-opacity"],
var geo = JSON.parse(geogetter.responseText); fillColor: typeof features.properties["fill"] === "undefined" ? '#ffffff' : features.properties["fill"],
if (!(Object.keys(geo).length === 0 && geo.constructor === Object)) { fillOpacity: typeof features.properties["fill-opacity"] === "undefined" ? 1 : features.properties["fill-opacity"]
L.geoJSON(geo, { };
style: function (features) { },
return { onEachFeature: function (feature, layer) {
color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"], if (feature.geometry.type === "Polygon" || feature.geometry.type === "Point" && feature.properties.hasOwnProperty("icon")) {
weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"], var text = "<b>" + feature.properties.name + "</b>";
opacity: typeof features.properties["stroke-opacity"] === "undefined" ? 1 : features.properties["stroke-opacity"], if (feature.properties.hasOwnProperty("description")) {
fillColor: typeof features.properties["fill"] === "undefined" ? '#ffffff' : features.properties["fill"], text = text + "<br>" + feature.properties.description;
fillOpacity: typeof features.properties["fill-opacity"] === "undefined" ? 1 : features.properties["fill-opacity"]
};
},
onEachFeature: function (feature, layer) {
if (feature.geometry.type === "Polygon" || feature.geometry.type === "Point" && feature.properties.hasOwnProperty("icon")) {
var text = "<b>"+feature.properties.name+"</b>";
if (feature.properties.hasOwnProperty("description")) {
text = text + "<br>" + feature.properties.description;
}
layer.bindPopup(text);
}
},
pointToLayer: function (geoJsonPoint, latlng) {
if (geoJsonPoint.properties.hasOwnProperty("description") && geoJsonPoint.properties["description"] === "snumber" && !geoJsonPoint.properties.hasOwnProperty("icon")) {
var snumbericon = L.marker(latlng, {
icon: new L.DivIcon({
className: "snumber-icon",
html: geoJsonPoint.properties["name"],
iconSize: [8, 8]
})
});
SpecialMarkers.push(snumbericon);
return snumbericon;
} else if (geoJsonPoint.properties.hasOwnProperty("description") && geoJsonPoint.properties["description"] === "coord" && !geoJsonPoint.properties.hasOwnProperty("icon")) {
var coordicon = L.marker(latlng, {
icon: new L.DivIcon({
className: "coord-icon",
html: geoJsonPoint.properties["name"]
})
});
SpecialMarkers.push(coordicon);
return coordicon;
} else if (geoJsonPoint.properties.hasOwnProperty("icon")) {
return L.marker(latlng, { icon: L.icon({ iconUrl: "css/icons/cctv.png", iconSize: [32, 32] }) });
} }
layer.bindPopup(text);
} }
}).addTo(MapObject.Map); },
} pointToLayer: function (geoJsonPoint, latlng) {
if (geoJsonPoint.properties.hasOwnProperty("description") && geoJsonPoint.properties["description"] === "snumber" && !geoJsonPoint.properties.hasOwnProperty("icon")) {
var snumbericon = L.marker(latlng, {
icon: new L.DivIcon({
className: "snumber-icon",
html: geoJsonPoint.properties["name"],
iconSize: [8, 8]
})
});
MapObject._SpecialMarkers.push(snumbericon);
return snumbericon;
} else if (geoJsonPoint.properties.hasOwnProperty("description") && geoJsonPoint.properties["description"] === "coord" && !geoJsonPoint.properties.hasOwnProperty("icon")) {
var coordicon = L.marker(latlng, {
icon: new L.DivIcon({
className: "coord-icon",
html: geoJsonPoint.properties["name"]
})
});
MapObject._SpecialMarkers.push(coordicon);
return coordicon;
} else if (geoJsonPoint.properties.hasOwnProperty("icon")) {
return L.marker(latlng, { icon: L.icon({ iconUrl: "css/icons/cctv.png", iconSize: [32, 32] }) });
}
}
}).addTo(this.Map);
} }
}; },
geogetter.open("GET", "/getgeo", true); _SetupMapZoomFontsize: function () {
geogetter.send(); this.Map.on('zoomend', function () {
} var currentZoom = MapObject.Map.getZoom();
if (currentZoom < 14) {
MapObject.Map.on('zoomend', function () { MapObject._SpecialMarkers.forEach(function (elem, index) {
var currentZoom = MapObject.Map.getZoom(); if (elem.feature.properties["description"] === "snumber") {
if (currentZoom < 14) { elem._icon.style.fontSize = "0px";
SpecialMarkers.forEach(function (elem, index) { elem._icon.style.marginLeft = "0px";
if (elem.feature.properties["description"] === "snumber") { elem._icon.style.marginTop = "0px";
elem._icon.style.fontSize = "0px"; }
elem._icon.style.marginLeft = "0px"; if (elem.feature.properties["description"] === "coord") {
elem._icon.style.marginTop = "0px"; elem._icon.style.fontSize = "0px";
} }
if (elem.feature.properties["description"] === "coord") { });
elem._icon.style.fontSize = "0px"; } else if (currentZoom === 14) {
} MapObject._SpecialMarkers.forEach(function (elem, index) {
}); if (elem.feature.properties["description"] === "snumber") {
} else if (currentZoom === 14) { elem._icon.style.fontSize = "0px";
SpecialMarkers.forEach(function (elem, index) { elem._icon.style.marginLeft = "0px";
if (elem.feature.properties["description"] === "snumber") { elem._icon.style.marginTop = "0px";
elem._icon.style.fontSize = "0px"; }
elem._icon.style.marginLeft = "0px"; if (elem.feature.properties["description"] === "coord") {
elem._icon.style.marginTop = "0px"; elem._icon.style.fontSize = "6px";
} }
if (elem.feature.properties["description"] === "coord") { });
elem._icon.style.fontSize = "6px"; } else if (currentZoom === 15) {
} MapObject._SpecialMarkers.forEach(function (elem, index) {
}); if (elem.feature.properties["description"] === "snumber") {
} else if (currentZoom === 15) { elem._icon.style.fontSize = "0px";
SpecialMarkers.forEach(function (elem, index) { elem._icon.style.marginLeft = "0px";
if (elem.feature.properties["description"] === "snumber") { elem._icon.style.marginTop = "0px";
elem._icon.style.fontSize = "0px"; }
elem._icon.style.marginLeft = "0px"; if (elem.feature.properties["description"] === "coord") {
elem._icon.style.marginTop = "0px"; elem._icon.style.fontSize = "9px";
} }
if (elem.feature.properties["description"] === "coord") { });
elem._icon.style.fontSize = "9px"; } else if (currentZoom === 16) {
} MapObject._SpecialMarkers.forEach(function (elem, index) {
}); if (elem.feature.properties["description"] === "snumber") {
} else if (currentZoom === 16) { elem._icon.style.fontSize = "5px";
SpecialMarkers.forEach(function (elem, index) { elem._icon.style.marginLeft = "-4px";
if (elem.feature.properties["description"] === "snumber") { elem._icon.style.marginTop = "-4px";
elem._icon.style.fontSize = "5px"; }
elem._icon.style.marginLeft = "-4px"; if (elem.feature.properties["description"] === "coord") {
elem._icon.style.marginTop = "-4px"; elem._icon.style.fontSize = "13px";
} }
if (elem.feature.properties["description"] === "coord") { });
elem._icon.style.fontSize = "13px"; } else if (currentZoom === 17) {
} MapObject._SpecialMarkers.forEach(function (elem, index) {
}); if (elem.feature.properties["description"] === "snumber") {
} else if (currentZoom === 17) { elem._icon.style.fontSize = "5px";
SpecialMarkers.forEach(function (elem, index) { elem._icon.style.marginLeft = "-4px";
if (elem.feature.properties["description"] === "snumber") { elem._icon.style.marginTop = "-4px";
elem._icon.style.fontSize = "5px"; }
elem._icon.style.marginLeft = "-4px"; if (elem.feature.properties["description"] === "coord") {
elem._icon.style.marginTop = "-4px"; elem._icon.style.fontSize = "16px";
} }
if (elem.feature.properties["description"] === "coord") { });
elem._icon.style.fontSize = "16px"; } else if (currentZoom === 18) {
} MapObject._SpecialMarkers.forEach(function (elem, index) {
}); if (elem.feature.properties["description"] === "snumber") {
} else if (currentZoom === 18) { elem._icon.style.fontSize = "8px";
SpecialMarkers.forEach(function (elem, index) { elem._icon.style.marginLeft = "-5px";
if (elem.feature.properties["description"] === "snumber") { elem._icon.style.marginTop = "-6px";
elem._icon.style.fontSize = "8px"; }
elem._icon.style.marginLeft = "-5px"; if (elem.feature.properties["description"] === "coord") {
elem._icon.style.marginTop = "-6px"; elem._icon.style.fontSize = "25px";
} }
if (elem.feature.properties["description"] === "coord") { });
elem._icon.style.fontSize = "25px"; } else if (currentZoom === 19) {
} MapObject._SpecialMarkers.forEach(function (elem, index) {
}); if (elem.feature.properties["description"] === "snumber") {
} else if (currentZoom === 19) { elem._icon.style.fontSize = "14px";
SpecialMarkers.forEach(function (elem, index) { elem._icon.style.marginLeft = "-8px";
if (elem.feature.properties["description"] === "snumber") { elem._icon.style.marginTop = "-11px";
elem._icon.style.fontSize = "14px"; }
elem._icon.style.marginLeft = "-8px"; if (elem.feature.properties["description"] === "coord") {
elem._icon.style.marginTop = "-11px"; elem._icon.style.fontSize = "45px";
} }
if (elem.feature.properties["description"] === "coord") { });
elem._icon.style.fontSize = "45px";
} }
}); });
},
_SetupClickHandler: function () {
this.Map.on("click", this._HidePanel);
},
_HidePanel: function (e) {
MenuObject.ShowHidePanel(null);
} }
}); }.Start();
MapObject.Map.on("click", hidePanel);
function hidePanel(e) {
showHidePanel(null);
}

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

@ -3,10 +3,11 @@
PanicData: {}, PanicData: {},
LocationData: {}, LocationData: {},
Start: function () { Start: function () {
setInterval(this._Runner, 1000); setInterval(this._Runner1000, 1000);
this._Runner1000();
return this; return this;
}, },
_Runner: function () { _Runner1000: function () {
var loc = new XMLHttpRequest(); var loc = new XMLHttpRequest();
loc.onreadystatechange = function () { loc.onreadystatechange = function () {
if (loc.readyState === 4 && loc.status === 200) { if (loc.readyState === 4 && loc.status === 200) {
@ -44,7 +45,7 @@
}); });
marker = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'], 'icon': myIcon }); marker = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'], 'icon': myIcon });
} }
this._Markers[key] = marker.addTo(MapObject.Map).on("click", showMarkerInfo, key); this._Markers[key] = marker.addTo(MapObject.Map).on("click", function () { MenuObject.statusToDevice = this; MenuObject.ShowHidePanel("pannels_info"); }, key);
} else { } else {
this._Markers[key].setLatLng([positionItem['Latitude'], positionItem['Longitude']]); this._Markers[key].setLatLng([positionItem['Latitude'], positionItem['Longitude']]);
if (positionItem['Icon'] !== null) { if (positionItem['Icon'] !== null) {
@ -64,7 +65,7 @@
} else { } else {
if (this._Markers[key]._icon.children.length === 1 && this._Markers[key]._icon.children[0].hasAttribute("src")) { if (this._Markers[key]._icon.children.length === 1 && this._Markers[key]._icon.children[0].hasAttribute("src")) {
this._Markers[key].removeFrom(MapObject.Map); this._Markers[key].removeFrom(MapObject.Map);
this._Markers[key] = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'] }).addTo(MapObject.Map).on("click", showMarkerInfo, key); this._Markers[key] = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'] }).addTo(MapObject.Map).on("click", function () { MenuObject.statusToDevice = this; MenuObject.ShowHidePanel("pannels_info"); }, key);
} }
} }
} }
@ -83,8 +84,8 @@
} }
} }
} }
updateStatus(); MenuObject.UpdateStatus();
update_pannels_info(); MenuObject._Update_pannels_info();
}, },
_ParseAJAXPanic: function (serverPanic) { _ParseAJAXPanic: function (serverPanic) {
this.PanicData = serverPanic; this.PanicData = serverPanic;
@ -95,7 +96,7 @@
var marker = this._Markers[id]; var marker = this._Markers[id];
if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") <= 10 && marker._icon.className.indexOf(" marker-alert") === -1) { if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") <= 10 && marker._icon.className.indexOf(" marker-alert") === -1) {
marker._icon.className += " marker-alert"; marker._icon.className += " marker-alert";
showMarkerInfoPerId(id); MenuObject.ShowMarkerInfoPerId(id);
} else if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") > 10 && marker._icon.className.indexOf(" marker-alert") !== -1) { } else if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") > 10 && marker._icon.className.indexOf(" marker-alert") !== -1) {
marker._icon.className = marker._icon.className.replace(" marker-alert", ""); marker._icon.className = marker._icon.className.replace(" marker-alert", "");
} }

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

@ -1,175 +1,167 @@
var visiblePanel = null; var MenuObject = {
function showHidePanel(name) { statusToDevice: null,
if (visiblePanel === null && name !== null) { _visiblePanel: null,
document.getElementById("pannels").style.display = "block"; _overviewStatus: new Array(),
document.getElementById(name).style.display = "block"; Start: function () {
visiblePanel = name; return this;
if (typeof window["update_" + name] === "function") { },
window["update_" + name](); ShowHidePanel: function (name) {
} if (this._visiblePanel === null && name !== null) {
} else if (visiblePanel === name && name !== "pannels_info" || name === null) { document.getElementById("pannels").style.display = "block";
document.getElementById("pannels").style.display = "none"; document.getElementById(name).style.display = "block";
if (visiblePanel !== null) { this._visiblePanel = name;
document.getElementById(visiblePanel).style.display = "none"; if (typeof MenuObject["_Update_" + name] === "function") {
} MenuObject["_Update_" + name]();
visiblePanel = null; }
} else { } else if (this._visiblePanel === name && name !== "pannels_info" || name === null) {
document.getElementById(visiblePanel).style.display = "none"; document.getElementById("pannels").style.display = "none";
document.getElementById(name).style.display = "block"; if (this._visiblePanel !== null) {
visiblePanel = name; document.getElementById(this._visiblePanel).style.display = "none";
if (typeof window["update_" + name] === "function") { }
window["update_" + name](); this._visiblePanel = null;
}
}
}
var statusToDevice = null;
function showMarkerInfo(e) {
statusToDevice = this;
showHidePanel("pannels_info");
}
function showMarkerInfoPerId(id) {
statusToDevice = id;
showHidePanel("pannels_info");
}
function showMarkerInfoMenu() {
statusToDevice = this.getAttribute("rel");
showHidePanel("pannels_info");
}
function update_pannels_info() {
document.getElementById("pannels_info").innerHTML = "";
if (MarkerObject.LocationData.hasOwnProperty(statusToDevice)) {
var positionItem = MarkerObject.LocationData[statusToDevice];
var html = "<div class=\"name\">Name: <span class=\"bold\">" + positionItem["Name"] + "</span></div>";
html += "<div class=\"batt\"><span class=\"bold\">Batterie:</span> " + positionItem["Battery"] + "V <img src=\"icons/akku/" + positionItem["Batterysimple"] + "-4.png\"></div>";
if (positionItem["Fix"]) {
html += "<div class=\"gps\" style=\"color: green;\">GPS-Empfang</div>";
} else { } else {
html += "<div class=\"gps\" style=\"color: red;\">kein GPS-Empfang</div>"; document.getElementById(this._visiblePanel).style.display = "none";
document.getElementById(name).style.display = "block";
this._visiblePanel = name;
if (typeof MenuObject["_Update_" + name] === "function") {
MenuObject["_Update_" + name]();
}
} }
html += "<div class=\"coord\">" + positionItem["UTM"]["Base"] + " <span style=\"color: #b1a831;\">" + positionItem["UTM"]["FieldWidth"] + "</span><span style=\"color: #218c00;\">" + positionItem["UTM"]["Width"] + "</span> <span style=\"color: #b1a831;\">" + positionItem["UTM"]["FieldHeight"] + "</span><span style=\"color: #218c00;\">" + positionItem["UTM"]["Height"] + "</span></div>"; },
html += "<div class=\"height\"><span class=\"bold\">Höhe:</span> " + positionItem["Height"].toFixed(1) + " m</div>"; ShowMarkerInfoPerId: function (id) {
html += "<div class=\"hdop\"><span class=\"bold\">HDOP:</span> " + positionItem["Hdop"].toFixed(1) + "</div>"; this.statusToDevice = id;
html += "<div class=\"lanlot\"><span class=\"bold\">Dezimal:</span> " + positionItem["Latitude"].toFixed(5) + ", " + positionItem["Longitude"].toFixed(5) + "</div>"; this.ShowHidePanel("pannels_info");
html += "<div class=\"lastgps\"><span class=\"bold\">Letzter Wert:</span> Vor: " + FunctionsObject.TimeCalculation(positionItem["Lastgpspostime"], "difftext") + "</div>"; },
html += "<div class=\"update\"><span class=\"bold\">Update:</span> " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "str") + "<br><span class=\"bold\">Vor:</span> " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "</div>"; UpdateStatus: function () {
html += "<div><span class=\"bold\">RSSI:</span> " + positionItem["Rssi"] + ", <span class=\"bold\">SNR:</span> " + positionItem["Snr"] + "</div>"; for (var id in MarkerObject.LocationData) {
if (MarkerObject.PanicData.hasOwnProperty(statusToDevice)) { if (MarkerObject.LocationData.hasOwnProperty(id)) {
var panicData = MarkerObject.PanicData[statusToDevice]; var positionItem = MarkerObject.LocationData[id];
if (panicData["ButtonPressed"].length > 0) { if (typeof this._overviewStatus[id] === "undefined") {
html += "<div class='alerts'><span class=\"bold\">Alerts:</span>"; this._overviewStatus[id] = this._CreateOverviewElement(positionItem, id);
for (var i = 0; i < panicData["ButtonPressed"].length; i++) { document.getElementById("pannels_pos").appendChild(this._overviewStatus[id]);
html += "<span class='panicitem'>" + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i], "str") + " (vor " + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i],"difftext")+")</span>";
} }
html += "</div>"; this._UpdateOverviewElement(positionItem, id);
} }
} }
document.getElementById("pannels_info").innerHTML = html; },
} _UpdateOverviewElement: function (positionItem, id) {
} if (positionItem["Batterysimple"] === 0) {
document.getElementById("overview-color-id-" + id).style.backgroundColor = "red";
var overviewStatus = new Array(); } else if (positionItem["Batterysimple"] === 1 || positionItem["Batterysimple"] === 2) {
document.getElementById("overview-color-id-" + id).style.backgroundColor = "yellow";
function updateStatus() { } else if (positionItem["Batterysimple"] === 3 || positionItem["Batterysimple"] === 4) {
for (var id in MarkerObject.LocationData) { document.getElementById("overview-color-id-" + id).style.backgroundColor = "green";
if (MarkerObject.LocationData.hasOwnProperty(id)) {
var positionItem = MarkerObject.LocationData[id];
if (typeof overviewStatus[id] === "undefined") {
overviewStatus[id] = createOverviewElement(positionItem, id);
document.getElementById("pannels_pos").appendChild(overviewStatus[id]);
}
updateOverviewElement(positionItem, id);
} }
} document.getElementById("overview-name-id-" + id).innerText = positionItem["Name"];
} document.getElementById("overview-akkuimg-id-" + id).src = "icons/akku/" + positionItem["Batterysimple"] + "-4.png";
if (positionItem["Fix"]) {
function updateOverviewElement(positionItem, id) { document.getElementById("overview-gps-id-" + id).innerText = "GPS-Empfang";
if (positionItem["Batterysimple"] === 0) { document.getElementById("overview-gps-id-" + id).style.color = "green";
document.getElementById("overview-color-id-" + id).style.backgroundColor = "red"; } else {
} else if (positionItem["Batterysimple"] === 1 || positionItem["Batterysimple"] === 2) { document.getElementById("overview-gps-id-" + id).innerText = "kein GPS-Empfang";
document.getElementById("overview-color-id-" + id).style.backgroundColor = "yellow"; document.getElementById("overview-gps-id-" + id).style.color = "red";
} else if (positionItem["Batterysimple"] === 3 || positionItem["Batterysimple"] === 4) {
document.getElementById("overview-color-id-" + id).style.backgroundColor = "green";
}
document.getElementById("overview-name-id-" + id).innerText = positionItem["Name"];
document.getElementById("overview-akkuimg-id-" + id).src = "icons/akku/" + positionItem["Batterysimple"] + "-4.png";
if (positionItem["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 = "Letzte Werte: vor " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext");
if (positionItem['Icon'] === null) {
var icon = document.getElementById("overview-icon-id-" + id);
if (icon.children[0].hasAttribute("rel")) {
document.getElementById("overview-icon-id-" + id).innerHTML = "<img src =\"icons/marker/map-marker.png\">";
} }
} else { document.getElementById("overview-update-id-" + id).innerText = "Letzte Werte: vor " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext");
if (document.getElementById("overview-icon-id-" + id).children[0].hasAttribute("src")) { if (positionItem['Icon'] === null) {
if (document.getElementById("overview-icon-id-" + id).children[0]["src"].substring(document.getElementById("overview-icon-id-" + id).children[0]["src"].indexOf("/", 7) + 1) !== positionItem['Icon'] + "&marker-bg=hidden") { var icon = document.getElementById("overview-icon-id-" + id);
document.getElementById("overview-icon-id-" + id).children[0]["src"] = positionItem['Icon'] + "&marker-bg=hidden"; if (icon.children[0].hasAttribute("rel")) {
document.getElementById("overview-icon-id-" + id).innerHTML = "<img src =\"icons/marker/map-marker.png\">";
} }
} else { } else {
document.getElementById("overview-icon-id-" + id).innerHTML = "<img src=\"" + positionItem['Icon'] + "&marker-bg=hidden" + "\" rel='svg'/>"; if (document.getElementById("overview-icon-id-" + id).children[0].hasAttribute("src")) {
if (document.getElementById("overview-icon-id-" + id).children[0]["src"].substring(document.getElementById("overview-icon-id-" + id).children[0]["src"].indexOf("/", 7) + 1) !== positionItem['Icon'] + "&marker-bg=hidden") {
document.getElementById("overview-icon-id-" + id).children[0]["src"] = positionItem['Icon'] + "&marker-bg=hidden";
}
} else {
document.getElementById("overview-icon-id-" + id).innerHTML = "<img src=\"" + positionItem['Icon'] + "&marker-bg=hidden" + "\" rel='svg'/>";
}
} }
},
_CreateOverviewElement: function (positionItem, id) {
var divItem = document.createElement("div");
divItem.className = "item";
divItem.onclick = function showMarkerInfoMenu() {
MenuObject.statusToDevice = this.getAttribute("rel");
MenuObject.ShowHidePanel("pannels_info");
};
divItem.setAttribute("rel", id);
divItem.innerHTML = "<span class=\"color\" id=\"overview-color-id-" + id + "\"></span>";
if (positionItem['Icon'] !== null) {
divItem.innerHTML += "<span class=\"icon\" id=\"overview-icon-id-" + id + "\"><img src=\"" + positionItem['Icon'] + "&marker-bg=hidden" + "\" rel='svg'/></span>";
} else {
divItem.innerHTML += "<span class=\"icon\" id=\"overview-icon-id-" + id + "\"><img src=\"icons/marker/map-marker.png\" /></span>";
}
divItem.innerHTML += "<div class=\"line1\">" +
"<span class=\"name\" id=\"overview-name-id-" + id + "\"></span>" +
"<span class=\"akku\"><img id=\"overview-akkuimg-id-" + id + "\" src=\"icons/akku/" + positionItem["Batterysimple"] + "-4.png\"></span>" +
"</div>";
divItem.innerHTML += "<div class=\"line2\" style=\"color: red;\" id=\"overview-gps-id-" + id + "\">kein GPS-Empfang</div>";
divItem.innerHTML += "<div class=\"line3\" id=\"overview-update-id-" + id + "\">Letzte Werte: vor " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "</div>";
return divItem;
},
_ParseAJAXPannelAdmin: function (loggedin) {
if (!loggedin) {
var html = "<h3>Login to Adminpannel</h3><form onsubmit='MenuObject.SubmitLoginForm(); return false;'>";
html += "<div><span class='label'>Username:</span><input id='pannels_admin_name'></div>";
html += "<div><span class='label'>Passwort:</span><input type='password' id='pannels_admin_pass'></div>";
html += "<div><span class='login'><input type='submit'></span></div></form>";
document.getElementById("pannels_admin").innerHTML = html;
} else {
document.getElementById("pannels_admin").innerHTML = "<a href='/admin/' target='_blank'>Adminpannel</a>";
}
},
SubmitLoginForm: function () {
var adminlogin = new XMLHttpRequest();
adminlogin.onreadystatechange = function () {
if (adminlogin.readyState === 4 && adminlogin.status === 200) {
MenuObject._Update_pannels_admin();
}
};
adminlogin.open("POST", "/admin/login", true);
adminlogin.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
adminlogin.send("user=" + encodeURI(document.getElementById("pannels_admin_name").value) + "&pass=" + encodeURI(document.getElementById("pannels_admin_pass").value));
},
_Update_pannels_info: function () {
document.getElementById("pannels_info").innerHTML = "";
if (MarkerObject.LocationData.hasOwnProperty(this.statusToDevice)) {
var positionItem = MarkerObject.LocationData[this.statusToDevice];
var html = "<div class=\"name\">Name: <span class=\"bold\">" + positionItem["Name"] + "</span></div>";
html += "<div class=\"batt\"><span class=\"bold\">Batterie:</span> " + positionItem["Battery"] + "V <img src=\"icons/akku/" + positionItem["Batterysimple"] + "-4.png\"></div>";
if (positionItem["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\">" + positionItem["UTM"]["Base"] + " <span style=\"color: #b1a831;\">" + positionItem["UTM"]["FieldWidth"] + "</span><span style=\"color: #218c00;\">" + positionItem["UTM"]["Width"] + "</span> <span style=\"color: #b1a831;\">" + positionItem["UTM"]["FieldHeight"] + "</span><span style=\"color: #218c00;\">" + positionItem["UTM"]["Height"] + "</span></div>";
html += "<div class=\"height\"><span class=\"bold\">Höhe:</span> " + positionItem["Height"].toFixed(1) + " m</div>";
html += "<div class=\"hdop\"><span class=\"bold\">HDOP:</span> " + positionItem["Hdop"].toFixed(1) + "</div>";
html += "<div class=\"lanlot\"><span class=\"bold\">Dezimal:</span> " + positionItem["Latitude"].toFixed(5) + ", " + positionItem["Longitude"].toFixed(5) + "</div>";
html += "<div class=\"lastgps\"><span class=\"bold\">Letzter Wert:</span> Vor: " + FunctionsObject.TimeCalculation(positionItem["Lastgpspostime"], "difftext") + "</div>";
html += "<div class=\"update\"><span class=\"bold\">Update:</span> " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "str") + "<br><span class=\"bold\">Vor:</span> " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "</div>";
html += "<div><span class=\"bold\">RSSI:</span> " + positionItem["Rssi"] + ", <span class=\"bold\">SNR:</span> " + positionItem["Snr"] + "</div>";
if (MarkerObject.PanicData.hasOwnProperty(this.statusToDevice)) {
var panicData = MarkerObject.PanicData[this.statusToDevice];
if (panicData["ButtonPressed"].length > 0) {
html += "<div class='alerts'><span class=\"bold\">Alerts:</span>";
for (var i = 0; i < panicData["ButtonPressed"].length; i++) {
html += "<span class='panicitem'>" + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i], "str") + " (vor " + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i], "difftext") + ")</span>";
}
html += "</div>";
}
}
document.getElementById("pannels_info").innerHTML = html;
}
},
_Update_pannels_admin: function () {
var testadmin = new XMLHttpRequest();
testadmin.onreadystatechange = function () {
if (testadmin.readyState === 4 && testadmin.status === 403) {
MenuObject._ParseAJAXPannelAdmin(false);
} else if (testadmin.readyState === 4 && testadmin.status === 200) {
MenuObject._ParseAJAXPannelAdmin(true);
}
};
testadmin.open("GET", "/admin", true);
testadmin.send();
} }
} }.Start();
function createOverviewElement(positionItem, id) {
var divItem = document.createElement("div");
divItem.className = "item";
divItem.onclick = showMarkerInfoMenu;
divItem.setAttribute("rel", id);
divItem.innerHTML = "<span class=\"color\" id=\"overview-color-id-" + id + "\"></span>";
if (positionItem['Icon'] !== null) {
divItem.innerHTML += "<span class=\"icon\" id=\"overview-icon-id-" + id + "\"><img src=\"" + positionItem['Icon'] + "&marker-bg=hidden" + "\" rel='svg'/></span>";
} else {
divItem.innerHTML += "<span class=\"icon\" id=\"overview-icon-id-" + id + "\"><img src=\"icons/marker/map-marker.png\" /></span>";
}
divItem.innerHTML += "<div class=\"line1\">" +
"<span class=\"name\" id=\"overview-name-id-" + id + "\"></span>" +
"<span class=\"akku\"><img id=\"overview-akkuimg-id-" + id + "\" src=\"icons/akku/" + positionItem["Batterysimple"] + "-4.png\"></span>" +
"</div>";
divItem.innerHTML += "<div class=\"line2\" style=\"color: red;\" id=\"overview-gps-id-" + id + "\">kein GPS-Empfang</div>";
divItem.innerHTML += "<div class=\"line3\" id=\"overview-update-id-" + id + "\">Letzte Werte: vor " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "</div>";
return divItem;
}
function update_pannels_admin() {
var testadmin = new XMLHttpRequest();
testadmin.onreadystatechange = parseAjaxPannelAdmin;
testadmin.open("GET", "/admin", true);
testadmin.send();
}
function parseAjaxPannelAdmin() {
if (this.readyState === 4 && this.status === 403) {
var html = "<h3>Login to Adminpannel</h3><form onsubmit='submitloginform();return false;'>";
html += "<div><span class='label'>Username:</span><input id='pannels_admin_name'></div>";
html += "<div><span class='label'>Passwort:</span><input type='password' id='pannels_admin_pass'></div>";
html += "<div><span class='login'><input type='submit'></span></div></form>";
document.getElementById("pannels_admin").innerHTML = html;
} else if (this.readyState === 4 && this.status === 200) {
document.getElementById("pannels_admin").innerHTML = "<a href='/admin/' target='_blank'>Adminpannel</a>";
}
}
function submitloginform() {
var adminlogin = new XMLHttpRequest();
adminlogin.onreadystatechange = parseAjaxLogin;
adminlogin.open("POST", "/admin/login", true);
adminlogin.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
adminlogin.send("user=" + encodeURI(document.getElementById("pannels_admin_name").value) + "&pass=" + encodeURI(document.getElementById("pannels_admin_pass").value));
}
function parseAjaxLogin() {
if (this.readyState === 4 && this.status === 200) {
update_pannels_admin();
}
}

6
Lora-Map/resources/js/overlays.js
View File

@ -1,10 +1,10 @@
var OverlayObject = { var OverlayObject = {
Start: function () { Start: function () {
setInterval(this._Runner, 1000); setInterval(this._Runner1000, 1000);
this._Runner(); this._Runner1000();
return this; return this;
}, },
_Runner: function () { _Runner1000: function () {
var ccount = new XMLHttpRequest(); var ccount = new XMLHttpRequest();
ccount.onreadystatechange = function () { ccount.onreadystatechange = function () {
if (ccount.readyState === 4 && ccount.status === 200) { if (ccount.readyState === 4 && ccount.status === 200) {