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

Begin of #27, Implement Settings

Browse Source
This commit is contained in:
BlubbFish 2019-08-21 19:12:26 +02:00
parent e388eb6626
commit 438584f4b9
2 changed files with 123 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
Lora-Map/resources/admin/css/global.css
View File

@ -127,42 +127,56 @@
margin-left: 15px;
}
#content #settingseditor .fightdedection {
#content #settingseditor .fightdedection,
#content #settingseditor .crowddensity {
margin-left: 15px;
margin-top: 20px;
}
#content #settingseditor #fighttable {
#content #settingseditor #fighttable,
#content #settingseditor #crowdtable {
border-collapse: collapse;
}
#content #settingseditor #fighttable thead {
#content #settingseditor #fighttable thead,
#content #settingseditor #crowdtable thead {
background-color: #CCCCCC;
background-color: rgba(0,0,0,0.2);
}
#content #settingseditor #fighttable thead th {
#content #settingseditor #fighttable thead th,
#content #settingseditor #crowdtable thead th {
text-align: left;
}
#content #settingseditor #fighttable thead .rowid {
#content #settingseditor #fighttable thead .rowid,
#content #settingseditor #crowdtable thead .rowid {
width: 60px;
}
#content #settingseditor #fighttable thead .rowcoord {
#content #settingseditor #crowdtable thead .rownum {
width: 200px;
}
#content #settingseditor #fighttable thead .rowcoord,
#content #settingseditor #crowdtable thead .rowcoord {
width: 250px;
}
#content #settingseditor #fighttable thead .rowedit {
#content #settingseditor #fighttable thead .rowedit,
#content #settingseditor #crowdtable thead .rowedit {
width: 50px;
}
#content #settingseditor #fighttable tbody tr:nth-child(odd) {
#content #settingseditor #fighttable tbody tr:nth-child(odd),
#content #settingseditor #crowdtable tbody tr:nth-child(odd) {
background-color: #f39d9d;
background-color: rgba(20,0,250,0.1);
}
#content #settingseditor #fighttable tbody tr:nth-child(even) {
#content #settingseditor #fighttable tbody tr:nth-child(even),
#content #settingseditor #crowdtable tbody tr:nth-child(even) {
background-color: #9c9eee;
background-color: rgba(250,59,0,0.1);
}
#content #settingseditor #fighttable tbody tr:hover {
#content #settingseditor #fighttable tbody tr:hover,
#content #settingseditor #crowdtable tbody tr:hover {
background-color: #e4e1e1;
background-color: rgba(0,0,0,0.1);
}
#content #settingseditor #fighttable tfoot {
#content #settingseditor #fighttable tfoot,
#content #settingseditor #crowdtable tfoot {
background-color: #e4e1e1;
background-color: rgba(0,0,0,0.1);
}

105
Lora-Map/resources/admin/js/menu.js
View File

@ -354,11 +354,15 @@ var Settings = {
if (typeof jsonsettings.FightDedection === "undefined") {
jsonsettings.FightDedection = [];
}
if (typeof jsonsettings.CrwodDensity === "undefined") {
jsonsettings.CrwodDensity = [];
}
var html = "<div id='settingseditor'><div class='title'>Einstellungen</div>";
html += "<div class='startloc'>Startpunkt: <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='gridradius'>Radius für das Grid um den Startpunkt: <input value='" + jsonsettings.GridRadius + "' id='gridrad'>m</div>";
html += "<div class='fightdedection'>Fight Dedection Kameras: <br>" + this._renderFightDedection(jsonsettings.FightDedection) + "</div>";
html += "<div class='crowddensity'>Crowd Density Kameras: <br>" + this._renderCrowdDensity(jsonsettings.CrwodDensity) + "</div>";
html += "<div class='savesettings'><img src='../icons/general/save.png' onclick='Settings.Save()' class='pointer'></div>";
document.getElementById("content").innerHTML = html + "</div>";
},
@ -370,15 +374,15 @@ var Settings = {
ret.CellIds = document.getElementById("wetterids").value.split(";");
ret.GridRadius = parseInt(document.getElementById("gridrad").value);
var rows = document.getElementById("fighttable").children[1].children;
var rowsf = document.getElementById("fighttable").children[1].children;
var fightjson = {};
for (var i = 0; i < rows.length; i++) {
if (rows[i].children[0].children.length === 1) {
for (var i = 0; i < rowsf.length; i++) {
if (rowsf[i].children[0].children.length === 1) {
alert("Bitte zuerst alle Zeilen speichern oder Löschen!");
return;
}
var id = rows[i].children[0].innerText;
var coords = rows[i].children[1].innerHTML.split("<br>");
var id = rowsf[i].children[0].innerText;
var coords = rowsf[i].children[1].innerHTML.split("<br>");
var polyjson = [];
for (var j = 0; j < coords.length; j++) {
var coord = coords[j].split(";");
@ -388,6 +392,29 @@ var Settings = {
}
ret.FightDedection = fightjson;
var rowsc = document.getElementById("crowdtable").children[1].children;
var crowdjson = {};
for (i = 0; i < rowsc.length; i++) {
if (rowsc[i].children[0].children.length === 1) {
alert("Bitte zuerst alle Zeilen speichern oder Löschen!");
return;
}
id = rowsc[i].children[0].innerText;
var num = this._filterFloat(rowsc[i].children[1].innerText);
coords = rowsc[i].children[2].innerHTML.split("<br>");
polyjson = [];
for (j = 0; j < coords.length; j++) {
coord = coords[j].split(";");
polyjson[j] = { "Lat": this._filterFloat(coord[0]), "Lon": this._filterFloat(coord[1]) };
}
crowdjson[id] = {
"Poly": polyjson,
"Count": num
};
}
ret.CrwodDensity = crowdjson;
var savesettings = new XMLHttpRequest();
savesettings.onreadystatechange = function () {
if (savesettings.readyState === 4) {
@ -414,7 +441,7 @@ var Settings = {
ret += "<tr>" +
"<td>" + id + "</td>" +
"<td>" + coords.join("<br>") + "</td>" +
"<td><img src='../icons/general/edit.png' onclick='Settings.EditFight(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='Settings.DeleteFight(this.parentNode.parentNode)' class='pointer'></td>" +
"<td><img src='../icons/general/edit.png' onclick='Settings.EditFight(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='Settings.Delete(this.parentNode.parentNode)' class='pointer'></td>" +
"</tr>";
}
ret += "</tbody>";
@ -422,6 +449,28 @@ var Settings = {
ret += "</table>";
return ret;
},
_renderCrowdDensity: function (json) {
var ret = "";
ret += "<table id='crowdtable'>";
ret += "<thead><tr><th class='rowid'>ID</th><th class='rownum'>Personenanzahl</th><th class='rowcoord'>Koordinaten</th><th class='rowedit'></th></tr></thead>";
ret += "<tbody>";
for (var id in json) {
var coords = [];
for (var i = 0; i < json[id].Poly.length; i++) {
coords[i] = json[id].Poly[i].Lat + ";" + json[id].Poly[i].Lon;
}
ret += "<tr>" +
"<td>" + id + "</td>" +
"<td>" + json[id].Count + "</td>" +
"<td>" + coords.join("<br>") + "</td>" +
"<td><img src='../icons/general/edit.png' onclick='Settings.EditDensity(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='Settings.Delete(this.parentNode.parentNode)' class='pointer'></td>" +
"</tr>";
}
ret += "</tbody>";
ret += "<tfoot><tr><td></td><td></td><td></td><td><img src='../icons/general/add.png' onclick='Settings.AddDensity()' class='pointer'></td></tr></tfoot>";
ret += "</table>";
return ret;
},
AddFight: function () {
var newrow = document.createElement("tr");
newrow.innerHTML = "<td><input class='id'/></td>";
@ -429,6 +478,14 @@ var Settings = {
newrow.innerHTML += "<td><img src='../icons/general/save.png' onclick='Settings.SaveRowfight(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='Settings.Abort(this.parentNode.parentNode)' class='pointer'></td>";
document.getElementById("fighttable").children[1].appendChild(newrow);
},
AddDensity: function () {
var newrow = document.createElement("tr");
newrow.innerHTML = "<td><input class='id'/></td>";
newrow.innerHTML += "<td><input class='count'/></td>";
newrow.innerHTML += "<td><textarea></textarea></td>";
newrow.innerHTML += "<td><img src='../icons/general/save.png' onclick='Settings.SaveRowdensity(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='Settings.Abort(this.parentNode.parentNode)' class='pointer'></td>";
document.getElementById("crowdtable").children[1].appendChild(newrow);
},
Abort: function (el) {
el.parentNode.removeChild(el);
},
@ -455,7 +512,35 @@ var Settings = {
"<td>" + coords + "</td>" +
"<td><img src='../icons/general/edit.png' onclick='Settings.EditFight(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='Settings.DeleteFight(this.parentNode.parentNode)' class='pointer'></td>";
},
DeleteFight: function (el) {
SaveRowdensity: function (el) {
var coords = el.children[2].children[0].value.replace(/\n/gi, "<br>");
var coordscheck = coords.split("<br>");
var fail = false;
for (var i = 0; i < coordscheck.length; i++) {
var coord = coordscheck[i].split(";");
if (coord.length !== 2) {
fail = true;
break;
}
if (isNaN(this._filterFloat(coord[0])) || isNaN(this._filterFloat(coord[1]))) {
fail = true;
break;
}
}
if (fail) {
alert("Die Eingabe der Koordinaten ist nicht Korrekt!\n\nBeispiel:\n50.7;7.8\n50.6;7.9");
return;
}
if (isNaN(this._filterFloat(el.children[1].children[0].value))) {
alert("Die Eingabe der Maximalen Anzahl der Personen ist nicht Korrekt, erwarte eine Zahl.");
return;
}
el.innerHTML = "<td>" + el.children[0].children[0].value + "</td>" +
"<td>" + el.children[1].children[0].value + "</td>" +
"<td>" + coords + "</td>" +
"<td><img src='../icons/general/edit.png' onclick='Settings.EditDensity(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='Settings.DeleteFight(this.parentNode.parentNode)' class='pointer'></td>";
},
Delete: function (el) {
var answ = window.prompt("Wollen sie den Eintrag für \"" + el.firstChild.innerHTML + "\" wirklich löschen?", "");
if (answ !== null) {
el.parentNode.removeChild(el);
@ -466,6 +551,12 @@ var Settings = {
"<td><textarea>" + el.children[1].innerText + "</textarea></td>" +
"<td><img src='../icons/general/save.png' onclick='Settings.SaveRowfight(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='Settings.Abort(this.parentNode.parentNode)' class='pointer'></td>";
},
EditDensity: function (el) {
el.innerHTML = "<td><input class='id' value='" + el.children[0].innerText + "'/></td>" +
"<td><input class='count' value='" + el.children[1].innerText + "'/></td>" +
"<td><textarea>" + el.children[2].innerText + "</textarea></td>" +
"<td><img src='../icons/general/save.png' onclick='Settings.SaveRowdensity(this.parentNode.parentNode)' class='pointer'> <img src='../icons/general/remove.png' onclick='Settings.Abort(this.parentNode.parentNode)' class='pointer'></td>";
},
_filterFloat: function (value) {
if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/.test(value)) {
return Number(value);