Compare commits

..

14 commits

Author SHA1 Message Date
Alexander d70d3d7c5f Add Node.js LTS version in travis.yml (#105) 2019-02-01 06:52:56 +01:00
Milan Pässler fe17e32886 fix: roboto and ionicons 2019-01-26 04:55:33 +01:00
Milan Pässler 420be21fa5 add version number 2019-01-24 00:26:00 +01:00
Milan Pässler a971dcfeed update installation instructions 2019-01-20 20:21:17 +01:00
Milan Pässler 0a05523dd1 remove bower and jshashes 2019-01-20 18:15:14 +01:00
Milan Pässler f416c33498 fix(travis): update nodejs, build process 2019-01-20 15:18:59 +01:00
Milan Pässler 93e0a9c758 update deps, fix build with node v10 2019-01-20 15:08:12 +01:00
anoy d231cbd5bc
Merge pull request #102 from jjx-/master
Updated DOP-NRW WMS URL
2018-08-25 18:24:55 +02:00
JJX 11368e60de
Updated DOP-NRW WMS URL
Der alte WMS Dienst für Luftbilder des Landes wird in Kürze abgeschaltet, dies ist der Neue.
2018-08-24 11:40:27 +02:00
PetaByteBoy // Milan Pässler 587740af80 change map layers in default config 2017-04-12 02:22:47 +02:00
Simon Wüllhorst 1235d8cb46 lib/map: support wms layers. (#89) 2017-04-12 01:56:05 +02:00
Andreas Ziegler 100268f3b7 change links to new upstream project name in readme & about box (#91) 2017-04-02 16:13:05 +02:00
Milan Pässler 35589eabef fix html indention 2017-03-16 23:08:49 +01:00
H4ndl3 8f7c63bbce add loading animation
Create _loader.scss

Update main.scss

Update _base.scss

Update gui.js

Update index.html

removed trailing spaces

removed trailing white spaces for real
2017-03-16 19:54:57 +01:00
57 changed files with 6750 additions and 4037 deletions

View file

@ -11,6 +11,6 @@ trim_trailing_whitespace = true
end_of_line = lf
insert_final_newline = true
[*.{js,html,scss,json,yml,md}]
[*.{js,html,scss,json}]
indent_size = 2
indent_style = space

View file

@ -1,8 +0,0 @@
---
"extends":
- "defaults/configurations/eslint"
rules:
"semi": ["error", "always"]
"no-undef": 0
"no-console": ["error", { allow: ["warn", "error"] }]

1
.gitignore vendored
View file

@ -3,4 +3,3 @@ node_modules/
build/
.sass-cache/
config.json
.idea/

View file

@ -1,8 +1,7 @@
language: node_js
node_js: node
before_install:
- gem install sass
- npm install -g grunt-cli
node_js:
- "lts/*"
- "node"
install:
- npm install
script: grunt
- yarn
script: node_modules/.bin/grunt

View file

@ -1,11 +1,24 @@
module.exports = function (grunt) {
"use strict";
grunt.loadNpmTasks("grunt-git-describe")
grunt.loadTasks("tasks");
grunt.initConfig({
"git-describe": {
options: {},
default: {}
}
})
grunt.registerTask("default", ["bower-install-simple", "lint", "copy", "sass", "postcss", "requirejs:default", "inline"]);
grunt.registerTask("lint", ["eslint"]);
grunt.registerTask("dev", ["bower-install-simple", "lint", "copy", "sass", "requirejs:dev"]);
grunt.registerTask("serve", ["dev", "connect:server", "watch"]);
};
grunt.registerTask("saveRevision", function() {
grunt.event.once("git-describe", function (rev) {
grunt.option("gitRevision", rev)
})
grunt.task.run("git-describe")
})
grunt.loadTasks("tasks")
grunt.registerTask("default", ["lint", "saveRevision", "copy", "sass", "postcss", "requirejs"])
grunt.registerTask("lint", ["eslint"])
grunt.registerTask("dev", ["default", "connect:server", "watch"])
}

View file

@ -1,8 +1,8 @@
[![Build Status](https://travis-ci.org/plumpudding/hopglass.svg?branch=master)](https://travis-ci.org/plumpudding/hopglass)
[![Build Status](https://travis-ci.org/hopglass/hopglass.svg?branch=master)](https://travis-ci.org/hopglass/hopglass)
# HopGlass
HopGlass is a frontend for the [HopGlass Server](https://github.com/plumpudding/hopglass-server).
HopGlass is a frontend for the [HopGlass Server](https://github.com/hopglass/hopglass-server).
# Screenshots
@ -14,29 +14,32 @@ HopGlass is a frontend for the [HopGlass Server](https://github.com/plumpudding/
# Dependencies
- npm
- bower
- grunt-cli
- Sass (>= 3.2)
- NodeJS
- yarn (recommended) or npm
# Installing dependencies
Install npm package-manager. On Debian-like systems run:
sudo apt-get install npm
sudo apt-get install nodejs
On Mac you have to install only npm via brew and sass
**Note:** The official Debian packages for NodeJS are quite old, you might want to check at [NodeSource](https://github.com/nodesource/distributions/blob/master/README.md) for current binaries installable with your distribution's package manager.
On Mac you can install nodejs and yarn via brew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node
npm install node-sass
brew install yarn
On Arch Linux you can install nodejs and yarn via pacman:
sudo pacman -S nodejs yarn
Execute these commands on your server as a normal user to prepare the dependencies:
git clone https://github.com/plumpudding/hopglass
git clone https://github.com/hopglass/hopglass
cd hopglass
npm install
npm install grunt-cli
yarn install # or `npm install`
# Building
@ -46,17 +49,13 @@ Just run the following command from the hopglass directory:
This will generate `build/` containing all required files.
## Development
Use `grunt serve` for development.
# Configure
Copy `config.json.example` to `build/config.json` and change it to match your community.
## dataPath (string/array)
`dataPath` can be either a string containing the address of a [HopGlass Server](https://github.com/plumpudding/hopglass-server) or an array containing multiple addresses.
`dataPath` can be either a string containing the address of a [HopGlass Server](https://github.com/hopglass/hopglass-server) or an array containing multiple addresses.
Don't forget the trailing slash!
Also, proxying the data through a webserver will allow GZip and thus will greatly reduce bandwidth consumption.
It may help with firewall problems too.

44
app.js
View file

@ -1,30 +1,36 @@
"use strict";
require.config({
baseUrl: "lib",
paths: {
"leaflet": "../bower_components/leaflet/dist/leaflet",
"leaflet.label": "../bower_components/Leaflet.label/dist/leaflet.label",
"leaflet.providers": "../bower_components/leaflet-providers/leaflet-providers",
"chroma-js": "../bower_components/chroma-js/chroma.min",
"moment": "../bower_components/moment/min/moment.min",
"moment.de": "../bower_components/moment/locale/de",
"tablesort": "../bower_components/tablesort/src/tablesort",
"d3": "../bower_components/d3/d3.min",
"virtual-dom": "../bower_components/virtual-dom/dist/virtual-dom",
"rbush": "../bower_components/rbush/rbush",
"helper": "utils/helper"
"leaflet": "../node_modules/leaflet/dist/leaflet",
"leaflet.label": "../node_modules/leaflet-label/dist/leaflet.label",
"leaflet.providers": "../node_modules/leaflet-providers/leaflet-providers",
"chroma-js": "../node_modules/chroma-js/chroma.min",
"moment": "../node_modules/moment/min/moment-with-locales.min",
"tablesort": "../node_modules/tablesort/tablesort.min",
"tablesort.numeric": "../node_modules/tablesort/src/sorts/tablesort.numeric",
"d3": "../node_modules/d3/d3.min",
"numeral": "../node_modules/numeraljs/min/numeral.min",
"numeral-intl": "../node_modules/numeraljs/min/languages.min",
"virtual-dom": "../node_modules/virtual-dom/dist/virtual-dom",
"rbush": "../node_modules/rbush/rbush",
"helper": "../helper",
"jshashes": "../node_modules/jshashes/hashes"
},
shim: {
"leaflet.label": ["leaflet"],
"leaflet.providers": ["leaflet"],
"moment.de": ["moment"],
"tablesort": {
exports: "Tablesort"
}
},
"numeral-intl": {
deps: ["numeral"],
exports: "numeral"
},
"tablesort.numeric": ["tablesort"],
"helper": ["numeral-intl"]
}
});
})
require(["main", "helper"], function (main, helper) {
helper.getJSON("config.json").then(main);
});
require(["main", "helper"], function (main) {
getJSON("config.json").then(main)
})

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -1,96 +0,0 @@
@font-face {
font-family: "Ionicons";
src: url("fonts/icon.woff2") format("woff2"),
url("fonts/icon.woff") format("woff"),
url("fonts/icon.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
[class^="ion-"]:before,
[class*=" ion-"]:before, .ion-inside {
display: inline-block;
font-family: "ionicons" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ion-android-add:before {
content: "\f2c7";
}
.ion-chevron-left:before {
content: "\f124";
}
.ion-chevron-right:before {
content: "\f125";
}
.ion-pin:before {
content: "\f3a3";
}
.ion-wifi:before {
content: "\f25c";
}
.ion-eye:before {
content: "\f133";
}
.ion-ios-arrow-thin-left:before {
content: "\f3d5";
}
.ion-ios-arrow-thin-right:before {
content: "\f3d6";
}
.ion-arrow-up-b:before {
content: "\f10d";
}
.ion-arrow-down-b:before {
content: "\f104";
}
.ion-android-locate:before {
content: "\f2e9";
}
.ion-android-close:before {
content: "\f2d7";
}
.ion-android-lock:before {
content: "\f392";
}
.ion-ios-copy:before {
content: "\f41c";
}
.ion-location:before {
content: "\f456";
}
.ion-android-remove:before {
content: "\f2f4";
}
.ion-ios-person:before {
content: "\f47e";
}
.ion-layer:before {
content: "\f229";
}

View file

@ -1,32 +0,0 @@
{
"name": "hopglass",
"ignore": [
"node_modules",
"bower_components",
"**/.*",
"test",
"tests"
],
"dependencies": {
"Leaflet.label": "~0.2.1",
"chroma-js": "~1.1.1",
"leaflet": "~0.7.7",
"moment": "~2.13.0",
"requirejs": "~2.2.0",
"tablesort": "https://github.com/tristen/tablesort.git#v4.0.1",
"roboto-slab-fontface": "*",
"es6-shim": "~0.35.1",
"almond": "~0.3.2",
"d3": "~3.5.17",
"roboto-fontface": "~0.4.5",
"virtual-dom": "~2.1.1",
"leaflet-providers": "~1.1.10",
"rbush": "https://github.com/mourner/rbush.git#~1.4.3"
},
"authors": [
"Milan Pässler <me@petabyteboy.de>",
"Nils Schneider <nils@nilsschneider.net>"
],
"license": "AGPL3",
"private": true
}

9
build.js Normal file
View file

@ -0,0 +1,9 @@
({
baseUrl: "lib",
name: "../node_modules/almond/almond",
mainConfigFile: "app.js",
include: "../app",
wrap: true,
optimize: "uglify",
out: "app-combined.js"
})

View file

@ -5,11 +5,25 @@
"showContact": true,
"maxAge": 14,
"mapLayers": [
{ "name": "CartoDB",
"url": "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
"config": {
"maxZoom": 18,
"attribution": "&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>, &copy; | <a href=\"https://carto.com/attribution\">CARTO</a>"
}
},
{
"name": "OpenStreetMap.HOT"
},
{
"name": "Stamen.TonerLite"
"name": "Luftbilder NRW",
"url": "https://www.wms.nrw.de/geobasis/wms_nw_dop?",
"config": {
"maxZoom": 20,
"attribution": "<a href=\"http://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html\">DOP20</a>, Land NRW (2017), Datenlizenz Deutschland - Namensnennung - Version 2.0 (<a href=\"https://www.govdata.de/dl-de/by-2-0\">www.govdata.de/dl-de/by-2-0</a>)",
"format": "image/jpeg",
"layers": "nw_dop_rgb"
}
}
],
"nodeInfos": [

249
helper.js
View file

@ -1,241 +1,228 @@
function get(url) {
return new Promise(function (resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url);
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest()
req.open('GET', url)
req.onload = function () {
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
resolve(req.response)
}
else {
reject(Error(req.statusText));
reject(Error(req.statusText))
}
};
}
req.onerror = function () {
reject(Error("Network Error"));
};
req.onerror = function() {
reject(Error("Network Error"))
}
req.send();
});
req.send()
})
}
function getJSON(url) {
return get(url).then(JSON.parse);
return get(url).then(JSON.parse)
}
function sortByKey(key, d) {
return d.slice().sort(function (a, b) {
return a[key] - b[key];
}).reverse();
return d.slice().sort( function (a, b) {
return a[key] - b[key]
}).reverse()
}
function limit(key, m, d) {
return d.filter(function (d) {
return d[key].isAfter(m);
});
return d.filter( function (d) {
return d[key].isAfter(m)
})
}
function sum(a) {
return a.reduce(function (a, b) {
return a + b;
}, 0);
return a.reduce( function (a, b) {
return a + b
}, 0)
}
function one() {
return 1;
return 1
}
function trueDefault(d) {
return d === undefined ? true : d;
return d === undefined ? true : d
}
function dictGet(dict, key) {
var k = key.shift();
var k = key.shift()
if (!(k in dict)) {
return null;
}
if (!(k in dict))
return null
if (key.length == 0) {
return dict[k];
}
if (key.length == 0)
return dict[k]
return dictGet(dict[k], key);
return dictGet(dict[k], key)
}
function localStorageTest() {
var test = 'test';
var test = 'test'
try {
localStorage.setItem(test, test);
localStorage.removeItem(test);
return true;
} catch (e) {
return false;
localStorage.setItem(test, test)
localStorage.removeItem(test)
return true
} catch(e) {
return false
}
}
function listReplace(s, subst) {
for (key in subst) {
var re = new RegExp(key, 'g');
s = s.replace(re, subst[key]);
var re = new RegExp(key, 'g')
s = s.replace(re, subst[key])
}
return s;
return s
}
/* Helpers working with nodes */
function offline(d) {
return !d.flags.online;
return !d.flags.online
}
function online(d) {
return d.flags.online;
return d.flags.online
}
function has_location(d) {
return "location" in d.nodeinfo &&
Math.abs(d.nodeinfo.location.latitude) < 90 &&
Math.abs(d.nodeinfo.location.longitude) < 180;
Math.abs(d.nodeinfo.location.latitude) < 90 &&
Math.abs(d.nodeinfo.location.longitude) < 180
}
function subtract(a, b) {
var ids = {};
var ids = {}
b.forEach(function (d) {
ids[d.nodeinfo.node_id] = true;
});
b.forEach( function (d) {
ids[d.nodeinfo.node_id] = true
})
return a.filter(function (d) {
return !(d.nodeinfo.node_id in ids);
});
return a.filter( function (d) {
return !(d.nodeinfo.node_id in ids)
})
}
/* Helpers working with links */
function showDistance(d) {
if (isNaN(d.distance)) {
return;
}
if (isNaN(d.distance))
return
return d.distance.toFixed(0) + " m"
return numeral(d.distance).format("0,0") + " m"
}
function showTq(d) {
return (1 / d.tq * 100).toFixed(0) + "%"
return numeral(1/d.tq).format("0%")
}
/* Infobox stuff (XXX: move to module) */
function attributeEntry(el, label, value) {
if (value === null || value == undefined) {
return;
if (value === null || value == undefined)
return
var tr = document.createElement("tr")
var th = document.createElement("th")
if (typeof label === "string")
th.textContent = label
else {
th.appendChild(label)
tr.className = "routerpic"
}
var tr = document.createElement("tr");
var th = document.createElement("th");
if (typeof label === "string") {
th.textContent = label;
} else {
th.appendChild(label);
tr.className = "routerpic";
}
tr.appendChild(th)
tr.appendChild(th);
var td = document.createElement("td")
var td = document.createElement("td");
if (typeof value == "function")
value(td)
else
td.appendChild(document.createTextNode(value))
if (typeof value == "function") {
value(td);
} else {
td.appendChild(document.createTextNode(value));
}
tr.appendChild(td)
tr.appendChild(td);
el.appendChild(tr)
el.appendChild(tr);
return td;
return td
}
function createIframe(opt, width, height) {
el = document.createElement("iframe");
width = typeof width !== 'undefined' ? width : '100%';
height = typeof height !== 'undefined' ? height : '350px';
el = document.createElement("iframe")
width = typeof width !== 'undefined' ? width : '100%'
height = typeof height !== 'undefined' ? height : '350px'
if (opt.src) {
el.src = opt.src;
} else {
el.src = opt;
}
if (opt.src)
el.src = opt.src
else
el.src = opt
if (opt.frameBorder) {
el.frameBorder = opt.frameBorder;
} else {
el.frameBorder = 1;
}
if (opt.frameBorder)
el.frameBorder = opt.frameBorder
else
el.frameBorder = 1
if (opt.width) {
el.width = opt.width;
} else {
el.width = width;
}
if (opt.width)
el.width = opt.width
else
el.width = width
if (opt.height) {
el.height = opt.height;
} else {
el.height = height;
}
if (opt.height)
el.height = opt.height
else
el.height = height
el.scrolling = "no";
el.seamless = "seamless";
el.scrolling = "no"
el.seamless = "seamless"
return el;
return el
}
function showStat(o, subst) {
var content, caption;
subst = typeof subst !== 'undefined' ? subst : {};
var content, caption
subst = typeof subst !== 'undefined' ? subst : {}
if (o.thumbnail) {
content = document.createElement("img");
content.src = listReplace(o.thumbnail, subst);
content = document.createElement("img")
content.src = listReplace(o.thumbnail, subst)
}
if (o.caption) {
caption = listReplace(o.caption, subst);
caption = listReplace(o.caption, subst)
if (!content) {
content = document.createTextNode(caption);
}
if (!content)
content = document.createTextNode(caption)
}
if (o.iframe) {
content = createIframe(o.iframe, o.width, o.height);
if (o.iframe.src) {
content.src = listReplace(o.iframe.src, subst);
} else {
content.src = listReplace(o.iframe, subst);
}
content = createIframe(o.iframe, o.width, o.height)
if (o.iframe.src)
content.src = listReplace(o.iframe.src, subst)
else
content.src = listReplace(o.iframe, subst)
}
var p = document.createElement("p");
var p = document.createElement("p")
if (o.href) {
var link = document.createElement("a");
link.target = "_blank";
link.href = listReplace(o.href, subst);
link.appendChild(content);
var link = document.createElement("a")
link.target = "_blank"
link.href = listReplace(o.href, subst)
link.appendChild(content)
if (caption && o.thumbnail) {
link.title = caption;
}
if (caption && o.thumbnail)
link.title = caption
p.appendChild(link);
} else {
p.appendChild(content);
}
p.appendChild(link)
} else
p.appendChild(content)
return p;
return p
}

View file

@ -1,28 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="hopglass-icons.css?__inline=true">
<link rel="stylesheet" href="roboto-slab-fontface.css">
<link rel="stylesheet" href="roboto-fontface.css">
<link rel="stylesheet" href="style.css?__inline=true">
<script src="vendor/es6-shim/es6-shim.min.js?__inline=true"></script>
<script src="app.js"></script>
<script>
console.log("Version: #revision#");
</script>
</head>
<body>
<div class="loader">
<p>
Lade<br/>
<span class="spinner"></span><br/>
Karte &amp; Knoten...
</p>
<noscript>
<strong>JavaScript required</strong>
</noscript>
</div>
</body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/roboto-slab/roboto-slab-fontface.css">
<link rel="stylesheet" href="css/roboto/roboto-fontface.css">
<link rel="stylesheet" href="style.css">
<script src="vendor/es6-shim/es6-shim.min.js"></script>
<script src="app.js"></script>
<script>
console.log("Version: #revision#")
</script>
</head>
<body>
<div class="loader">
<p>
Lade<br />
<span class="spinner"></span><br />
Karte &amp; Knoten...
</p>
<noscript>
<strong>JavaScript required</strong>
</noscript>
</div>
</body>
</html>

View file

@ -1,27 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="bower_components/roboto-slab-fontface/roboto-slab-fontface.css">
<link rel="stylesheet" href="bower_components/roboto-fontface/roboto-fontface.css">
<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="bower_components/Leaflet.label/dist/leaflet.label.css">
<link rel="stylesheet" href="assets/icons/hopglass-icons.css">
<link rel="stylesheet" href="style.css">
<script src="bower_components/es6-shim/es6-shim.min.js"></script>
<script src="bower_components/requirejs/require.js" data-main="app"></script>
</head>
<body>
<div class="loader">
<p>
Lade<br/>
<span class="spinner"></span><br \>
Karte &amp; Knoten...
</p>
<noscript>
<strong>JavaScript required</strong>
</noscript>
</div>
</body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="node_modules/roboto-fontface/css/roboto-slab/roboto-slab-fontface.css">
<link rel="stylesheet" href="node_modules/roboto-fontface/css/roboto/roboto-fontface.css">
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="node_modules/leaflet-label/dist/leaflet.label.css">
<link rel="stylesheet" href="node_modules/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="style.css">
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/requirejs/require.js" data-main="app"></script>
</head>
<body>
</body>
</html>

View file

@ -1,40 +1,38 @@
define(function () {
"use strict";
return function () {
return function() {
this.render = function (d) {
var el = document.createElement("div");
d.appendChild(el);
var s = "<h2>Über HopGlass</h2>";
var el = document.createElement("div")
d.appendChild(el)
var s = "<h2>Über HopGlass</h2>"
s += "<p>Mit Doppelklick und Shift+Doppelklick kann man in der Karte ";
s += "auch zoomen.</p>";
s += "<p>Mit Doppelklick und Shift+Doppelklick kann man in der Karte "
s += "auch zoomen.</p>"
s += "<h3>AGPL 3</h3>";
s += "<h3>AGPL 3</h3>"
s += "<p>Copyright (C) Milan Pässler</p>";
s += "<p>Copyright (C) Nils Schneider</p>";
s += "<p>Copyright (C) Milan Pässler</p>"
s += "<p>Copyright (C) Nils Schneider</p>"
s += "<p>This program is free software: you can redistribute it and/or ";
s += "modify it under the terms of the GNU Affero General Public ";
s += "License as published by the Free Software Foundation, either ";
s += "version 3 of the License, or (at your option) any later version.</p>";
s += "<p>This program is free software: you can redistribute it and/or "
s += "modify it under the terms of the GNU Affero General Public "
s += "License as published by the Free Software Foundation, either "
s += "version 3 of the License, or (at your option) any later version.</p>"
s += "<p>This program is distributed in the hope that it will be useful, ";
s += "but WITHOUT ANY WARRANTY; without even the implied warranty of ";
s += "MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the ";
s += "GNU Affero General Public License for more details.</p>";
s += "<p>This program is distributed in the hope that it will be useful, "
s += "but WITHOUT ANY WARRANTY; without even the implied warranty of "
s += "MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the "
s += "GNU Affero General Public License for more details.</p>"
s += "<p>You should have received a copy of the GNU Affero General ";
s += "Public License along with this program. If not, see ";
s += "<a href=\"https://www.gnu.org/licenses/\">";
s += "https://www.gnu.org/licenses/</a>.</p>";
s += "<p>You should have received a copy of the GNU Affero General "
s += "Public License along with this program. If not, see "
s += "<a href=\"https://www.gnu.org/licenses/\">"
s += "https://www.gnu.org/licenses/</a>.</p>"
s += "<p>The source code is available at ";
s += "<a href=\"https://github.com/plumpudding/hopglass\">";
s += "https://github.com/plumpudding/hopglass</a>.";
s += "<p>The source code is available at "
s += "<a href=\"https://github.com/hopglass/hopglass\">"
s += "https://github.com/hopglass/hopglass</a>."
el.innerHTML = s;
};
};
});
el.innerHTML = s
}
}
})

View file

@ -1,23 +1,20 @@
define([], function () {
"use strict";
return function (tag) {
if (!tag) {
tag = "div";
}
if (!tag)
tag = "div"
var self = this;
var self = this
var container = document.createElement(tag);
var container = document.createElement(tag)
self.add = function (d) {
d.render(container);
};
d.render(container)
}
self.render = function (el) {
el.appendChild(container);
};
el.appendChild(container)
}
return self;
};
});
return self
}
})

View file

@ -1,93 +1,80 @@
define(["filters/nodefilter"], function (NodeFilter) {
"use strict";
return function () {
var targets = [];
var filterObservers = [];
var filters = [];
var filteredData;
var data;
var targets = []
var filterObservers = []
var filters = []
var filteredData
var data
function remove(d) {
targets = targets.filter(function (e) {
return d !== e;
});
targets = targets.filter( function (e) { return d !== e } )
}
function add(d) {
targets.push(d);
targets.push(d)
if (filteredData !== undefined) {
d.setData(filteredData);
}
if (filteredData !== undefined)
d.setData(filteredData)
}
function setData(d) {
data = d;
refresh();
data = d
refresh()
}
function refresh() {
if (data === undefined) {
return;
}
if (data === undefined)
return
var filter = filters.reduce(function (a, f) {
var filter = filters.reduce( function (a, f) {
return function (d) {
return a(d) && f.run(d);
};
}, function () {
return true;
});
return a(d) && f.run(d)
}
}, function () { return true })
filteredData = new NodeFilter(filter)(data);
filteredData = new NodeFilter(filter)(data)
targets.forEach(function (t) {
t.setData(filteredData);
});
targets.forEach( function (t) {
t.setData(filteredData)
})
}
function notifyObservers() {
filterObservers.forEach(function (d) {
d.filtersChanged(filters);
});
filterObservers.forEach( function (d) {
d.filtersChanged(filters)
})
}
function addFilter(d) {
filters.push(d);
notifyObservers();
d.setRefresh(refresh);
refresh();
filters.push(d)
notifyObservers()
d.setRefresh(refresh)
refresh()
}
function removeFilter(d) {
filters = filters.filter(function (e) {
return d !== e;
});
notifyObservers();
refresh();
filters = filters.filter( function (e) { return d !== e } )
notifyObservers()
refresh()
}
function watchFilters(d) {
filterObservers.push(d);
filterObservers.push(d)
d.filtersChanged(filters);
d.filtersChanged(filters)
return function () {
filterObservers = filterObservers.filter(function (e) {
return d !== e;
});
};
filterObservers = filterObservers.filter( function (e) { return d !== e })
}
}
return {
add: add,
remove: remove,
setData: setData,
addFilter: addFilter,
removeFilter: removeFilter,
watchFilters: watchFilters,
refresh: refresh
};
};
});
return { add: add,
remove: remove,
setData: setData,
addFilter: addFilter,
removeFilter: removeFilter,
watchFilters: watchFilters,
refresh: refresh
}
}
})

View file

@ -1,45 +1,40 @@
define(function () {
"use strict";
define([], function () {
return function (distributor) {
var container = document.createElement("ul");
container.classList.add("filters");
var div = document.createElement("div");
var container = document.createElement("ul")
container.classList.add("filters")
var div = document.createElement("div")
function render(el) {
el.appendChild(div);
el.appendChild(div)
}
function filtersChanged(filters) {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
while (container.firstChild)
container.removeChild(container.firstChild)
filters.forEach(function (d) {
var li = document.createElement("li");
var div = document.createElement("div");
container.appendChild(li);
li.appendChild(div);
d.render(div);
filters.forEach( function (d) {
var li = document.createElement("li")
var div = document.createElement("div")
container.appendChild(li)
li.appendChild(div)
d.render(div)
var button = document.createElement("button");
button.textContent = "";
var button = document.createElement("button")
button.textContent = ""
button.onclick = function () {
distributor.removeFilter(d);
};
li.appendChild(button);
});
distributor.removeFilter(d)
}
li.appendChild(button)
})
if (container.parentNode === div && filters.length === 0) {
div.removeChild(container);
} else if (filters.length > 0) {
div.appendChild(container);
}
if (container.parentNode === div && filters.length === 0)
div.removeChild(container)
else if (filters.length > 0)
div.appendChild(container)
}
return {
render: render,
filtersChanged: filtersChanged
};
};
});
return { render: render,
filtersChanged: filtersChanged
}
}
})

View file

@ -1,58 +1,52 @@
define(["helper"], function (helper) {
"use strict";
define([], function () {
return function (name, key, value, f) {
var negate = false;
var refresh;
var negate = false
var refresh
var label = document.createElement("label");
var strong = document.createElement("strong");
label.textContent = name + " ";
label.appendChild(strong);
var label = document.createElement("label")
var strong = document.createElement("strong")
label.textContent = name + " "
label.appendChild(strong)
function run(d) {
var o = helper.dictGet(d, key.slice(0));
var o = dictGet(d, key.slice(0))
if (f) {
o = f(o);
}
if (f)
o = f(o)
return o === value ? !negate : negate;
return o === value ? !negate : negate
}
function setRefresh(f) {
refresh = f;
refresh = f
}
function draw(el) {
if (negate) {
el.parentNode.classList.add("not");
} else {
el.parentNode.classList.remove("not");
}
if (negate)
el.parentNode.classList.add("not")
else
el.parentNode.classList.remove("not")
strong.textContent = (negate ? "¬" : "" ) + value;
strong.textContent = (negate ? "¬" : "" ) + value
}
function render(el) {
el.appendChild(label);
draw(el);
el.appendChild(label)
draw(el)
label.onclick = function () {
negate = !negate;
negate = !negate
draw(el);
draw(el)
if (refresh) {
refresh();
}
};
if (refresh)
refresh()
}
}
return {
run: run,
setRefresh: setRefresh,
render: render
};
};
});
return { run: run,
setRefresh: setRefresh,
render: render
}
}
})

View file

@ -1,38 +1,33 @@
define(function () {
"use strict";
define([], function () {
return function (filter) {
return function (data) {
var n = Object.create(data);
n.nodes = {};
var n = Object.create(data)
n.nodes = {}
for (var key in data.nodes) {
n.nodes[key] = data.nodes[key].filter(filter);
}
for (var key in data.nodes)
n.nodes[key] = data.nodes[key].filter(filter)
var filteredIds = new Set();
var filteredIds = new Set()
n.graph = {};
n.graph.nodes = data.graph.nodes.filter(function (d) {
var r;
if (d.node) {
r = filter(d.node);
} else {
r = filter({});
}
n.graph = {}
n.graph.nodes = data.graph.nodes.filter( function (d) {
var r
if (d.node)
r = filter(d.node)
else
r = filter({})
if (r) {
filteredIds.add(d.id);
}
if (r)
filteredIds.add(d.id)
return r;
});
return r
})
n.graph.links = data.graph.links.filter(function (d) {
return filteredIds.has(d.source.id) && filteredIds.has(d.target.id);
});
n.graph.links = data.graph.links.filter( function (d) {
return filteredIds.has(d.source.id) && filteredIds.has(d.target.id)
})
return n;
};
};
});
return n
}
}
})

File diff suppressed because it is too large Load diff

View file

@ -1,129 +1,125 @@
define(["chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
"legend", "linklist", "nodelist", "simplenodelist", "infobox/main",
"proportions", "forcegraph", "title", "about", "datadistributor",
"filters/filtergui"],
function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
Title, About, DataDistributor, FilterGUI) {
"use strict";
define([ "chroma-js", "map", "sidebar", "tabs", "container", "meshstats",
"legend", "linklist", "nodelist", "simplenodelist", "infobox/main",
"proportions", "forcegraph", "title", "about", "datadistributor",
"filters/filtergui" ],
function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Legend, Linklist,
Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
Title, About, DataDistributor, FilterGUI) {
return function (config, router) {
var self = this
var content
var contentDiv
return function (config, router) {
var self = this;
var content;
var contentDiv;
var linkScale = chroma.scale(chroma.interpolate.bezier(["#04C714", "#FF5500", "#F02311"])).domain([1, 5])
var sidebar
var linkScale = chroma.scale(chroma.bezier(["#04C714", "#FF5500", "#F02311"])).domain([1, 5]);
var sidebar;
var buttons = document.createElement("div")
buttons.classList.add("buttons")
var buttons = document.createElement("div");
buttons.classList.add("buttons");
var fanout = new DataDistributor()
var fanoutUnfiltered = new DataDistributor()
fanoutUnfiltered.add(fanout)
var fanout = new DataDistributor();
var fanoutUnfiltered = new DataDistributor();
fanoutUnfiltered.add(fanout);
function removeContent() {
if (!content)
return
function removeContent() {
if (!content) {
return;
}
router.removeTarget(content)
fanout.remove(content)
router.removeTarget(content);
fanout.remove(content);
content.destroy()
content.destroy();
content = null
}
content = null;
function addContent(K) {
removeContent()
content = new K(config, linkScale, sidebar.getWidth, router, buttons)
content.render(contentDiv)
fanout.add(content)
router.addTarget(content)
}
function mkView(K) {
return function () {
addContent(K)
}
}
function addContent(K) {
removeContent();
var loader = document.getElementsByClassName("loader")[0]
loader.classList.add("hide")
content = new K(config, linkScale, sidebar.getWidth, router, buttons);
content.render(contentDiv);
contentDiv = document.createElement("div")
contentDiv.classList.add("content")
document.body.appendChild(contentDiv)
fanout.add(content);
router.addTarget(content);
}
sidebar = new Sidebar(document.body)
function mkView(K) {
return function () {
addContent(K);
};
}
contentDiv.appendChild(buttons)
var loader = document.getElementsByClassName("loader")[0];
loader.classList.add("hide");
var buttonToggle = document.createElement("button")
buttonToggle.textContent = "\uF133"
buttonToggle.onclick = function () {
if (content.constructor === Map)
router.view("g")
else
router.view("m")
}
contentDiv = document.createElement("div");
contentDiv.classList.add("content");
document.body.appendChild(contentDiv);
buttons.appendChild(buttonToggle)
sidebar = new Sidebar(document.body);
var title = new Title(config)
contentDiv.appendChild(buttons);
var header = new Container("header")
var infobox = new Infobox(config, sidebar, router)
var tabs = new Tabs()
var overview = new Container()
var meshstats = new Meshstats(config)
var legend = new Legend()
var newnodeslist = new SimpleNodelist("new", "firstseen", router, "Neue Knoten")
var lostnodeslist = new SimpleNodelist("lost", "lastseen", router, "Verschwundene Knoten")
var nodelist = new Nodelist(router)
var linklist = new Linklist(linkScale, router)
var statistics = new Proportions(config, fanout)
var about = new About()
var buttonToggle = document.createElement("button");
buttonToggle.textContent = "\uF133";
buttonToggle.onclick = function () {
if (content.constructor === Map) {
router.view("g");
} else {
router.view("m");
}
};
fanoutUnfiltered.add(meshstats)
fanoutUnfiltered.add(newnodeslist)
fanoutUnfiltered.add(lostnodeslist)
fanout.add(nodelist)
fanout.add(linklist)
fanout.add(statistics)
buttons.appendChild(buttonToggle);
sidebar.add(header)
header.add(meshstats)
header.add(legend)
var title = new Title(config);
overview.add(newnodeslist)
overview.add(lostnodeslist)
var header = new Container("header");
var infobox = new Infobox(config, sidebar, router);
var tabs = new Tabs();
var overview = new Container();
var meshstats = new Meshstats(config);
var legend = new Legend();
var newnodeslist = new SimpleNodelist("new", "firstseen", router, "Neue Knoten");
var lostnodeslist = new SimpleNodelist("lost", "lastseen", router, "Verschwundene Knoten");
var nodelist = new Nodelist(router);
var linklist = new Linklist(linkScale, router);
var statistics = new Proportions(config, fanout);
var about = new About();
var filterGUI = new FilterGUI(fanout)
fanout.watchFilters(filterGUI)
header.add(filterGUI)
fanoutUnfiltered.add(meshstats);
fanoutUnfiltered.add(newnodeslist);
fanoutUnfiltered.add(lostnodeslist);
fanout.add(nodelist);
fanout.add(linklist);
fanout.add(statistics);
sidebar.add(tabs)
tabs.add("Aktuelles", overview)
tabs.add("Knoten", nodelist)
tabs.add("Verbindungen", linklist)
tabs.add("Statistiken", statistics)
tabs.add("Über", about)
sidebar.add(header);
header.add(meshstats);
header.add(legend);
router.addTarget(title)
router.addTarget(infobox)
overview.add(newnodeslist);
overview.add(lostnodeslist);
router.addView("m", mkView(Map))
router.addView("g", mkView(ForceGraph))
var filterGUI = new FilterGUI(fanout);
fanout.watchFilters(filterGUI);
header.add(filterGUI);
router.view("m")
sidebar.add(tabs);
tabs.add("Aktuelles", overview);
tabs.add("Knoten", nodelist);
tabs.add("Verbindungen", linklist);
tabs.add("Statistiken", statistics);
tabs.add("Über", about);
self.setData = fanoutUnfiltered.setData
router.addTarget(title);
router.addTarget(infobox);
router.addView("m", mkView(Map));
router.addView("g", mkView(ForceGraph));
router.view("m");
self.setData = fanoutUnfiltered.setData;
return self;
};
});
return self
}
})

View file

@ -1,52 +1,48 @@
define(["helper"], function (helper) {
"use strict";
define(function () {
function showStatImg(o, d) {
var subst = {};
subst["{SOURCE}"] = d.source.node_id;
subst["{SOURCE_NAME}"] = d.source.node.nodeinfo.hostname ? d.source.node.nodeinfo.hostname : "unknown";
subst["{TARGET}"] = d.target.node_id;
subst["{TARGET_NAME}"] = d.target.node.nodeinfo.hostname ? d.target.node.nodeinfo.hostname : "unknown";
return helper.showStat(o, subst);
var subst = {}
subst["{SOURCE}"] = d.source.node_id
subst["{SOURCE_NAME}"] = d.source.node.nodeinfo.hostname ? d.source.node.nodeinfo.hostname : "unknown"
subst["{TARGET}"] = d.target.node_id
subst["{TARGET_NAME}"] = d.target.node.nodeinfo.hostname ? d.target.node.nodeinfo.hostname : "unknown"
return showStat(o, subst)
}
return function (config, el, router, d) {
var unknown = !(d.source.node);
var h2 = document.createElement("h2");
var a1 = document.createElement("a");
var unknown = !(d.source.node)
var h2 = document.createElement("h2")
var a1 = document.createElement("a")
if (!unknown) {
a1.href = "#";
a1.onclick = router.node(d.source.node);
a1.href = "#"
a1.onclick = router.node(d.source.node)
}
a1.textContent = unknown ? d.source.id : d.source.node.nodeinfo.hostname;
h2.appendChild(a1);
h2.appendChild(document.createTextNode(" \uF3D6 "));
h2.className = "ion-inside";
var a2 = document.createElement("a");
a2.href = "#";
a2.onclick = router.node(d.target.node);
a2.textContent = d.target.node.nodeinfo.hostname;
h2.appendChild(a2);
el.appendChild(h2);
a1.textContent = unknown ? d.source.id : d.source.node.nodeinfo.hostname
h2.appendChild(a1)
h2.appendChild(document.createTextNode(" → "))
var a2 = document.createElement("a")
a2.href = "#"
a2.onclick = router.node(d.target.node)
a2.textContent = d.target.node.nodeinfo.hostname
h2.appendChild(a2)
el.appendChild(h2)
var attributes = document.createElement("table");
attributes.classList.add("attributes");
var attributes = document.createElement("table")
attributes.classList.add("attributes")
helper.attributeEntry(attributes, "TQ", helper.showTq(d));
helper.attributeEntry(attributes, "Entfernung", helper.showDistance(d));
helper.attributeEntry(attributes, "Typ", d.type);
var hw1 = unknown ? null : helper.dictGet(d.source.node.nodeinfo, ["hardware", "model"]);
var hw2 = helper.dictGet(d.target.node.nodeinfo, ["hardware", "model"]);
helper.attributeEntry(attributes, "Hardware", (hw1 != null ? hw1 : "unbekannt") + " " + (hw2 != null ? hw2 : "unbekannt"));
el.appendChild(attributes);
attributeEntry(attributes, "TQ", showTq(d))
attributeEntry(attributes, "Entfernung", showDistance(d))
attributeEntry(attributes, "Typ", d.type)
var hw1 = unknown ? null : dictGet(d.source.node.nodeinfo, ["hardware", "model"])
var hw2 = dictGet(d.target.node.nodeinfo, ["hardware", "model"])
attributeEntry(attributes, "Hardware", (hw1 != null ? hw1 : "unbekannt") + " " + (hw2 != null ? hw2 : "unbekannt"))
el.appendChild(attributes)
if (config.linkInfos) {
config.linkInfos.forEach(function (linkInfo) {
var h4 = document.createElement("h4");
h4.textContent = linkInfo.name;
el.appendChild(h4);
el.appendChild(showStatImg(linkInfo, d));
});
}
};
});
if (config.linkInfos)
config.linkInfos.forEach( function (linkInfo) {
var h4 = document.createElement("h4")
h4.textContent = linkInfo.name
el.appendChild(h4)
el.appendChild(showStatImg(linkInfo, d))
})
}
})

View file

@ -1,105 +1,100 @@
define(["helper"], function (helper) {
"use strict";
define(function () {
return function (config, el, router, d) {
var sidebarTitle = document.createElement("h2");
sidebarTitle.textContent = "Location: " + d.toString();
el.appendChild(sidebarTitle);
var sidebarTitle = document.createElement("h2")
sidebarTitle.textContent = "Location: " + d.toString()
el.appendChild(sidebarTitle)
helper.getJSON("https://nominatim.openstreetmap.org/reverse?format=json&lat=" + d.lat + "&lon=" + d.lng + "&zoom=18&addressdetails=0")
.then(function (result) {
if (result.display_name) {
sidebarTitle.textContent = result.display_name;
}
});
getJSON("https://nominatim.openstreetmap.org/reverse?format=json&lat=" + d.lat + "&lon=" + d.lng + "&zoom=18&addressdetails=0")
.then(function(result) {
if(result.display_name)
sidebarTitle.textContent = result.display_name
})
var editLat = document.createElement("input");
editLat.type = "text";
editLat.value = d.lat.toFixed(9);
el.appendChild(createBox("lat", "Breitengrad", editLat));
var editLat = document.createElement("input")
editLat.type = "text"
editLat.value = d.lat.toFixed(9)
el.appendChild(createBox("lat", "Breitengrad", editLat))
var editLng = document.createElement("input");
editLng.type = "text";
editLng.value = d.lng.toFixed(9);
el.appendChild(createBox("lng", "Längengrad", editLng));
var editLng = document.createElement("input")
editLng.type = "text"
editLng.value = d.lng.toFixed(9)
el.appendChild(createBox("lng", "Längengrad", editLng))
var editUci = document.createElement("textarea");
var editUci = document.createElement("textarea")
editUci.value =
"uci set gluon-node-info.@location[0]='location'; " +
"uci set gluon-node-info.@location[0].share_location='1';" +
"uci set gluon-node-info.@location[0].latitude='" + d.lat.toFixed(9) + "';" +
"uci set gluon-node-info.@location[0].longitude='" + d.lng.toFixed(9) + "';" +
"uci commit gluon-node-info";
"uci commit gluon-node-info"
el.appendChild(createBox("uci", "Befehl", editUci, false));
el.appendChild(createBox("uci", "Befehl", editUci, false))
var linkPlain = document.createElement("a");
linkPlain.textContent = "plain";
linkPlain.onclick = function () {
switch2plain();
return false;
};
linkPlain.href = "#";
var linkPlain = document.createElement("a")
linkPlain.textContent = "plain"
linkPlain.onclick = function() {
switch2plain()
return false
}
linkPlain.href = "#"
var linkUci = document.createElement("a");
linkUci.textContent = "uci";
linkUci.onclick = function () {
switch2uci();
return false;
};
linkUci.href = "#";
var linkUci = document.createElement("a")
linkUci.textContent = "uci"
linkUci.onclick = function() {
switch2uci()
return false
}
linkUci.href = "#"
var hintText = document.createElement("p");
hintText.appendChild(document.createTextNode("Du kannst zwischen "));
hintText.appendChild(linkPlain);
hintText.appendChild(document.createTextNode(" und "));
hintText.appendChild(linkUci);
hintText.appendChild(document.createTextNode(" wechseln."));
el.appendChild(hintText);
var hintText = document.createElement("p")
hintText.appendChild(document.createTextNode("Du kannst zwischen "))
hintText.appendChild(linkPlain)
hintText.appendChild(document.createTextNode(" und "))
hintText.appendChild(linkUci)
hintText.appendChild(document.createTextNode(" wechseln."))
el.appendChild(hintText)
function createBox(name, title, inputElem, isVisible) {
var visible = typeof isVisible !== "undefined" ? isVisible : true;
var box = document.createElement("div");
var heading = document.createElement("h3");
heading.textContent = title;
box.appendChild(heading);
var btn = document.createElement("button");
btn.className = "ion-ios-copy";
btn.title = "Kopieren";
btn.onclick = function () {
copy2clip(inputElem.id);
};
inputElem.id = "location-" + name;
inputElem.readOnly = true;
var line = document.createElement("p");
line.appendChild(inputElem);
line.appendChild(btn);
box.appendChild(line);
box.id = "box-" + name;
box.style.display = visible ? "block" : "none";
return box;
var visible = typeof isVisible !== "undefined" ? isVisible : true
var box = document.createElement("div")
var heading = document.createElement("h3")
heading.textContent = title
box.appendChild(heading)
var btn = document.createElement("button")
btn.className = "ion-ios-copy"
btn.title = "Kopieren"
btn.onclick = function() { copy2clip(inputElem.id) }
inputElem.id = "location-" + name
inputElem.readOnly = true
var line = document.createElement("p")
line.appendChild(inputElem)
line.appendChild(btn)
box.appendChild(line)
box.id = "box-" + name
box.style.display = visible ? "block" : "none"
return box
}
function copy2clip(id) {
var copyField = document.querySelector("#" + id);
copyField.select();
var copyField = document.querySelector("#" + id)
copyField.select()
try {
document.execCommand("copy");
document.execCommand("copy")
} catch (err) {
console.warn(err);
console.log(err)
}
}
function switch2plain() {
document.getElementById("box-uci").style.display = "none";
document.getElementById("box-lat").style.display = "block";
document.getElementById("box-lng").style.display = "block";
document.getElementById("box-uci").style.display = "none"
document.getElementById("box-lat").style.display = "block"
document.getElementById("box-lng").style.display = "block"
}
function switch2uci() {
document.getElementById("box-uci").style.display = "block";
document.getElementById("box-lat").style.display = "none";
document.getElementById("box-lng").style.display = "none";
document.getElementById("box-uci").style.display = "block"
document.getElementById("box-lat").style.display = "none"
document.getElementById("box-lng").style.display = "none"
}
};
});
}
})

View file

@ -1,53 +1,51 @@
define(["infobox/link", "infobox/node", "infobox/location"], function (Link, Node, Location) {
"use strict";
return function (config, sidebar, router) {
var self = this;
var el;
var self = this
var el
function destroy() {
if (el && el.parentNode) {
el.parentNode.removeChild(el);
el = undefined;
sidebar.reveal();
el.parentNode.removeChild(el)
el = undefined
sidebar.reveal()
}
}
function create() {
destroy();
sidebar.ensureVisible();
sidebar.hide();
destroy()
sidebar.ensureVisible()
sidebar.hide()
el = document.createElement("div");
sidebar.container.insertBefore(el, sidebar.container.firstChild);
el = document.createElement("div")
sidebar.container.insertBefore(el, sidebar.container.firstChild)
el.scrollIntoView(false);
el.classList.add("infobox");
el.destroy = destroy;
el.scrollIntoView(false)
el.classList.add("infobox")
el.destroy = destroy
var closeButton = document.createElement("button");
closeButton.classList.add("close");
closeButton.onclick = router.reset;
el.appendChild(closeButton);
var closeButton = document.createElement("button")
closeButton.classList.add("close")
closeButton.onclick = router.reset
el.appendChild(closeButton)
}
self.resetView = destroy;
self.resetView = destroy
self.gotoNode = function (d) {
create();
Node(config, el, router, d);
};
create()
new Node(config, el, router, d)
}
self.gotoLink = function (d) {
create();
Link(config, el, router, d);
};
create()
new Link(config, el, router, d)
}
self.gotoLocation = function (d) {
create();
Location(config, el, router, d);
};
create()
new Location(config, el, router, d)
}
return self;
};
});
return self
}
})

File diff suppressed because it is too large Load diff

View file

@ -1,43 +1,41 @@
define(function () {
"use strict";
return function () {
var self = this;
var self = this
self.render = function (el) {
var p = document.createElement("p");
p.setAttribute("class", "legend");
el.appendChild(p);
var p = document.createElement("p")
p.setAttribute("class", "legend")
el.appendChild(p)
var spanNew = document.createElement("span");
spanNew.setAttribute("class", "legend-new");
var symbolNew = document.createElement("span");
symbolNew.setAttribute("class", "symbol");
var textNew = document.createTextNode(" Neuer Knoten");
spanNew.appendChild(symbolNew);
spanNew.appendChild(textNew);
p.appendChild(spanNew);
var spanNew = document.createElement("span")
spanNew.setAttribute("class", "legend-new")
var symbolNew = document.createElement("span")
symbolNew.setAttribute("class", "symbol")
var textNew = document.createTextNode(" Neuer Knoten")
spanNew.appendChild(symbolNew)
spanNew.appendChild(textNew)
p.appendChild(spanNew)
var spanOnline = document.createElement("span");
spanOnline.setAttribute("class", "legend-online");
var symbolOnline = document.createElement("span");
symbolOnline.setAttribute("class", "symbol");
var textOnline = document.createTextNode(" Knoten ist online");
spanOnline.appendChild(symbolOnline);
spanOnline.appendChild(textOnline);
p.appendChild(spanOnline);
var spanOnline = document.createElement("span")
spanOnline.setAttribute("class", "legend-online")
var symbolOnline = document.createElement("span")
symbolOnline.setAttribute("class", "symbol")
var textOnline = document.createTextNode(" Knoten ist online")
spanOnline.appendChild(symbolOnline)
spanOnline.appendChild(textOnline)
p.appendChild(spanOnline)
var spanOffline = document.createElement("span");
spanOffline.setAttribute("class", "legend-offline");
var symbolOffline = document.createElement("span");
symbolOffline.setAttribute("class", "symbol");
var textOffline = document.createTextNode(" Knoten ist offline");
spanOffline.appendChild(symbolOffline);
spanOffline.appendChild(textOffline);
p.appendChild(spanOffline);
};
var spanOffline = document.createElement("span")
spanOffline.setAttribute("class", "legend-offline")
var symbolOffline = document.createElement("span")
symbolOffline.setAttribute("class", "symbol")
var textOffline = document.createTextNode(" Knoten ist offline")
spanOffline.appendChild(symbolOffline)
spanOffline.appendChild(textOffline)
p.appendChild(spanOffline)
}
return self;
};
});
return self
}
})

View file

@ -1,68 +1,60 @@
define(["sorttable", "virtual-dom", "helper"], function (SortTable, V, helper) {
"use strict";
define(["sorttable", "virtual-dom"], function (SortTable, V) {
function linkName(d) {
return (d.source.node ? d.source.node.nodeinfo.hostname : d.source.id) + " " + d.target.node.nodeinfo.hostname;
return (d.source.node ? d.source.node.nodeinfo.hostname : d.source.id) + " " + d.target.node.nodeinfo.hostname
}
var headings = [{
name: "Knoten",
sort: function (a, b) {
return linkName(a).localeCompare(linkName(b));
},
reverse: false
},
{
name: "TQ",
sort: function (a, b) {
return a.tq - b.tq;
},
reverse: true
},
{
name: "Typ",
sort: function (a, b) {
return a.type.localeCompare(b.type);
},
reverse: false
},
{
name: "Entfernung",
sort: function (a, b) {
return (a.distance === undefined ? -1 : a.distance) -
(b.distance === undefined ? -1 : b.distance);
},
reverse: true
}];
var headings = [{ name: "Knoten",
sort: function (a, b) {
return linkName(a).localeCompare(linkName(b))
},
reverse: false
},
{ name: "TQ",
sort: function (a, b) { return a.tq - b.tq},
reverse: true
},
{ name: "Typ",
sort: function (a, b) {
return a.type.localeCompare(b.type)
},
reverse: false
},
{ name: "Entfernung",
sort: function (a, b) {
return (a.distance === undefined ? -1 : a.distance) -
(b.distance === undefined ? -1 : b.distance)
},
reverse: true
}]
return function (linkScale, router) {
var table = new SortTable(headings, 2, renderRow);
return function(linkScale, router) {
var table = new SortTable(headings, 2, renderRow)
function renderRow(d) {
var td1Content = [V.h("a", {href: "#", onclick: router.link(d)}, linkName(d))];
var td1Content = [V.h("a", {href: "#", onclick: router.link(d)}, linkName(d))]
var td1 = V.h("td", td1Content);
var td2 = V.h("td", {style: {color: linkScale(d.tq).hex()}}, helper.showTq(d));
var td3 = V.h("td", d.type);
var td4 = V.h("td", helper.showDistance(d));
var td1 = V.h("td", td1Content)
var td2 = V.h("td", {style: {color: linkScale(d.tq).hex()}}, showTq(d))
var td3 = V.h("td", d.type)
var td4 = V.h("td", showDistance(d))
return V.h("tr", [td1, td2, td3, td4]);
return V.h("tr", [td1, td2, td3, td4])
}
this.render = function (d) {
var el = document.createElement("div");
el.last = V.h("div");
d.appendChild(el);
this.render = function (d) {
var el = document.createElement("div")
el.last = V.h("div")
d.appendChild(el)
var h2 = document.createElement("h2");
h2.textContent = "Verbindungen";
el.appendChild(h2);
var h2 = document.createElement("h2")
h2.textContent = "Verbindungen"
el.appendChild(h2)
el.appendChild(table.el);
};
el.appendChild(table.el)
}
this.setData = function (d) {
table.setData(d.graph.links);
};
};
});
table.setData(d.graph.links)
}
}
})

View file

@ -1,6 +1,4 @@
define(["leaflet"], function (L) {
"use strict";
return L.CircleMarker.extend({
outerCircle: {
stroke: false,
@ -31,31 +29,31 @@ define(["leaflet"], function (L) {
fillOpacity: 0.2
},
initialize: function (latlng) {
this.accuracyCircle = L.circle(latlng, 0, this.accuracyCircle);
this.outerCircle = L.circleMarker(latlng, this.outerCircle);
L.CircleMarker.prototype.initialize.call(this, latlng, this.innerCircle);
initialize: function(latlng) {
this.accuracyCircle = L.circle(latlng, 0, this.accuracyCircle)
this.outerCircle = L.circleMarker(latlng, this.outerCircle)
L.CircleMarker.prototype.initialize.call(this, latlng, this.innerCircle)
this.on("remove", function () {
this._map.removeLayer(this.accuracyCircle);
this._map.removeLayer(this.outerCircle);
});
this.on("remove", function() {
this._map.removeLayer(this.accuracyCircle)
this._map.removeLayer(this.outerCircle)
})
},
setLatLng: function (latlng) {
this.accuracyCircle.setLatLng(latlng);
this.outerCircle.setLatLng(latlng);
L.CircleMarker.prototype.setLatLng.call(this, latlng);
setLatLng: function(latlng) {
this.accuracyCircle.setLatLng(latlng)
this.outerCircle.setLatLng(latlng)
L.CircleMarker.prototype.setLatLng.call(this, latlng)
},
setAccuracy: function (accuracy) {
this.accuracyCircle.setRadius(accuracy);
setAccuracy: function(accuracy) {
this.accuracyCircle.setRadius(accuracy)
},
onAdd: function (map) {
this.accuracyCircle.addTo(map).bringToBack();
this.outerCircle.addTo(map);
L.CircleMarker.prototype.onAdd.call(this, map);
onAdd: function(map) {
this.accuracyCircle.addTo(map).bringToBack()
this.outerCircle.addTo(map)
L.CircleMarker.prototype.onAdd.call(this, map)
}
});
});
})
})

View file

@ -1,242 +1,232 @@
define(["moment", "router", "leaflet", "gui", "helper", "moment.de"],
function (moment, Router, L, GUI, helper) {
"use strict";
return function (config) {
function handleData(data) {
var dataNodes = {};
dataNodes.nodes = [];
dataNodes.nodeIds = [];
var dataGraph = {};
dataGraph.batadv = {};
dataGraph.batadv.nodes = [];
dataGraph.batadv.links = [];
define(["moment", "router", "leaflet", "gui", "numeral"],
function (moment, Router, L, GUI, numeral) {
return function (config) {
function handleData(data) {
var dataNodes = {}
dataNodes.nodes = []
dataNodes.nodeIds = []
var dataGraph = {}
dataGraph.batadv = {}
dataGraph.batadv.nodes = []
dataGraph.batadv.links = []
function rearrangeLinks(d) {
d.source += dataGraph.batadv.nodes.length;
d.target += dataGraph.batadv.nodes.length;
}
for (var i = 0; i < data.length; ++i) {
var vererr;
if (i % 2) {
if (data[i].version !== 1) {
vererr = "Unsupported graph version: " + data[i].version;
console.error(vererr); //silent fail
} else {
data[i].batadv.links.forEach(rearrangeLinks);
dataGraph.batadv.nodes = dataGraph.batadv.nodes.concat(data[i].batadv.nodes);
dataGraph.batadv.links = dataGraph.batadv.links.concat(data[i].batadv.links);
dataGraph.timestamp = data[i].timestamp;
}
} else if (data[i].version !== 2) {
vererr = "Unsupported nodes version: " + data[i].version;
console.error(vererr); //silent fail
function rearrangeLinks(d) {
d.source += dataGraph.batadv.nodes.length
d.target += dataGraph.batadv.nodes.length
}
for (var i = 0; i < data.length; ++i) {
var vererr
if(i % 2)
if (data[i].version !== 1) {
vererr = "Unsupported graph version: " + data[i].version
console.log(vererr) //silent fail
} else {
data[i].nodes.forEach(fillData);
dataNodes.timestamp = data[i].timestamp;
data[i].batadv.links.forEach(rearrangeLinks)
dataGraph.batadv.nodes = dataGraph.batadv.nodes.concat(data[i].batadv.nodes)
dataGraph.batadv.links = dataGraph.batadv.links.concat(data[i].batadv.links)
dataGraph.timestamp = data[i].timestamp
}
else
if (data[i].version !== 2) {
vererr = "Unsupported nodes version: " + data[i].version
console.log(vererr) //silent fail
} else {
data[i].nodes.forEach(fillData)
dataNodes.timestamp = data[i].timestamp
}
}
function fillData (node) {
var position = dataNodes.nodeIds.indexOf(node.nodeinfo.node_id)
if(position === -1){
dataNodes.nodes.push(node)
dataNodes.nodeIds.push(node.nodeinfo.node_id)
}
else
if(node.flags.online === true)
dataNodes.nodes[position] = node
}
var nodes = dataNodes.nodes.filter( function (d) {
return "firstseen" in d && "lastseen" in d
})
nodes.forEach( function(node) {
node.firstseen = moment.utc(node.firstseen).local()
node.lastseen = moment.utc(node.lastseen).local()
})
var now = moment()
var age = moment(now).subtract(config.maxAge, "days")
var newnodes = limit("firstseen", age, sortByKey("firstseen", nodes).filter(online))
var lostnodes = limit("lastseen", age, sortByKey("lastseen", nodes).filter(offline))
var graphnodes = {}
dataNodes.nodes.forEach( function (d) {
graphnodes[d.nodeinfo.node_id] = d
})
var graph = dataGraph.batadv
graph.nodes.forEach( function (d) {
if (d.node_id in graphnodes) {
d.node = graphnodes[d.node_id]
if (d.unseen) {
d.node.flags.online = true
d.node.flags.unseen = true
}
}
})
function fillData(node) {
var position = dataNodes.nodeIds.indexOf(node.nodeinfo.node_id);
if (position === -1) {
dataNodes.nodes.push(node);
dataNodes.nodeIds.push(node.nodeinfo.node_id);
}
else if (node.flags.online === true) {
dataNodes.nodes[position] = node;
}
}
graph.links.forEach( function (d) {
d.source = graph.nodes[d.source]
var nodes = dataNodes.nodes.filter(function (d) {
return "firstseen" in d && "lastseen" in d;
});
if (graph.nodes[d.target].node)
d.target = graph.nodes[d.target]
else
d.target = undefined
})
nodes.forEach(function (node) {
node.firstseen = moment.utc(node.firstseen).local();
node.lastseen = moment.utc(node.lastseen).local();
});
var links = graph.links.filter( function (d) {
return d.target !== undefined
})
var now = moment();
var age = moment(now).subtract(config.maxAge, "days");
links.forEach( function (d) {
var unknown = (d.source.node === undefined)
var ids
if (unknown)
ids = [d.source.id.replace(/:/g, ""), d.target.node.nodeinfo.node_id]
else
ids = [d.source.node.nodeinfo.node_id, d.target.node.nodeinfo.node_id]
d.id = ids.join("-")
var newnodes = helper.limit("firstseen", age, helper.sortByKey("firstseen", nodes).filter(helper.online));
var lostnodes = helper.limit("lastseen", age, helper.sortByKey("lastseen", nodes).filter(helper.offline));
var graphnodes = {};
dataNodes.nodes.forEach(function (d) {
graphnodes[d.nodeinfo.node_id] = d;
});
var graph = dataGraph.batadv;
graph.nodes.forEach(function (d) {
if (d.node_id in graphnodes) {
d.node = graphnodes[d.node_id];
if (d.unseen) {
d.node.flags.online = true;
d.node.flags.unseen = true;
}
}
});
graph.links.forEach(function (d) {
d.source = graph.nodes[d.source];
if (graph.nodes[d.target].node) {
d.target = graph.nodes[d.target];
} else {
d.target = undefined;
}
});
var links = graph.links.filter(function (d) {
return d.target !== undefined;
});
links.forEach(function (d) {
var unknown = (d.source.node === undefined);
var ids;
if (unknown) {
ids = [d.source.id.replace(/:/g, ""), d.target.node.nodeinfo.node_id];
} else {
ids = [d.source.node.nodeinfo.node_id, d.target.node.nodeinfo.node_id];
}
d.id = ids.join("-");
if (unknown || !d.source.node.nodeinfo.location || !d.target.node.nodeinfo.location ||
if (unknown ||
!d.source.node.nodeinfo.location ||
!d.target.node.nodeinfo.location ||
isNaN(d.source.node.nodeinfo.location.latitude) ||
isNaN(d.source.node.nodeinfo.location.longitude) ||
isNaN(d.target.node.nodeinfo.location.latitude) ||
isNaN(d.target.node.nodeinfo.location.longitude)) {
return;
}
isNaN(d.target.node.nodeinfo.location.longitude))
return
d.latlngs = [];
d.latlngs.push(L.latLng(d.source.node.nodeinfo.location.latitude, d.source.node.nodeinfo.location.longitude));
d.latlngs.push(L.latLng(d.target.node.nodeinfo.location.latitude, d.target.node.nodeinfo.location.longitude));
d.latlngs = []
d.latlngs.push(L.latLng(d.source.node.nodeinfo.location.latitude, d.source.node.nodeinfo.location.longitude))
d.latlngs.push(L.latLng(d.target.node.nodeinfo.location.latitude, d.target.node.nodeinfo.location.longitude))
d.distance = d.latlngs[0].distanceTo(d.latlngs[1]);
});
d.distance = d.latlngs[0].distanceTo(d.latlngs[1])
})
nodes.forEach(function (d) {
d.neighbours = [];
if (d.statistics) {
/*eslint camelcase:0*/
if ("gateway" in d.statistics && d.statistics.gateway in graphnodes) {
d.statistics.gateway = {"node": graphnodes[d.statistics.gateway], "id": d.statistics.gateway};
}
if ("nexthop" in d.statistics && d.statistics.nexthop in graphnodes) {
d.statistics.nexthop = {"node": graphnodes[d.statistics.nexthop], "id": d.statistics.nexthop};
}
if ("gateway_nexthop" in d.statistics && d.statistics.gateway_nexthop in graphnodes) {
d.statistics.gateway_nexthop = {
"node": graphnodes[d.statistics.gateway_nexthop],
"id": d.statistics.gateway_nexthop
};
}
}
});
nodes.forEach( function (d) {
d.neighbours = []
if (d.statistics) {
/*eslint camelcase:0*/
if ("gateway" in d.statistics && d.statistics.gateway in graphnodes)
d.statistics.gateway = {"node": graphnodes[d.statistics.gateway], "id": d.statistics.gateway}
if ("nexthop" in d.statistics && d.statistics.nexthop in graphnodes)
d.statistics.nexthop = {"node": graphnodes[d.statistics.nexthop], "id": d.statistics.nexthop}
if ("gateway_nexthop" in d.statistics && d.statistics.gateway_nexthop in graphnodes)
d.statistics.gateway_nexthop = {"node": graphnodes[d.statistics.gateway_nexthop], "id": d.statistics.gateway_nexthop}
}
})
links.forEach(function (d) {
if (d.type === "tunnel" || d.vpn) {
d.type = "VPN";
d.isVPN = true;
} else if (d.type === "fastd") {
d.type = "fastd";
d.isVPN = true;
} else if (d.type === "l2tp") {
d.type = "L2TP";
d.isVPN = true;
} else if (d.type === "gre") {
d.type = "GRE";
d.isVPN = true;
} else if (d.type === "wireless") {
d.type = "Wifi";
d.isVPN = false;
} else if (d.type === "other") {
d.type = "Kabel";
d.isVPN = false;
} else {
d.type = "N/A";
d.isVPN = false;
}
links.forEach( function (d) {
if (d.type === "tunnel" || d.vpn) {
d.type = "VPN"
d.isVPN = true
} else if (d.type === "fastd") {
d.type = "fastd"
d.isVPN = true
} else if (d.type === "l2tp") {
d.type = "L2TP"
d.isVPN = true
} else if (d.type === "gre") {
d.type = "GRE"
d.isVPN = true
} else if (d.type === "wireless") {
d.type = "Wifi"
d.isVPN = false
} else if (d.type === "other") {
d.type = "Kabel"
d.isVPN = false
} else {
d.type = "N/A"
d.isVPN = false
}
if (d.isVPN && d.target.node) {
d.target.node.flags.uplink = true;
}
if (d.isVPN && d.target.node)
d.target.node.flags.uplink = true
var unknown = (d.source.node === undefined);
if (unknown) {
d.target.node.neighbours.push({id: d.source.id, link: d, incoming: true});
return;
}
d.source.node.neighbours.push({node: d.target.node, link: d, incoming: false});
d.target.node.neighbours.push({node: d.source.node, link: d, incoming: true});
if (!d.isVPN) {
d.source.node.meshlinks = d.source.node.meshlinks ? d.source.node.meshlinks + 1 : 1;
}
});
var unknown = (d.source.node === undefined)
if (unknown) {
d.target.node.neighbours.push({ id: d.source.id, link: d, incoming: true })
return
}
d.source.node.neighbours.push({ node: d.target.node, link: d, incoming: false })
d.target.node.neighbours.push({ node: d.source.node, link: d, incoming: true })
if (!d.isVPN)
d.source.node.meshlinks = d.source.node.meshlinks ? d.source.node.meshlinks + 1 : 1
})
links.sort(function (a, b) {
return b.tq - a.tq;
});
links.sort( function (a, b) {
return b.tq - a.tq
})
return {
now: now,
timestamp: moment.utc(dataNodes.timestamp).local(),
nodes: {
all: nodes,
new: newnodes,
lost: lostnodes
},
graph: {
links: links,
nodes: graph.nodes
}
};
}
return { now: now,
timestamp: moment.utc(dataNodes.timestamp).local(),
nodes: {
all: nodes,
new: newnodes,
lost: lostnodes
},
graph: {
links: links,
nodes: graph.nodes
}
}
}
moment.locale("de");
numeral.language("de")
moment.locale("de")
var router = new Router();
var router = new Router()
var urls = [];
var urls = []
if (typeof config.dataPath === "string" || config.dataPath instanceof String) {
config.dataPath = [config.dataPath];
}
if (typeof config.dataPath === "string" || config.dataPath instanceof String)
config.dataPath = [config.dataPath]
for (var i in config.dataPath) {
urls.push(config.dataPath[i] + "nodes.json");
urls.push(config.dataPath[i] + "graph.json");
}
for (var i in config.dataPath) {
urls.push(config.dataPath[i] + "nodes.json")
urls.push(config.dataPath[i] + "graph.json")
}
function update() {
return Promise.all(urls.map(helper.getJSON))
.then(handleData);
}
function update() {
return Promise.all(urls.map(getJSON))
.then(handleData)
}
update()
.then(function (d) {
var gui = new GUI(config, router);
gui.setData(d);
router.setData(d);
router.start();
update()
.then(function (d) {
var gui = new GUI(config, router)
gui.setData(d)
router.setData(d)
router.start()
window.setInterval(function () {
update().then(function (d) {
gui.setData(d);
router.setData(d);
});
}, 60000);
})
.catch(function (e) {
document.body.textContent = e;
console.warn(e);
});
};
});
window.setInterval(function () {
update().then(function (d) {
gui.setData(d)
router.setData(d)
})
}, 60000)
})
.catch(function (e) {
document.body.textContent = e
console.log(e)
})
}
})

View file

@ -1,77 +1,74 @@
define(["map/clientlayer", "map/labelslayer",
"d3", "leaflet", "moment", "locationmarker", "rbush", "helper",
"leaflet.label", "leaflet.providers", "moment.de"],
function (ClientLayer, LabelsLayer, d3, L, moment, LocationMarker, rbush, helper) {
"use strict";
var options = {
worldCopyJump: true,
zoomControl: false
};
"d3", "leaflet", "moment", "locationmarker", "rbush",
"leaflet.label", "leaflet.providers"],
function (ClientLayer, LabelsLayer, d3, L, moment, LocationMarker, rbush) {
var options = { worldCopyJump: true,
zoomControl: false
}
var AddLayerButton = L.Control.extend({
options: {
position: "bottomright"
},
options: {
position: "bottomright"
},
initialize: function (f, options) {
L.Util.setOptions(this, options);
this.f = f;
},
initialize: function (f, options) {
L.Util.setOptions(this, options)
this.f = f
},
onAdd: function () {
var button = L.DomUtil.create("button", "add-layer");
button.textContent = "\uF2C7";
onAdd: function () {
var button = L.DomUtil.create("button", "add-layer")
button.textContent = "\uF2C7"
// L.DomEvent.disableClickPropagation(button)
// Click propagation isn't disabled as this causes problems with the
// location picking mode; instead propagation is stopped in onClick().
L.DomEvent.addListener(button, "click", this.f, this);
// L.DomEvent.disableClickPropagation(button)
// Click propagation isn't disabled as this causes problems with the
// location picking mode; instead propagation is stopped in onClick().
L.DomEvent.addListener(button, "click", this.f, this)
this.button = button;
this.button = button
return button;
}
});
return button
}
})
var LocateButton = L.Control.extend({
options: {
position: "bottomright"
},
options: {
position: "bottomright"
},
active: false,
button: undefined,
active: false,
button: undefined,
initialize: function (f, options) {
L.Util.setOptions(this, options);
this.f = f;
},
initialize: function (f, options) {
L.Util.setOptions(this, options)
this.f = f
},
onAdd: function () {
var button = L.DomUtil.create("button", "locate-user");
button.textContent = "\uF2E9";
onAdd: function () {
var button = L.DomUtil.create("button", "locate-user")
button.textContent = "\uF2E9"
L.DomEvent.disableClickPropagation(button);
L.DomEvent.addListener(button, "click", this.onClick, this);
L.DomEvent.disableClickPropagation(button)
L.DomEvent.addListener(button, "click", this.onClick, this)
this.button = button;
this.button = button
return button;
},
return button
},
update: function () {
this.button.classList.toggle("active", this.active);
},
update: function() {
this.button.classList.toggle("active", this.active)
},
set: function (v) {
this.active = v;
this.update();
},
set: function(v) {
this.active = v
this.update()
},
onClick: function () {
this.f(!this.active);
}
});
onClick: function () {
this.f(!this.active)
}
})
var CoordsPickerButton = L.Control.extend({
options: {
@ -82,547 +79,470 @@ define(["map/clientlayer", "map/labelslayer",
button: undefined,
initialize: function (f, options) {
L.Util.setOptions(this, options);
this.f = f;
L.Util.setOptions(this, options)
this.f = f
},
onAdd: function () {
var button = L.DomUtil.create("button", "coord-picker");
button.textContent = "\uF3A3";
var button = L.DomUtil.create("button", "coord-picker")
button.textContent = "\uF2A6"
// Click propagation isn't disabled as this causes problems with the
// location picking mode; instead propagation is stopped in onClick().
L.DomEvent.addListener(button, "click", this.onClick, this);
L.DomEvent.addListener(button, "click", this.onClick, this)
this.button = button;
this.button = button
return button;
return button
},
update: function () {
this.button.classList.toggle("active", this.active);
update: function() {
this.button.classList.toggle("active", this.active)
},
set: function (v) {
this.active = v;
this.update();
set: function(v) {
this.active = v
this.update()
},
onClick: function (e) {
L.DomEvent.stopPropagation(e);
this.f(!this.active);
L.DomEvent.stopPropagation(e)
this.f(!this.active)
}
});
})
function mkMarker(dict, iconFunc, router) {
return function (d) {
var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d));
var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d))
m.resetStyle = function () {
m.setStyle(iconFunc(d));
};
m.setStyle(iconFunc(d))
}
m.on("click", router.node(d));
m.bindLabel(d.nodeinfo.hostname);
m.on("click", router.node(d))
m.bindLabel(d.nodeinfo.hostname)
dict[d.nodeinfo.node_id] = m;
dict[d.nodeinfo.node_id] = m
return m;
};
return m
}
}
function addLinksToMap(dict, linkScale, graph, router) {
graph = graph.filter(function (d) {
return "distance" in d && d.type !== "VPN";
});
graph = graph.filter( function (d) {
return "distance" in d && d.type !== "VPN"
})
return graph.map(function (d) {
var opts = {
color: d.type === "Kabel" ? "#50B0F0" : linkScale(d.tq).hex(),
weight: 4,
opacity: 0.5,
dashArray: "none"
};
var lines = graph.map( function (d) {
var opts = { color: d.type === "Kabel" ? "#50B0F0" : linkScale(d.tq).hex(),
weight: 4,
opacity: 0.5,
dashArray: "none"
}
var line = L.polyline(d.latlngs, opts);
var line = L.polyline(d.latlngs, opts)
line.resetStyle = function () {
line.setStyle(opts);
};
line.setStyle(opts)
}
line.bindLabel(d.source.node.nodeinfo.hostname + " " + d.target.node.nodeinfo.hostname + "<br><strong>" + helper.showDistance(d) + " / " + helper.showTq(d) + "</strong>");
line.on("click", router.link(d));
line.bindLabel(d.source.node.nodeinfo.hostname + " " + d.target.node.nodeinfo.hostname + "<br><strong>" + showDistance(d) + " / " + showTq(d) + "</strong>")
line.on("click", router.link(d))
dict[d.id] = line;
dict[d.id] = line
return line;
});
return line
})
return lines
}
var iconOnline = {
color: "#1566A9",
fillColor: "#1566A9",
radius: 6,
fillOpacity: 0.5,
opacity: 0.5,
weight: 2,
className: "stroke-first"
};
var iconOffline = {
color: "#D43E2A",
fillColor: "#D43E2A",
radius: 3,
fillOpacity: 0.5,
opacity: 0.5,
weight: 1,
className: "stroke-first"
};
var iconLost = {
color: "#D43E2A",
fillColor: "#D43E2A",
radius: 4,
fillOpacity: 0.8,
opacity: 0.8,
weight: 1,
className: "stroke-first"
};
var iconAlert = {
color: "#D43E2A",
fillColor: "#D43E2A",
radius: 5,
fillOpacity: 0.8,
opacity: 0.8,
weight: 2,
className: "stroke-first"
};
var iconNew = {color: "#1566A9", fillColor: "#93E929", radius: 6, fillOpacity: 1.0, opacity: 0.5, weight: 2};
var iconOnline = { color: "#1566A9", fillColor: "#1566A9", radius: 6, fillOpacity: 0.5, opacity: 0.5, weight: 2, className: "stroke-first" }
var iconOffline = { color: "#D43E2A", fillColor: "#D43E2A", radius: 3, fillOpacity: 0.5, opacity: 0.5, weight: 1, className: "stroke-first" }
var iconLost = { color: "#D43E2A", fillColor: "#D43E2A", radius: 6, fillOpacity: 0.8, opacity: 0.8, weight: 1, className: "stroke-first" }
var iconAlert = { color: "#D43E2A", fillColor: "#D43E2A", radius: 6, fillOpacity: 0.8, opacity: 0.8, weight: 2, className: "stroke-first node-alert" }
var iconNew = { color: "#1566A9", fillColor: "#93E929", radius: 6, fillOpacity: 1.0, opacity: 0.5, weight: 2 }
return function (config, linkScale, sidebar, router, buttons) {
var self = this;
var barycenter;
var groupOnline, groupOffline, groupNew, groupLost, groupLines;
var savedView;
var self = this
var barycenter
var groupOnline, groupOffline, groupNew, groupLost, groupLines
var savedView
var map, userLocation;
var layerControl;
var customLayers = {};
var baseLayers = {};
var map, userLocation
var layerControl
var customLayers = {}
var baseLayers = {}
var locateUserButton = new LocateButton(function (d) {
if (d) {
enableTracking();
} else {
disableTracking();
}
});
if (d)
enableTracking()
else
disableTracking()
})
var mybuttons = [];
var mybuttons = []
function addButton(button) {
var el = button.onAdd();
mybuttons.push(el);
buttons.appendChild(el);
var el = button.onAdd()
mybuttons.push(el)
buttons.appendChild(el)
}
function clearButtons() {
mybuttons.forEach(function (d) {
buttons.removeChild(d);
});
mybuttons.forEach( function (d) {
buttons.removeChild(d)
})
}
var showCoordsPickerButton = new CoordsPickerButton(function (d) {
if (d) {
enableCoords();
} else {
disableCoords();
}
});
if (d)
enableCoords()
else
disableCoords()
})
function saveView() {
savedView = {
center: map.getCenter(),
zoom: map.getZoom()
};
savedView = {center: map.getCenter(),
zoom: map.getZoom()}
}
function enableTracking() {
map.locate({
watch: true,
enableHighAccuracy: true,
setView: true
});
locateUserButton.set(true);
map.locate({watch: true,
enableHighAccuracy: true,
setView: true
})
locateUserButton.set(true)
}
function disableTracking() {
map.stopLocate();
locationError();
locateUserButton.set(false);
map.stopLocate()
locationError()
locateUserButton.set(false)
}
function enableCoords() {
map.getContainer().classList.add("pick-coordinates");
map.on("click", showCoordinates);
showCoordsPickerButton.set(true);
map.getContainer().classList.add("pick-coordinates")
map.on("click", showCoordinates)
showCoordsPickerButton.set(true)
}
function disableCoords() {
map.getContainer().classList.remove("pick-coordinates");
map.off("click", showCoordinates);
showCoordsPickerButton.set(false);
map.getContainer().classList.remove("pick-coordinates")
map.off("click", showCoordinates)
showCoordsPickerButton.set(false)
}
function showCoordinates(e) {
router.gotoLocation(e.latlng);
router.gotoLocation(e.latlng)
// window.prompt("Koordinaten (Lat, Lng)", e.latlng.lat.toFixed(9) + ", " + e.latlng.lng.toFixed(9))
disableCoords();
disableCoords()
}
function locationFound(e) {
if (!userLocation) {
userLocation = new LocationMarker(e.latlng).addTo(map);
}
if (!userLocation)
userLocation = new LocationMarker(e.latlng).addTo(map)
userLocation.setLatLng(e.latlng);
userLocation.setAccuracy(e.accuracy);
userLocation.setLatLng(e.latlng)
userLocation.setAccuracy(e.accuracy)
}
function locationError() {
if (userLocation) {
map.removeLayer(userLocation);
userLocation = null;
map.removeLayer(userLocation)
userLocation = null
}
}
function addLayer(layerName) {
if (layerName in baseLayers) {
return;
}
if (layerName in baseLayers)
return
if (layerName in customLayers) {
return;
}
if (layerName in customLayers)
return
try {
var layer = L.tileLayer.provider(layerName);
layerControl.addBaseLayer(layer, layerName);
customLayers[layerName] = layer;
var layer = L.tileLayer.provider(layerName)
layerControl.addBaseLayer(layer, layerName)
customLayers[layerName] = layer
if (helper.localStorageTest()) {
localStorage.setItem("map/customLayers", JSON.stringify(Object.keys(customLayers)));
}
if (localStorageTest())
localStorage.setItem("map/customLayers", JSON.stringify(Object.keys(customLayers)))
} catch (e) {
console.error(e);
return
}
}
function contextMenuGotoLocation(e) {
router.gotoLocation(e.latlng);
router.gotoLocation(e.latlng)
}
var el = document.createElement("div");
el.classList.add("map");
var el = document.createElement("div")
el.classList.add("map")
map = L.map(el, options);
map = L.map(el, options)
var layers = config.mapLayers.map(function (d) {
var layers = config.mapLayers.map( function (d) {
return {
"name": d.name,
"layer": "url" in d ? L.tileLayer(d.url, d.config) : L.tileLayer.provider(d.name)
};
});
"layer": "url" in d ? "layers" in d.config ? L.tileLayer.wms(d.url, d.config) : L.tileLayer(d.url, d.config) : L.tileLayer.provider(d.name)
}
})
layers[0].layer.addTo(map);
layers[0].layer.addTo(map)
layers.forEach(function (d) {
baseLayers[d.name] = d.layer;
});
layers.forEach( function (d) {
baseLayers[d.name] = d.layer
})
map.on("locationfound", locationFound);
map.on("locationerror", locationError);
map.on("dragend", saveView);
map.on("contextmenu", contextMenuGotoLocation);
map.on("locationfound", locationFound)
map.on("locationerror", locationError)
map.on("dragend", saveView)
map.on("contextmenu", contextMenuGotoLocation)
addButton(locateUserButton);
addButton(showCoordsPickerButton);
addButton(locateUserButton)
addButton(showCoordsPickerButton)
addButton(new AddLayerButton(function () {
/*eslint no-alert:0*/
var layerName = prompt("Leaflet Provider:");
addLayer(layerName);
}));
var layerName = prompt("Leaflet Provider:")
addLayer(layerName)
}))
layerControl = L.control.layers(baseLayers, [], {position: "bottomright"});
layerControl.addTo(map);
layerControl = L.control.layers(baseLayers, [], {position: "bottomright"})
layerControl.addTo(map)
if (helper.localStorageTest()) {
var d = JSON.parse(localStorage.getItem("map/customLayers"));
if (localStorageTest()) {
var d = JSON.parse(localStorage.getItem("map/customLayers"))
if (d)
d.forEach(addLayer)
d = JSON.parse(localStorage.getItem("map/selectedLayer"))
d = d && d.name in baseLayers ? baseLayers[d.name] : d && d.name in customLayers ? customLayers[d.name] : false
if (d) {
d.forEach(addLayer);
}
d = JSON.parse(localStorage.getItem("map/selectedLayer"));
d = d && d.name in baseLayers ? baseLayers[d.name] : d && d.name in customLayers ? customLayers[d.name] : false;
if (d) {
map.removeLayer(layers[0].layer);
map.addLayer(d);
map.removeLayer(layers[0].layer)
map.addLayer(d)
}
}
var clientLayer = new ClientLayer({minZoom: 15});
clientLayer.addTo(map);
clientLayer.setZIndex(5);
var clientLayer = new ClientLayer({minZoom: 15})
clientLayer.addTo(map)
clientLayer.setZIndex(5)
var labelsLayer = new LabelsLayer({});
labelsLayer.addTo(map);
labelsLayer.setZIndex(6);
var labelsLayer = new LabelsLayer({})
labelsLayer.addTo(map)
labelsLayer.setZIndex(6)
map.on("baselayerchange", function (e) {
map.options.maxZoom = e.layer.options.maxZoom;
clientLayer.options.maxZoom = map.options.maxZoom;
labelsLayer.options.maxZoom = map.options.maxZoom;
if (map.getZoom() > map.options.maxZoom) {
map.setZoom(map.options.maxZoom);
}
if (helper.localStorageTest()) {
localStorage.setItem("map/selectedLayer", JSON.stringify({name: e.name}));
}
});
map.on("baselayerchange", function(e) {
map.options.maxZoom = e.layer.options.maxZoom
clientLayer.options.maxZoom = map.options.maxZoom
labelsLayer.options.maxZoom = map.options.maxZoom
if (map.getZoom() > map.options.maxZoom) map.setZoom(map.options.maxZoom)
if (localStorageTest())
localStorage.setItem("map/selectedLayer", JSON.stringify({name: e.name}))
})
var nodeDict = {};
var linkDict = {};
var highlight;
var nodeDict = {}
var linkDict = {}
var highlight
function resetMarkerStyles(nodes, links) {
Object.keys(nodes).forEach(function (d) {
nodes[d].resetStyle();
});
Object.keys(nodes).forEach( function (d) {
nodes[d].resetStyle()
})
Object.keys(links).forEach(function (d) {
links[d].resetStyle();
});
Object.keys(links).forEach( function (d) {
links[d].resetStyle()
})
}
function setView(bounds) {
map.fitBounds(bounds, {paddingTopLeft: [sidebar(), 0]});
map.fitBounds(bounds, {paddingTopLeft: [sidebar(), 0]})
}
function resetZoom() {
if (barycenter) {
setView(barycenter.getBounds());
}
if (barycenter)
setView(barycenter.getBounds())
}
function goto(m) {
var bounds;
var bounds
if ("getBounds" in m) {
bounds = m.getBounds();
} else {
bounds = L.latLngBounds([m.getLatLng()]);
}
if ("getBounds" in m)
bounds = m.getBounds()
else
bounds = L.latLngBounds([m.getLatLng()])
setView(bounds);
setView(bounds)
return m;
return m
}
function updateView(nopanzoom) {
resetMarkerStyles(nodeDict, linkDict);
var m;
resetMarkerStyles(nodeDict, linkDict)
var m
if (highlight !== undefined) {
if (highlight !== undefined)
if (highlight.type === "node") {
m = nodeDict[highlight.o.nodeinfo.node_id];
m = nodeDict[highlight.o.nodeinfo.node_id]
if (m) {
m.setStyle({color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7, className: "stroke-first"});
}
if (m)
m.setStyle({ color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7, className: "stroke-first" })
} else if (highlight.type === "link") {
m = linkDict[highlight.o.id];
m = linkDict[highlight.o.id]
if (m) {
m.setStyle({weight: 4, opacity: 1, dashArray: "5, 10"});
}
if (m)
m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" })
}
}
if (!nopanzoom) {
if (m) {
goto(m);
} else if (savedView) {
map.setView(savedView.center, savedView.zoom);
} else {
resetZoom();
}
}
if (!nopanzoom)
if (m)
goto(m)
else if (savedView)
map.setView(savedView.center, savedView.zoom)
else
resetZoom()
}
function calcBarycenter(nodes) {
nodes = nodes.map(function (d) {
return d.nodeinfo.location;
});
nodes = nodes.map(function (d) { return d.nodeinfo.location })
if (nodes.length === 0) {
return undefined;
}
if (nodes.length === 0)
return undefined
var lats = nodes.map(function (d) {
return d.latitude;
});
var lngs = nodes.map(function (d) {
return d.longitude;
});
var lats = nodes.map(function (d) { return d.latitude })
var lngs = nodes.map(function (d) { return d.longitude })
var barycenter = L.latLng(d3.median(lats), d3.median(lngs));
var barycenterDev = [d3.deviation(lats), d3.deviation(lngs)];
var barycenter = L.latLng(d3.median(lats), d3.median(lngs))
var barycenterDev = [d3.deviation(lats), d3.deviation(lngs)]
if (barycenterDev[0] === undefined) {
barycenterDev[0] = 0;
}
if (barycenterDev[0] === undefined)
barycenterDev[0] = 0
if (barycenterDev[1] === undefined) {
barycenterDev[1] = 0;
}
if (barycenterDev[1] === undefined)
barycenterDev[1] = 0
var barycenterCircle = L.latLng(barycenter.lat + barycenterDev[0],
barycenter.lng + barycenterDev[1]);
barycenter.lng + barycenterDev[1])
var r = barycenter.distanceTo(barycenterCircle);
var r = barycenter.distanceTo(barycenterCircle)
return L.circle(barycenter, r * config.mapSigmaScale);
return L.circle(barycenter, r * config.mapSigmaScale)
}
function mapRTree(d) {
var o = [d.nodeinfo.location.latitude, d.nodeinfo.location.longitude,
d.nodeinfo.location.latitude, d.nodeinfo.location.longitude];
var o = [ d.nodeinfo.location.latitude, d.nodeinfo.location.longitude,
d.nodeinfo.location.latitude, d.nodeinfo.location.longitude]
o.node = d;
o.node = d
return o;
return o
}
self.setData = function (data) {
nodeDict = {};
linkDict = {};
nodeDict = {}
linkDict = {}
if (groupOffline) {
groupOffline.clearLayers();
}
if (groupOffline)
groupOffline.clearLayers()
if (groupOnline) {
groupOnline.clearLayers();
}
if (groupOnline)
groupOnline.clearLayers()
if (groupNew) {
groupNew.clearLayers();
}
if (groupNew)
groupNew.clearLayers()
if (groupLost) {
groupLost.clearLayers();
}
if (groupLost)
groupLost.clearLayers()
if (groupLines) {
groupLines.clearLayers();
}
if (groupLines)
groupLines.clearLayers()
var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router);
groupLines = L.featureGroup(lines).addTo(map);
var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router)
groupLines = L.featureGroup(lines).addTo(map)
if (typeof config.fixedCenter === "undefined") {
barycenter = calcBarycenter(data.nodes.all.filter(helper.hasLocation));
} else {
barycenter = L.circle(L.latLng(new L.LatLng(config.fixedCenter.lat, config.fixedCenter.lng)), config.fixedCenter.radius * 1000);
}
if (typeof config.fixedCenter === "undefined")
barycenter = calcBarycenter(data.nodes.all.filter(has_location))
else
barycenter = L.circle(L.latLng(new L.LatLng(config.fixedCenter.lat, config.fixedCenter.lng)), config.fixedCenter.radius * 1000)
var nodesOnline = helper.subtract(data.nodes.all.filter(helper.online), data.nodes.new);
var nodesOffline = helper.subtract(data.nodes.all.filter(helper.offline), data.nodes.lost);
var nodesOnline = subtract(data.nodes.all.filter(online), data.nodes.new)
var nodesOffline = subtract(data.nodes.all.filter(offline), data.nodes.lost)
var markersOnline = nodesOnline.filter(helper.hasLocation)
.map(mkMarker(nodeDict, function () {
return iconOnline;
}, router));
var markersOnline = nodesOnline.filter(has_location)
.map(mkMarker(nodeDict, function () { return iconOnline }, router))
var markersOffline = nodesOffline.filter(helper.hasLocation)
.map(mkMarker(nodeDict, function () {
return iconOffline;
}, router));
var markersOffline = nodesOffline.filter(has_location)
.map(mkMarker(nodeDict, function () { return iconOffline }, router))
var markersNew = data.nodes.new.filter(helper.hasLocation)
.map(mkMarker(nodeDict, function () {
return iconNew;
}, router));
var markersNew = data.nodes.new.filter(has_location)
.map(mkMarker(nodeDict, function () { return iconNew }, router))
var markersLost = data.nodes.lost.filter(helper.hasLocation)
var markersLost = data.nodes.lost.filter(has_location)
.map(mkMarker(nodeDict, function (d) {
if (d.lastseen.isAfter(moment(data.now).subtract(3, "days"))) {
return iconAlert;
}
if (d.lastseen.isAfter(moment(data.now).subtract(3, "days")))
return iconAlert
if (d.lastseen.isAfter(moment(data.now).subtract(14, "days"))) {
return iconLost;
}
}, router));
return iconLost
}, router))
groupOffline = L.featureGroup(markersOffline).addTo(map);
groupLost = L.featureGroup(markersLost).addTo(map);
groupOnline = L.featureGroup(markersOnline).addTo(map);
groupNew = L.featureGroup(markersNew).addTo(map);
groupOffline = L.featureGroup(markersOffline).addTo(map)
groupOnline = L.featureGroup(markersOnline).addTo(map)
groupLost = L.featureGroup(markersLost).addTo(map)
groupNew = L.featureGroup(markersNew).addTo(map)
var rtreeOnlineAll = rbush(9);
var rtreeOnlineAll = rbush(9)
rtreeOnlineAll.load(data.nodes.all.filter(helper.online).filter(helper.hasLocation).map(mapRTree));
rtreeOnlineAll.load(data.nodes.all.filter(online).filter(has_location).map(mapRTree))
clientLayer.setData(rtreeOnlineAll);
labelsLayer.setData({
online: nodesOnline.filter(helper.hasLocation),
offline: nodesOffline.filter(helper.hasLocation),
new: data.nodes.new.filter(helper.hasLocation),
lost: data.nodes.lost.filter(helper.hasLocation)
});
clientLayer.setData(rtreeOnlineAll)
labelsLayer.setData({online: nodesOnline.filter(has_location),
offline: nodesOffline.filter(has_location),
new: data.nodes.new.filter(has_location),
lost: data.nodes.lost.filter(has_location)
})
updateView(true);
};
updateView(true)
}
self.resetView = function () {
disableTracking();
highlight = undefined;
updateView();
};
disableTracking()
highlight = undefined
updateView()
}
self.gotoNode = function (d) {
disableTracking();
highlight = {type: "node", o: d};
updateView();
};
disableTracking()
highlight = {type: "node", o: d}
updateView()
}
self.gotoLink = function (d) {
disableTracking();
highlight = {type: "link", o: d};
updateView();
};
disableTracking()
highlight = {type: "link", o: d}
updateView()
}
self.gotoLocation = function () {
//ignore
};
}
self.destroy = function () {
clearButtons();
map.remove();
clearButtons()
map.remove()
if (el.parentNode) {
el.parentNode.removeChild(el);
}
};
if (el.parentNode)
el.parentNode.removeChild(el)
}
self.render = function (d) {
d.appendChild(el);
map.invalidateSize();
};
d.appendChild(el)
map.invalidateSize()
}
return self;
};
});
return self
}
})

View file

@ -1,78 +1,73 @@
define(["leaflet"],
function (L) {
"use strict";
return L.TileLayer.Canvas.extend({
setData: function (d) {
this.data = d;
this.data = d
//pre-calculate start angles
this.data.all().forEach(function (d) {
d.startAngle = (parseInt(d.node.nodeinfo.node_id.substr(10, 2), 16) / 255) * 2 * Math.PI;
});
this.redraw();
d.startAngle = (parseInt(d.node.nodeinfo.node_id.substr(10, 2), 16) / 255) * 2 * Math.PI
})
this.redraw()
},
drawTile: function (canvas, tilePoint) {
function getTileBBox(s, map, tileSize, margin) {
var tl = map.unproject([s.x - margin, s.y - margin]);
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize]);
var tl = map.unproject([s.x - margin, s.y - margin])
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize])
return [br.lat, tl.lng, tl.lat, br.lng];
return [br.lat, tl.lng, tl.lat, br.lng]
}
if (!this.data) {
return;
}
if (!this.data)
return
var tileSize = this.options.tileSize;
var s = tilePoint.multiplyBy(tileSize);
var map = this._map;
var tileSize = this.options.tileSize
var s = tilePoint.multiplyBy(tileSize)
var map = this._map
var margin = 50;
var bbox = getTileBBox(s, map, tileSize, margin);
var margin = 50
var bbox = getTileBBox(s, map, tileSize, margin)
var nodes = this.data.search(bbox);
var nodes = this.data.search(bbox)
if (nodes.length === 0) {
return;
}
if (nodes.length === 0)
return
var ctx = canvas.getContext("2d");
var ctx = canvas.getContext("2d")
var radius = 3;
var a = 1.2;
var startDistance = 12;
var radius = 3
var a = 1.2
var startDistance = 12
ctx.beginPath();
ctx.beginPath()
nodes.forEach(function (d) {
var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude]);
var clients = d.node.statistics.clients;
var p = map.project([d.node.nodeinfo.location.latitude, d.node.nodeinfo.location.longitude])
var clients = d.node.statistics.clients
if (clients === 0) {
return;
}
if (clients === 0)
return
p.x -= s.x;
p.y -= s.y;
p.x -= s.x
p.y -= s.y
for (var orbit = 0, i = 0; i < clients; orbit++) {
var distance = startDistance + orbit * 2 * radius * a;
var n = Math.floor((Math.PI * distance) / (a * radius));
var delta = clients - i;
var distance = startDistance + orbit * 2 * radius * a
var n = Math.floor((Math.PI * distance) / (a * radius))
var delta = clients - i
for (var j = 0; j < Math.min(delta, n); i++, j++) {
var angle = 2 * Math.PI / n * j;
var x = p.x + distance * Math.cos(angle + d.startAngle);
var y = p.y + distance * Math.sin(angle + d.startAngle);
var angle = 2 * Math.PI / n * j
var x = p.x + distance * Math.cos(angle + d.startAngle)
var y = p.y + distance * Math.sin(angle + d.startAngle)
ctx.moveTo(x, y);
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.moveTo(x, y)
ctx.arc(x, y, radius, 0, 2 * Math.PI)
}
}
});
})
ctx.fillStyle = "rgba(220, 0, 103, 0.7)";
ctx.fill();
ctx.fillStyle = "rgba(220, 0, 103, 0.7)"
ctx.fill()
}
});
});
})
})

View file

@ -1,95 +1,88 @@
define(["leaflet", "rbush"],
function (L, rbush) {
"use strict";
var labelLocations = [["left", "middle", 0 / 8],
["center", "top", 6 / 8],
["right", "middle", 4 / 8],
["left", "top", 7 / 8],
["left", "ideographic", 1 / 8],
["right", "top", 5 / 8],
["center", "ideographic", 2 / 8],
["right", "ideographic", 3 / 8]]
var labelLocations = [["left", "middle", 0 / 8],
["center", "top", 6 / 8],
["right", "middle", 4 / 8],
["left", "top", 7 / 8],
["left", "ideographic", 1 / 8],
["right", "top", 5 / 8],
["center", "ideographic", 2 / 8],
["right", "ideographic", 3 / 8]];
var fontFamily = "Roboto"
var nodeRadius = 4
var fontFamily = "Roboto";
var nodeRadius = 4;
var ctx = document.createElement("canvas").getContext("2d");
var ctx = document.createElement("canvas").getContext("2d")
function measureText(font, text) {
ctx.font = font;
return ctx.measureText(text);
ctx.font = font
return ctx.measureText(text)
}
function mapRTree(d) {
var o = [d.position.lat, d.position.lng, d.position.lat, d.position.lng];
var o = [d.position.lat, d.position.lng, d.position.lat, d.position.lng]
o.label = d;
o.label = d
return o;
return o
}
function prepareLabel(fillStyle, fontSize, offset, stroke, minZoom) {
return function (d) {
var font = fontSize + "px " + fontFamily;
return {
position: L.latLng(d.nodeinfo.location.latitude, d.nodeinfo.location.longitude),
label: d.nodeinfo.hostname,
offset: offset,
fillStyle: fillStyle,
height: fontSize * 1.2,
font: font,
stroke: stroke,
minZoom: minZoom,
width: measureText(font, d.nodeinfo.hostname).width
};
};
var font = fontSize + "px " + fontFamily
return { position: L.latLng(d.nodeinfo.location.latitude, d.nodeinfo.location.longitude),
label: d.nodeinfo.hostname,
offset: offset,
fillStyle: fillStyle,
height: fontSize * 1.2,
font: font,
stroke: stroke,
minZoom: minZoom,
width: measureText(font, d.nodeinfo.hostname).width
}
}
}
function calcOffset(offset, loc) {
return [offset * Math.cos(loc[2] * 2 * Math.PI),
-offset * Math.sin(loc[2] * 2 * Math.PI)];
return [ offset * Math.cos(loc[2] * 2 * Math.PI),
-offset * Math.sin(loc[2] * 2 * Math.PI)]
}
function labelRect(p, offset, anchor, label, minZoom, maxZoom, z) {
var margin = 1 + 1.41 * (1 - (z - minZoom) / (maxZoom - minZoom));
var margin = 1 + 1.41 * (1 - (z - minZoom) / (maxZoom - minZoom))
var width = label.width * margin;
var height = label.height * margin;
var width = label.width * margin
var height = label.height * margin
var dx = {
left: 0,
right: -width,
center: -width / 2
};
var dx = { left: 0,
right: -width,
center: -width / 2
}
var dy = {
top: 0,
ideographic: -height,
middle: -height / 2
};
var dy = { top: 0,
ideographic: -height,
middle: -height / 2
}
var x = p.x + offset[0] + dx[anchor[0]];
var y = p.y + offset[1] + dy[anchor[1]];
var x = p.x + offset[0] + dx[anchor[0]]
var y = p.y + offset[1] + dy[anchor[1]]
return [x, y, x + width, y + height];
return [x, y, x + width, y + height]
}
return L.TileLayer.Canvas.extend({
var c = L.TileLayer.Canvas.extend({
onAdd: function (map) {
L.TileLayer.Canvas.prototype.onAdd.call(this, map);
if (this.data) {
this.prepareLabels();
}
L.TileLayer.Canvas.prototype.onAdd.call(this, map)
if (this.data)
this.prepareLabels()
},
setData: function (d) {
this.data = d;
if (this._map) {
this.prepareLabels();
}
this.data = d
if (this._map)
this.prepareLabels()
},
prepareLabels: function () {
var d = this.data;
var d = this.data
// label:
// - position (WGS84 coords)
@ -99,142 +92,137 @@ define(["leaflet", "rbush"],
// - label (string)
// - color (string)
var labelsOnline = d.online.map(prepareLabel("rgba(0, 0, 0, 0.9)", 10, 8, true, 13));
var labelsOffline = d.offline.map(prepareLabel("rgba(212, 62, 42, 0.9)", 9, 5, false, 16));
var labelsNew = d.new.map(prepareLabel("rgba(48, 99, 20, 0.9)", 11, 8, true, 0));
var labelsLost = d.lost.map(prepareLabel("rgba(212, 62, 42, 0.9)", 11, 8, true, 0));
var labelsOnline = d.online.map(prepareLabel("rgba(0, 0, 0, 0.9)", 10, 8, true, 13))
var labelsOffline = d.offline.map(prepareLabel("rgba(212, 62, 42, 0.9)", 9, 5, false, 16))
var labelsNew = d.new.map(prepareLabel("rgba(48, 99, 20, 0.9)", 11, 8, true, 0))
var labelsLost = d.lost.map(prepareLabel("rgba(212, 62, 42, 0.9)", 11, 8, true, 0))
var labels = []
.concat(labelsNew)
.concat(labelsLost)
.concat(labelsOnline)
.concat(labelsOffline);
.concat(labelsNew)
.concat(labelsLost)
.concat(labelsOnline)
.concat(labelsOffline)
var minZoom = this.options.minZoom;
var maxZoom = this.options.maxZoom;
var minZoom = this.options.minZoom
var maxZoom = this.options.maxZoom
var trees = [];
var trees = []
var map = this._map;
var map = this._map
function nodeToRect(z) {
return function (d) {
var p = map.project(d.position, z);
var p = map.project(d.position, z)
return [p.x - nodeRadius, p.y - nodeRadius,
p.x + nodeRadius, p.y + nodeRadius];
};
p.x + nodeRadius, p.y + nodeRadius]
}
}
for (var z = minZoom; z <= maxZoom; z++) {
trees[z] = rbush(9);
trees[z].load(labels.map(nodeToRect(z)));
trees[z] = rbush(9)
trees[z].load(labels.map(nodeToRect(z)))
}
labels = labels.map(function (d) {
var best = labelLocations.map(function (loc) {
var offset = calcOffset(d.offset, loc);
var z;
var offset = calcOffset(d.offset, loc)
var z
for (z = maxZoom; z >= d.minZoom; z--) {
var p = map.project(d.position, z);
var rect = labelRect(p, offset, loc, d, minZoom, maxZoom, z);
var candidates = trees[z].search(rect);
var p = map.project(d.position, z)
var rect = labelRect(p, offset, loc, d, minZoom, maxZoom, z)
var candidates = trees[z].search(rect)
if (candidates.length > 0) {
break;
}
if (candidates.length > 0)
break
}
return {loc: loc, z: z + 1};
return {loc: loc, z: z + 1}
}).filter(function (d) {
return d.z <= maxZoom;
return d.z <= maxZoom
}).sort(function (a, b) {
return a.z - b.z;
})[0];
return a.z - b.z
})[0]
if (best !== undefined) {
d.offset = calcOffset(d.offset, best.loc);
d.minZoom = best.z;
d.anchor = best.loc;
d.offset = calcOffset(d.offset, best.loc)
d.minZoom = best.z
d.anchor = best.loc
for (var z = maxZoom; z >= best.z; z--) {
var p = map.project(d.position, z);
var rect = labelRect(p, d.offset, best.loc, d, minZoom, maxZoom, z);
trees[z].insert(rect);
var p = map.project(d.position, z)
var rect = labelRect(p, d.offset, best.loc, d, minZoom, maxZoom, z)
trees[z].insert(rect)
}
return d;
} else {
return undefined;
}
}).filter(function (d) {
return d !== undefined;
});
return d
} else
return undefined
}).filter(function (d) { return d !== undefined })
this.margin = 16;
this.margin = 16
if (labels.length > 0) {
if (labels.length > 0)
this.margin += labels.map(function (d) {
return d.width;
}).sort().reverse()[0];
}
return d.width
}).sort().reverse()[0]
this.labels = rbush(9);
this.labels.load(labels.map(mapRTree));
this.labels = rbush(9)
this.labels.load(labels.map(mapRTree))
this.redraw();
this.redraw()
},
drawTile: function (canvas, tilePoint, zoom) {
function getTileBBox(s, map, tileSize, margin) {
var tl = map.unproject([s.x - margin, s.y - margin]);
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize]);
var tl = map.unproject([s.x - margin, s.y - margin])
var br = map.unproject([s.x + margin + tileSize, s.y + margin + tileSize])
return [br.lat, tl.lng, tl.lat, br.lng];
return [br.lat, tl.lng, tl.lat, br.lng]
}
if (!this.labels) {
return;
}
if (!this.labels)
return
var tileSize = this.options.tileSize;
var s = tilePoint.multiplyBy(tileSize);
var map = this._map;
var tileSize = this.options.tileSize
var s = tilePoint.multiplyBy(tileSize)
var map = this._map
function projectNodes(d) {
var p = map.project(d.label.position);
var p = map.project(d.label.position)
p.x -= s.x;
p.y -= s.y;
p.x -= s.x
p.y -= s.y
return {p: p, label: d.label};
return {p: p, label: d.label}
}
var bbox = getTileBBox(s, map, tileSize, this.margin);
var bbox = getTileBBox(s, map, tileSize, this.margin)
var labels = this.labels.search(bbox).map(projectNodes);
var labels = this.labels.search(bbox).map(projectNodes)
var ctx = canvas.getContext("2d");
var ctx = canvas.getContext("2d")
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(255, 255, 255, 0.8)";
ctx.miterLimit = 2;
ctx.lineWidth = 5
ctx.strokeStyle = "rgba(255, 255, 255, 0.8)"
ctx.miterLimit = 2
function drawLabel(d) {
ctx.font = d.label.font;
ctx.textAlign = d.label.anchor[0];
ctx.textBaseline = d.label.anchor[1];
ctx.fillStyle = d.label.fillStyle;
ctx.font = d.label.font
ctx.textAlign = d.label.anchor[0]
ctx.textBaseline = d.label.anchor[1]
ctx.fillStyle = d.label.fillStyle
if (d.label.stroke) {
ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
}
if (d.label.stroke)
ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1])
ctx.fillText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
ctx.fillText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1])
}
labels.filter(function (d) {
return zoom >= d.label.minZoom;
}).forEach(drawLabel);
return zoom >= d.label.minZoom
}).forEach(drawLabel)
}
});
});
})
return c
})

View file

@ -1,63 +1,55 @@
define(["helper"], function (helper) {
"use strict";
define(function () {
return function (config) {
var self = this;
var stats, timestamp;
var self = this
var stats, timestamp
self.setData = function (d) {
var totalNodes = helper.sum(d.nodes.all.map(helper.one));
var totalOnlineNodes = helper.sum(d.nodes.all.filter(helper.online).map(helper.one));
var totalOfflineNodes = helper.sum(d.nodes.all.filter(function (node) {
return !node.flags.online;
}).map(helper.one));
var totalNewNodes = helper.sum(d.nodes.new.map(helper.one));
var totalLostNodes = helper.sum(d.nodes.lost.map(helper.one));
var totalClients = helper.sum(d.nodes.all.filter(helper.online).map(function (d) {
return d.statistics.clients ? d.statistics.clients : 0;
}));
var totalGateways = helper.sum(Array.from(new Set(d.nodes.all.filter(helper.online).map(function (d) {
return ("gateway" in d.statistics && d.statistics.gateway.id) ? d.statistics.gateway.id : d.statistics.gateway;
}).concat(d.nodes.all.filter(function (d) {
return d.flags.gateway;
})))).map(function (d) {
return (typeof d === "string") ? 1 : 0;
}));
var totalNodes = sum(d.nodes.all.map(one))
var totalOnlineNodes = sum(d.nodes.all.filter(online).map(one))
var totalOfflineNodes = sum(d.nodes.all.filter(function (node) {return !node.flags.online}).map(one))
var totalNewNodes = sum(d.nodes.new.map(one))
var totalLostNodes = sum(d.nodes.lost.map(one))
var totalClients = sum(d.nodes.all.filter(online).map( function (d) {
return d.statistics.clients ? d.statistics.clients : 0
}))
var totalGateways = sum(Array.from(new Set(d.nodes.all.filter(online).map( function(d) {
return ("gateway" in d.statistics && d.statistics.gateway.id) ? d.statistics.gateway.id : d.statistics.gateway
}).concat(d.nodes.all.filter( function (d) {
return d.flags.gateway
})))).map(function(d) {
return (typeof d === "string") ? 1 : 0
}))
var nodetext = [{count: totalOnlineNodes, label: "online"},
{count: totalOfflineNodes, label: "offline"},
{count: totalNewNodes, label: "neu"},
{count: totalLostNodes, label: "verschwunden"}
].filter(function (d) {
return d.count > 0;
})
.map(function (d) {
return [d.count, d.label].join(" ");
})
.join(", ");
var nodetext = [{ count: totalOnlineNodes, label: "online" },
{ count: totalOfflineNodes, label: "offline" },
{ count: totalNewNodes, label: "neu" },
{ count: totalLostNodes, label: "verschwunden" }
].filter( function (d) { return d.count > 0 } )
.map( function (d) { return [d.count, d.label].join(" ") } )
.join(", ")
stats.textContent = totalNodes + " Knoten " +
"(" + nodetext + "), " +
totalClients + " Client" + ( totalClients === 1 ? ", " : "s, " ) +
totalGateways + " Gateways";
"(" + nodetext + "), " +
totalClients + " Client" + ( totalClients === 1 ? ", " : "s, " ) +
totalGateways + " Gateways"
timestamp.textContent = "Diese Daten sind von " + d.timestamp.format("LLLL") + ".";
};
timestamp.textContent = "Diese Daten sind von " + d.timestamp.format("LLLL") + "."
}
self.render = function (el) {
var h2 = document.createElement("h2");
h2.textContent = config.siteName;
el.appendChild(h2);
var h2 = document.createElement("h2")
h2.textContent = config.siteName
el.appendChild(h2)
var p = document.createElement("p");
el.appendChild(p);
stats = document.createTextNode("");
p.appendChild(stats);
p.appendChild(document.createElement("br"));
timestamp = document.createTextNode("");
p.appendChild(timestamp);
};
var p = document.createElement("p")
el.appendChild(p)
stats = document.createTextNode("")
p.appendChild(stats)
p.appendChild(document.createElement("br"))
timestamp = document.createTextNode("")
p.appendChild(timestamp)
}
return self;
};
});
return self
}
})

View file

@ -1,109 +1,97 @@
define(["sorttable", "virtual-dom", "helper"], function (SortTable, V, helper) {
"use strict";
define(["sorttable", "virtual-dom", "numeral"], function (SortTable, V, numeral) {
function getUptime(now, d) {
if (d.flags.online && "uptime" in d.statistics) {
return Math.round(d.statistics.uptime);
} else if (!d.flags.online && "lastseen" in d) {
return Math.round(-(now.unix() - d.lastseen.unix()));
}
if (d.flags.online && "uptime" in d.statistics)
return Math.round(d.statistics.uptime)
else if (!d.flags.online && "lastseen" in d)
return Math.round(-(now.unix() - d.lastseen.unix()))
}
function showUptime(uptime) {
var s = "";
uptime /= 3600;
var s = ""
uptime /= 3600
if (uptime !== undefined) {
if (Math.abs(uptime) >= 24) {
s = Math.round(uptime / 24) + "d";
} else {
s = Math.round(uptime) + "h";
}
}
if (uptime !== undefined)
if (Math.abs(uptime) >= 24)
s = Math.round(uptime / 24) + "d"
else
s = Math.round(uptime) + "h"
return s;
return s
}
var headings = [{
name: "Knoten",
sort: function (a, b) {
var aname = typeof a.nodeinfo.hostname === "string" ? a.nodeinfo.hostname : a.nodeinfo.node_id;
var bname = typeof b.nodeinfo.hostname === "string" ? b.nodeinfo.hostname : b.nodeinfo.node_id;
if (typeof aname === "string" && typeof bname === "string") {
return aname.localeCompare(bname);
}
return typeof aname === "string" ? 1 : typeof bname === "string" ? -1 : 0;
},
reverse: false
},
{
name: "Uptime",
sort: function (a, b) {
return a.uptime - b.uptime;
},
reverse: true
},
{
name: "#Links",
sort: function (a, b) {
return a.meshlinks - b.meshlinks;
},
reverse: true
},
{
name: "Clients",
sort: function (a, b) {
return ("clients" in a.statistics ? a.statistics.clients : -1) -
("clients" in b.statistics ? b.statistics.clients : -1);
},
reverse: true
}];
var headings = [{ name: "Knoten",
sort: function (a, b) {
var aname = typeof a.nodeinfo.hostname === "string" ? a.nodeinfo.hostname : a.nodeinfo.node_id
var bname = typeof b.nodeinfo.hostname === "string" ? b.nodeinfo.hostname : b.nodeinfo.node_id
if (typeof aname === "string" && typeof bname === "string")
return aname.localeCompare(bname)
return typeof aname === "string" ? 1 : typeof bname === "string" ? -1 : 0
},
reverse: false
},
{ name: "Uptime",
sort: function (a, b) {
return a.uptime - b.uptime
},
reverse: true
},
{ name: "#Links",
sort: function (a, b) {
return a.meshlinks - b.meshlinks
},
reverse: true
},
{ name: "Clients",
sort: function (a, b) {
return ("clients" in a.statistics ? a.statistics.clients : -1) -
("clients" in b.statistics ? b.statistics.clients : -1)
},
reverse: true
}]
return function (router) {
return function(router) {
function renderRow(d) {
var td1Content = [];
var aClass = ["hostname", d.flags.online ? "online" : "offline"];
var td1Content = []
var aClass = ["hostname", d.flags.online ? "online" : "offline"]
td1Content.push(V.h("a", {
className: aClass.join(" "),
onclick: router.node(d),
href: "#!n:" + d.nodeinfo.node_id
}, d.nodeinfo.hostname));
td1Content.push(V.h("a", { className: aClass.join(" "),
onclick: router.node(d),
href: "#!n:" + d.nodeinfo.node_id
}, d.nodeinfo.hostname))
if (helper.hasLocation(d)) {
td1Content.push(V.h("span", {className: "icon ion-location"}));
}
if (has_location(d))
td1Content.push(V.h("span", {className: "icon ion-location"}))
var td1 = V.h("td", td1Content);
var td2 = V.h("td", showUptime(d.uptime));
var td3 = V.h("td", d.meshlinks.toString());
var td4 = V.h("td", ("clients" in d.statistics ? d.statistics.clients : 0).toFixed(0));
var td1 = V.h("td", td1Content)
var td2 = V.h("td", showUptime(d.uptime))
var td3 = V.h("td", d.meshlinks.toString())
var td4 = V.h("td", numeral("clients" in d.statistics ? d.statistics.clients : "").format("0,0"))
return V.h("tr", [td1, td2, td3, td4]);
return V.h("tr", [td1, td2, td3, td4])
}
var table = new SortTable(headings, 0, renderRow);
var table = new SortTable(headings, 0, renderRow)
this.render = function (d) {
var el = document.createElement("div");
d.appendChild(el);
var el = document.createElement("div")
d.appendChild(el)
var h2 = document.createElement("h2");
h2.textContent = "Alle Knoten";
el.appendChild(h2);
var h2 = document.createElement("h2")
h2.textContent = "Alle Knoten"
el.appendChild(h2)
el.appendChild(table.el);
};
el.appendChild(table.el)
}
this.setData = function (d) {
var data = d.nodes.all.map(function (e) {
var n = Object.create(e);
n.uptime = getUptime(d.now, e) || 0;
n.meshlinks = e.meshlinks || 0;
return n;
});
var n = Object.create(e)
n.uptime = getUptime(d.now, e) || 0
n.meshlinks = e.meshlinks || 0
return n
})
table.setData(data);
};
};
});
table.setData(data)
}
}
})

View file

@ -1,284 +1,236 @@
define(["chroma-js", "virtual-dom", "filters/genericnode", "helper"],
function (Chroma, V, Filter, helper) {
"use strict";
define(["chroma-js", "virtual-dom", "numeral-intl", "filters/genericnode", "vercomp" ],
function (Chroma, V, numeral, Filter, vercomp) {
return function (config, filterManager) {
var self = this;
var scale = Chroma.scale("YlGnBu").mode("lab");
return function (config, filterManager) {
var self = this
var scale = Chroma.scale("YlGnBu").mode("lab")
var statusTable = document.createElement("table");
statusTable.classList.add("proportion");
var statusTable = document.createElement("table")
statusTable.classList.add("proportion")
var fwTable = document.createElement("table");
fwTable.classList.add("proportion");
var fwTable = document.createElement("table")
fwTable.classList.add("proportion")
var hwTable = document.createElement("table");
hwTable.classList.add("proportion");
var hwTable = document.createElement("table")
hwTable.classList.add("proportion")
var geoTable = document.createElement("table");
geoTable.classList.add("proportion");
var geoTable = document.createElement("table")
geoTable.classList.add("proportion")
var autoTable = document.createElement("table");
autoTable.classList.add("proportion");
var autoTable = document.createElement("table")
autoTable.classList.add("proportion")
var uplinkTable = document.createElement("table");
uplinkTable.classList.add("proportion");
var uplinkTable = document.createElement("table")
uplinkTable.classList.add("proportion")
var gwNodesTable = document.createElement("table");
gwNodesTable.classList.add("proportion");
var gwNodesTable = document.createElement("table")
gwNodesTable.classList.add("proportion")
var gwClientsTable = document.createElement("table");
gwClientsTable.classList.add("proportion");
var gwClientsTable = document.createElement("table")
gwClientsTable.classList.add("proportion")
var siteTable = document.createElement("table");
siteTable.classList.add("proportion");
var siteTable = document.createElement("table")
siteTable.classList.add("proportion")
function showStatGlobal(o) {
return helper.showStat(o);
function showStatGlobal(o) {
return showStat(o)
}
function count(nodes, key, f) {
var dict = {}
nodes.forEach( function (d) {
var v = dictGet(d, key.slice(0))
if (f !== undefined)
v = f(v)
if (v === null)
return
dict[v] = 1 + (v in dict ? dict[v] : 0)
})
return Object.keys(dict).map(function (d) { return [d, dict[d], key, f] })
}
function countClients(nodes, key, f) {
var dict = {}
nodes.forEach( function (d) {
var v = dictGet(d, key.slice(0))
if (f !== undefined)
v = f(v)
if (v === null)
return
dict[v] = d.statistics.clients + (v in dict ? dict[v] : 0)
})
return Object.keys(dict).map(function (d) { return [d, dict[d], key, f] })
}
function addFilter(filter) {
return function () {
filterManager.addFilter(filter)
return false
}
}
function count(nodes, key, f) {
var dict = {};
function fillTable(name, table, data) {
if (!table.last)
table.last = V.h("table")
nodes.forEach(function (d) {
var v = helper.dictGet(d, key.slice(0));
var max = 0
data.forEach(function (d) {
if (d[1] > max)
max = d[1]
})
if (f !== undefined) {
v = f(v);
}
var items = data.map(function (d) {
var v = d[1] / max
var c1 = Chroma.contrast(scale(v), "white")
var c2 = Chroma.contrast(scale(v), "black")
if (v === null) {
return;
}
var filter = new Filter(name, d[2], d[0], d[3])
dict[v] = 1 + (v in dict ? dict[v] : 0);
});
var a = V.h("a", { href: "#", onclick: addFilter(filter) }, d[0])
return Object.keys(dict).map(function (d) {
return [d, dict[d], key, f];
});
}
var th = V.h("th", a)
var td = V.h("td", V.h("span", {style: {
width: Math.round(v * 100) + "%",
backgroundColor: scale(v).hex(),
color: c1 > c2 ? "white" : "black"
}}, numeral(d[1]).format("0,0")))
function countClients(nodes, key, f) {
var dict = {};
return V.h("tr", [th, td])
})
nodes.forEach(function (d) {
var v = helper.dictGet(d, key.slice(0));
var tableNew = V.h("table", items)
table = V.patch(table, V.diff(table.last, tableNew))
table.last = tableNew
}
if (f !== undefined) {
v = f(v);
}
self.setData = function (data) {
var onlineNodes = data.nodes.all.filter(online)
var nodes = onlineNodes.concat(data.nodes.lost)
var nodeDict = {}
if (v === null) {
return;
}
data.nodes.all.forEach(function (d) {
nodeDict[d.nodeinfo.node_id] = d
})
dict[v] = d.statistics.clients + (v in dict ? dict[v] : 0);
});
return Object.keys(dict).map(function (d) {
return [d, dict[d], key, f];
});
}
function addFilter(filter) {
return function () {
filterManager.addFilter(filter);
return false;
};
}
function fillTable(name, table, data) {
if (!table.last) {
table.last = V.h("table");
var statusDict = count(nodes, ["flags", "online"], function (d) {
return d ? "online" : "offline"
})
var fwDict = count(nodes, ["nodeinfo", "software", "firmware", "release"])
var hwDict = count(nodes, ["nodeinfo", "hardware", "model"], function (d) {
if (d) {
d = d.replace(/\(r\)|\(tm\)/gi, "").replace(/AMD |Intel |TP-Link | CPU| Processor/g, "")
if (d.indexOf("@") > 0) d = d.substring(0, d.indexOf("@"))
}
return d
})
var geoDict = count(nodes, ["nodeinfo", "location"], function (d) {
return d && d.longitude && d.latitude ? "ja" : "nein"
})
var max = 0;
data.forEach(function (d) {
if (d[1] > max) {
max = d[1];
}
});
var autoDict = count(nodes, ["nodeinfo", "software", "autoupdater"], function (d) {
if (d === null)
return null
else if (d.enabled)
return d.branch
else
return "(deaktiviert)"
})
var items = data.map(function (d) {
var v = d[1] / max;
var c1 = Chroma.contrast(scale(v), "white");
var c2 = Chroma.contrast(scale(v), "black");
var uplinkDict = count(nodes, ["flags", "uplink"], function (d) {
return d ? "ja" : "nein"
})
var filter = new Filter(name, d[2], d[0], d[3]);
var gwNodesDict = count(onlineNodes, ["statistics", "gateway"], function (d) {
if (d === null)
return null
var a = V.h("a", {href: "#", onclick: addFilter(filter)}, d[0]);
if (d.node)
return d.node.nodeinfo.hostname
var th = V.h("th", a);
var td = V.h("td", V.h("span", {
style: {
width: Math.round(v * 100) + "%",
backgroundColor: scale(v).hex(),
color: c1 > c2 ? "white" : "black"
}
}, d[1].toFixed(0)));
if (d.id)
return d.id
return V.h("tr", [th, td]);
});
return d
})
var tableNew = V.h("table", items);
table = V.patch(table, V.diff(table.last, tableNew));
table.last = tableNew;
var gwClientsDict = countClients(onlineNodes, ["statistics", "gateway"], function (d) {
if (d === null)
return null
if (d.node)
return d.node.nodeinfo.hostname
if (d.id)
return d.id
return d
})
var siteDict = count(nodes, ["nodeinfo", "system", "site_code"], function (d) {
var rt = d
if (config.siteNames)
config.siteNames.forEach( function (t) {
if(d === t.site)
rt = t.name
})
return rt
})
fillTable("Status", statusTable, statusDict.sort(function (a, b) { return b[1] - a[1] }))
fillTable("Firmware", fwTable, fwDict.sort(function (a, b) { return vercomp(b[0], a[0]) }))
fillTable("Hardware", hwTable, hwDict.sort(function (a, b) { return b[1] - a[1] }))
fillTable("Koordinaten", geoTable, geoDict.sort(function (a, b) { return b[1] - a[1] }))
fillTable("Uplink", uplinkTable, uplinkDict.sort(function (a, b) { return b[1] - a[1] }))
fillTable("Autom. Updates", autoTable, autoDict.sort(function (a, b) { return b[1] - a[1] }))
fillTable("Gateway", gwNodesTable, gwNodesDict.sort(function (a, b) { return b[1] - a[1] }))
fillTable("Gateway", gwClientsTable, gwClientsDict.sort(function (a, b) { return b[1] - a[1] }))
fillTable("Site", siteTable, siteDict.sort(function (a, b) { return b[1] - a[1] }))
}
self.render = function (el) {
var h2
self.renderSingle(el, "Status", statusTable)
self.renderSingle(el, "Nodes an Gateway", gwNodesTable)
self.renderSingle(el, "Clients an Gateway", gwClientsTable)
self.renderSingle(el, "Firmwareversionen", fwTable)
self.renderSingle(el, "Uplink", uplinkTable)
self.renderSingle(el, "Hardwaremodelle", hwTable)
self.renderSingle(el, "Auf der Karte sichtbar", geoTable)
self.renderSingle(el, "Autoupdater", autoTable)
self.renderSingle(el, "Site", siteTable)
if (config.globalInfos)
config.globalInfos.forEach(function (globalInfo) {
h2 = document.createElement("h2")
h2.textContent = globalInfo.name
el.appendChild(h2)
el.appendChild(showStatGlobal(globalInfo))
})
}
self.setData = function (data) {
var onlineNodes = data.nodes.all.filter(helper.online);
var nodes = onlineNodes.concat(data.nodes.lost);
var nodeDict = {};
data.nodes.all.forEach(function (d) {
nodeDict[d.nodeinfo.node_id] = d;
});
var statusDict = count(nodes, ["flags", "online"], function (d) {
return d ? "online" : "offline";
});
var fwDict = count(nodes, ["nodeinfo", "software", "firmware", "release"]);
var hwDict = count(nodes, ["nodeinfo", "hardware", "model"], function (d) {
if (d) {
d = d.replace(/\(r\)|\(tm\)/gi, "").replace(/AMD |Intel |TP-Link | CPU| Processor/g, "");
if (d.indexOf("@") > 0) {
d = d.substring(0, d.indexOf("@"));
}
}
return d;
});
var geoDict = count(nodes, ["nodeinfo", "location"], function (d) {
return d && d.longitude && d.latitude ? "ja" : "nein";
});
var autoDict = count(nodes, ["nodeinfo", "software", "autoupdater"], function (d) {
if (d === null) {
return null;
} else if (d.enabled) {
return d.branch;
} else {
return "(deaktiviert)";
}
});
var uplinkDict = count(nodes, ["flags", "uplink"], function (d) {
return d ? "ja" : "nein";
});
var gwNodesDict = count(onlineNodes, ["statistics", "gateway"], function (d) {
if (d === null) {
return null;
}
if (d.node) {
return d.node.nodeinfo.hostname;
}
if (d.id) {
return d.id;
}
return d;
});
var gwClientsDict = countClients(onlineNodes, ["statistics", "gateway"], function (d) {
if (d === null) {
return null;
}
if (d.node) {
return d.node.nodeinfo.hostname;
}
if (d.id) {
return d.id;
}
return d;
});
var siteDict = count(nodes, ["nodeinfo", "system", "site_code"], function (d) {
var rt = d;
if (config.siteNames) {
config.siteNames.forEach(function (t) {
if (d === t.site) {
rt = t.name;
}
});
}
return rt;
});
fillTable("Status", statusTable, statusDict.sort(function (a, b) {
return b[1] - a[1];
}));
fillTable("Firmware", fwTable, fwDict.sort(function (a, b) {
if (b[0] < a[0]) {
return -1;
}
if (b[0] > a[0]) {
return 1;
}
return 0;
}));
fillTable("Hardware", hwTable, hwDict.sort(function (a, b) {
return b[1] - a[1];
}));
fillTable("Koordinaten", geoTable, geoDict.sort(function (a, b) {
return b[1] - a[1];
}));
fillTable("Uplink", uplinkTable, uplinkDict.sort(function (a, b) {
return b[1] - a[1];
}));
fillTable("Autom. Updates", autoTable, autoDict.sort(function (a, b) {
return b[1] - a[1];
}));
fillTable("Gateway", gwNodesTable, gwNodesDict.sort(function (a, b) {
return b[1] - a[1];
}));
fillTable("Gateway", gwClientsTable, gwClientsDict.sort(function (a, b) {
return b[1] - a[1];
}));
fillTable("Site", siteTable, siteDict.sort(function (a, b) {
return b[1] - a[1];
}));
};
self.render = function (el) {
var h2;
self.renderSingle(el, "Status", statusTable);
self.renderSingle(el, "Nodes an Gateway", gwNodesTable);
self.renderSingle(el, "Clients an Gateway", gwClientsTable);
self.renderSingle(el, "Firmwareversionen", fwTable);
self.renderSingle(el, "Uplink", uplinkTable);
self.renderSingle(el, "Hardwaremodelle", hwTable);
self.renderSingle(el, "Auf der Karte sichtbar", geoTable);
self.renderSingle(el, "Autoupdater", autoTable);
self.renderSingle(el, "Site", siteTable);
if (config.globalInfos) {
config.globalInfos.forEach(function (globalInfo) {
h2 = document.createElement("h2");
h2.textContent = globalInfo.name;
el.appendChild(h2);
el.appendChild(showStatGlobal(globalInfo));
});
}
};
self.renderSingle = function (el, heading, table) {
var h2;
h2 = document.createElement("h2");
h2.textContent = heading;
h2.onclick = function () {
table.classList.toggle("hidden");
};
el.appendChild(h2);
el.appendChild(table);
};
return self;
};
});
self.renderSingle = function (el, heading, table) {
var h2
h2 = document.createElement("h2")
h2.textContent = heading
h2.onclick = function () {
table.classList.toggle("hidden")
}
el.appendChild(h2)
el.appendChild(table)
}
return self
}
})

View file

@ -1,232 +1,214 @@
define(["helper"], function (helper) {
"use strict";
define(function () {
return function () {
var self = this;
var objects = {nodes: {}, links: {}};
var targets = [];
var views = {};
var currentView;
var currentObject;
var running = false;
var self = this
var objects = { nodes: {}, links: {} }
var targets = []
var views = {}
var currentView
var currentObject
var running = false
function saveState() {
var e = [];
var e = []
if (currentView) {
e.push("v:" + currentView);
}
if (currentView)
e.push("v:" + currentView)
if (currentObject) {
if ("node" in currentObject) {
e.push("n:" + encodeURIComponent(currentObject.node.nodeinfo.node_id));
}
if ("node" in currentObject)
e.push("n:" + encodeURIComponent(currentObject.node.nodeinfo.node_id))
if ("link" in currentObject) {
e.push("l:" + encodeURIComponent(currentObject.link.id));
}
if ("link" in currentObject)
e.push("l:" + encodeURIComponent(currentObject.link.id))
}
var s = "#!" + e.join(";");
var s = "#!" + e.join(";")
window.history.pushState(s, undefined, s);
window.history.pushState(s, undefined, s)
}
function resetView(push) {
push = helper.trueDefault(push);
push = trueDefault(push)
targets.forEach(function (t) {
t.resetView();
});
targets.forEach( function (t) {
t.resetView()
})
if (push) {
currentObject = undefined;
saveState();
currentObject = undefined
saveState()
}
}
function gotoNode(d) {
if (!d) {
return false;
}
if (!d)
return false
targets.forEach(function (t) {
t.gotoNode(d);
});
targets.forEach( function (t) {
t.gotoNode(d)
})
return true;
return true
}
function gotoLink(d) {
if (!d) {
return false;
}
if (!d)
return false
targets.forEach(function (t) {
t.gotoLink(d);
});
targets.forEach( function (t) {
t.gotoLink(d)
})
return true;
return true
}
function gotoLocation(d) {
if (!d) {
return false;
}
if (!d)
return false
targets.forEach(function (t) {
if (!t.gotoLocation) {
console.warn("has no gotoLocation", t);
}
t.gotoLocation(d);
});
targets.forEach( function (t) {
if(!t.gotoLocation)console.warn("has no gotoLocation", t)
t.gotoLocation(d)
})
return true;
return true
}
function loadState(s) {
if (!s) {
return false;
}
if (!s)
return false
s = decodeURIComponent(s);
s = decodeURIComponent(s)
if (!s.startsWith("#!")) {
return false;
}
if (!s.startsWith("#!"))
return false
var targetSet = false;
var targetSet = false
s.slice(2).split(";").forEach(function (d) {
var args = d.split(":");
var args = d.split(":")
if (args[0] === "v" && args[1] in views) {
currentView = args[1];
views[args[1]]();
currentView = args[1]
views[args[1]]()
}
var id;
var id
if (args[0] === "n") {
id = args[1];
id = args[1]
if (id in objects.nodes) {
currentObject = {node: objects.nodes[id]};
gotoNode(objects.nodes[id]);
targetSet = true;
currentObject = { node: objects.nodes[id] }
gotoNode(objects.nodes[id])
targetSet = true
}
}
if (args[0] === "l") {
id = args[1];
id = args[1]
if (id in objects.links) {
currentObject = {link: objects.links[id]};
gotoLink(objects.links[id]);
targetSet = true;
currentObject = { link: objects.links[id] }
gotoLink(objects.links[id])
targetSet = true
}
}
});
})
return targetSet;
return targetSet
}
self.start = function () {
running = true;
running = true
if (!loadState(window.location.hash)) {
resetView(false);
}
if (!loadState(window.location.hash))
resetView(false)
window.onpopstate = function (d) {
if (!loadState(d.state)) {
resetView(false);
}
};
};
if (!loadState(d.state))
resetView(false)
}
}
self.view = function (d) {
if (d in views) {
views[d]();
views[d]()
if (!currentView || running) {
currentView = d;
}
if (!currentView || running)
currentView = d
if (!running) {
return;
}
if (!running)
return
saveState();
saveState()
if (!currentObject) {
resetView(false);
return;
resetView(false)
return
}
if ("node" in currentObject) {
gotoNode(currentObject.node);
}
if ("node" in currentObject)
gotoNode(currentObject.node)
if ("link" in currentObject) {
gotoLink(currentObject.link);
}
if ("link" in currentObject)
gotoLink(currentObject.link)
}
};
}
self.node = function (d) {
return function () {
if (gotoNode(d)) {
currentObject = {node: d};
saveState();
currentObject = { node: d }
saveState()
}
return false;
};
};
return false
}
}
self.link = function (d) {
return function () {
if (gotoLink(d)) {
currentObject = {link: d};
saveState();
currentObject = { link: d }
saveState()
}
return false;
};
};
return false
}
}
self.gotoLocation = gotoLocation;
self.gotoLocation = gotoLocation
self.reset = function () {
resetView();
};
resetView()
}
self.addTarget = function (d) {
targets.push(d);
};
targets.push(d)
}
self.removeTarget = function (d) {
targets = targets.filter(function (e) {
return d !== e;
});
};
targets = targets.filter( function (e) {
return d !== e
})
}
self.addView = function (k, d) {
views[k] = d;
};
views[k] = d
}
self.setData = function (data) {
objects.nodes = {};
objects.links = {};
objects.nodes = {}
objects.links = {}
data.nodes.all.forEach(function (d) {
objects.nodes[d.nodeinfo.node_id] = d;
});
data.nodes.all.forEach( function (d) {
objects.nodes[d.nodeinfo.node_id] = d
})
data.graph.links.forEach(function (d) {
objects.links[d.id] = d;
});
};
data.graph.links.forEach( function (d) {
objects.links[d.id] = d
})
}
return self;
};
});
return self
}
})

View file

@ -1,52 +1,49 @@
define(function () {
"use strict";
define([], function () {
return function (el) {
var self = this;
var self = this
var sidebar = document.createElement("div");
sidebar.classList.add("sidebar");
el.appendChild(sidebar);
var sidebar = document.createElement("div")
sidebar.classList.add("sidebar")
el.appendChild(sidebar)
var button = document.createElement("button");
sidebar.appendChild(button);
var button = document.createElement("button")
sidebar.appendChild(button)
button.classList.add("sidebarhandle");
button.classList.add("sidebarhandle")
button.onclick = function () {
sidebar.classList.toggle("hidden");
};
sidebar.classList.toggle("hidden")
}
var container = document.createElement("div");
container.classList.add("container");
sidebar.appendChild(container);
var container = document.createElement("div")
container.classList.add("container")
sidebar.appendChild(container)
self.getWidth = function () {
if (sidebar.classList.contains("hidden")) {
return 0;
}
if (sidebar.classList.contains("hidden"))
return 0
var small = window.matchMedia("(max-width: 630pt)");
return small.matches ? 0 : sidebar.offsetWidth;
};
var small = window.matchMedia("(max-width: 630pt)")
return small.matches ? 0 : sidebar.offsetWidth
}
self.add = function (d) {
d.render(container);
};
d.render(container)
}
self.ensureVisible = function () {
sidebar.classList.remove("hidden");
};
sidebar.classList.remove("hidden")
}
self.hide = function () {
container.classList.add("hidden");
};
container.classList.add("hidden")
}
self.reveal = function () {
container.classList.remove("hidden");
};
container.classList.remove("hidden")
}
self.container = sidebar;
self.container = sidebar
return self;
};
});
return self
}
})

View file

@ -1,68 +1,63 @@
define(["moment", "virtual-dom", "helper", "moment.de"], function (moment, V, helper) {
"use strict";
return function (nodes, field, router, title) {
var self = this;
var el, tbody;
define(["moment", "virtual-dom"], function (moment, V) {
return function(nodes, field, router, title) {
var self = this
var el, tbody
self.render = function (d) {
el = document.createElement("div");
d.appendChild(el);
};
el = document.createElement("div")
d.appendChild(el)
}
self.setData = function (data) {
var list = data.nodes[nodes];
var list = data.nodes[nodes]
if (list.length === 0) {
while (el.firstChild) {
el.removeChild(el.firstChild);
}
while (el.firstChild)
el.removeChild(el.firstChild)
tbody = null;
tbody = null
return;
return
}
if (!tbody) {
var h2 = document.createElement("h2");
h2.textContent = title;
el.appendChild(h2);
var h2 = document.createElement("h2")
h2.textContent = title
el.appendChild(h2)
var table = document.createElement("table");
el.appendChild(table);
var table = document.createElement("table")
el.appendChild(table)
tbody = document.createElement("tbody");
tbody.last = V.h("tbody");
table.appendChild(tbody);
tbody = document.createElement("tbody")
tbody.last = V.h("tbody")
table.appendChild(tbody)
}
var items = list.map(function (d) {
var time = moment(d[field]).from(data.now);
var td1Content = [];
var items = list.map( function (d) {
var time = moment(d[field]).from(data.now)
var td1Content = []
var aClass = ["hostname", d.flags.online ? "online" : "offline"];
var aClass = ["hostname", d.flags.online ? "online" : "offline"]
td1Content.push(V.h("a", {
className: aClass.join(" "),
onclick: router.node(d),
href: "#!n:" + d.nodeinfo.node_id
}, d.nodeinfo.hostname));
td1Content.push(V.h("a", { className: aClass.join(" "),
onclick: router.node(d),
href: "#!n:" + d.nodeinfo.node_id
}, d.nodeinfo.hostname))
if (helper.hasLocation(d)) {
td1Content.push(V.h("span", {className: "icon ion-location"}));
}
if (has_location(d))
td1Content.push(V.h("span", {className: "icon ion-location"}))
var td1 = V.h("td", td1Content);
var td2 = V.h("td", time);
var td1 = V.h("td", td1Content)
var td2 = V.h("td", time)
return V.h("tr", [td1, td2]);
});
return V.h("tr", [td1, td2])
})
var tbodyNew = V.h("tbody", items);
tbody = V.patch(tbody, V.diff(tbody.last, tbodyNew));
tbody.last = tbodyNew;
};
var tbodyNew = V.h("tbody", items)
tbody = V.patch(tbody, V.diff(tbody.last, tbodyNew))
tbody.last = tbodyNew
}
return self;
};
});
return self
}
})

View file

@ -1,64 +1,57 @@
define(["virtual-dom"], function (V) {
"use strict";
return function (headings, sortIndex, renderRow) {
var data;
var sortReverse = false;
var el = document.createElement("table");
var elLast = V.h("table");
return function(headings, sortIndex, renderRow) {
var data
var sortReverse = false
var el = document.createElement("table")
var elLast = V.h("table")
function sortTable(i) {
sortReverse = i === sortIndex ? !sortReverse : false;
sortIndex = i;
sortReverse = i === sortIndex ? !sortReverse : false
sortIndex = i
updateView();
updateView()
}
function sortTableHandler(i) {
return function () {
sortTable(i);
};
return function () { sortTable(i) }
}
function updateView() {
var children = [];
var children = []
if (data.length !== 0) {
var th = headings.map(function (d, i) {
var properties = {
onclick: sortTableHandler(i),
className: "sort-header"
};
var properties = { onclick: sortTableHandler(i),
className: "sort-header"
}
if (sortIndex === i) {
properties.className += sortReverse ? " sort-up" : " sort-down";
}
if (sortIndex === i)
properties.className += sortReverse ? " sort-up" : " sort-down"
return V.h("th", properties, d.name);
});
return V.h("th", properties, d.name)
})
var links = data.slice(0).sort(headings[sortIndex].sort);
var links = data.slice(0).sort(headings[sortIndex].sort)
if (headings[sortIndex].reverse ? !sortReverse : sortReverse) {
links = links.reverse();
}
if (headings[sortIndex].reverse ? !sortReverse : sortReverse)
links = links.reverse()
children.push(V.h("thead", V.h("tr", th)));
children.push(V.h("tbody", links.map(renderRow)));
children.push(V.h("thead", V.h("tr", th)))
children.push(V.h("tbody", links.map(renderRow)))
}
var elNew = V.h("table", children);
el = V.patch(el, V.diff(elLast, elNew));
elLast = elNew;
var elNew = V.h("table", children)
el = V.patch(el, V.diff(elLast, elNew))
elLast = elNew
}
this.setData = function (d) {
data = d;
updateView();
};
data = d
updateView()
}
this.el = el;
this.el = el
return this;
};
});
return this
}
})

View file

@ -1,63 +1,57 @@
define(function () {
"use strict";
define([], function () {
return function () {
var self = this;
var self = this
var tabs = document.createElement("ul");
tabs.classList.add("tabs");
var tabs = document.createElement("ul")
tabs.classList.add("tabs")
var container = document.createElement("div");
var container = document.createElement("div")
function gotoTab(li) {
for (var i = 0; i < tabs.children.length; i++) {
tabs.children[i].classList.remove("visible");
}
for (var i = 0; i < tabs.children.length; i++)
tabs.children[i].classList.remove("visible")
while (container.firstChild) {
container.removeChild(container.firstChild);
}
while (container.firstChild)
container.removeChild(container.firstChild)
li.classList.add("visible");
li.classList.add("visible")
var tab = document.createElement("div");
tab.classList.add("tab");
container.appendChild(tab);
li.child.render(tab);
var tab = document.createElement("div")
tab.classList.add("tab")
container.appendChild(tab)
li.child.render(tab)
}
function switchTab() {
gotoTab(this);
gotoTab(this)
return false;
return false
}
self.add = function (title, d) {
var li = document.createElement("li");
li.textContent = title;
li.onclick = switchTab;
li.child = d;
tabs.appendChild(li);
var li = document.createElement("li")
li.textContent = title
li.onclick = switchTab
li.child = d
tabs.appendChild(li)
var anyVisible = false;
var anyVisible = false
for (var i = 0; i < tabs.children.length; i++) {
for (var i = 0; i < tabs.children.length; i++)
if (tabs.children[i].classList.contains("visible")) {
anyVisible = true;
break;
anyVisible = true
break
}
}
if (!anyVisible) {
gotoTab(li);
}
};
if (!anyVisible)
gotoTab(li)
}
self.render = function (el) {
el.appendChild(tabs);
el.appendChild(container);
};
el.appendChild(tabs)
el.appendChild(container)
}
return self;
};
});
return self
}
})

View file

@ -1,40 +1,35 @@
define(function () {
"use strict";
return function (config) {
return function (config) {
function setTitle(d) {
var title = [config.siteName];
var title = [config.siteName]
if (d !== undefined) {
title.push(d);
}
if (d !== undefined)
title.push(d)
document.title = title.join(": ");
document.title = title.join(": ")
}
this.resetView = function () {
setTitle();
};
setTitle()
}
this.gotoNode = function (d) {
if (d) {
setTitle(d.nodeinfo.hostname);
}
};
if (d)
setTitle(d.nodeinfo.hostname)
}
this.gotoLink = function (d) {
if (d) {
setTitle((d.source.node ? d.source.node.nodeinfo.hostname : d.source.id) + " " + d.target.node.nodeinfo.hostname);
}
};
if (d)
setTitle((d.source.node ? d.source.node.nodeinfo.hostname : d.source.id) + " " + d.target.node.nodeinfo.hostname)
}
this.gotoLocation = function () {
this.gotoLocation = function() {
//ignore
};
}
this.destroy = function () {
};
}
return this;
};
});
return this
}
})

View file

@ -1,243 +0,0 @@
"use strict";
define({
get: function (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();
});
},
getJSON: function (url) {
return require("helper").get(url).then(JSON.parse);
},
sortByKey: function (key, d) {
return d.slice().sort(function (a, b) {
return a[key] - b[key];
}).reverse();
},
limit: function (key, m, d) {
return d.filter(function (d) {
return d[key].isAfter(m);
});
},
sum: function (a) {
return a.reduce(function (a, b) {
return a + b;
}, 0);
},
one: function () {
return 1;
},
trueDefault: function (d) {
return d === undefined ? true : d;
},
dictGet: function (dict, key) {
var k = key.shift();
if (!(k in dict)) {
return null;
}
if (key.length == 0) {
return dict[k];
}
return this.dictGet(dict[k], key);
},
localStorageTest: function () {
var test = "test";
try {
localStorage.setItem(test, test);
localStorage.removeItem(test);
return true;
} catch (e) {
return false;
}
},
listReplace: function (s, subst) {
for (var key in subst) {
var re = new RegExp(key, "g");
s = s.replace(re, subst[key]);
}
return s;
},
/* Helpers working with nodes */
offline: function (d) {
return !d.flags.online;
},
online: function (d) {
return d.flags.online;
},
hasLocation: function (d) {
return "location" in d.nodeinfo &&
Math.abs(d.nodeinfo.location.latitude) < 90 &&
Math.abs(d.nodeinfo.location.longitude) < 180;
},
subtract: function (a, b) {
var ids = {};
b.forEach(function (d) {
ids[d.nodeinfo.node_id] = true;
});
return a.filter(function (d) {
return !(d.nodeinfo.node_id in ids);
});
},
/* Helpers working with links */
showDistance: function (d) {
if (isNaN(d.distance)) {
return;
}
return d.distance.toFixed(0) + " m";
},
showTq: function (d) {
return (1 / d.tq * 100).toFixed(0) + "%";
},
attributeEntry: function (el, label, value) {
if (value === null || value == undefined) {
return;
}
var tr = document.createElement("tr");
var th = document.createElement("th");
if (typeof label === "string") {
th.textContent = label;
} else {
th.appendChild(label);
tr.classList.add("routerpic");
}
tr.appendChild(th);
var td = document.createElement("td");
if (typeof value == "function") {
value(td);
} else {
td.appendChild(document.createTextNode(value));
}
tr.appendChild(td);
el.appendChild(tr);
return td;
},
createIframe: function (opt, width, height) {
var el = document.createElement("iframe");
width = typeof width !== "undefined" ? width : "525px";
height = typeof height !== "undefined" ? height : "350px";
if (opt.src) {
el.src = opt.src;
} else {
el.src = opt;
}
if (opt.frameBorder) {
el.frameBorder = opt.frameBorder;
} else {
el.frameBorder = 1;
}
if (opt.width) {
el.width = opt.width;
} else {
el.width = width;
}
if (opt.height) {
el.height = opt.height;
} else {
el.height = height;
}
el.scrolling = "no";
el.seamless = "seamless";
return el;
},
showStat: function (o, subst) {
var content, caption;
subst = typeof subst !== "undefined" ? subst : {};
if (o.thumbnail) {
content = document.createElement("img");
content.src = require("helper").listReplace(o.thumbnail, subst);
}
if (o.caption) {
caption = require("helper").listReplace(o.caption, subst);
if (!content) {
content = document.createTextNode(caption);
}
}
if (o.iframe) {
content = require("helper").createIframe(o.iframe, o.width, o.height);
if (o.iframe.src) {
content.src = require("helper").listReplace(o.iframe.src, subst);
} else {
content.src = require("helper").listReplace(o.iframe, subst);
}
}
var p = document.createElement("p");
if (o.href) {
var link = document.createElement("a");
link.target = "_blank";
link.href = require("helper").listReplace(o.href, subst);
link.appendChild(content);
if (caption && o.thumbnail) {
link.title = caption;
}
p.appendChild(link);
} else {
p.appendChild(content);
}
return p;
}
});

60
lib/vercomp.js Normal file
View file

@ -0,0 +1,60 @@
define([], function () {
function order(c) {
if (/^\d$/.test(c))
return 0
else if (/^[a-z]$/i.test(c))
return c.charCodeAt(0)
else if (c === "~")
return -1
else if (c)
return c.charCodeAt(0) + 256
else
return 0
}
// Based on dpkg code
function vercomp(a, b) {
var apos = 0, bpos = 0
while (apos < a.length || bpos < b.length) {
var firstDiff = 0
while ((apos < a.length && !/^\d$/.test(a[apos])) || (bpos < b.length && !/^\d$/.test(b[bpos]))) {
var ac = order(a[apos])
var bc = order(b[bpos])
if (ac !== bc)
return ac - bc
apos++
bpos++
}
while (a[apos] === "0")
apos++
while (b[bpos] === "0")
bpos++
while (/^\d$/.test(a[apos]) && /^\d$/.test(b[bpos])) {
if (firstDiff === 0)
firstDiff = a.charCodeAt(apos) - b.charCodeAt(bpos)
apos++
bpos++
}
if (/^\d$/.test(a[apos]))
return 1
if (/^\d$/.test(b[bpos]))
return -1
if (firstDiff !== 0)
return firstDiff
}
return 0
}
return vercomp
})

View file

@ -1,34 +1,41 @@
{
"name": "hopglass",
"license": "AGPL-3.0",
"repository": {
"type": "git",
"url": "https://github.com/hopglass/hopglass.git"
},
"bugs": {
"url": "https://github.com/hopglass/hopglass/issues"
},
"version": "1.0.0",
"scripts": {
"test": "node -e \"require('grunt').cli()\" '' clean lint"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
"eslint": "^2.11.0",
"eslint-config-defaults": "^9.0.0",
"grunt": "^1.0.1",
"grunt-bower-install-simple": "^1.2.3",
"grunt-check-dependencies": "^0.12.0",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-requirejs": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-eslint": "^18.1.0",
"grunt-inline": "^0.3.6",
"grunt-postcss": "^0.8.0",
"grunt-sass": "^1.2.0"
"autoprefixer": "^6.3.3",
"dart-sass": "^1.16.1",
"grunt": "^1.0.3",
"grunt-check-dependencies": "^0.6.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-cssmin": "^0.12.2",
"grunt-contrib-requirejs": "^0.4.4",
"grunt-contrib-uglify": "^0.5.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-eslint": "^10.0.0",
"grunt-git-describe": "^2.3.2",
"grunt-postcss": "^0.7.2",
"grunt-sass": "^3.0.2"
},
"dependencies": {
"almond": "^0.3.3",
"chroma-js": "^0.7.8",
"d3": "^3.5.17",
"ionicons": "^2.0.1",
"leaflet": "^0.7.7",
"leaflet-label": "^0.2.1-0",
"leaflet-providers": "^1.5.0",
"moment": "^2.23.0",
"numeraljs": "^1.5.6",
"rbush": "^1.4.3",
"requirejs": "^2.3.2",
"roboto-fontface": "^0.10.0",
"tablesort": "3.0.2",
"virtual-dom": "^2.1.1"
},
"eslintConfig": {
"env": {
@ -36,6 +43,24 @@
"amd": true,
"es6": true,
"node": true
},
"globals": {
"showStat": false,
"attributeEntry": false,
"dictGet": false,
"getJSON": false,
"has_location": false,
"limit": false,
"localStorageTest": false,
"offline": false,
"one": false,
"online": false,
"showDistance": false,
"showTq": false,
"sortByKey": false,
"subtract": false,
"sum": false,
"trueDefault": false
}
}
}

View file

@ -1,33 +0,0 @@
.leaflet-control-layers {
box-shadow: none;
border-radius: 0;
background: none;
}
.leaflet-control-layers-toggle {
background: none;
&::before {
content: "\f229";
display: inline-block;
font-family: "ionicons" !important;
font-size: 2.3rem;
speak: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #e32d6d;
}
}
.leaflet-control-layers-expanded {
padding: 0;
}
.leaflet-control-layers-list {
background: rgba(255, 255, 255, 0.9);
padding: 10px;
label {
cursor: pointer;
}
}

View file

@ -1 +1 @@
../bower_components/Leaflet.label/dist/leaflet.label.css
../node_modules/leaflet-label/dist/leaflet.label.css

View file

@ -1 +1 @@
../bower_components/leaflet/dist/leaflet.css
../node_modules/leaflet/dist/leaflet.css

View file

@ -3,7 +3,6 @@
@import '_base';
@import '_leaflet';
@import '_leaflet.label';
@import '_leaflet-layer';
@import '_filters';
@import '_loader';
@ -71,7 +70,7 @@ $buttondistance: 12pt;
body {
margin: 0;
padding: 0;
font-family: 'Roboto Slab', serif;
font-family: 'Roboto-Slab', serif;
font-size: 11pt;
color: #333;
}
@ -132,14 +131,14 @@ table.attributes tr.routerpic td {
font-weight: bold;
/*background-color: red;*/
font-size: large;
vertical-align: bottom;
vertical-align:bottom;
}
table.attributes tr.routerpic th {
font-weight: bold;
/*background-color: red;*/
font-size: large;
vertical-align: bottom;
vertical-align:bottom;
}
.nodenamesidebar {
@ -147,7 +146,7 @@ table.attributes tr.routerpic th {
font-weight: bold;
/*background-color: red;*/
font-size: large;
vertical-align: bottom;
vertical-align:bottom;
bottom: 0px;
}

View file

@ -1,10 +1,13 @@
module.exports = function (grunt) {
"use strict";
module.exports = function(grunt) {
grunt.config.merge({
bowerdir: "bower_components",
nodedir: "node_modules",
copy: {
html: {
options: {
process: function (content) {
return content.replace("#revision#", grunt.option("gitRevision"))
}
},
src: ["*.html"],
expand: true,
cwd: "html/",
@ -19,44 +22,39 @@ module.exports = function (grunt) {
src: ["es6-shim/es6-shim.min.js",
"es6-shim/es6-shim.map"],
expand: true,
cwd: "bower_components/",
cwd: "node_modules/",
dest: "build/vendor/"
},
robotoSlab: {
src: ["fonts/*",
"roboto-slab-fontface.css"
],
expand: true,
dest: "build/",
cwd: "bower_components/roboto-slab-fontface"
},
roboto: {
src: ["fonts/*",
"roboto-fontface.css"
],
src: [ "fonts/roboto/*",
"fonts/roboto-slab/*",
"css/roboto/roboto-fontface.css",
"css/roboto-slab/roboto-slab-fontface.css"
],
expand: true,
dest: "build/",
cwd: "bower_components/roboto-fontface"
cwd: "node_modules/roboto-fontface/"
},
ionicons: {
src: ["fonts/*",
"hopglass-icons.css"
],
src: [ "fonts/*",
"css/ionicons.min.css"
],
expand: true,
dest: "build/",
cwd: "assets/icons/"
cwd: "node_modules/ionicons/"
},
leafletImages: {
src: ["images/*"],
src: [ "images/*" ],
expand: true,
dest: "build/",
cwd: "bower_components/leaflet/dist/"
cwd: "node_modules/leaflet/dist/"
}
},
sass: {
options: {
sourceMap: true,
outputStyle: "compressed"
outputStyle: "compressed",
implementation: require("dart-sass")
},
dist: {
files: {
@ -80,65 +78,30 @@ module.exports = function (grunt) {
cssmin: {
target: {
files: {
"build/style.css": ["bower_components/leaflet/dist/leaflet.css",
"bower_components/Leaflet.label/dist/leaflet.label.css",
"style.css"
]
}
}
},
inline: {
dist: {
options: {
cssmin: true,
uglify: true
},
src: "build/index.html",
dest: "build/index.html"
}
},
"bower-install-simple": {
options: {
directory: "<%=bowerdir%>",
color: true,
interactive: false,
production: true
},
"prod": {
options: {
production: true
"build/style.css": [ "node_modules/leaflet/dist/leaflet.css",
"node_modules/leaflet-label/dist/leaflet.label.css",
"style.css"
]
}
}
},
requirejs: {
default: {
compile: {
options: {
baseUrl: "lib",
name: "../bower_components/almond/almond",
name: "../node_modules/almond/almond",
mainConfigFile: "app.js",
include: "../app",
out: "build/app.js",
build: true
}
},
dev: {
options: {
baseUrl: "lib",
name: "../bower_components/almond/almond",
mainConfigFile: "app.js",
include: "../app",
optimize: "none",
out: "build/app.js",
build: false
wrap: true,
optimize: "uglify",
out: "build/app.js"
}
}
}
});
})
grunt.loadNpmTasks("grunt-bower-install-simple");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-requirejs");
grunt.loadNpmTasks("grunt-sass");
grunt.loadNpmTasks("grunt-postcss");
grunt.loadNpmTasks("grunt-inline");
};
grunt.loadNpmTasks("grunt-contrib-copy")
grunt.loadNpmTasks("grunt-contrib-requirejs")
grunt.loadNpmTasks("grunt-sass")
grunt.loadNpmTasks("grunt-postcss")
}

View file

@ -1,11 +1,9 @@
module.exports = function (grunt) {
"use strict";
grunt.config.merge({
clean: {
build: ["build/**/*", "node_modules/grunt-newer/.cache"]
}
});
})
grunt.loadNpmTasks("grunt-contrib-clean");
};
grunt.loadNpmTasks("grunt-contrib-clean")
}

View file

@ -1,16 +1,9 @@
module.exports = function (grunt) {
"use strict";
grunt.config.merge({
connect: {
server: {
options: {
base: {
path: "build",
options: {
index: "index.html"
}
},
base: "build/", //TODO: once grunt-contrib-connect 0.9 is released, set index file
livereload: true
}
}
@ -20,8 +13,8 @@ module.exports = function (grunt) {
options: {
livereload: true
},
files: ["*.css", "app.js", "lib/**/*.js", "*.html", "scss/**/*.scss"],
tasks: ["dev"]
files: ["*.css", "app.js", "lib/**/*.js", "*.html"],
tasks: ["default"]
},
config: {
options: {
@ -31,8 +24,8 @@ module.exports = function (grunt) {
tasks: []
}
}
});
})
grunt.loadNpmTasks("grunt-contrib-connect");
grunt.loadNpmTasks("grunt-contrib-watch");
};
grunt.loadNpmTasks("grunt-contrib-connect")
grunt.loadNpmTasks("grunt-contrib-watch")
}

View file

@ -1,19 +1,24 @@
module.exports = function (grunt) {
"use strict";
grunt.config.merge({
checkDependencies: {
options: {
install: true
},
bower: {
options: {
packageManager: "bower"
}
},
npm: {}
},
eslint: {
options: {
rules: {
"semi": [2, "never"],
"curly": [2, "multi"],
"strict": [2, "never"],
"no-multi-spaces": 0,
"no-new": 0,
"no-shadow": 0,
"no-use-before-define": [1, "nofunc"],
"no-underscore-dangle": 0
}
},
sources: {
src: ["app.js", "!Gruntfile.js", "lib/**/*.js"]
},
@ -21,8 +26,8 @@ module.exports = function (grunt) {
src: ["Gruntfile.js", "tasks/*.js"]
}
}
});
})
grunt.loadNpmTasks("grunt-check-dependencies");
grunt.loadNpmTasks("grunt-eslint");
};
grunt.loadNpmTasks("grunt-check-dependencies")
grunt.loadNpmTasks("grunt-eslint")
}

3451
yarn.lock Normal file

File diff suppressed because it is too large Load diff