Router pics (#37)

* add a padding to sidebar for better use on mobile devices

* allow other things as text in attributeEntry

Now it is possible to use pictures and other stuff in this function

* Show Router-Pic with double fallback

3 Möglichkeiten
1. in config wird externe Quelle angegeben
2. wenn nicht wird in ./nodes/ geseucht
3. ansonsten Knotenname + Knotenname in erster Zeile

extern via:
cdn

"hwImg": [
  { "thumbnail": "https://cdn.rawgit.com/Moorviper/meshviewer_hwpics/master/nodes/{MODELHASH}.svg",
    "caption": "Knoten {MODELHASH}"
  }
 ]

aktueller nicht cdn:
"hwImg": [
  { "thumbnail": "https://rawgit.com/Moorviper/meshviewer_hwpics/master/nodes/{MODELHASH}.svg",
    "caption": "Knoten {MODELHASH}"
  }
 ]

helper.js

@@ -130,7 +130,12 @@ function attributeEntry(el, label, value) {
 
   var tr = document.createElement("tr")
   var th = document.createElement("th")
+  if (typeof label === "string")
     th.textContent = label
+
+  else
+    th.appendChild(label)
+
   tr.appendChild(th)
 
   var td = document.createElement("td")

lib/infobox/node.js

@@ -368,6 +368,40 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
     return au.enabled ? "aktiviert (" + au.branch + ")" : "deaktiviert"
   }
 
+  function showNodeImg(o, model) {
+    if (!model)
+      return undefined
+
+    var content, caption
+    var modelhash = model.split("").reduce(function(a, b) {
+      a = ((a << 5) - a) + b.charCodeAt(0)
+      return a & a
+    }, 0)
+
+    if (o.thumbnail) {
+      content = document.createElement("img")
+      content.id = "routerpicture"
+      content.classList.add("nodeImg")
+      content.src = o.thumbnail.replace("{MODELHASH}", modelhash)
+      content.onerror = function() {
+        console.log("Router-Bild nicht vorhanden !!! create an issue @ https://github.com/Moorviper/Freifunk-Router-Anleitungen/issues")
+        document.getElementById("routerpicdiv").outerHTML = "Knotenname"
+      }
+    }
+
+    if (o.caption) {
+      caption = o.caption.replace("{MODELHASH}", modelhash)
+
+      if (!content)
+        content = document.createTextNode(caption)
+    }
+
+    var p = document.createElement("p")
+    p.appendChild(content)
+
+    return content
+}
+
   function showStatImg(o, d) {
     var subst = {}
     subst["{NODE_ID}"] = d.nodeinfo.node_id ? d.nodeinfo.node_id : "unknown"
@@ -376,13 +410,44 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
   }
 
   return function(config, el, router, d) {
-    var h2 = document.createElement("h2")
+    var top = document.createElement("div")
-    h2.textContent = d.nodeinfo.hostname
+    top.id = "routerpicdiv"
-    el.appendChild(h2)
+    try {
+      if (config.hwImg)
+        config.hwImg.forEach(function(hwImg) {
+          try {
+            top.appendChild(showNodeImg(hwImg, d.nodeinfo.hardware.model))
+          }
+          catch (err) {
+            console.log(err.message)
+          }
+        })
+
+      else
+      {
+        var localpic = [] // create fallback-config-data
+        localpic.push({
+          thumbnail: "./nodes/{MODELHASH}.svg",
+          caption: "Knoten {MODELHASH}"
+        })
+        localpic.forEach(function(localpic) {
+          try {
+            top.appendChild(showNodeImg(localpic, d.nodeinfo.hardware.model))
+          }
+          catch (err) {
+            console.log(err.message)
+          }
+        })
+      }
+    }
+    catch (err) {
+      console.log(err.message)
+    }
 
     var attributes = document.createElement("table")
     attributes.classList.add("attributes")
 
+    attributeEntry(attributes, top, d.nodeinfo.hostname)
     attributeEntry(attributes, "Status", showStatus(d))
     attributeEntry(attributes, "Gateway", d.flags.gateway ? "ja" : null)
     attributeEntry(attributes, "Koordinaten", showGeoURI(d))

scss/_sidebar.scss

@@ -0,0 +1,40 @@
+.nodeheader {
+    width: 90%;
+    position: relative;
+    z-index: 2;
+}
+
+.nodeheader img {
+    width: 30%;
+    max-height: 180px;
+    margin: auto;
+    text-align: center;
+    max-width: 128px;
+    display: block;
+    z-index: 2;
+}
+.nodeheader img .none{
+    display: none;
+}
+
+.nodeheader span {
+    background-color: silver;
+    background-color: hsla(0, 0%, 100%, 0.5);
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    line-height: 1.5em;
+    text-align: center;
+    color: black;
+    font-weight: bold;
+    font-size: large;
+    z-index: 2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.limit {
+    min-height: 1px;
+    max-height: 1px;
+}

scss/main.scss

@@ -101,6 +101,11 @@ table th.sort-up:after {
   content: '\f104';
 }
 
+table.attributes {
+  top: 1px;
+  display: block;
+}
+
 table.attributes th {
   text-align: left;
   font-weight: bold;
@@ -116,11 +121,44 @@ table.attributes td {
   line-height: 1.41em;
 }
 
+table.attributes tr:first-child {
+  max-height: 128px;
+  max-width: 128px;
+  min-width: 128px;
+  min-height: 128px;
+  /*height: 128px;*/
+  /*background-color: green;*/
+}
+
+table.attributes tr:first-child td{
+  font-weight: bold;
+  /*background-color: red;*/
+  font-size: large;
+  vertical-align:bottom;
+}
+
+table.attributes tr:first-child th{
+  font-weight: bold;
+  /*background-color: red;*/
+  font-size: large;
+  vertical-align:bottom;
+}
+
+.nodenamesidebar {
+  position: relative;
+  font-weight: bold;
+  /*background-color: red;*/
+  font-size: large;
+  vertical-align:bottom;
+  bottom: 0px;
+}
+
 .sidebar {
   .infobox, .container {
     @include shadow(2);
     background: rgba(255, 255, 255, 0.97);
     border-radius: 2px;
+    padding-bottom: 30px;
   }
 
   .container.hidden {