#28 Settings now editable

Lora-Map/resources/admin/css/global.css

@@ -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;
 }

Lora-Map/resources/admin/js/menu.js

@@ -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;
   }
 };