[TASK] add tablesort and routing

This commit is contained in:
Martin Geno 2017-05-09 20:40:18 +02:00
parent 3e1242c5cf
commit ac87050fa0
No known key found for this signature in database
GPG Key ID: F0D39A37E925E941
8 changed files with 194 additions and 24 deletions

View File

@ -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;

View File

@ -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>

14
webroot/js/domlib.js Normal file
View File

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

View File

@ -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();

96
webroot/js/gui_list.js Normal file
View File

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

2
webroot/js/navigo.js Normal file

File diff suppressed because one or more lines are too long

View File

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

View File

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