From 87ecc51d2d1abdcaa0657bdf94342fe7f16bb9be Mon Sep 17 00:00:00 2001 From: Martin Geno Date: Sat, 2 Jul 2016 10:23:33 +0200 Subject: [PATCH] add change table + split css-files --- build | 2 +- css/main.css | 47 +++++++++ css/map.css | 49 +++++++++ css/menu.css | 35 +++++++ css/popup.css | 18 ++++ css/sidebar.css | 28 ++++++ css/style.css | 209 --------------------------------------- css/table.css | 55 +++++++++++ index.html | 7 +- js/app.js | 2 + js/controller/aliases.js | 87 +++++++++++----- 11 files changed, 304 insertions(+), 235 deletions(-) create mode 100644 css/main.css create mode 100644 css/map.css create mode 100644 css/menu.css create mode 100644 css/popup.css create mode 100644 css/sidebar.css delete mode 100644 css/style.css create mode 100644 css/table.css 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 = "NodeFreqChannelPowerLocation"; + thead.innerHTML = "NodeFreqChannelPowerLocation"; + 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() {