Init
This commit is contained in:
commit
45242f8aee
|
|
@ -0,0 +1,2 @@
|
|||
bower_components
|
||||
config.json
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "eventmanager",
|
||||
"authors": [
|
||||
"Martin Geno <geno+dev@fireorbit.de>"
|
||||
],
|
||||
"description": "",
|
||||
"main": "",
|
||||
"license": "MIT",
|
||||
"homepage": "",
|
||||
"private": true,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"material-design-lite": "^1.1.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"api":"http://localhost:8080/api",
|
||||
"reload":60000,
|
||||
"map":"http://localhost:8080/meshviewer",
|
||||
"statistics":{
|
||||
"one":"http://ffhb.h.sum7.de:8080/dashboard-solo/file/Short.json?panelId=1&fullscreen&var-interval_group=60s&theme=light&from=1466165052000&var-title={{NODEID}}&var-node={{NODEID}}",
|
||||
"all":"http://ffhb.h.sum7.de:8080/dashboard-solo/file/Short.json?panelId=1&fullscreen&var-interval_group=60s&theme=light&from=1466165052000&var-title=All"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
<title>Eventmanager</title>
|
||||
|
||||
<!-- Add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
|
||||
|
||||
<!-- Add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
|
||||
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">
|
||||
|
||||
<!-- Tile icon for Win8 (144x144 + tile color) -->
|
||||
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
|
||||
<meta name="msapplication-TileColor" content="#3372DF">
|
||||
|
||||
<link rel="shortcut icon" href="https://raw.githubusercontent.com/FreifunkBremen/logo/master/notext.png">
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.pink-amber.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title"></span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<i class="material-icons">search</i>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search">
|
||||
<label class="mdl-textfield__label" for="search">Enter Node name</label>
|
||||
</div>
|
||||
</div>
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" id="refresh">
|
||||
<i class="material-icons">refresh</i>
|
||||
</label>
|
||||
</div>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<header class="logo">
|
||||
<img src="https://raw.githubusercontent.com/FreifunkBremen/logo/master/logo.png">
|
||||
</header>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="#nodes"><i class="material-icons mdl-badge mdl-badge--overlap" role="presentation" id="menu_nodes">view_list</i>Nodes</a>
|
||||
<a class="mdl-navigation__link" href="#aliases"><i class="material-icons mdl-badge mdl-badge--overlap" role="presentation" id="menu_aliases">replay</i>Undone Changes</a>
|
||||
<a class="mdl-navigation__link" href="#map"><i class="material-icons" role="presentation">map</i>Map</a>
|
||||
<a class="mdl-navigation__link" href="#statistics"><i class="material-icons" role="presentation">trending_up</i>Statistic</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content mdl-color--grey-100">
|
||||
<div class="mdl-grid demo-content" id="container">
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div id="toast" class="mdl-js-snackbar mdl-snackbar">
|
||||
<div class="mdl-snackbar__text"></div>
|
||||
<button class="mdl-snackbar__action" type="button"></button>
|
||||
</div>
|
||||
<script src="bower_components/material-design-lite/material.min.js"></script>
|
||||
<script src="lib/store.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
function get(url) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
var req = new XMLHttpRequest();
|
||||
req.open('GET', url);
|
||||
|
||||
req.onload = function() {
|
||||
if (req.status == 200) {
|
||||
resolve(req.response);
|
||||
}
|
||||
else {
|
||||
reject(Error(req.statusText));
|
||||
}
|
||||
};
|
||||
|
||||
req.onerror = function() {
|
||||
reject(Error("Network Error"));
|
||||
};
|
||||
|
||||
req.send();
|
||||
}).then(JSON.parse);
|
||||
}
|
||||
function localStorageTest() {
|
||||
var test = 'test'
|
||||
try {
|
||||
localStorage.setItem(test, test)
|
||||
localStorage.removeItem(test)
|
||||
return true
|
||||
} catch(e) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
var internal = {
|
||||
config:{},
|
||||
nodes:{},
|
||||
aliases:{},
|
||||
tmp:{
|
||||
aliases_count: 0,
|
||||
nodes_count: 0
|
||||
}
|
||||
}
|
||||
//var toast = document.querySelector('#toast');
|
||||
var toast = document.getElementById("toast")
|
||||
var container = document.getElementById("container")
|
||||
var refreshButton = document.getElementById("refresh")
|
||||
var menuNodes = document.getElementById("menu_nodes")
|
||||
var menuAliases = document.getElementById("menu_aliases")
|
||||
|
||||
|
||||
function notify(key){
|
||||
toast.MaterialSnackbar.showSnackbar({
|
||||
message:"New Nodes with nodeid '"+key+"'!",
|
||||
actionHandler: function(event) {
|
||||
console.log(event)
|
||||
},
|
||||
actionText: 'Edit',
|
||||
timeout: 3000
|
||||
});
|
||||
}
|
||||
function update(){
|
||||
get(internal.config.api+"/aliases").then(function(data){
|
||||
internal.aliases = data
|
||||
menuAliases.setAttribute("data-badge",Object.keys(internal.aliases).length)
|
||||
})
|
||||
get(internal.config.api+"/nodes").then(function(data){
|
||||
Object.keys(data).map(function(key){
|
||||
if(typeof internal.nodes[key]=='undefined'){
|
||||
notify(key)
|
||||
}
|
||||
internal.nodes[key] = data[key]
|
||||
})
|
||||
menuNodes.setAttribute("data-badge",Object.keys(internal.nodes).length)
|
||||
})
|
||||
localStorage.setItem("nodes",JSON.stringify(internal.nodes))
|
||||
localStorage.setItem("aliases",JSON.stringify(internal.aliases))
|
||||
}
|
||||
|
||||
|
||||
|
||||
function routeNodes(){
|
||||
fill = '<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width:100%">'
|
||||
+ '<thead>'
|
||||
+ '<tr>'
|
||||
+ '<th class="mdl-data-table__cell--non-numeric">Hostname</th>'
|
||||
+ '<th>Clients</th>'
|
||||
+ '<th>Ports</th>'
|
||||
+ '<th>2.4 Ghz</th>'
|
||||
+ '<th>5 Ghz</th>'
|
||||
+ '<th>Location</th>'
|
||||
+ '<th>SSH</th>'
|
||||
+ '</tr>'
|
||||
+ '</thead>'
|
||||
+ '<tbody>'
|
||||
Object.keys(internal.nodes).map(function(key){
|
||||
fill += '<tr>'
|
||||
+ '<td class="mdl-data-table__cell--non-numeric">'
|
||||
+ '<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty">'
|
||||
+ '<input class="mdl-textfield__input" type="text" id="hostname_'+key+'" value="'+internal.nodes[key].nodeinfo.hostname+'"/>'
|
||||
+ '<label class="mdl-textfield__label" for="hostname_'+key+'">'+key+'</label>'
|
||||
+ '</div>'
|
||||
+ '</td>'
|
||||
+ '<td>'
|
||||
+ '2.4 Ghz: '+internal.nodes[key].statistics.clients.wifi24
|
||||
+ '<br/>'
|
||||
+ '5 Ghz: '+internal.nodes[key].statistics.clients.wifi5
|
||||
+ '</td>'
|
||||
+ '<td>100%</td>'
|
||||
+ '<td>'
|
||||
+ 'Ch: '+((internal.nodes[key].nodeinfo.settings !== undefined)?internal.nodes[key].nodeinfo.settings.freq24.channel:'-')
|
||||
+ '<br/>'
|
||||
+ 'Tx: '+((internal.nodes[key].nodeinfo.settings !== undefined)?internal.nodes[key].nodeinfo.settings.freq24.txpower:'-')
|
||||
+ '</td>'
|
||||
+ '<td>'
|
||||
+ 'Ch: '+((internal.nodes[key].nodeinfo.settings !== undefined)?internal.nodes[key].nodeinfo.settings.freq5.channel:'-')
|
||||
+ '<br/>'
|
||||
+ 'TX: '+((internal.nodes[key].nodeinfo.settings !== undefined)?internal.nodes[key].nodeinfo.settings.freq5.txpower:'-')
|
||||
+ '</td>'
|
||||
+ '<td class="mdl-data-table__cell--non-numeric"><i class="material-icons">location</i></td>'
|
||||
+ '<td>SSH</td>'
|
||||
+ '</tr>'
|
||||
})
|
||||
fill += '</tbody></table>'
|
||||
container.innerHTML = fill
|
||||
}
|
||||
function routeAliases(){
|
||||
fill = '<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width:100%">'
|
||||
+ '<thead>'
|
||||
+ '<tr>'
|
||||
+ '<th class="mdl-data-table__cell--non-numeric">Hostname</th>'
|
||||
+ '<th class="mdl-data-table__cell--non-numeric">Location</th>'
|
||||
+ '<th>2.4 Ghz</th>'
|
||||
+ '<th>5 Ghz</th>'
|
||||
+ '</tr>'
|
||||
+ '</thead>'
|
||||
+ '<tbody>'
|
||||
Object.keys(internal.aliases).map(function(key){
|
||||
fill += '<tr>'
|
||||
+ '<td class="mdl-data-table__cell--non-numeric">'
|
||||
+ internal.aliases[key].hostname
|
||||
+ '<br/>'
|
||||
+ '<small>'+key+'</small>'
|
||||
+ '</td>'
|
||||
+ '<td class="mdl-data-table__cell--non-numeric"><i class="material-icons">location</i></td>'
|
||||
+ '<td>'
|
||||
+ 'Ch: '+((internal.aliases[key].freq24 !== undefined)?internal.aliases[key].freq24.channel:'-')
|
||||
+ '<br/>'
|
||||
+ 'Tx: '+((internal.aliases[key].freq24 !== undefined)?internal.aliases[key].freq24.txpower:'-')
|
||||
+ '</td>'
|
||||
+ '<td>'
|
||||
+ 'Ch: '+((internal.aliases[key].freq5 !== undefined)?internal.aliases[key].freq5.channel:'-')
|
||||
+ '<br/>'
|
||||
+ 'TX: '+((internal.aliases[key].freq5 !== undefined)?internal.aliases[key].freq5.txpower:'-')
|
||||
+ '</td>'
|
||||
+ '</tr>'
|
||||
})
|
||||
fill += '</tbody></table>'
|
||||
container.innerHTML = fill
|
||||
}
|
||||
function routeMap(){
|
||||
container.innerHTML = "<iframe src="+internal.config.map+"/>"
|
||||
}
|
||||
function routeStatistic(){
|
||||
container.innerHTML = "<iframe src="+internal.config.statistics.all+"/>"
|
||||
}
|
||||
function route(){
|
||||
if (location.hash === "#aliases") {
|
||||
routeAliases()
|
||||
}else if (location.hash === "#map") {
|
||||
routeMap()
|
||||
}else if (location.hash === "#statistics") {
|
||||
routeStatistic()
|
||||
}else{
|
||||
routeNodes()
|
||||
}
|
||||
}
|
||||
refreshButton.addEventListener('click', update)
|
||||
window.addEventListener("hashchange",route)
|
||||
|
||||
get("config.json").then(function(config){
|
||||
internal.config = config
|
||||
if(localStorageTest()){
|
||||
internal.nodes = JSON.parse(localStorage.getItem("nodes"))
|
||||
internal.aliases = JSON.parse(localStorage.getItem("aliases"))
|
||||
if(!internal.nodes){
|
||||
get(internal.config.api+"/nodes").then(function(data){
|
||||
internal.nodes = data
|
||||
})
|
||||
}
|
||||
if(!internal.aliases){
|
||||
get(internal.config.api+"/aliases").then(function(data){
|
||||
internal.aliases = data
|
||||
})
|
||||
}
|
||||
}
|
||||
menuAliases.setAttribute("data-badge",Object.keys(internal.aliases).length)
|
||||
menuNodes.setAttribute("data-badge",Object.keys(internal.nodes).length)
|
||||
setInterval(function () {
|
||||
update()
|
||||
}, config.reload);
|
||||
route()
|
||||
})
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
html, body {
|
||||
font-family: 'Roboto', 'Helvetica', sans-serif;
|
||||
}
|
||||
header.logo {
|
||||
text-align: center;
|
||||
}
|
||||
header.logo img{
|
||||
margin-top: 10px;
|
||||
width:75%;
|
||||
}
|
||||
|
||||
container > iframe{
|
||||
border: 0 solid #000;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
Loading…
Reference in New Issue