Continue with nameseditor

Lora-Map/Lora-Map.csproj

@@ -111,6 +111,18 @@
     <Content Include="resources\icons\akku\4-4.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="resources\icons\general\add.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\icons\general\edit.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\icons\general\remove.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="resources\icons\general\save.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
     <Content Include="resources\icons\marker\map-marker.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>

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

@@ -28,4 +28,49 @@
 
 #content {
   margin-left: 210px;
+  border-left: 1px solid black;
+}
+#content #nameeditor .title {
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+#content #nameeditor #nametable {
+  margin-left: 15px;
+  border-collapse: collapse;
+}
+#content #nameeditor #nametable thead {
+  background-color: rgba(0,0,0,0.2);
+}
+#content #nameeditor #nametable thead th {
+  text-align: left;
+}
+#content #nameeditor #nametable thead .rowid {
+  width: 60px;
+}
+#content #nameeditor #nametable thead .rowicon {
+  width: 65px;
+}
+#content #nameeditor #nametable thead .rowedit {
+  width: 50px;
+}
+#content #nameeditor #nametable thead .rowname {
+  width: 250px;
+}
+#content #nameeditor #nametable tbody tr:nth-child(odd) {
+  background-color: rgba(20,0,250,0.1);
+}
+#content #nameeditor #nametable tbody tr:nth-child(even) {
+  background-color: rgba(250,59,0,0.1);
+}
+#content #nameeditor #nametable tbody tr:hover {
+  background-color: rgba(0,0,0,0.1) !important;
+}
+#content #nameeditor #nametable tfoot {
+  background-color: rgba(0,0,0,0.1);
+}
+#content #nameeditor .pointer {
+  cursor: pointer;
+}
+#content #nameeditor #nametable tbody input.name {
+  width: 55px;
 }

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

@@ -2,7 +2,7 @@
   var parsenames = new XMLHttpRequest();
   parsenames.onreadystatechange = function() {
     if(parsenames.readyState === 4 && parsenames.status === 200) {
-      NamesEditor.parseJson(parsenames.responseText);
+      NamesEditor.ParseJson(parsenames.responseText);
     }
   };
   parsenames.open("GET", "http://{%REQUEST_URL_HOST%}:8080/admin/get_json_names", true);
@@ -22,19 +22,77 @@ function menu_import() {
 }
 
 var NamesEditor = {
-  parseJson: function (jsontext) {
+  ParseJson: function (jsontext) {
     document.getElementById("content").innerHTML = "";
     var namesconfig = JSON.parse(jsontext);
-    var html = "<div>Einträge</div>";
+    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>";
     for (var id in namesconfig) {
       if (namesconfig.hasOwnProperty(id)) {
         var nameentry = namesconfig[id];
-        html += "<div>" +
-          "<span>" + id + "</span>" +
-          "<span>"+nameentry["name"]+"</span>"+
-          "</div>";
+        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>kein Icon</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>";
       }
     }
-    document.getElementById("content").innerHTML = html;
+    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"];
+      }
+    }
+    return "<object data='"+url+"' type='image/svg+xml' style='height:50px; width:50px;'></object>";
+  },
+  Add: function () {
+    var newrow = document.createElement("tr");
+    newrow.innerHTML = "<td><input class='name'/></td>";
+    newrow.innerHTML += "<td><input /></td>";
+    newrow.innerHTML += "<td>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 () {
+    alert("Save");
+  },
+  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) {
+    alert("Edit " + el);
+  },
+  Abort: function (el) {
+    el.parentNode.removeChild(el);
+  },
+  SaveRow: function (el) {
+    alert("Save Row");
   }
 };

Lora-Map/resources/index.html

@@ -32,6 +32,7 @@
         <ul>
           <li><a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> licensed <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
           <li><a href="https://www.freepik.com/" title="Freepik">Freepik</a> licensed <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
+          <li><a href="http://www.famfamfam.com/about/" title="Silk Iconset">Silk Iconset</a> licensed <a href="http://creativecommons.org/licenses/by/2.5/" title="Creative Commons BY 2.5" target="_blank">CC 2.5 BY</a></li>
         </ul>
       </div>
     </div>