#28 Settings now editable

This commit is contained in:
BlubbFish 2019-08-20 20:03:53 +02:00
parent 680b4b5d82
commit 84162714fe
2 changed files with 131 additions and 2 deletions

View File

@ -125,4 +125,47 @@
#content #settingseditor .savesettings,
#content #settingseditor .gridradius {
margin-left: 15px;
}
#content #settingseditor .fightdedection {
margin-left: 15px;
margin-top: 20px;
}
#content #settingseditor #fighttable {
border-collapse: collapse;
}
#content #settingseditor #fighttable thead {
background-color: #CCCCCC;
background-color: rgba(0,0,0,0.2);
}
#content #settingseditor #fighttable thead th {
text-align: left;
}
#content #settingseditor #fighttable thead .rowid {
width: 60px;
}
#content #settingseditor #fighttable thead .rowcoord {
width: 250px;
}
#content #settingseditor #fighttable thead .rowedit {
width: 50px;
}
#content #settingseditor #fighttable tbody tr:nth-child(odd) {
background-color: #f39d9d;
background-color: rgba(20,0,250,0.1);
}
#content #settingseditor #fighttable tbody tr:nth-child(even) {
background-color: #9c9eee;
background-color: rgba(250,59,0,0.1);
}
#content #settingseditor #fighttable tbody tr:hover {
background-color: #e4e1e1;
background-color: rgba(0,0,0,0.1);
}
#content #settingseditor #fighttable tfoot {
background-color: #e4e1e1;
background-color: rgba(0,0,0,0.1);
}
#content #settingseditor .pointer {
cursor: pointer;
}

View File

@ -358,7 +358,7 @@ var Settings = {
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'>" + this._renderFightDedection(jsonsettings.FightDedection) + "</div>";
html += "<div class='fightdedection'>Fight Dedection Kameras: <br>" + this._renderFightDedection(jsonsettings.FightDedection) + "</div>";
html += "<div class='savesettings'><img src='../icons/general/save.png' onclick='Settings.Save()' class='pointer'></div>";
document.getElementById("content").innerHTML = html + "</div>";
},
@ -370,6 +370,24 @@ 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 fightjson = {};
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 coords = rows[i].children[1].innerHTML.split("<br>");
var polyjson = [];
for (var j = 0; j < coords.length; j++) {
var coord = coords[j].split(";");
polyjson[j] = { "Lat": this._filterFloat(coord[0]), "Lon": this._filterFloat(coord[1]) };
}
fightjson[id] = { "Poly": polyjson };
}
ret.FightDedection = fightjson;
var savesettings = new XMLHttpRequest();
savesettings.onreadystatechange = function () {
if (savesettings.readyState === 4) {
@ -384,7 +402,75 @@ var Settings = {
savesettings.send(JSON.stringify(ret));
},
_renderFightDedection: function (json) {
return "";
var ret = "";
ret += "<table id='fighttable'>";
ret += "<thead><tr><th class='rowid'>ID</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>" + 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>" +
"</tr>";
}
ret += "</tbody>";
ret += "<tfoot><tr><td></td><td></td><td><img src='../icons/general/add.png' onclick='Settings.AddFight()' class='pointer'></td></tr></tfoot>";
ret += "</table>";
return ret;
},
AddFight: function () {
var newrow = document.createElement("tr");
newrow.innerHTML = "<td><input class='id'/></td>";
newrow.innerHTML += "<td><textarea></textarea></td>";
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);
},
Abort: function (el) {
el.parentNode.removeChild(el);
},
SaveRowfight: function (el) {
var coords = el.children[1].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;
}
el.innerHTML = "<td>" + el.children[0].children[0].value + "</td>" +
"<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) {
var answ = window.prompt("Wollen sie den Eintrag für \"" + el.firstChild.innerHTML + "\" wirklich löschen?", "");
if (answ !== null) {
el.parentNode.removeChild(el);
}
},
EditFight: function (el) {
el.innerHTML = "<td><input class='id' value='" + el.children[0].innerText + "'/></td>" +
"<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>";
},
_filterFloat: function (value) {
if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/.test(value)) {
return Number(value);
}
return NaN;
}
};