diff --git a/CHANGELOG b/CHANGELOG index 73e7ed5..f853833 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -4,6 +4,7 @@ ### New Features ### Bugfixes ### Changes +* Refactoring of all JS ## 1.2.8 ### New Features diff --git a/Lora-Map/resources/index.html b/Lora-Map/resources/index.html index b5c2aad..d4ca38a 100644 --- a/Lora-Map/resources/index.html +++ b/Lora-Map/resources/index.html @@ -10,9 +10,9 @@
diff --git a/Lora-Map/resources/js/functions.js b/Lora-Map/resources/js/functions.js index b689251..e5eefd1 100644 --- a/Lora-Map/resources/js/functions.js +++ b/Lora-Map/resources/js/functions.js @@ -1,11 +1,11 @@ var FunctionsObject = { _internalTimeOffset: 0, Start: function () { - setInterval(this._Runner, 60000); - this._Runner(); + setInterval(this._Runner60000, 60000); + this._Runner60000(); return this; }, - _Runner: function () { + _Runner60000: function () { var timecorrection = new XMLHttpRequest(); timecorrection.onreadystatechange = function () { if (timecorrection.readyState === 4 && timecorrection.status === 200) { diff --git a/Lora-Map/resources/js/map.js b/Lora-Map/resources/js/map.js index 674989b..4f73a1f 100644 --- a/Lora-Map/resources/js/map.js +++ b/Lora-Map/resources/js/map.js @@ -1,11 +1,14 @@ var MapObject = { Map: {}, + _SpecialMarkers: new Array(), Start: function () { this.Map = L.map('bigmap').setView(["{%START_LOCATION%}"], 16); - this._GetMapLayers(); + this._RunnerOnce(); + this._SetupMapZoomFontsize(); + this._SetupClickHandler(); return this; }, - _GetMapLayers: function () { + _RunnerOnce: function () { var layergetter = new XMLHttpRequest(); layergetter.onreadystatechange = function () { if (layergetter.readyState === 4 && layergetter.status === 200) { @@ -14,6 +17,15 @@ }; layergetter.open("GET", "/getlayer", true); 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) { var i = 0; @@ -53,152 +65,142 @@ } L.control.layers(baseMaps).addTo(this.Map); } - } -}.Start(); - -var SpecialMarkers = new Array(); -GetGeoLayer(); -function GetGeoLayer() { - var geogetter = new XMLHttpRequest(); - geogetter.onreadystatechange = function () { - if (geogetter.readyState === 4 && geogetter.status === 200) { - var geo = JSON.parse(geogetter.responseText); - if (!(Object.keys(geo).length === 0 && geo.constructor === Object)) { - L.geoJSON(geo, { - style: function (features) { - return { - color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"], - weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"], - opacity: typeof features.properties["stroke-opacity"] === "undefined" ? 1 : features.properties["stroke-opacity"], - fillColor: typeof features.properties["fill"] === "undefined" ? '#ffffff' : features.properties["fill"], - 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 = ""+feature.properties.name+""; - if (feature.properties.hasOwnProperty("description")) { - text = text + "
" + 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] }) }); + }, + _ParseAJAXGeo: function (geo) { + if (!(Object.keys(geo).length === 0 && geo.constructor === Object)) { + L.geoJSON(geo, { + style: function (features) { + return { + color: typeof features.properties["stroke"] === "undefined" ? '#000000' : features.properties["stroke"], + weight: typeof features.properties["stroke-width"] === "undefined" ? 1 : features.properties["stroke-width"], + opacity: typeof features.properties["stroke-opacity"] === "undefined" ? 1 : features.properties["stroke-opacity"], + fillColor: typeof features.properties["fill"] === "undefined" ? '#ffffff' : features.properties["fill"], + 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 = "" + feature.properties.name + ""; + if (feature.properties.hasOwnProperty("description")) { + text = text + "
" + feature.properties.description; } + 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); - geogetter.send(); -} - -MapObject.Map.on('zoomend', function () { - var currentZoom = MapObject.Map.getZoom(); - if (currentZoom < 14) { - SpecialMarkers.forEach(function (elem, index) { - if (elem.feature.properties["description"] === "snumber") { - elem._icon.style.fontSize = "0px"; - elem._icon.style.marginLeft = "0px"; - elem._icon.style.marginTop = "0px"; - } - if (elem.feature.properties["description"] === "coord") { - elem._icon.style.fontSize = "0px"; - } - }); - } else if (currentZoom === 14) { - SpecialMarkers.forEach(function (elem, index) { - if (elem.feature.properties["description"] === "snumber") { - elem._icon.style.fontSize = "0px"; - elem._icon.style.marginLeft = "0px"; - elem._icon.style.marginTop = "0px"; - } - if (elem.feature.properties["description"] === "coord") { - elem._icon.style.fontSize = "6px"; - } - }); - } else if (currentZoom === 15) { - SpecialMarkers.forEach(function (elem, index) { - if (elem.feature.properties["description"] === "snumber") { - elem._icon.style.fontSize = "0px"; - elem._icon.style.marginLeft = "0px"; - elem._icon.style.marginTop = "0px"; - } - if (elem.feature.properties["description"] === "coord") { - elem._icon.style.fontSize = "9px"; - } - }); - } else if (currentZoom === 16) { - SpecialMarkers.forEach(function (elem, index) { - if (elem.feature.properties["description"] === "snumber") { - elem._icon.style.fontSize = "5px"; - elem._icon.style.marginLeft = "-4px"; - elem._icon.style.marginTop = "-4px"; - } - if (elem.feature.properties["description"] === "coord") { - elem._icon.style.fontSize = "13px"; - } - }); - } else if (currentZoom === 17) { - SpecialMarkers.forEach(function (elem, index) { - if (elem.feature.properties["description"] === "snumber") { - elem._icon.style.fontSize = "5px"; - elem._icon.style.marginLeft = "-4px"; - elem._icon.style.marginTop = "-4px"; - } - if (elem.feature.properties["description"] === "coord") { - elem._icon.style.fontSize = "16px"; - } - }); - } else if (currentZoom === 18) { - SpecialMarkers.forEach(function (elem, index) { - if (elem.feature.properties["description"] === "snumber") { - elem._icon.style.fontSize = "8px"; - elem._icon.style.marginLeft = "-5px"; - elem._icon.style.marginTop = "-6px"; - } - if (elem.feature.properties["description"] === "coord") { - elem._icon.style.fontSize = "25px"; - } - }); - } else if (currentZoom === 19) { - SpecialMarkers.forEach(function (elem, index) { - if (elem.feature.properties["description"] === "snumber") { - elem._icon.style.fontSize = "14px"; - elem._icon.style.marginLeft = "-8px"; - elem._icon.style.marginTop = "-11px"; - } - if (elem.feature.properties["description"] === "coord") { - elem._icon.style.fontSize = "45px"; + }, + _SetupMapZoomFontsize: function () { + this.Map.on('zoomend', function () { + var currentZoom = MapObject.Map.getZoom(); + if (currentZoom < 14) { + MapObject._SpecialMarkers.forEach(function (elem, index) { + if (elem.feature.properties["description"] === "snumber") { + elem._icon.style.fontSize = "0px"; + elem._icon.style.marginLeft = "0px"; + elem._icon.style.marginTop = "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") { + elem._icon.style.fontSize = "0px"; + elem._icon.style.marginLeft = "0px"; + elem._icon.style.marginTop = "0px"; + } + 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") { + elem._icon.style.fontSize = "0px"; + elem._icon.style.marginLeft = "0px"; + elem._icon.style.marginTop = "0px"; + } + 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") { + elem._icon.style.fontSize = "5px"; + elem._icon.style.marginLeft = "-4px"; + elem._icon.style.marginTop = "-4px"; + } + 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") { + elem._icon.style.fontSize = "5px"; + elem._icon.style.marginLeft = "-4px"; + elem._icon.style.marginTop = "-4px"; + } + 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") { + elem._icon.style.fontSize = "8px"; + elem._icon.style.marginLeft = "-5px"; + elem._icon.style.marginTop = "-6px"; + } + 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") { + elem._icon.style.fontSize = "14px"; + elem._icon.style.marginLeft = "-8px"; + elem._icon.style.marginTop = "-11px"; + } + 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); } -}); - -MapObject.Map.on("click", hidePanel); - -function hidePanel(e) { - showHidePanel(null); -} \ No newline at end of file +}.Start(); \ No newline at end of file diff --git a/Lora-Map/resources/js/marker.js b/Lora-Map/resources/js/marker.js index 7c60fa2..cd2614f 100644 --- a/Lora-Map/resources/js/marker.js +++ b/Lora-Map/resources/js/marker.js @@ -3,10 +3,11 @@ PanicData: {}, LocationData: {}, Start: function () { - setInterval(this._Runner, 1000); + setInterval(this._Runner1000, 1000); + this._Runner1000(); return this; }, - _Runner: function () { + _Runner1000: function () { var loc = new XMLHttpRequest(); loc.onreadystatechange = function () { if (loc.readyState === 4 && loc.status === 200) { @@ -44,7 +45,7 @@ }); 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 { this._Markers[key].setLatLng([positionItem['Latitude'], positionItem['Longitude']]); if (positionItem['Icon'] !== null) { @@ -64,7 +65,7 @@ } else { 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] = 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(); - update_pannels_info(); + MenuObject.UpdateStatus(); + MenuObject._Update_pannels_info(); }, _ParseAJAXPanic: function (serverPanic) { this.PanicData = serverPanic; @@ -95,7 +96,7 @@ var marker = this._Markers[id]; if (FunctionsObject.TimeCalculation(alertItem["Recievedtime"], "diffraw") <= 10 && marker._icon.className.indexOf(" marker-alert") === -1) { 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) { marker._icon.className = marker._icon.className.replace(" marker-alert", ""); } diff --git a/Lora-Map/resources/js/menu.js b/Lora-Map/resources/js/menu.js index 485bd09..98bd21e 100644 --- a/Lora-Map/resources/js/menu.js +++ b/Lora-Map/resources/js/menu.js @@ -1,175 +1,167 @@ -var visiblePanel = null; -function showHidePanel(name) { - if (visiblePanel === null && name !== null) { - document.getElementById("pannels").style.display = "block"; - document.getElementById(name).style.display = "block"; - visiblePanel = name; - if (typeof window["update_" + name] === "function") { - window["update_" + name](); - } - } else if (visiblePanel === name && name !== "pannels_info" || name === null) { - document.getElementById("pannels").style.display = "none"; - if (visiblePanel !== null) { - document.getElementById(visiblePanel).style.display = "none"; - } - visiblePanel = null; - } else { - document.getElementById(visiblePanel).style.display = "none"; - document.getElementById(name).style.display = "block"; - visiblePanel = name; - if (typeof window["update_" + name] === "function") { - window["update_" + name](); - } - } -} - -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 = "
Name: " + positionItem["Name"] + "
"; - html += "
Batterie: " + positionItem["Battery"] + "V
"; - if (positionItem["Fix"]) { - html += "
GPS-Empfang
"; +var MenuObject = { + statusToDevice: null, + _visiblePanel: null, + _overviewStatus: new Array(), + Start: function () { + return this; + }, + ShowHidePanel: function (name) { + if (this._visiblePanel === null && name !== null) { + document.getElementById("pannels").style.display = "block"; + document.getElementById(name).style.display = "block"; + this._visiblePanel = name; + if (typeof MenuObject["_Update_" + name] === "function") { + MenuObject["_Update_" + name](); + } + } else if (this._visiblePanel === name && name !== "pannels_info" || name === null) { + document.getElementById("pannels").style.display = "none"; + if (this._visiblePanel !== null) { + document.getElementById(this._visiblePanel).style.display = "none"; + } + this._visiblePanel = null; } else { - html += "
kein GPS-Empfang
"; + 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 += "
" + positionItem["UTM"]["Base"] + " " + positionItem["UTM"]["FieldWidth"] + "" + positionItem["UTM"]["Width"] + " " + positionItem["UTM"]["FieldHeight"] + "" + positionItem["UTM"]["Height"] + "
"; - html += "
Höhe: " + positionItem["Height"].toFixed(1) + " m
"; - html += "
HDOP: " + positionItem["Hdop"].toFixed(1) + "
"; - html += "
Dezimal: " + positionItem["Latitude"].toFixed(5) + ", " + positionItem["Longitude"].toFixed(5) + "
"; - html += "
Letzter Wert: Vor: " + FunctionsObject.TimeCalculation(positionItem["Lastgpspostime"], "difftext") + "
"; - html += "
Update: " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "str") + "
Vor: " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "
"; - html += "
RSSI: " + positionItem["Rssi"] + ", SNR: " + positionItem["Snr"] + "
"; - if (MarkerObject.PanicData.hasOwnProperty(statusToDevice)) { - var panicData = MarkerObject.PanicData[statusToDevice]; - if (panicData["ButtonPressed"].length > 0) { - html += "
Alerts:"; - for (var i = 0; i < panicData["ButtonPressed"].length; i++) { - html += "" + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i], "str") + " (vor " + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i],"difftext")+")"; + }, + ShowMarkerInfoPerId: function (id) { + this.statusToDevice = id; + this.ShowHidePanel("pannels_info"); + }, + UpdateStatus: function () { + for (var id in MarkerObject.LocationData) { + if (MarkerObject.LocationData.hasOwnProperty(id)) { + var positionItem = MarkerObject.LocationData[id]; + if (typeof this._overviewStatus[id] === "undefined") { + this._overviewStatus[id] = this._CreateOverviewElement(positionItem, id); + document.getElementById("pannels_pos").appendChild(this._overviewStatus[id]); } - html += "
"; + this._UpdateOverviewElement(positionItem, id); } } - document.getElementById("pannels_info").innerHTML = html; - } -} - -var overviewStatus = new Array(); - -function updateStatus() { - for (var id in MarkerObject.LocationData) { - 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); + }, + _UpdateOverviewElement: function (positionItem, id) { + if (positionItem["Batterysimple"] === 0) { + document.getElementById("overview-color-id-" + id).style.backgroundColor = "red"; + } else if (positionItem["Batterysimple"] === 1 || positionItem["Batterysimple"] === 2) { + document.getElementById("overview-color-id-" + id).style.backgroundColor = "yellow"; + } else if (positionItem["Batterysimple"] === 3 || positionItem["Batterysimple"] === 4) { + document.getElementById("overview-color-id-" + id).style.backgroundColor = "green"; } - } -} - -function updateOverviewElement(positionItem, id) { - if (positionItem["Batterysimple"] === 0) { - document.getElementById("overview-color-id-" + id).style.backgroundColor = "red"; - } else if (positionItem["Batterysimple"] === 1 || positionItem["Batterysimple"] === 2) { - document.getElementById("overview-color-id-" + id).style.backgroundColor = "yellow"; - } 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 = ""; + 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"; } - } else { - 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"; + 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 = ""; } } else { - document.getElementById("overview-icon-id-" + id).innerHTML = ""; + 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 = ""; + } } + }, + _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 = ""; + if (positionItem['Icon'] !== null) { + divItem.innerHTML += ""; + } else { + divItem.innerHTML += ""; + } + divItem.innerHTML += "
" + + "" + + "" + + "
"; + divItem.innerHTML += "
kein GPS-Empfang
"; + divItem.innerHTML += "
Letzte Werte: vor " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "
"; + return divItem; + }, + _ParseAJAXPannelAdmin: function (loggedin) { + if (!loggedin) { + var html = "

Login to Adminpannel

"; + html += "
Username:
"; + html += "
Passwort:
"; + html += "
"; + document.getElementById("pannels_admin").innerHTML = html; + } else { + document.getElementById("pannels_admin").innerHTML = "Adminpannel"; + } + }, + 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 = "
Name: " + positionItem["Name"] + "
"; + html += "
Batterie: " + positionItem["Battery"] + "V
"; + if (positionItem["Fix"]) { + html += "
GPS-Empfang
"; + } else { + html += "
kein GPS-Empfang
"; + } + html += "
" + positionItem["UTM"]["Base"] + " " + positionItem["UTM"]["FieldWidth"] + "" + positionItem["UTM"]["Width"] + " " + positionItem["UTM"]["FieldHeight"] + "" + positionItem["UTM"]["Height"] + "
"; + html += "
Höhe: " + positionItem["Height"].toFixed(1) + " m
"; + html += "
HDOP: " + positionItem["Hdop"].toFixed(1) + "
"; + html += "
Dezimal: " + positionItem["Latitude"].toFixed(5) + ", " + positionItem["Longitude"].toFixed(5) + "
"; + html += "
Letzter Wert: Vor: " + FunctionsObject.TimeCalculation(positionItem["Lastgpspostime"], "difftext") + "
"; + html += "
Update: " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "str") + "
Vor: " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "
"; + html += "
RSSI: " + positionItem["Rssi"] + ", SNR: " + positionItem["Snr"] + "
"; + if (MarkerObject.PanicData.hasOwnProperty(this.statusToDevice)) { + var panicData = MarkerObject.PanicData[this.statusToDevice]; + if (panicData["ButtonPressed"].length > 0) { + html += "
Alerts:"; + for (var i = 0; i < panicData["ButtonPressed"].length; i++) { + html += "" + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i], "str") + " (vor " + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i], "difftext") + ")"; + } + html += "
"; + } + } + 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(); } -} - -function createOverviewElement(positionItem, id) { - var divItem = document.createElement("div"); - divItem.className = "item"; - divItem.onclick = showMarkerInfoMenu; - divItem.setAttribute("rel", id); - divItem.innerHTML = ""; - if (positionItem['Icon'] !== null) { - divItem.innerHTML += ""; - } else { - divItem.innerHTML += ""; - } - divItem.innerHTML += "
" + - "" + - "" + - "
"; - divItem.innerHTML += "
kein GPS-Empfang
"; - divItem.innerHTML += "
Letzte Werte: vor " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "
"; - 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 = "

Login to Adminpannel

"; - html += "
Username:
"; - html += "
Passwort:
"; - html += "
"; - document.getElementById("pannels_admin").innerHTML = html; - } else if (this.readyState === 4 && this.status === 200) { - document.getElementById("pannels_admin").innerHTML = "Adminpannel"; - } -} - -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(); - } -} \ No newline at end of file +}.Start(); \ No newline at end of file diff --git a/Lora-Map/resources/js/overlays.js b/Lora-Map/resources/js/overlays.js index 8c74ce2..de23c51 100644 --- a/Lora-Map/resources/js/overlays.js +++ b/Lora-Map/resources/js/overlays.js @@ -1,10 +1,10 @@ var OverlayObject = { Start: function () { - setInterval(this._Runner, 1000); - this._Runner(); + setInterval(this._Runner1000, 1000); + this._Runner1000(); return this; }, - _Runner: function () { + _Runner1000: function () { var ccount = new XMLHttpRequest(); ccount.onreadystatechange = function () { if (ccount.readyState === 4 && ccount.status === 200) {