[WIP] show advanced airtime stats

lib/infobox/node.js

@@ -271,6 +271,40 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
     return span
   }
 
+  function showAirtimeBar(className, v) {
+    var span = document.createElement("span")
+    span.classList.add("bar")
+    span.classList.add(className)
+
+    var waitbar = document.createElement("span")
+    waitbar.style.width = (v.wait * 100) + "%"
+    span.appendChild(waitbar)
+    waitbar.style.background = "rgba(221, 44, 0, 1)"
+    var waitlabel = document.createElement("span")
+    waitlabel.textContent = (Math.round(v.wait * 100)) + " % wait"
+    waitbar.appendChild(waitlabel)
+    var rxbar = document.createElement("span")
+    rxbar.style.width = (v.rx * 100) + "%"
+    span.appendChild(rxbar)
+    rxbar.style.background = "rgba(0, 145, 234, 1)"
+    var rxlabel = document.createElement("span")
+    rxlabel.textContent = (Math.round(v.rx * 100)) + " % rx"
+    rxbar.appendChild(rxlabel)
+    var txbar = document.createElement("span")
+    txbar.style.width = (v.tx * 100) + "%"
+    span.appendChild(txbar)
+    txbar.style.background = "rgba(0, 191, 165, 1)"
+    var txlabel = document.createElement("span")
+    txlabel.textContent = (Math.round(v.tx * 100)) + " % tx"
+    txbar.appendChild(txlabel)
+
+    var label = document.createElement("label")
+    label.textContent = (Math.round(v.free * 100)) + " % frei"
+    span.appendChild(label)
+
+    return span
+  }
+
   function showLoad(d) {
     if (!("loadavg" in d.statistics))
       return undefined
@@ -292,10 +326,14 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
   function showAirtime(band, val) {
     if (!val)
       return undefined
-
+    if (!isNaN(val))
       return function (el) {
         el.appendChild(showBar("airtime" + band.toString(), val))
       }
+
+    return function (el) {
+      el.appendChild(showAirtimeBar("airtime" + band.toString(), val))
+    }
   }
 
   function createLink(target, router) {

scss/main.scss

@@ -409,6 +409,7 @@ table {
     display: inline-block;
     height: 1.4em;
     background: rgba(85, 128, 32, 0.8);
+    overflow: hidden;
   }
 
   label {
@@ -421,6 +422,14 @@ table {
   }
 }
 
+.bar > span > span {
+  left: 0.5em;
+  font-weight: bold;
+  color: white;
+  white-space: nowrap;
+  background: none !important;
+}
+
 .proportion th {
   font-weight: normal !important;
   text-align: right !important;