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}"
  }
 ]
This commit is contained in:
Moorviper 2016-07-04 10:57:04 +02:00 committed by Milan Pssler
parent e9711c6efc
commit 84aee48229
4 changed files with 152 additions and 4 deletions

View file

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

View file

@ -368,6 +368,40 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
return au.enabled ? "aktiviert (" + au.branch + ")" : "deaktiviert" 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) { function showStatImg(o, d) {
var subst = {} var subst = {}
subst["{NODE_ID}"] = d.nodeinfo.node_id ? d.nodeinfo.node_id : "unknown" 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) { 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") var attributes = document.createElement("table")
attributes.classList.add("attributes") attributes.classList.add("attributes")
attributeEntry(attributes, top, d.nodeinfo.hostname)
attributeEntry(attributes, "Status", showStatus(d)) attributeEntry(attributes, "Status", showStatus(d))
attributeEntry(attributes, "Gateway", d.flags.gateway ? "ja" : null) attributeEntry(attributes, "Gateway", d.flags.gateway ? "ja" : null)
attributeEntry(attributes, "Koordinaten", showGeoURI(d)) attributeEntry(attributes, "Koordinaten", showGeoURI(d))

View file

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

View file

@ -101,6 +101,11 @@ table th.sort-up:after {
content: '\f104'; content: '\f104';
} }
table.attributes {
top: 1px;
display: block;
}
table.attributes th { table.attributes th {
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
@ -116,11 +121,44 @@ table.attributes td {
line-height: 1.41em; 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 { .sidebar {
.infobox, .container { .infobox, .container {
@include shadow(2); @include shadow(2);
background: rgba(255, 255, 255, 0.97); background: rgba(255, 255, 255, 0.97);
border-radius: 2px; border-radius: 2px;
padding-bottom: 30px;
} }
.container.hidden { .container.hidden {