filters: add (highly experimental) hostname filter

lib/filters/hostname.js

@@ -0,0 +1,59 @@
+define([], function () {
+  return function () {
+    var refreshFunction
+    var input = document.createElement("input")
+    input.addEventListener("input", function () {
+      if (refreshFunction)
+        refreshFunction()
+    })
+
+    var value = document.createElement("strong")
+    value.classList.add("input")
+
+    updateValue()
+
+    function updateValue() {
+      value.textContent = input.value
+    }
+
+    function run(d) {
+      return d.nodeinfo.hostname.toLowerCase().includes(input.value.toLowerCase())
+    }
+
+    function setRefresh(f) {
+      refreshFunction = f
+    }
+
+    function render(el) {
+      var label = document.createElement("label")
+      label.textContent = "Hostname"
+      el.appendChild(label)
+      el.appendChild(document.createTextNode(" "))
+      el.appendChild(value)
+
+      el.onclick = function () {
+        el.removeChild(value)
+        el.appendChild(input)
+        input.focus()
+      }
+
+      input.onblur = blur
+      input.onkeypress = function (e) {
+        if (e.keyCode === 13)
+          input.blur()
+      }
+
+      function blur() {
+        updateValue()
+
+        el.removeChild(input)
+        el.appendChild(value)
+      }
+    }
+
+    return { run: run,
+             setRefresh: setRefresh,
+             render: render
+           }
+  }
+})

lib/gui.js

@@ -1,10 +1,10 @@
 define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
          "legend", "linklist", "nodelist", "simplenodelist", "infobox/main",
          "proportions", "forcegraph", "title", "about", "datadistributor",
-         "filters/filtergui" ],
+         "filters/filtergui", "filters/hostname" ],
 function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
           Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
-          Title, About, DataDistributor, FilterGUI) {
+          Title, About, DataDistributor, FilterGUI, HostnameFilter) {
   return function (config, router) {
     var self = this
     var content
@@ -100,6 +100,9 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
     fanout.watchFilters(filterGUI)
     header.add(filterGUI)
 
+    var hostnameFilter = new HostnameFilter()
+    fanout.addFilter(hostnameFilter)
+
     sidebar.add(tabs)
     tabs.add("Aktuelles", overview)
     tabs.add("Knoten", nodelist)

scss/_filters.scss

@@ -18,10 +18,10 @@
 
     label {
       cursor: pointer;
+    }
 
-      strong {
-        color: rgba(255, 255, 255, 1);
-      }
+    strong {
+      color: rgba(255, 255, 255, 1);
     }
 
     &.not {
@@ -35,7 +35,7 @@
       width: 18pt;
       height: 18pt;
       background: rgba(255, 255, 255, 0.0);
-      font-size: 12pt;
+      font-size: 1.41em;
       vertical-align: middle;
       color: rgba(255, 255, 255, 0.8);
 
@@ -50,4 +50,23 @@
       }
     }
   }
+
+  input {
+    background: transparent;
+    border-bottom: 2pt solid rgba(255, 255, 255, 0.5);
+    padding: 2pt 0;
+    outline: 0;
+    color: #fff;
+    font-weight: bold;
+    font-size: 1em;
+    border: none;
+
+    &:focus {
+      background: rgba(255, 255, 255, 0.15);
+    }
+  }
+
+  strong.input {
+    cursor: text;
+  }
 }