From 438584f4b9a413dc534c931fbc134a8d47adf553 Mon Sep 17 00:00:00 2001 From: BlubbFish Date: Wed, 21 Aug 2019 19:12:26 +0200 Subject: [PATCH] Begin of #27, Implement Settings --- Lora-Map/resources/admin/css/global.css | 36 +++++--- Lora-Map/resources/admin/js/menu.js | 105 ++++++++++++++++++++++-- 2 files changed, 123 insertions(+), 18 deletions(-) diff --git a/Lora-Map/resources/admin/css/global.css b/Lora-Map/resources/admin/css/global.css index c12e150..3133664 100644 --- a/Lora-Map/resources/admin/css/global.css +++ b/Lora-Map/resources/admin/css/global.css @@ -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); } diff --git a/Lora-Map/resources/admin/js/menu.js b/Lora-Map/resources/admin/js/menu.js index 891a1a4..6b41cdf 100644 --- a/Lora-Map/resources/admin/js/menu.js +++ b/Lora-Map/resources/admin/js/menu.js @@ -354,11 +354,15 @@ var Settings = { if (typeof jsonsettings.FightDedection === "undefined") { jsonsettings.FightDedection = []; } + if (typeof jsonsettings.CrwodDensity === "undefined") { + jsonsettings.CrwodDensity = []; + } var html = "
Einstellungen
"; html += "
Startpunkt: Lat, Lon
"; html += "
CellId's für DWD-Wetterwarnungen: (Trennen durch \";\", cap_warncellids_csv)
"; html += "
Radius für das Grid um den Startpunkt: m
"; html += "
Fight Dedection Kameras:
" + this._renderFightDedection(jsonsettings.FightDedection) + "
"; + html += "
Crowd Density Kameras:
" + this._renderCrowdDensity(jsonsettings.CrwodDensity) + "
"; html += "
"; document.getElementById("content").innerHTML = html + "
"; }, @@ -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("
"); + var id = rowsf[i].children[0].innerText; + var coords = rowsf[i].children[1].innerHTML.split("
"); 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("
"); + + 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 += "" + "" + id + "" + "" + coords.join("
") + "" + - " " + + " " + ""; } ret += ""; @@ -422,6 +449,28 @@ var Settings = { ret += ""; return ret; }, + _renderCrowdDensity: function (json) { + var ret = ""; + ret += ""; + ret += ""; + ret += ""; + 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 += "" + + "" + + "" + + "" + + "" + + ""; + } + ret += ""; + ret += ""; + ret += "
IDPersonenanzahlKoordinaten
" + id + "" + json[id].Count + "" + coords.join("
") + "
"; + return ret; + }, AddFight: function () { var newrow = document.createElement("tr"); newrow.innerHTML = ""; @@ -429,6 +478,14 @@ var Settings = { newrow.innerHTML += " "; document.getElementById("fighttable").children[1].appendChild(newrow); }, + AddDensity: function () { + var newrow = document.createElement("tr"); + newrow.innerHTML = ""; + newrow.innerHTML += ""; + newrow.innerHTML += ""; + newrow.innerHTML += " "; + document.getElementById("crowdtable").children[1].appendChild(newrow); + }, Abort: function (el) { el.parentNode.removeChild(el); }, @@ -455,7 +512,35 @@ var Settings = { "" + coords + "" + " "; }, - DeleteFight: function (el) { + SaveRowdensity: function (el) { + var coords = el.children[2].children[0].value.replace(/\n/gi, "
"); + var coordscheck = coords.split("
"); + 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 = "" + el.children[0].children[0].value + "" + + "" + el.children[1].children[0].value + "" + + "" + coords + "" + + " "; + }, + 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 = { "" + " "; }, + EditDensity: function (el) { + el.innerHTML = "" + + "" + + "" + + " "; + }, _filterFloat: function (value) { if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/.test(value)) { return Number(value);