Javascript Refactoring...

This commit is contained in:
Philip Schell 2019-07-16 15:42:49 +02:00
parent 3542b87156
commit b214aaecee
6 changed files with 205 additions and 178 deletions

View File

@ -1,5 +1,10 @@
# Changelogs
## 1.2.9
### New Features
### Bugfixes
### Changes
## 1.2.8
### New Features
* Implement #12 Make icon transparent if there is no data update

View File

@ -1,27 +1,28 @@
setInterval(timecorrectionrunner, 60000);
timecorrectionrunner();
function timecorrectionrunner() {
var FunctionsObject = {
_internalTimeOffset: 0,
Start: function () {
setInterval(this._Runner, 60000);
this._Runner();
return this;
},
_Runner: function () {
var timecorrection = new XMLHttpRequest();
timecorrection.onreadystatechange = parseAjaxTimecorrection;
timecorrection.onreadystatechange = function () {
if (timecorrection.readyState === 4 && timecorrection.status === 200) {
FunctionsObject._ParseAJAX(JSON.parse(timecorrection.responseText));
}
};
timecorrection.open("GET", "/currenttime", true);
timecorrection.send();
}
var timeOffset = 0;
function parseAjaxTimecorrection() {
if (this.readyState === 4 && this.status === 200) {
utcobject = JSON.parse(this.responseText);
},
_ParseAJAX: function (utcobject) {
if (utcobject.hasOwnProperty("utc")) {
timeOffset = Date.now() - Date.parse(utcobject["utc"]);
this._internalTimeOffset = Date.now() - Date.parse(utcobject["utc"]);
}
}
}
function timeCalculation(timestr, type) {
},
TimeCalculation: function (timestr, type) {
if (type === "diffraw" || type === "difftext") {
var diff = Math.round((Date.now() - Date.parse(timestr) - timeOffset) / 1000);
var diff = Math.round((Date.now() - Date.parse(timestr) - this._internalTimeOffset) / 1000);
if (type === "diffraw") {
return diff;
}
@ -36,8 +37,9 @@ function timeCalculation(timestr, type) {
}
return Math.floor(diff / (60 * 60 * 24)) + " d";
} else if (type === "str") {
var date = new Date(Date.parse(timestr) + timeOffset);
var date = new Date(Date.parse(timestr) + this._internalTimeOffset);
var str = date.toLocaleString();
return str;
}
}
}.Start();

View File

@ -1,11 +1,21 @@
var mymap = L.map('bigmap').setView(["{%START_LOCATION%}"], 16);
GetMapLayers();
function GetMapLayers() {
var MapObject = {
Map: {},
Start: function () {
this.Map = L.map('bigmap').setView(["{%START_LOCATION%}"], 16);
this._GetMapLayers();
return this;
},
_GetMapLayers: function () {
var layergetter = new XMLHttpRequest();
layergetter.onreadystatechange = function () {
if (layergetter.readyState === 4 && layergetter.status === 200) {
var maps = JSON.parse(layergetter.responseText);
MapObject._ParseAJAXLayers(JSON.parse(layergetter.responseText));
}
};
layergetter.open("GET", "/getlayer", true);
layergetter.send();
},
_ParseAJAXLayers: function (maps) {
var i = 0;
for (var key in maps) {
i++;
@ -15,7 +25,7 @@ function GetMapLayers() {
attribution: maps["online"]["attribution"],
minZoom: maps["online"]["minZoom"],
maxZoom: maps["online"]["maxZoom"]
}).addTo(mymap);
}).addTo(this.Map);
} else {
var baseMaps = {};
for (key in maps) {
@ -26,7 +36,7 @@ function GetMapLayers() {
maxZoom: maps[key]["maxZoom"],
errorTileUrl: "css/icons/failtile.png"
});
basemap.addTo(mymap);
basemap.addTo(this.Map);
baseMaps[maps[key]["title"]] = basemap;
break;
}
@ -41,13 +51,10 @@ function GetMapLayers() {
});
}
}
L.control.layers(baseMaps).addTo(mymap);
L.control.layers(baseMaps).addTo(this.Map);
}
}
};
layergetter.open("GET", "/getlayer", true);
layergetter.send();
}
}.Start();
var SpecialMarkers = new Array();
GetGeoLayer();
@ -100,7 +107,7 @@ function GetGeoLayer() {
return L.marker(latlng, { icon: L.icon({ iconUrl: "css/icons/cctv.png", iconSize: [32, 32] }) });
}
}
}).addTo(mymap);
}).addTo(MapObject.Map);
}
}
};
@ -108,8 +115,8 @@ function GetGeoLayer() {
geogetter.send();
}
mymap.on('zoomend', function () {
var currentZoom = mymap.getZoom();
MapObject.Map.on('zoomend', function () {
var currentZoom = MapObject.Map.getZoom();
if (currentZoom < 14) {
SpecialMarkers.forEach(function (elem, index) {
if (elem.feature.properties["description"] === "snumber") {
@ -190,7 +197,7 @@ mymap.on('zoomend', function () {
}
});
mymap.on("click", hidePanel);
MapObject.Map.on("click", hidePanel);
function hidePanel(e) {
showHidePanel(null);

View File

@ -1,27 +1,37 @@
setInterval(datarunner, 1000);
function datarunner() {
var MarkerObject = {
_Markers: {},
PanicData: {},
LocationData: {},
Start: function () {
setInterval(this._Runner, 1000);
return this;
},
_Runner: function () {
var loc = new XMLHttpRequest();
loc.onreadystatechange = parseAjaxLoc;
loc.onreadystatechange = function () {
if (loc.readyState === 4 && loc.status === 200) {
MarkerObject._ParseAJAXLoc(JSON.parse(loc.responseText));
}
};
loc.open("GET", "/loc", true);
loc.send();
var panic = new XMLHttpRequest();
panic.onreadystatechange = parseAjaxPanic;
panic.onreadystatechange = function () {
if (panic.readyState === 4 && panic.status === 200) {
MarkerObject._ParseAJAXPanic(JSON.parse(panic.responseText));
}
};
panic.open("GET", "/panic", true);
panic.send();
}
var markers = {};
var serverLocation = {};
//https://leafletjs.com/reference-1.4.0.html#marker
function parseAjaxLoc() {
if (this.readyState === 4 && this.status === 200) {
serverLocation = JSON.parse(this.responseText);
for (var key in serverLocation) {
if (serverLocation.hasOwnProperty(key)) {
var positionItem = serverLocation[key];
},
_ParseAJAXLoc: function (serverLocation) {
this.LocationData = serverLocation;
for (var key in this.LocationData) {
if (this.LocationData.hasOwnProperty(key)) {
var positionItem = this.LocationData[key];
if (positionItem['Latitude'] !== 0 || positionItem['Longitude'] !== 0) {
if (!markers.hasOwnProperty(key)) {
if (!this._Markers.hasOwnProperty(key)) {
var marker = null;
if (positionItem['Icon'] === null) {
marker = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'] });
@ -34,67 +44,63 @@ function parseAjaxLoc() {
});
marker = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'], 'icon': myIcon });
}
markers[key] = marker.addTo(mymap).on("click", showMarkerInfo, key);
this._Markers[key] = marker.addTo(MapObject.Map).on("click", showMarkerInfo, key);
} else {
markers[key].setLatLng([positionItem['Latitude'], positionItem['Longitude']]);
this._Markers[key].setLatLng([positionItem['Latitude'], positionItem['Longitude']]);
if (positionItem['Icon'] !== null) {
if (markers[key]._icon.children.length === 0) {
markers[key].setIcon(L.divIcon({
if (this._Markers[key]._icon.children.length === 0) {
this._Markers[key].setIcon(L.divIcon({
className: 'pos-marker',
iconSize: [56, 80],
iconAnchor: [0, 80],
html: '<img src="' + positionItem['Icon'] + '" height="80" width="56" />'
}));
} else if (markers[key]._icon.children[0].hasAttribute("src")) {
var old = markers[key]._icon.children[0]["src"].substring(markers[key]._icon.children[0]["src"].indexOf("/", 7) + 1);
} else if (this._Markers[key]._icon.children[0].hasAttribute("src")) {
var old = this._Markers[key]._icon.children[0]["src"].substring(this._Markers[key]._icon.children[0]["src"].indexOf("/", 7) + 1);
if (old !== positionItem['Icon']) {
markers[key]._icon.children[0]["src"] = positionItem['Icon'];
this._Markers[key]._icon.children[0]["src"] = positionItem['Icon'];
}
}
} else {
if (markers[key]._icon.children.length === 1 && markers[key]._icon.children[0].hasAttribute("src")) {
markers[key].removeFrom(mymap);
markers[key] = L.marker([positionItem['Latitude'], positionItem['Longitude']], { 'title': positionItem['Name'] }).addTo(mymap).on("click", showMarkerInfo, key);
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);
}
}
}
var lasttime = timeCalculation(positionItem['Recievedtime'], "diffraw");
var lasttime = FunctionsObject.TimeCalculation(positionItem['Recievedtime'], "diffraw");
if (lasttime <= 5 * 60) {
markers[key]._icon.style.opacity = 1;
this._Markers[key]._icon.style.opacity = 1;
} else if (lasttime > 5 * 60 && lasttime <= 15 * 60) {
markers[key]._icon.style.opacity = 0.9 - (lasttime - 5 * 60) / (15 * 60 - 5 * 60) * (0.9 - 0.7);
this._Markers[key]._icon.style.opacity = 0.9 - (lasttime - 5 * 60) / (15 * 60 - 5 * 60) * (0.9 - 0.7);
} else if (lasttime > 15 * 60 && lasttime <= 30 * 60) {
markers[key]._icon.style.opacity = 0.7 - (lasttime - 15 * 60) / (30 * 60 - 15 * 60) * (0.7 - 0.5);
this._Markers[key]._icon.style.opacity = 0.7 - (lasttime - 15 * 60) / (30 * 60 - 15 * 60) * (0.7 - 0.5);
} else if (lasttime > 30 * 60 && lasttime <= 60 * 60) {
markers[key]._icon.style.opacity = 0.5 - (lasttime - 30 * 60) / (30 * 60 - 30 * 60) * (0.5 - 0.25);
this._Markers[key]._icon.style.opacity = 0.5 - (lasttime - 30 * 60) / (30 * 60 - 30 * 60) * (0.5 - 0.25);
} else if (lasttime > 60 * 60) {
markers[key]._icon.style.opacity = 0.25;
this._Markers[key]._icon.style.opacity = 0.25;
}
}
}
}
updateStatus();
update_pannels_info();
}
}
var serverPanic = {};
function parseAjaxPanic() {
if (this.readyState === 4 && this.status === 200) {
serverPanic = JSON.parse(this.responseText);
for (var id in serverPanic) {
if (serverPanic.hasOwnProperty(id)) {
var alertItem = serverPanic[id];
if (markers.hasOwnProperty(id)) {
var marker = markers[id];
if (timeCalculation(alertItem["Recievedtime"], "diffraw") <= 10 && marker._icon.className.indexOf(" marker-alert") === -1) {
},
_ParseAJAXPanic: function (serverPanic) {
this.PanicData = serverPanic;
for (var id in this.PanicData) {
if (this.PanicData.hasOwnProperty(id)) {
var alertItem = this.PanicData[id];
if (this._Markers.hasOwnProperty(id)) {
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);
} else if (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", "");
}
}
}
}
}
}
}.Start();

View File

@ -41,8 +41,8 @@ function showMarkerInfoMenu() {
function update_pannels_info() {
document.getElementById("pannels_info").innerHTML = "";
if (serverLocation.hasOwnProperty(statusToDevice)) {
var positionItem = serverLocation[statusToDevice];
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"]) {
@ -54,15 +54,15 @@ function update_pannels_info() {
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: " + timeCalculation(positionItem["Lastgpspostime"], "difftext") + "</div>";
html += "<div class=\"update\"><span class=\"bold\">Update:</span> " + timeCalculation(positionItem["Recievedtime"], "str") + "<br><span class=\"bold\">Vor:</span> " + timeCalculation(positionItem["Recievedtime"], "difftext") + "</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 (serverPanic.hasOwnProperty(statusToDevice)) {
var panicData = serverPanic[statusToDevice];
if (MarkerObject.PanicData.hasOwnProperty(statusToDevice)) {
var panicData = MarkerObject.PanicData[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'>" + timeCalculation(panicData["ButtonPressed"][i], "str")+" (vor " + timeCalculation(panicData["ButtonPressed"][i],"difftext")+")</span>";
html += "<span class='panicitem'>" + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i], "str") + " (vor " + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i],"difftext")+")</span>";
}
html += "</div>";
}
@ -74,9 +74,9 @@ function update_pannels_info() {
var overviewStatus = new Array();
function updateStatus() {
for (var id in serverLocation) {
if (serverLocation.hasOwnProperty(id)) {
var positionItem = serverLocation[id];
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]);
@ -103,7 +103,7 @@ function updateOverviewElement(positionItem, id) {
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 " + timeCalculation(positionItem["Recievedtime"], "difftext");
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")) {
@ -136,7 +136,7 @@ function createOverviewElement(positionItem, id) {
"<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 " + timeCalculation(positionItem["Recievedtime"], "difftext") + "</div>";
divItem.innerHTML += "<div class=\"line3\" id=\"overview-update-id-" + id + "\">Letzte Werte: vor " + FunctionsObject.TimeCalculation(positionItem["Recievedtime"], "difftext") + "</div>";
return divItem;
}

View File

@ -1,18 +1,29 @@
setInterval(overlayrunner, 1000);
function overlayrunner() {
var OverlayObject = {
Start: function () {
setInterval(this._Runner, 1000);
this._Runner();
return this;
},
_Runner: function () {
var ccount = new XMLHttpRequest();
ccount.onreadystatechange = parseAjaxCount;
ccount.onreadystatechange = function () {
if (ccount.readyState === 4 && ccount.status === 200) {
OverlayObject._ParseAJAXCount(JSON.parse(ccount.responseText));
}
};
ccount.open("GET", "/cameracount", true);
ccount.send();
var cdensity = new XMLHttpRequest();
cdensity.onreadystatechange = parseAjaxDensity;
cdensity.onreadystatechange = function () {
if (cdensity.readyState === 4 && cdensity.status === 200) {
OverlayObject._ParseAJAXDensity(JSON.parse(cdensity.responseText));
}
};
cdensity.open("GET", "/crowdcount", true);
cdensity.send();
}
function parseAjaxCount() {
if (this.readyState === 4 && this.status === 200) {
var cameracounts = JSON.parse(this.responseText);
},
_ParseAJAXCount: function (cameracounts) {
var camerastext = "";
for (var cameraid in cameracounts) {
if (cameracounts.hasOwnProperty(cameraid)) {
@ -27,12 +38,8 @@ function parseAjaxCount() {
}
}
document.getElementById("cameracount").innerHTML = camerastext;
}
}
function parseAjaxDensity() {
if (this.readyState === 4 && this.status === 200) {
var cameradensy = JSON.parse(this.responseText);
},
_ParseAJAXDensity: function (cameradensy) {
var densystext = "";
for (var densyid in cameradensy) {
if (cameradensy.hasOwnProperty(densyid)) {
@ -46,4 +53,4 @@ function parseAjaxDensity() {
}
document.getElementById("crwoddensy").innerHTML = densystext;
}
}
}.Start();