Refactoring of all JS finished.
This commit is contained in:
parent
b214aaecee
commit
f4efe2ab66
@ -4,6 +4,7 @@
|
||||
### New Features
|
||||
### Bugfixes
|
||||
### Changes
|
||||
* Refactoring of all JS
|
||||
|
||||
## 1.2.8
|
||||
### New Features
|
||||
|
||||
@ -10,9 +10,9 @@
|
||||
<body>
|
||||
<div id="bigmap"></div>
|
||||
<div id="menucollumn">
|
||||
<span class="pos" onclick="showHidePanel('pannels_pos');"></span>
|
||||
<span class="admin" onclick="showHidePanel('pannels_admin');"></span>
|
||||
<span class="info" onclick="showHidePanel('pannels_version');"></span>
|
||||
<span class="pos" onclick="MenuObject.ShowHidePanel('pannels_pos');"></span>
|
||||
<span class="admin" onclick="MenuObject.ShowHidePanel('pannels_admin');"></span>
|
||||
<span class="info" onclick="MenuObject.ShowHidePanel('pannels_version');"></span>
|
||||
</div>
|
||||
<div id="pannels">
|
||||
<div id="pannels_pos"></div>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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 = "<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] }) });
|
||||
},
|
||||
_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 = "<b>" + feature.properties.name + "</b>";
|
||||
if (feature.properties.hasOwnProperty("description")) {
|
||||
text = text + "<br>" + 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);
|
||||
}
|
||||
}.Start();
|
||||
@ -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", "");
|
||||
}
|
||||
|
||||
@ -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 = "<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>";
|
||||
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 += "<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>";
|
||||
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(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'>" + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i], "str") + " (vor " + FunctionsObject.TimeCalculation(panicData["ButtonPressed"][i],"difftext")+")</span>";
|
||||
},
|
||||
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 += "</div>";
|
||||
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 = "<img src =\"icons/marker/map-marker.png\">";
|
||||
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 = "<img src =\"icons/marker/map-marker.png\">";
|
||||
}
|
||||
} 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();
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}.Start();
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user