diff --git a/build b/build
index e43e691..76b5f55 160000
--- a/build
+++ b/build
@@ -1 +1 @@
-Subproject commit e43e6917c3f958ba7b360146110af268705979a7
+Subproject commit 76b5f55df89b655710e8607f0029895b7a41abe0
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..133e4de
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,47 @@
+@font-face {
+ font-family: 'FontAwesome';
+ src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
+ src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+a {
+ color: orange;
+ font-weight: bold;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+body{
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ outline: 0px;
+ background-color: #f2f2f2;
+ font-family: Verdana,sans-serif;
+}
+button,input{
+ color:black;
+ background-color: lavender;
+ border:1px solid black;
+ border-radius: 5px;
+ padding: 8px;
+ margin: 5px;
+ font-size: 14px;
+}
+
+.content, .content > .map{
+ width:100%;
+ height:100%;
+ position: absolute;
+}
+
+.content > iframe{
+ width: 100%;
+ height: 99%;
+ border: none;
+}
+i.icon{
+ font: normal normal normal 12px/1 FontAwesome;
+}
diff --git a/css/map.css b/css/map.css
new file mode 100644
index 0000000..697db66
--- /dev/null
+++ b/css/map.css
@@ -0,0 +1,49 @@
+.nodeicon{
+ background-color: rgba(0,255,0,0.5);
+ border: 2px solid white;
+ border-radius: 10px;
+ width:3px;
+ height: 3px;
+}
+.nodeicon-label{
+ font-size: 12px;
+ font-weight: lighter;
+}
+.nodeicon-label table{
+ width: 100%
+}
+.nodeicon-label table td{
+ border-top:1px solid #999;
+ text-align: right;
+}
+.nodeicon-label table td:first-child{
+ text-align: left;
+}
+.nodeicon.offline{
+ background-color: rgba(255,0,0,0.5);
+}
+.nodeicon.select{
+ background-color: green;
+}
+.nodeicon.select.offline{
+ background-color: red;
+ border-color: black;
+}
+.nodeicon.client24{
+ border-left: 3px solid blue;
+}
+.nodeicon.client5{
+ border-right: 3px solid blue;
+}
+.nodeicon.client24-warn{
+ border-left: 3px solid yellow;
+}
+.nodeicon.client5-warn{
+ border-right: 3px solid yellow;
+}
+.nodeicon.client24-crit{
+ border-left: 3px solid red;
+}
+.nodeicon.client5-crit{
+ border-right: 3px solid red;
+}
diff --git a/css/menu.css b/css/menu.css
new file mode 100644
index 0000000..aa466fc
--- /dev/null
+++ b/css/menu.css
@@ -0,0 +1,35 @@
+header.menu{
+ position: absolute;;
+ top:12px;
+ right:12px;
+ z-index: 3000;
+}
+header.menu .icons i{
+ cursor: pointer;
+ display: inline-block;
+ padding: 0.4em 0 0 0.4em;
+ margin-left: 12pt;
+ border-radius: 0.9em;
+ background: rgba(255,255,255,0.7);
+ border: none;
+ height: 1.4em;
+ width: 1.4em;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
+ font: normal normal normal 24px/1 FontAwesome;
+}
+header.menu .icons i.mini{
+ width: 22px;
+ height: 22px;
+ font-size: 16px;
+}
+header.menu .icons i span{
+ font-size: 12px;
+ position: relative;
+ top:12px;
+ left:-24px;
+ display: inline-block;
+ white-space: nowrap;
+ overflow-x: visible;
+ width: 0px;
+ height: 0px;
+}
diff --git a/css/popup.css b/css/popup.css
new file mode 100644
index 0000000..f047618
--- /dev/null
+++ b/css/popup.css
@@ -0,0 +1,18 @@
+.popup {
+ position: fixed;
+ border-radius: 5px 5px 0px 0px;
+ background-color: grey;
+ color: white;
+ bottom: 0px;
+ width: 70%;
+ left:15%;
+ height: 32px;
+ padding: 10px;
+ z-index: 3500;
+}
+.popup.hidden{
+ bottom: -50px;
+}
+.popup a {
+ float: right;
+}
diff --git a/css/sidebar.css b/css/sidebar.css
new file mode 100644
index 0000000..aef4532
--- /dev/null
+++ b/css/sidebar.css
@@ -0,0 +1,28 @@
+.sidebar.hidden{
+ display: none;
+}
+.sidebar .icon i{
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 0px;
+ width: 1.6em;
+ z-index: 3000;
+ color: black;
+ font: normal normal normal 24px/1 FontAwesome;
+}
+.sidebar{
+ background: rgba(255, 255, 255, 0.9);
+ z-index: 2000;
+ position: absolute;
+ left: 0px;
+ height: 100%;
+ box-shadow: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);
+ width: 320pt;
+}
+@media screen and (max-width: 630pt){
+ .sidebar{
+ top: 500px;
+ width: 100%;
+ }
+}
diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 6eaac97..0000000
--- a/css/style.css
+++ /dev/null
@@ -1,209 +0,0 @@
-@font-face {
- font-family: 'FontAwesome';
- src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
- src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-a {
- color: orange;
- font-weight: bold;
- text-decoration: none;
- cursor: pointer;
-}
-
-body{
- margin: 0px;
- padding: 0px;
- border: 0px;
- outline: 0px;
- background-color: #f2f2f2;
- font-family: Verdana,sans-serif;
-}
-button,input{
- color:black;
- background-color: lavender;
- border:1px solid black;
- border-radius: 5px;
- padding: 8px;
- margin: 5px;
- font-size: 14px;
-}
-table{
- border-collapse: collapse;
-}
-table.table{
- width: 100%;
-}
-.table th, .table td{
- padding: 8px;
- border-bottom: 1px solid #ddd;
-}
-.table td{
- text-align: right;
-}
-.table td.text{
- text-align: left;
-}
-.table tr:nth-child(even){
- background-color: rgba(242, 242, 242, 0.4);;
-}
-.table th{
- background-color: #dc0067;
- background:-webkit-gradient(linear, left top, left bottom, from(#dc0067), to(#dc0050));
- background:-moz-linear-gradient(top, #dc0067, #dc0050);
- color: white;
-}
-.table small{
- display: block;
-}
-.table i.icon{
- margin-right: 15px;
-}
-.table td.split span{
- display: block;
-}
-.content, .content > .map{
- width:100%;
- height:100%;
- position: absolute;
-}
-header.menu{
- position: absolute;;
- top:12px;
- right:12px;
- z-index: 3000;
-}
-.content > iframe{
- width: 100%;
- height: 99%;
- border: none;
-}
-.popup {
- position: fixed;
- border-radius: 5px 5px 0px 0px;
- background-color: grey;
- color: white;
- bottom: 0px;
- width: 70%;
- left:15%;
- height: 32px;
- padding: 10px;
- z-index: 3500;
-}
-.popup.hidden{
- bottom: -50px;
-}
-.popup a {
- float: right;
-}
-i.icon{
- font: normal normal normal 12px/1 FontAwesome;
-}
-header.menu .icons i{
- cursor: pointer;
- display: inline-block;
- padding: 0.4em 0 0 0.4em;
- margin-left: 12pt;
- border-radius: 0.9em;
- background: rgba(255,255,255,0.7);
- border: none;
- height: 1.4em;
- width: 1.4em;
- box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
- font: normal normal normal 24px/1 FontAwesome;
-}
-header.menu .icons i.mini{
- width: 22px;
- height: 22px;
- font-size: 16px;
-}
-header.menu .icons i span{
- font-size: 12px;
- position: relative;
- top:12px;
- left:-24px;
- display: inline-block;
- white-space: nowrap;
- overflow-x: visible;
- width: 0px;
- height: 0px;
-}
-.sidebar.hidden{
- display: none;
-}
-.sidebar .icon i{
- cursor: pointer;
- position: absolute;
- top: 12px;
- right: 0px;
- width: 1.6em;
- z-index: 3000;
- color: black;
- font: normal normal normal 24px/1 FontAwesome;
-}
-.sidebar{
- background: rgba(255, 255, 255, 0.9);
- z-index: 2000;
- position: absolute;
- left: 0px;
- height: 100%;
- box-shadow: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);
- width: 320pt;
-}
-@media screen and (max-width: 630pt){
- .sidebar{
- top: 500px;
- width: 100%;
- }
-}
-.nodeicon{
- background-color: rgba(0,255,0,0.5);
- border: 2px solid white;
- border-radius: 10px;
- width:3px;
- height: 3px;
-}
-.nodeicon-label{
- font-size: 12px;
- font-weight: lighter;
-}
-.nodeicon-label table{
- width: 100%
-}
-.nodeicon-label table td{
- border-top:1px solid #999;
- text-align: right;
-}
-.nodeicon-label table td:first-child{
- text-align: left;
-}
-.nodeicon.offline{
- background-color: rgba(255,0,0,0.5);
-}
-.nodeicon.select{
- background-color: green;
-}
-.nodeicon.select.offline{
- background-color: red;
- border-color: black;
-}
-.nodeicon.client24{
- border-left: 3px solid blue;
-}
-.nodeicon.client5{
- border-right: 3px solid blue;
-}
-.nodeicon.client24-warn{
- border-left: 3px solid yellow;
-}
-.nodeicon.client5-warn{
- border-right: 3px solid yellow;
-}
-.nodeicon.client24-crit{
- border-left: 3px solid red;
-}
-.nodeicon.client5-crit{
- border-right: 3px solid red;
-}
diff --git a/css/table.css b/css/table.css
new file mode 100644
index 0000000..acd7e24
--- /dev/null
+++ b/css/table.css
@@ -0,0 +1,55 @@
+table{
+ border-collapse: collapse;
+}
+table.table{
+ width: 100%;
+}
+.table th, .table td{
+ padding: 8px;
+ border-bottom: 1px solid #ddd;
+}
+.table td{
+ text-align: right;
+}
+.table td.text{
+ text-align: left;
+}
+.table tr:nth-child(even){
+ background-color: rgba(242, 242, 242, 0.4);;
+}
+.table th{
+ background-color: #dc0067;
+ background:-webkit-gradient(linear, left top, left bottom, from(#dc0067), to(#dc0050));
+ background:-moz-linear-gradient(top, #dc0067, #dc0050);
+ color: white;
+}
+.table small{
+ display: block;
+}
+.table i.icon{
+ margin-right: 15px;
+}
+.table td.split span{
+ display: block;
+}
+.table .sort-header:after{
+ float:right;
+ font-family: FontAwesome;
+ font-size: 1em;
+ visibility: hidden;
+ opacity: 0.6;
+ content: '\f0dc';
+}
+.table .sort-up:after, .table .sort-down:after{
+ visibility: visible;
+}
+.table .sort-header:hover:after{
+ visibility: visible;
+ opacity: 0.8;
+}
+.table .sort-up:after{
+ content: '\f0de';
+}
+.table .sort-down:after{
+ content: '\f0dd';
+}
diff --git a/index.html b/index.html
index 64c2048..c39a471 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,12 @@
-
+
+
+
+
+
+
diff --git a/js/app.js b/js/app.js
index 3d20605..d8087e2 100644
--- a/js/app.js
+++ b/js/app.js
@@ -4,6 +4,8 @@ require.config({
"leaflet": "../bower_components/leaflet/dist/leaflet",
"leaflet.label": "../bower_components/Leaflet.label/dist/leaflet.label",
"moment": "../bower_components/moment/min/moment-with-locales.min",
+ "tablesort": "../bower_components/tablesort/tablesort.min",
+ "tablesort.numeric": "../bower_components/tablesort/src/sorts/tablesort.numeric"
},
shim: {
}
diff --git a/js/controller/aliases.js b/js/controller/aliases.js
index cc6ae9c..78dfaa2 100644
--- a/js/controller/aliases.js
+++ b/js/controller/aliases.js
@@ -1,53 +1,95 @@
-define(function(){
+define(["tablesort", "tablesort.numeric"],function(){
var data;
return function(el,map){
var title = document.createElement("h1"),
table = document.createElement("table"),
thead = document.createElement("thead"),
- tbody = document.createElement("tbody");
+ tbody = document.createElement("tbody"),
+ sort;
title.textContent = "Undone Changes";
table.appendChild(thead);
table.appendChild(tbody);
table.classList.add("table");
- thead.innerHTML = "| Node | Freq | Channel | Power | Location |
|---|
";
+ thead.innerHTML = "| Node | Freq | Channel | Power | Location |
|---|
";
+ console.log(Tablesort);
+
+ var toChangeIcon = function(el){
+ var icon = document.createElement("i");
+ icon.classList.add("icon");
+ icon.textContent = "\uf096";
+ el.appendChild(icon);
+ };
var row = function(nodeid,alias,node){
- var icon,td,
+ var icon,td,split1,split2,text,
tr = document.createElement("tr");
//Node
td = document.createElement("td");
td.classList.add("text");
if(alias.hostname && alias.hostname != node.nodeinfo.hostname){
- icon = document.createElement("i");
- icon.classList.add("icon");
- icon.textContent = "\uf096";
- td.appendChild(icon);
+ toChangeIcon(td);
}
td.appendChild(document.createTextNode((alias.hostname)?alias.hostname:node.nodeinfo.hostname));
- var textNodeID = document.createElement("small");
- textNodeID.textContent = nodeid;
- td.appendChild(textNodeID);
+ text = document.createElement("small");
+ text.textContent = nodeid;
+ td.appendChild(text);
tr.appendChild(td);
td = document.createElement("td");
td.classList.add("split");
- var freq24 = document.createTextNode("2.4 Ghz");
- var freq5 = document.createTextNode("5 Ghz");
+ var freq24 = document.createElement("span");
+ freq24.textContent = "2.4 Ghz";
+ var freq5 = document.createElement("span");
+ freq5.textContent = "5 Ghz";
td.appendChild(freq24);
td.appendChild(freq5);
tr.appendChild(td);
td = document.createElement("td");
td.classList.add("split");
- var ch24 = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.channel24)?alias.wireless.channel24:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-'));
- var ch5 = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'));
- td.appendChild(ch24);
- td.appendChild(ch5);
+ split1 = document.createElement("span");
+ split2 = document.createElement("span");
+ text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.channel24)?alias.wireless.channel24:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-'));
+ if(alias && alias.wireless !== undefined && alias.wireless.channel24 &&
+ node.nodeinfo.wireless && node.nodeinfo.wireless.channel24 &&
+ alias.wireless.channel24 != node.nodeinfo.wireless.channel24){
+ toChangeIcon(text);
+ }
+ split1.appendChild(text);
+ text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'));
+ if(alias && alias.wireless !== undefined && alias.wireless.channel5 &&
+ node.nodeinfo.wireless && node.nodeinfo.wireless.channel5 &&
+ alias.wireless.channel5 != node.nodeinfo.wireless.channel5){
+ toChangeIcon(text);
+ }
+ split2.appendChild(text);
+ td.appendChild(split1);
+ td.appendChild(split2);
tr.appendChild(td);
td = document.createElement("td");
+ td.classList.add("split");
+ split1 = document.createElement("span");
+ split2 = document.createElement("span");
+
+ text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.txpower24)?alias.wireless.txpower24:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-'));
+ if(alias && alias.wireless !== undefined && alias.wireless.txpower24 &&
+ node.nodeinfo.wireless && node.nodeinfo.wireless.txpower24 &&
+ alias.wireless.txpower24 != node.nodeinfo.wireless.txpower24){
+ toChangeIcon(text);
+ }
+ split1.appendChild(text);
+ text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.txpower5)?alias.wireless.txpower5:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-'));
+ if(alias && alias.wireless !== undefined && alias.wireless.txpower5 &&
+ node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5 &&
+ alias.wireless.txpower5 != node.nodeinfo.wireless.txpower5){
+ toChangeIcon(text);
+ }
+ split2.appendChild(text);
+ td.appendChild(split1);
+ td.appendChild(split2);
tr.appendChild(td);
//Location
@@ -57,11 +99,7 @@ define(function(){
node.nodeinfo.location.latitude != alias.location.latitude &&
node.nodeinfo.location.longitude != alias.location.longitude
){
- td.classList.add("text");
- icon = document.createElement("i");
- icon.classList.add("icon");
- icon.textContent = "\uf096";
- td.appendChild(icon);
+ toChangeIcon(td);
}
td.classList.add("text");
icon = document.createElement("i");
@@ -73,9 +111,10 @@ define(function(){
};
td.appendChild(icon);
tr.appendChild(td);
-
-
tbody.appendChild(tr);
+ if(sort === undefined)
+ sort = new Tablesort(table);
+ sort.refresh();
};
var render = function() {