From ac87050fa059678fd78c0f64be28ee09a181640e Mon Sep 17 00:00:00 2001 From: Martin Geno Date: Tue, 9 May 2017 20:40:18 +0200 Subject: [PATCH] [TASK] add tablesort and routing --- webroot/css/main.css | 19 ++++++++- webroot/index.html | 14 +++--- webroot/js/domlib.js | 14 ++++++ webroot/js/gui.js | 44 +++++++++++++++++-- webroot/js/gui_list.js | 96 ++++++++++++++++++++++++++++++++++++++++++ webroot/js/navigo.js | 2 + webroot/js/notify.js | 27 +++++++----- webroot/js/socket.js | 2 - 8 files changed, 194 insertions(+), 24 deletions(-) create mode 100644 webroot/js/domlib.js create mode 100644 webroot/js/gui_list.js create mode 100644 webroot/js/navigo.js diff --git a/webroot/css/main.css b/webroot/css/main.css index 9e57b1b..f7704eb 100644 --- a/webroot/css/main.css +++ b/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; diff --git a/webroot/index.html b/webroot/index.html index 7a0ec69..6c4981a 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -5,9 +5,12 @@ FreifunkManager + + + @@ -18,16 +21,15 @@ -
-
+
diff --git a/webroot/js/domlib.js b/webroot/js/domlib.js new file mode 100644 index 0000000..11269de --- /dev/null +++ b/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); + } + }; +})() diff --git a/webroot/js/gui.js b/webroot/js/gui.js index c3cb321..968fb80 100644 --- a/webroot/js/gui.js +++ b/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(); diff --git a/webroot/js/gui_list.js b/webroot/js/gui_list.js new file mode 100644 index 0000000..02e2dd6 --- /dev/null +++ b/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; i1&&void 0!==arguments[1]?arguments[1]:[];return e.map(function(e){var n=u(e.route),o=n.regexp,r=n.paramNames,i=t.match(o),a=s(i,r);return!!i&&{match:i,route:e,params:a}}).filter(function(t){return t})}function d(t,e){return l(t,e)[0]||!1}function c(t,e){var n=l(t,e.filter(function(t){var e=i(t.route);return""!==e&&"*"!==e})),o=i(t);return n.length>0?n.map(function(e){return i(t.substr(0,e.match.index))}).reduce(function(t,e){return e.length0&&void 0!==arguments[0])||arguments[0];o&&(t(),e.hooks.after&&e.hooks.after(n))},n):e.hooks.after&&(t(),e.hooks.after&&e.hooks.after(n))):void t()}function g(t,e,n){if(o()&&!e)return!1;if(!t.match(n))return!1;var r=t.split(n);return r.length<2||""===r[1]}Object.defineProperty(e,"__esModule",{value:!0});var R="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};r.prototype={helpers:{match:d,root:c,clean:i},navigate:function(t,e){var n;return t=t||"",this._usePushState?(n=(e?"":this._getRoot()+"/")+t.replace(/^\/+/,"/"),n=n.replace(/([^:])(\/{2,})/g,"$1/"),history[this._paused?"replaceState":"pushState"]({},"",n),this.resolve()):"undefined"!=typeof window&&(t=t.replace(new RegExp("^"+this._hash),""),window.location.href=window.location.href.replace(/#$/,"").replace(new RegExp(this._hash+".*$"),"")+this._hash+t),this},on:function(){for(var t=this,e=arguments.length,n=Array(e),o=0;o=2)if("/"===n[0]){var r=n[1];"object"===R(n[1])&&(r=n[1].uses),this._defaultHandler={handler:r,hooks:n[2]}}else this._add(n[0],n[1],n[2]);else if("object"===R(n[0])){var i=Object.keys(n[0]).sort(h);i.forEach(function(e){t.on(e,n[0][e])})}return this},off:function(t){return null!==this._defaultHandler&&t===this._defaultHandler.handler?this._defaultHandler=null:null!==this._notFoundHandler&&t===this._notFoundHandler.handler&&(this._notFoundHandler=null),this._routes=this._routes.reduce(function(e,n){return n.handler!==t&&e.push(n),e},[]),this},notFound:function(t,e){return this._notFoundHandler={handler:t,hooks:e},this},resolve:function(t){var e,o,r=this,i=(t||this._cLoc()).replace(this._getRoot(),"");this._useHash&&(i=i.replace(new RegExp("^/"+this._hash),"/"));var s=_(t||this._cLoc()),u=p(i,this._useHash,this._hash);return!(this._paused||this._lastRouteResolved&&u===this._lastRouteResolved.url&&s===this._lastRouteResolved.query)&&((o=d(u,this._routes))?(this._lastRouteResolved={url:u,query:s},e=o.route.handler,v(function(){o.route.route instanceof RegExp?e.apply(void 0,n(o.match.slice(1,o.match.length))):e(o.params,s)},o.route,o.params),o):this._defaultHandler&&(""===u||"/"===u||u===this._hash||g(u,this._useHash,this._hash))?(v(function(){r._lastRouteResolved={url:u,query:s},r._defaultHandler.handler(s)},this._defaultHandler),!0):(this._notFoundHandler&&v(function(){r._lastRouteResolved={url:u,query:s},r._notFoundHandler.handler(s)},this._notFoundHandler),!1))},destroy:function(){this._routes=[],this._destroyed=!0,clearTimeout(this._listenningInterval),"undefined"!=typeof window&&(window.removeEventListener("popstate",this._onLocationChange),window.removeEventListener("hashchange",this._onLocationChange))},updatePageLinks:function(){var t=this;"undefined"!=typeof document&&this._findLinks().forEach(function(e){e.hasListenerAttached||(e.addEventListener("click",function(n){var o=t.getLinkPath(e);t._destroyed||(n.preventDefault(),t.navigate(i(o)))}),e.hasListenerAttached=!0)})},generate:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this._routes.reduce(function(n,o){var r;if(o.name===t){n=o.route;for(r in e)n=n.replace(":"+r,e[r])}return n},"");return this._useHash?this._hash+n:n},link:function(t){return this._getRoot()+t},pause:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this._paused=t},resume:function(){this.pause(!1)},disableIfAPINotAvailable:function(){o()||this.destroy()},lastRouteResolved:function(){return this._lastRouteResolved},getLinkPath:function(t){return t.pathname||t.getAttribute("href")},_add:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;return"string"==typeof t&&(t=encodeURI(t)),"object"===("undefined"==typeof e?"undefined":R(e))?this._routes.push({route:t,handler:e.uses,name:e.as,hooks:n||e.hooks}):this._routes.push({route:t,handler:e,hooks:n}),this._add},_getRoot:function(){return null!==this.root?this.root:(this.root=c(this._cLoc().split("?")[0],this._routes),this.root)},_listen:function(){var t=this;if(this._usePushState)window.addEventListener("popstate",this._onLocationChange);else if(f())window.addEventListener("hashchange",this._onLocationChange);else{var e=this._cLoc(),n=void 0,o=void 0;o=function(){n=t._cLoc(),e!==n&&(e=n,t.resolve()),t._listenningInterval=setTimeout(o,200)},o()}},_cLoc:function(){return"undefined"!=typeof window?"undefined"!=typeof window.__NAVIGO_WINDOW_LOCATION_MOCK__?window.__NAVIGO_WINDOW_LOCATION_MOCK__:i(window.location.href):""},_findLinks:function(){return[].slice.call(document.querySelectorAll("[data-navigo]"))},_onLocationChange:function(){this.resolve()}},r.PARAMETER_REGEXP=/([:*])(\w+)/g,r.WILDCARD_REGEXP=/\*/g,r.REPLACE_VARIABLE_REGEXP="([^/]+)",r.REPLACE_WILDCARD="(?:.*)",r.FOLLOWED_BY_SLASH_REGEXP="(?:/$|$)",r.MATCH_REGEXP_FLAGS="",e["default"]=r,t.exports=e["default"]}])}); +//# sourceMappingURL=navigo.min.js.map \ No newline at end of file diff --git a/webroot/js/notify.js b/webroot/js/notify.js index cb1e6b4..0dc44cb 100644 --- a/webroot/js/notify.js +++ b/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); }; diff --git a/webroot/js/socket.js b/webroot/js/socket.js index 9b5ed59..56bbc54 100644 --- a/webroot/js/socket.js +++ b/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); }