[TASK] add tablesort and routing

webroot/css/main.css

@@ -3,7 +3,7 @@ body {
   margin: 0px;
   font-size: 15px;
   color: #333;
-  line-height: 1;
+  line-height: 1.3;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 }
 .status {
@@ -52,7 +52,6 @@ nav li a, nav li span {
   color: inherit;
   box-sizing: border-box;
   padding: 1.1em .5em;
-  min-width: 10em;
   height: 50px;
 }
 nav > ul > .item-1 {
@@ -97,6 +96,22 @@ nav > ul > .item-3 {
   color: #fff;
 }
 
+thead {
+  font-size: 1.3em;
+  font-weight: bold;
+  cursor: default;
+}
+thead tr th{
+  border-bottom: 4px solid #dc0067;
+}
+
+table th.sort-down:after {
+  content: " \25BE"
+}
+table th.sort-up:after {
+  content: " \25B4"
+}
+
 button {
     display: inline-block;
     padding: .5em 1em;

webroot/index.html

@@ -5,9 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>FreifunkManager</title>
     <link rel="stylesheet" href="/css/main.css">
+    <script src="/js/navigo.js"></script>
     <script src="/js/config.js"></script>
+    <script src="/js/domlib.js"></script>
     <script src="/js/store.js"></script>
     <script src="/js/notify.js"></script>
+    <script src="/js/gui_list.js"></script>
     <script src="/js/gui.js"></script>
     <script src="/js/socket.js"></script>
     <script src="/js/app.js"></script>
@@ -18,16 +21,15 @@
 
         <ul>
           <li class="logo"><img src="/img/logo.jpg"></li>
-          <li class="item-1"><a href="#/list/">List</a></li>
-          <li class="item-2"><a href="#/map/">Map</a></li>
-          <li class="item-3"><a href="#/statistics/">Statistics</a></li>
-          <li class="status"><span onclick="location.reload(true)"></span></li>
+          <li class="item-1"><a href="#/list">List</a></li>
+          <li class="item-2"><a href="#/map">Map</a></li>
+          <li class="item-3"><a href="#/statistics">Statistics</a></li>
+          <li class="status offline"><span onclick="location.reload(true)"></span></li>
         </ul>
       </nav>
     </header>
-    <main>
-    </main>
     <div class="notifications"></div>
+    <main></main>
     <noscript>
       <strong>JavaScript required</strong>
     </noscript>

webroot/js/domlib.js

@@ -0,0 +1,14 @@
+var domlib = {};
+(function(){
+  domlib.newAt = function(at,eltype) {
+    var el = document.createElement(eltype);
+    at.appendChild(el);
+    return el;
+  };
+  domlib.removeChildren = function(el) {
+    if(el)
+      while(el.firstChild) {
+        el.removeChild(el.firstChild);
+      }
+  };
+})()

webroot/js/gui.js

@@ -1,7 +1,43 @@
 var gui = {};
+var router = new Navigo(null, true, '#');
 
 (function(){
+  function clean(){
+    domlib.removeChildren(document.querySelector('main'));
+  }
+  router.on({
+    '/list': function () {
+      clean();
+      console.log("list view");
+      guiList.bind(document.querySelector('main'));
+      guiList.render();
+    },
+    '/map':function(){
+      clean();
+      console.log("map view");
+      domlib.newAt(main,"div").innerHTML = "Map";
+    },
+    '/statistics':function(){
+      clean();
+      console.log("stats view");
+      domlib.newAt(document.querySelector('main'),"div").innerHTML = "Stats";
+    },
+    '/n/:nodeID': {
+      as: 'node',
+      uses: function (params) {
+        clean();
+        console.log("node view");
+        var nodeid = params['nodeID'].toLowerCase();
+        domlib.newAt(document.querySelector('main'),"div").innerHTML = "Nodeid: "+nodeid;
+      }
+    },
+  });
+  router.on(function () {
+    router.navigate('/list');
+  });
+
   gui.render = function render(){
+    main = document.querySelector('main');
     var status = document.getElementsByClassName('status')[0];
     if (status === undefined){
       console.log("unable to render");
@@ -12,10 +48,10 @@ var gui = {};
       status.classList.add(((socket.readyState===0 || socket.readyState===2)?'connecting':(socket.readyState===1)?'':'offline'));
     }
 
-    notify.container = document.getElementsByClassName('notifications')[0];
-  };
-  gui.update = function update(){
-    // console.log(store.will());
+    notify.bind(document.getElementsByClassName('notifications')[0]);
+
+    guiList.render();
+    router.resolve();
   };
 
   gui.render();

webroot/js/gui_list.js

@@ -0,0 +1,96 @@
+var guiList = {};
+
+(function(){
+  var container;
+  var tbody;
+  var sortReverse = false;
+  var sortIndex;
+
+  function sort(a,b){
+    if(sortIndex === undefined)
+      return a.node_id.localeCompare(b.node_id);
+    switch (sortIndex.innerHTML) {
+      case "Hostname":
+        return a.hostname.localeCompare(b.hostname);
+      default:
+        return a.node_id.localeCompare(b.node_id);
+    }
+  }
+
+  function renderRow(data){
+    var tr = document.createElement('tr');
+    var td;
+
+    domlib.newAt(tr,'td').innerHTML = data.node_id;
+
+    var cell1 = domlib.newAt(tr,'td');
+    cell1.innerHTML = data.hostname;
+    cell1.addEventListener('click',function(){
+      router.navigate(router.generate('node', { nodeID: data.node_id }));
+    });
+
+    return tr;
+  }
+
+  function updateTable(){
+    domlib.removeChildren(tbody);
+    var data = store.will();
+
+    if(sortReverse)
+      data = data.reverse(sort);
+    else
+      data = data.sort(sort);
+
+    for(var i=0; i<data.length; i++){
+      var row = renderRow(data[i]);
+      tbody.appendChild(row);
+    }
+  }
+
+  function sortTable(head) {
+    if(sortIndex)
+      sortIndex.classList.remove("sort-up","sort-down");
+    sortReverse = head === sortIndex ? !sortReverse : false;
+    sortIndex = head;
+    sortIndex.classList.add(sortReverse ? 'sort-up' : 'sort-down');
+
+    updateTable();
+  }
+
+  guiList.bind = function(el) {
+    container = el;
+  };
+
+  guiList.render = function render(){
+    if (container === undefined){
+      console.log("unable to render guiList");
+      return;
+    } else if (tbody !== undefined){
+      container.appendChild(tbody.parentNode);
+      updateTable();
+      return;
+    }
+    domlib.removeChildren(container);
+    var table = domlib.newAt(container,'table');
+    var thead = domlib.newAt(table,'thead');
+    tbody = domlib.newAt(table,'tbody');
+
+    var tr = domlib.newAt(thead,'tr');
+
+    var cell1 = domlib.newAt(tr,'th');
+    cell1.innerHTML = "NodeID";
+    cell1.addEventListener('click', function(){
+      sortTable(cell1);
+    });
+
+    var cell2 = domlib.newAt(tr,'th');
+    cell2.innerHTML = "Hostname";
+    cell2.addEventListener('click', function(){
+      sortTable(cell2);
+    });
+
+    table.classList.add('sorttable');
+
+    updateTable();
+  };
+})();

webroot/js/notify.js

@@ -1,42 +1,49 @@
-var notify = {container:{},messages:[]};
+var notify = {};
 
 
 (function(){
+  var container;
+  var messages = [];
+
   if ("Notification" in window) {
     Notification.requestPermission();
   }
 
   function removeLast (){
-    notify.messages.splice(0, 1);
-    if(notify.container.firstElementChild)
-      notify.container.removeChild(notify.container.firstElementChild);
+    messages.splice(0, 1);
+    if(container!==undefined && container.firstElementChild)
+      container.removeChild(container.firstElementChild);
   }
 
   function renderMsg(msg){
     var msgBox = document.createElement('div');
     msgBox.classList.add("notify",msg.type);
     msgBox.innerHTML = msg.text;
-    notify.container.appendChild(msgBox);
+    container.appendChild(msgBox);
     msgBox.addEventListener('click', function(){
-      notify.container.removeChild(msgBox);
-      if (notify.messages.indexOf(msg) !== -1) {
-        notify.messages.splice(notify.messages.indexOf(msg), 1);
+      container.removeChild(msgBox);
+      if (messages.indexOf(msg) !== -1) {
+        messages.splice(messages.indexOf(msg), 1);
       }
     });
   }
 
   setInterval(removeLast,15000);
 
+  notify.bind = function(el) {
+    container = el;
+  };
+
   notify.send = function(type, text){
     if("Notification" in window && Notification.permission === "granted") {
       new Notification(text,{body:type,icon:'/img/logo.jpg'});
       return;
     }
-    if(notify.messages.length > 10){
+    if(messages.length > 10){
       removeLast();
     }
     var msg = {type:type,text:text};
-    notify.messages.push(msg);
+    messages.push(msg);
     renderMsg(msg);
   };
 

webroot/js/socket.js

@@ -19,10 +19,8 @@ var socket = {readyState:0};
 
     if(msg.type === "current") {
       store.updateReal(msg.node);
-      gui.update();
     } else if (msg.type === "to-update") {
       store.update(msg.node);
-      gui.update();
     } else {
       gui.disable(e);
     }