428 lines
20 KiB
JavaScript
428 lines
20 KiB
JavaScript
var AdminMenu = {
|
|
Names: function () {
|
|
var ajaxnames = new XMLHttpRequest();
|
|
ajaxnames.onreadystatechange = function () {
|
|
if (ajaxnames.readyState === 4 && ajaxnames.status === 200) {
|
|
NamesEditor.ParseJson(ajaxnames.responseText);
|
|
}
|
|
};
|
|
ajaxnames.open("GET", "/admin/get_json_names", true);
|
|
ajaxnames.send();
|
|
return false;
|
|
},
|
|
Overlay: function () {
|
|
return false;
|
|
},
|
|
Settings: function () {
|
|
var ajaxsettings = new XMLHttpRequest();
|
|
ajaxsettings.onreadystatechange = function () {
|
|
if (ajaxsettings.readyState === 4 && ajaxsettings.status === 200) {
|
|
Settings.ParseJson(JSON.parse(ajaxsettings.responseText));
|
|
}
|
|
};
|
|
ajaxsettings.open("GET", "/admin/get_json_settings", true);
|
|
ajaxsettings.send();
|
|
return false;
|
|
},
|
|
ExImport: function () {
|
|
var ajaxnames = new XMLHttpRequest();
|
|
ajaxnames.onreadystatechange = function () {
|
|
if (ajaxnames.readyState === 4 && ajaxnames.status === 200) {
|
|
var ajaxgeo = new XMLHttpRequest();
|
|
ajaxgeo.onreadystatechange = function () {
|
|
if (ajaxgeo.readyState === 4 && ajaxgeo.status === 200) {
|
|
var ajaxsettings = new XMLHttpRequest();
|
|
ajaxsettings.onreadystatechange = function () {
|
|
if (ajaxsettings.readyState === 4 && ajaxsettings.status === 200) {
|
|
ExImport.ParseJson(ajaxnames.responseText, ajaxgeo.responseText, ajaxsettings.responseText);
|
|
}
|
|
};
|
|
ajaxsettings.open("GET", "/admin/get_json_settings", true);
|
|
ajaxsettings.send();
|
|
}
|
|
};
|
|
ajaxgeo.open("GET", "/admin/get_json_geo", true);
|
|
ajaxgeo.send();
|
|
}
|
|
};
|
|
ajaxnames.open("GET", "/admin/get_json_names", true);
|
|
ajaxnames.send();
|
|
return false;
|
|
}
|
|
};
|
|
|
|
var NamesEditor = {
|
|
iconeditorcounter: 0,
|
|
ParseJson: function (jsontext) {
|
|
document.getElementById("content").innerHTML = "";
|
|
var namesconfig = JSON.parse(jsontext);
|
|
var html = "<div id='nameeditor'><div class='title'>Namenseinträge in den Einstellungen</div>";
|
|
html += "<table id='nametable'>";
|
|
html += "<thead><tr><th class='rowid'>ID</th><th class='rowname'>Name</th><th class='rowicon'>Icon</th><th class='rowedit'></th></tr></thead>";
|
|
html += "<tbody>";
|
|
for (var id in namesconfig) {
|
|
if (namesconfig.hasOwnProperty(id)) {
|
|
var nameentry = namesconfig[id];
|
|
html += "<tr>" +
|
|
"<td>" + id + "</td>" +
|
|
"<td>" + nameentry["name"] + "</td>";
|
|
if (nameentry.hasOwnProperty("marker.svg")) {
|
|
html += "<td>" + this.ParseIcon(nameentry["marker.svg"]) + "</td>";
|
|
} else if (nameentry.hasOwnProperty("icon")) {
|
|
html += "<td><img src='"+nameentry["icon"]+"'></td>";
|
|
} else {
|
|
html += "<td><img src='../js/leaflet/images/marker-icon.png'></td>";
|
|
}
|
|
html += "<td><img src='../icons/general/edit.png' onclick='NamesEditor.Edit(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='NamesEditor.Delete(this.parentNode.parentNode)' class='pointer'></td>" +
|
|
"</tr>";
|
|
}
|
|
}
|
|
html += "</tbody>";
|
|
html += "<tfoot><tr><td></td><td></td><td></td><td><img src='../icons/general/add.png' onclick='NamesEditor.Add()' class='pointer'> <img src='../icons/general/save.png' onclick='NamesEditor.Save()' class='pointer'></td></tr></tfoot>";
|
|
html += "</table>";
|
|
document.getElementById("content").innerHTML = html + "</div>";
|
|
},
|
|
ParseIcon: function (markerobj) {
|
|
var url = "../icons/marker/Marker.svg";
|
|
if (markerobj.hasOwnProperty("person")) {
|
|
url += "?icon=person&marker-bg=hidden";
|
|
if (markerobj["person"].hasOwnProperty("org")) {
|
|
url += "&person-org=" + markerobj["person"]["org"];
|
|
}
|
|
if(markerobj["person"].hasOwnProperty("funct")) {
|
|
url += "&person-funct=" + markerobj["person"]["funct"];
|
|
}
|
|
if(markerobj["person"].hasOwnProperty("rang")) {
|
|
url += "&person-rang=" + markerobj["person"]["rang"];
|
|
}
|
|
if(markerobj["person"].hasOwnProperty("text")) {
|
|
url += "&person-text=" + markerobj["person"]["text"];
|
|
}
|
|
if (markerobj["person"].hasOwnProperty("typ") && Array.isArray(markerobj["person"]["typ"])) {
|
|
for (i in markerobj["person"]["typ"]) {
|
|
url += "&person-typ=" + markerobj["person"]["typ"][i];
|
|
}
|
|
}
|
|
}
|
|
return "<object data='"+url+"' type='image/svg+xml' style='height:50px; width:50px;'></object>";
|
|
},
|
|
BuildIconJson: function (url) {
|
|
var query = this.SplitQueryIntoObject(this.SplitUrlIntoParts(url).query);
|
|
var markerobj = {};
|
|
if (query.hasOwnProperty("icon") && query["icon"] === "person") {
|
|
markerobj["person"] = {};
|
|
if (query.hasOwnProperty("person-org")) {
|
|
markerobj["person"]["org"] = query["person-org"];
|
|
}
|
|
if (query.hasOwnProperty("person-funct")) {
|
|
markerobj["person"]["funct"] = query["person-funct"];
|
|
}
|
|
if (query.hasOwnProperty("person-rang")) {
|
|
markerobj["person"]["rang"] = query["person-rang"];
|
|
}
|
|
if (query.hasOwnProperty("person-text")) {
|
|
markerobj["person"]["text"] = query["person-text"];
|
|
}
|
|
if (query.hasOwnProperty("person-typ")) {
|
|
if (Array.isArray(query["person-typ"])) {
|
|
markerobj["person"]["typ"] = new Array();
|
|
for (var i in query["person-typ"]) {
|
|
markerobj["person"]["typ"].push(query["person-typ"][i]);
|
|
}
|
|
} else {
|
|
markerobj["person"]["typ"] = new Array();
|
|
markerobj["person"]["typ"].push(query["person-typ"]);
|
|
}
|
|
}
|
|
}
|
|
return markerobj;
|
|
},
|
|
Add: function () {
|
|
var newrow = document.createElement("tr");
|
|
newrow.innerHTML = "<td><input class='name'/></td>";
|
|
newrow.innerHTML += "<td><input /></td>";
|
|
newrow.innerHTML += "<td><img src='../icons/general/icon_edit.png' onclick='NamesEditor.IconEditor(this.parentNode)' class='pointer'> wähle Icon</td>";
|
|
newrow.innerHTML += "<td><img src='../icons/general/save.png' onclick='NamesEditor.SaveRow(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='NamesEditor.Abort(this.parentNode.parentNode)' class='pointer'></td>";
|
|
document.getElementById("nametable").children[1].appendChild(newrow);
|
|
},
|
|
Save: function () {
|
|
var rows = document.getElementById("nametable").children[1].children;
|
|
var namejson = {};
|
|
for (var i = 0; i < rows.length; i++) {
|
|
if (rows[i].children[0].children.length === 1) {
|
|
alert("Bitte zuerst alle Zeilen speichern oder Löschen!");
|
|
return;
|
|
}
|
|
var id = rows[i].children[0].innerText;
|
|
var name = rows[i].children[1].innerText;
|
|
namejson[id] = { "name": name };
|
|
if (rows[i].children[2].children[0].hasAttribute("data")) {
|
|
namejson[id]["marker.svg"] = this.BuildIconJson(rows[i].children[2].children[0].data);
|
|
}
|
|
}
|
|
var savenames = new XMLHttpRequest();
|
|
savenames.onreadystatechange = function () {
|
|
if (savenames.readyState === 4) {
|
|
if (savenames.status === 200) {
|
|
alert("Änderungen gespeichert!");
|
|
} else if (savenames.status === 501) {
|
|
alert("Ein Fehler ist aufgetreten (invalid JSON)!");
|
|
}
|
|
}
|
|
};
|
|
savenames.open("POST", "/admin/set_json_names", true);
|
|
savenames.send(JSON.stringify(namejson));
|
|
},
|
|
Delete: function (el) {
|
|
var name = el.firstChild.innerHTML;
|
|
var answ = window.prompt("Wollen sie den Eintrag für \"" + name + "\" wirklich löschen?", "");
|
|
if (answ !== null) {
|
|
el.parentNode.removeChild(el);
|
|
}
|
|
},
|
|
Edit: function (el) {
|
|
var id = el.children[0].innerText;
|
|
var name = el.children[1].innerText;
|
|
var url = null;
|
|
if (el.children[2].children[0].hasAttribute("data")) {
|
|
url = el.children[2].children[0].data;
|
|
}
|
|
el.innerHTML = "<td><input class='name' value='" + id + "'/></td>";
|
|
el.innerHTML += "<td><input value='" + name + "'/></td>";
|
|
if (url === null) {
|
|
el.innerHTML += "<td><img src='../icons/general/icon_edit.png' onclick='NamesEditor.IconEditor(this.parentNode)' class='pointer'> wähle Icon</td>";
|
|
} else {
|
|
el.innerHTML += "<td><img src='../icons/general/icon_edit.png' onclick='NamesEditor.IconEditor(this.parentNode)' class='pointer'> <object data='" + url + "' type='image/svg+xml' style='height:50px; width:50px;'></object></td>";
|
|
}
|
|
el.innerHTML += "<td><img src='../icons/general/save.png' onclick='NamesEditor.SaveRow(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='NamesEditor.Abort(this.parentNode.parentNode)' class='pointer'></td>";
|
|
},
|
|
Abort: function (el) {
|
|
el.parentNode.removeChild(el);
|
|
},
|
|
SaveRow: function (el) {
|
|
var id = el.children[0].children[0].value;
|
|
var name = el.children[1].children[0].value;
|
|
var url = null;
|
|
if (el.children[2].children.length === 2) {
|
|
url = el.children[2].children[1].data;
|
|
}
|
|
el.innerHTML = "<td>" + id + "</td>" +
|
|
"<td>" + name + "</td>";
|
|
if (url === null) {
|
|
el.innerHTML += "<td><img src='../js/leaflet/images/marker-icon.png'></td>";
|
|
} else {
|
|
el.innerHTML += "<td><object data='" + url +"' type='image/svg+xml' style='height:50px; width:50px;'></object></td>";
|
|
}
|
|
el.innerHTML += "<td><img src='../icons/general/edit.png' onclick='NamesEditor.Edit(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='NamesEditor.Delete(this.parentNode.parentNode)' class='pointer'></td>";
|
|
},
|
|
IconEditor: function (el) {
|
|
var url = "../icons/marker/Marker.svg?marker-bg=hidden";
|
|
el.id = "icon_edit_" + this.iconeditorcounter++;
|
|
if (el.children.length === 2) {
|
|
url = el.children[1].data;
|
|
}
|
|
var query = this.SplitQueryIntoObject(this.SplitUrlIntoParts(url).query);
|
|
var ie = document.createElement("div");
|
|
ie.id = "iconeditor";
|
|
ie.innerHTML = "<div class='innerbox'>" +
|
|
"<div class='preview'><object id='markerprev' data='" + url + "' type='image/svg+xml' style='height:200px; width:200px;'></object></div>" +
|
|
"<div class='controls'>" +
|
|
this.CreateSelectBox("Typ", "icon", query, { "person": "Person" }, null, "iconeditor-type-") + "<br>" +
|
|
"<div id='iconeditor-type-person' style='display: " + (query.hasOwnProperty("icon") && query["icon"] === "person" ? "block" : "none") + ";'>" +
|
|
this.CreateSelectBox("Organisation", "person-org", query, { "fw": "Feuerwehr", "thw": "Technisches Hilfswerk", "hilo": "Hilfsorganisationen, Bundeswehr", "fueh": "Einrichtungen der Führung", "pol": "Polizei, Bundespolizei, Zoll", "sonst": "Sonstige Einrichtungen der Gefahrenabwehr" }) + "<br>" +
|
|
this.CreateSelectBox("Funktion", "person-funct", query, { "sonder": "Sonder", "fueh": "Führung" }) + "<br>" +
|
|
this.CreateSelectBox("Rang", "person-rang", query, { "trupp": "Trupp", "grupp": "Gruppe", "zug":"Zug" }) + "<br>" +
|
|
"Text: <input onchange='NamesEditor.ChangeLinkPreview(\"person-text\",this.value);' value='" + (query.hasOwnProperty("person-text") ? query["person-text"] : "") + "'><br>" +
|
|
this.CreateSelectBox("Typ", "person-typ", query, { "loesch": "Brandbekämpfung/Löscheinsatz", "sani": "Rettungswesen, Sanitätswesen, Gesundheitswesen", "betreu": "Betreuung" }, true) + "<br>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"<div class='save'><button onclick='NamesEditor.SaveIconEditor(\"" + el.id + "\"); '>Schließen</botton></div>" +
|
|
"</div>";
|
|
document.getElementsByTagName("body")[0].appendChild(ie);
|
|
},
|
|
CreateSelectBox: function (title, key, query, options, muliple, group) {
|
|
var html = title + ": ";
|
|
var eventtext = "NamesEditor.ChangeLinkPreview(\"" + key + "\",this.selectedOptions);";
|
|
if (typeof group !== "undefined") {
|
|
eventtext += " document.getElementById(\"" + group + "\"+this.value).style.display = \"block\";'";
|
|
}
|
|
html += "<select onchange='" + eventtext + "'" + (typeof muliple !== "undefined" && muliple !== null ? " multiple" : "") + ">";
|
|
if (typeof muliple === "undefined" || muliple === null) {
|
|
html += "<option>---</option>";
|
|
}
|
|
for (var value in options) {
|
|
if (query.hasOwnProperty(key) && query[key] === value) {
|
|
html += "<option value='" + value + "' selected>" + options[value] + "</option>";
|
|
} else if (query.hasOwnProperty(key) && Array.isArray(query[key])) {
|
|
var notinqueryarray = true;
|
|
for (var i in query[key]) {
|
|
if (query[key][i] === value) {
|
|
notinqueryarray = false;
|
|
html += "<option value='" + value + "' selected>" + options[value] + "</option>";
|
|
}
|
|
}
|
|
if (notinqueryarray) {
|
|
html += "<option value='" + value + "'>" + options[value] + "</option>";
|
|
}
|
|
} else {
|
|
html += "<option value='" + value + "'>" + options[value] + "</option>";
|
|
}
|
|
}
|
|
html += "</select>";
|
|
return html;
|
|
},
|
|
SaveIconEditor: function (id) {
|
|
var cell = document.getElementById(id);
|
|
cell.innerHTML = "<img src='../icons/general/icon_edit.png' onclick='NamesEditor.IconEditor(this.parentNode)' class='pointer'> <object data='" + document.getElementById("markerprev").data + "' type='image/svg+xml' style='height:50px; width:50px;'></object>";
|
|
cell.removeAttribute("id");
|
|
document.getElementById("iconeditor").remove();
|
|
},
|
|
SplitQueryIntoObject: function (query) {
|
|
if (query.indexOf("?") !== -1) {
|
|
query = query.split("?")[1];
|
|
}
|
|
var queryobj = {};
|
|
var pairs = query.split("&");
|
|
for (var i = 0; i < pairs.length; i++) {
|
|
var pair = pairs[i].split("=");
|
|
if (queryobj.hasOwnProperty(decodeURIComponent(pair[0]))) {
|
|
if (Array.isArray(queryobj[decodeURIComponent(pair[0])])) {
|
|
queryobj[decodeURIComponent(pair[0])].push(decodeURIComponent(pair[1] || ""));
|
|
} else {
|
|
var tmp = queryobj[decodeURIComponent(pair[0])];
|
|
queryobj[decodeURIComponent(pair[0])] = new Array();
|
|
queryobj[decodeURIComponent(pair[0])].push(tmp);
|
|
queryobj[decodeURIComponent(pair[0])].push(decodeURIComponent(pair[1] || ""));
|
|
}
|
|
} else {
|
|
queryobj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || "");
|
|
}
|
|
}
|
|
return queryobj;
|
|
},
|
|
JoinObjectIntoQuery: function (queryobj) {
|
|
var query = new Array();
|
|
for (var id in queryobj) {
|
|
if (Array.isArray(queryobj[id])) {
|
|
for (var i in queryobj[id]) {
|
|
query.push(encodeURIComponent(id) + "=" + encodeURIComponent(queryobj[id][i]));
|
|
}
|
|
} else {
|
|
query.push(encodeURIComponent(id) + "=" + encodeURIComponent(queryobj[id]));
|
|
}
|
|
}
|
|
return query.join("&");
|
|
},
|
|
SplitUrlIntoParts: function (url) {
|
|
var parts = url.split("?");
|
|
return { "file": parts[0], "query": parts[1] || "" };
|
|
},
|
|
ChangeLinkPreview: function (key, val) {
|
|
var cur = this.SplitUrlIntoParts(document.getElementById("markerprev").data);
|
|
var query = this.SplitQueryIntoObject(cur.query);
|
|
if (typeof val === "object") {
|
|
query[key] = new Array();
|
|
for (var i = 0; i < val.length; i++) {
|
|
query[key].push(val[i].value);
|
|
if (val[i].value === "---") {
|
|
delete query[key];
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
if (val === "---" || val === "") {
|
|
delete query[key];
|
|
} else {
|
|
query[key] = val;
|
|
}
|
|
}
|
|
document.getElementById("markerprev").data = cur.file + "?" + this.JoinObjectIntoQuery(query);
|
|
}
|
|
};
|
|
|
|
var Settings = {
|
|
ParseJson: function (jsonsettings) {
|
|
var html = "<div id='settingseditor'><div class='title'>Einstellungen</div>";
|
|
html += "<div class='startloc'>Startlocation: <input value='" + jsonsettings.StartPos.lat + "' id='startlat'> Lat, <input value='" + jsonsettings.StartPos.lon + "' id='startlon'> Lon</div>";
|
|
html += "<div class='wetterwarnings'>CellId's für DWD-Wetterwarnungen: <input value='" + jsonsettings.CellIds.join(";") + "' id='wetterids'> (Trennen durch \";\", <a href='https://www.dwd.de/DE/leistungen/opendata/help/warnungen/cap_warncellids_csv.html'>cap_warncellids_csv</a>)</div>";
|
|
html += "<div class='savesettings'><img src='../icons/general/save.png' onclick='Settings.Save()' class='pointer'></div>";
|
|
document.getElementById("content").innerHTML = html + "</div>";
|
|
},
|
|
Save: function () {
|
|
var ret = {};
|
|
ret.StartPos = {};
|
|
ret.StartPos.lat = parseFloat(document.getElementById("startlat").value.replace(",", "."));
|
|
ret.StartPos.lon = parseFloat(document.getElementById("startlon").value.replace(",", "."));
|
|
ret.CellIds = document.getElementById("wetterids").value.split(";");
|
|
|
|
var savesettings = new XMLHttpRequest();
|
|
savesettings.onreadystatechange = function () {
|
|
if (savesettings.readyState === 4) {
|
|
if (savesettings.status === 200) {
|
|
alert("Änderungen gespeichert!");
|
|
} else if (savesettings.status === 501) {
|
|
alert("Ein Fehler ist aufgetreten (invalid JSON)!");
|
|
}
|
|
}
|
|
};
|
|
savesettings.open("POST", "/admin/set_json_settings", true);
|
|
savesettings.send(JSON.stringify(ret));
|
|
}
|
|
};
|
|
|
|
var ExImport = {
|
|
ParseJson: function (jsonnames, jsongeo, jsonsettings) {
|
|
html = "<div id='eximport'><div class='title'>Ex- und Import der Einstellungen</div>";
|
|
html += "<div class='names'>names.json (Namen und Icons)<br/><textarea id='ex_names'></textarea> <img src='../icons/general/save.png' onclick='ExImport.SaveNames()' class='pointer'></div>";
|
|
html += "<div class='names'>geo.json (Layer on the MAP) <a href='https://mapbox.github.io/togeojson/'>Kml Konverter</a><br/><textarea id='ex_geo'></textarea> <img src='../icons/general/save.png' onclick='ExImport.SaveGeo()' class='pointer'></div>";
|
|
html += "<div class='names'>settings.json (Settings of the Map)<br/><textarea id='ex_settings'></textarea> <img src='../icons/general/save.png' onclick='ExImport.SaveSettings()' class='pointer'></div>";
|
|
|
|
html += "</div>";
|
|
document.getElementById("content").innerHTML = html;
|
|
document.getElementById("ex_names").value = jsonnames;
|
|
document.getElementById("ex_geo").value = jsongeo;
|
|
document.getElementById("ex_settings").value = jsonsettings;
|
|
},
|
|
SaveNames: function () {
|
|
var savenames = new XMLHttpRequest();
|
|
savenames.onreadystatechange = function () {
|
|
if (savenames.readyState === 4) {
|
|
if (savenames.status === 200) {
|
|
alert("Änderungen an names.json gespeichert!");
|
|
} else if (savenames.status === 501) {
|
|
alert("Ein Fehler ist aufgetreten (invalid JSON)!");
|
|
}
|
|
}
|
|
};
|
|
savenames.open("POST", "/admin/set_json_names", true);
|
|
savenames.send(document.getElementById("ex_names").value);
|
|
},
|
|
SaveGeo: function () {
|
|
var savegeo = new XMLHttpRequest();
|
|
savegeo.onreadystatechange = function () {
|
|
if (savegeo.readyState === 4) {
|
|
if (savegeo.status === 200) {
|
|
alert("Änderungen an geo.json gespeichert!");
|
|
} else if (savegeo.status === 501) {
|
|
alert("Ein Fehler ist aufgetreten (invalid JSON)!");
|
|
}
|
|
}
|
|
};
|
|
savegeo.open("POST", "/admin/set_json_geo", true);
|
|
savegeo.send(document.getElementById("ex_geo").value);
|
|
},
|
|
SaveSettings: function () {
|
|
var savesettings = new XMLHttpRequest();
|
|
savesettings.onreadystatechange = function () {
|
|
if (savesettings.readyState === 4) {
|
|
if (savesettings.status === 200) {
|
|
alert("Änderungen an settings.json gespeichert!");
|
|
} else if (savesettings.status === 501) {
|
|
alert("Ein Fehler ist aufgetreten (invalid JSON)!");
|
|
}
|
|
}
|
|
};
|
|
savesettings.open("POST", "/admin/set_json_settings", true);
|
|
savesettings.send(document.getElementById("ex_settings").value);
|
|
}
|
|
}; |