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