[WIP] show advanced airtime stats

2017-03-19 22:49:10 +01:00
20 changed files with 183 additions and 3558 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -1,7 +1,7 @@
 language: node_js
-node_js:
-  - "lts/*"
-  - "node"
+before_install:
+  - gem install sass
+  - npm install -g grunt-cli
 install:
-  - yarn
-script: node_modules/.bin/grunt
+  - npm install
+script: grunt
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -17,7 +17,7 @@ module.exports = function (grunt) {

  grunt.loadTasks("tasks")

-  grunt.registerTask("default", ["lint", "saveRevision", "copy", "sass", "postcss", "requirejs"])
+  grunt.registerTask("default", ["bower-install-simple", "lint", "saveRevision", "copy", "sass", "postcss", "requirejs"])
  grunt.registerTask("lint", ["eslint"])
  grunt.registerTask("dev", ["default", "connect:server", "watch"])
 }
--- a/README.md
+++ b/README.md
@ -1,8 +1,8 @@
-[![Build Status](https://travis-ci.org/hopglass/hopglass.svg?branch=master)](https://travis-ci.org/hopglass/hopglass)
+[![Build Status](https://travis-ci.org/plumpudding/hopglass.svg?branch=master)](https://travis-ci.org/plumpudding/hopglass)

 # HopGlass

-HopGlass is a frontend for the [HopGlass Server](https://github.com/hopglass/hopglass-server).
+HopGlass is a frontend for the [HopGlass Server](https://github.com/plumpudding/hopglass-server).

 # Screenshots

@ -14,32 +14,29 @@ HopGlass is a frontend for the [HopGlass Server](https://github.com/hopglass/hop

 # Dependencies

- NodeJS
- yarn (recommended) or npm
+- npm
+- bower
+- grunt-cli
+- Sass (>= 3.2)

 # Installing dependencies

 Install npm package-manager. On Debian-like systems run:

-    sudo apt-get install nodejs
+    sudo apt-get install npm

-**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:
+On Mac you have to install only npm via brew and sass

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    brew install node
-    brew install yarn
-
-On Arch Linux you can install nodejs and yarn via pacman:
-
-    sudo pacman -S nodejs yarn
+    npm install node-sass

 Execute these commands on your server as a normal user to prepare the dependencies:

-    git clone https://github.com/hopglass/hopglass
+    git clone https://github.com/plumpudding/hopglass
    cd hopglass
-    yarn install # or `npm install`
+    npm install
+    npm install grunt-cli

 # Building

@ -55,7 +52,7 @@ Copy `config.json.example` to `build/config.json` and change it to match your co

 ## dataPath (string/array)

-`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.
+`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.
 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.
--- a/app.js
+++ b/app.js
@ -1,20 +1,20 @@
 require.config({
  baseUrl: "lib",
  paths: {
-    "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",
+    "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-with-locales.min",
+    "tablesort": "../bower_components/tablesort/tablesort.min",
+    "tablesort.numeric": "../bower_components/tablesort/src/sorts/tablesort.numeric",
+    "d3": "../bower_components/d3/d3.min",
+    "numeral": "../bower_components/numeraljs/min/numeral.min",
+    "numeral-intl": "../bower_components/numeraljs/min/languages.min",
+    "virtual-dom": "../bower_components/virtual-dom/dist/virtual-dom",
+    "rbush": "../bower_components/rbush/rbush",
    "helper": "../helper",
-    "jshashes": "../node_modules/jshashes/hashes"
+    "jshashes": "../bower_components/jshashes/hashes"
  },
  shim: {
    "leaflet.label": ["leaflet"],
--- a/bower.json
+++ b/bower.json
@ -0,0 +1,36 @@
+{
+  "name": "HopGlass",
+  "ignore": [
+    "node_modules",
+    "bower_components",
+    "**/.*",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "Leaflet.label": "~0.2.1",
+    "chroma-js": "~0.6.1",
+    "leaflet": "~0.7.3",
+    "ionicons": "~2.0.1",
+    "moment": "~2.9.0",
+    "requirejs": "~2.1.16",
+    "tablesort": "https://github.com/tristen/tablesort.git#v3.0.2",
+    "roboto-slab-fontface": "*",
+    "es6-shim": "~0.27.1",
+    "almond": "~0.3.1",
+    "r.js": "~2.1.16",
+    "d3": "~3.5.5",
+    "numeraljs": "~1.5.3",
+    "roboto-fontface": "~0.3.0",
+    "virtual-dom": "~2.0.1",
+    "leaflet-providers": "~1.0.27",
+    "rbush": "https://github.com/mourner/rbush.git#~1.3.5",
+    "jshashes": "~1.0.5"
+  },
+  "authors": [
+    "Milan Pässler <me@petabyteboy.de>",
+    "Nils Schneider <nils@nilsschneider.net>"
+  ],
+  "license": "AGPL3",
+  "private": true
+}
--- a/build.js
+++ b/build.js
@ -1,6 +1,6 @@
 ({
    baseUrl: "lib",
-    name: "../node_modules/almond/almond",
+    name: "../bower_components/almond/almond",
    mainConfigFile: "app.js",
    include: "../app",
    wrap: true,
--- a/config.json.example
+++ b/config.json.example
@ -5,25 +5,11 @@
  "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": "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"
-      }
+      "name": "Stamen.TonerLite"
    }
  ],
  "nodeInfos": [
--- a/html/index.html
+++ b/html/index.html
@ -4,8 +4,8 @@
    <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="roboto-slab-fontface.css">
+    <link rel="stylesheet" href="roboto-fontface.css">
    <link rel="stylesheet" href="style.css">
    <script src="vendor/es6-shim/es6-shim.min.js"></script>
    <script src="app.js"></script>
--- a/index.html
+++ b/index.html
@ -3,14 +3,14 @@
  <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="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="bower_components/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>
+    <script src="bower_components/es6-shim/es6-shim.min.js"></script>
+    <script src="bower_components/requirejs/require.js" data-main="app"></script>
  </head>
  <body>
  </body>
--- a/lib/about.js
+++ b/lib/about.js
@ -29,8 +29,8 @@ define(function () {
      s += "https://www.gnu.org/licenses/</a>.</p>"

      s += "<p>The source code is available at "
-      s += "<a href=\"https://github.com/hopglass/hopglass\">"
-      s += "https://github.com/hopglass/hopglass</a>."
+      s += "<a href=\"https://github.com/plumpudding/hopglass\">"
+      s += "https://github.com/plumpudding/hopglass</a>."

      el.innerHTML = s
    }
--- a/lib/infobox/node.js
+++ b/lib/infobox/node.js
@ -271,6 +271,40 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
    return span
  }

+  function showAirtimeBar(className, v) {
+    var span = document.createElement("span")
+    span.classList.add("bar")
+    span.classList.add(className)
+
+    var waitbar = document.createElement("span")
+    waitbar.style.width = (v.wait * 100) + "%"
+    span.appendChild(waitbar)
+    waitbar.style.background = "rgba(221, 44, 0, 1)"
+    var waitlabel = document.createElement("span")
+    waitlabel.textContent = (Math.round(v.wait * 100)) + " % wait"
+    waitbar.appendChild(waitlabel)
+    var rxbar = document.createElement("span")
+    rxbar.style.width = (v.rx * 100) + "%"
+    span.appendChild(rxbar)
+    rxbar.style.background = "rgba(0, 145, 234, 1)"
+    var rxlabel = document.createElement("span")
+    rxlabel.textContent = (Math.round(v.rx * 100)) + " % rx"
+    rxbar.appendChild(rxlabel)
+    var txbar = document.createElement("span")
+    txbar.style.width = (v.tx * 100) + "%"
+    span.appendChild(txbar)
+    txbar.style.background = "rgba(0, 191, 165, 1)"
+    var txlabel = document.createElement("span")
+    txlabel.textContent = (Math.round(v.tx * 100)) + " % tx"
+    txbar.appendChild(txlabel)
+
+    var label = document.createElement("label")
+    label.textContent = (Math.round(v.free * 100)) + " % frei"
+    span.appendChild(label)
+
+    return span
+  }
+
  function showLoad(d) {
    if (!("loadavg" in d.statistics))
      return undefined
@ -292,10 +326,14 @@ define(["moment", "numeral", "tablesort", "tablesort.numeric"],
  function showAirtime(band, val) {
    if (!val)
      return undefined
-
+    if (!isNaN(val))
      return function (el) {
        el.appendChild(showBar("airtime" + band.toString(), val))
      }
+
+    return function (el) {
+      el.appendChild(showAirtimeBar("airtime" + band.toString(), val))
+    }
  }

  function createLink(target, router) {
--- a/lib/map.js
+++ b/lib/map.js
@ -286,7 +286,7 @@ define(["map/clientlayer", "map/labelslayer",
      var layers = config.mapLayers.map( function (d) {
        return {
          "name": 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)
+          "layer": "url" in d ? L.tileLayer(d.url, d.config) : L.tileLayer.provider(d.name)
        }
      })

--- a/lib/map/clientlayer.js
+++ b/lib/map/clientlayer.js
@ -1,12 +1,15 @@
-define(["leaflet"],
-  function (L) {
+define(["leaflet", "jshashes"],
+  function (L, jsHashes) {
+    var MD5 = new jsHashes.MD5()
+
    return L.TileLayer.Canvas.extend({
      setData: function (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
+          var hash = MD5.hex(d.node.nodeinfo.node_id)
+          d.startAngle = (parseInt(hash.substr(0, 2), 16) / 255) * 2 * Math.PI
        })
        this.redraw()
      },
--- a/package.json
+++ b/package.json
@ -1,41 +1,24 @@
 {
  "name": "hopglass",
-  "version": "1.0.0",
  "scripts": {
    "test": "node -e \"require('grunt').cli()\" '' clean lint"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.3",
-    "dart-sass": "^1.16.1",
-    "grunt": "^1.0.3",
+    "grunt": "^0.4.5",
    "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-sass": "^1.1.0",
+    "grunt-postcss": "^0.7.2",
    "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"
+    "grunt-bower-install-simple": "^1.1.2",
+    "grunt-git-describe": "^2.3.2"
  },
  "eslintConfig": {
    "env": {
--- a/scss/_leaflet.label.scss
+++ b/scss/_leaflet.label.scss
@ -1 +1 @@
-../node_modules/leaflet-label/dist/leaflet.label.css
+../bower_components/Leaflet.label/dist/leaflet.label.css
--- a/scss/_leaflet.scss
+++ b/scss/_leaflet.scss
@ -1 +1 @@
-../node_modules/leaflet/dist/leaflet.css
+../bower_components/leaflet/dist/leaflet.css
--- a/scss/main.scss
+++ b/scss/main.scss
@ -70,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;
 }
@ -409,6 +409,7 @@ table {
    display: inline-block;
    height: 1.4em;
    background: rgba(85, 128, 32, 0.8);
+    overflow: hidden;
  }

  label {
@ -421,6 +422,14 @@ table {
  }
 }

+.bar > span > span {
+  left: 0.5em;
+  font-weight: bold;
+  color: white;
+  white-space: nowrap;
+  background: none !important;
+}
+
 .proportion th {
  font-weight: normal !important;
  text-align: right !important;
--- a/tasks/build.js
+++ b/tasks/build.js
@ -1,6 +1,6 @@
 module.exports = function(grunt) {
  grunt.config.merge({
-    nodedir: "node_modules",
+    bowerdir: "bower_components",
    copy: {
      html: {
        options: {
@ -22,18 +22,24 @@ module.exports = function(grunt) {
        src: ["es6-shim/es6-shim.min.js",
          "es6-shim/es6-shim.map"],
        expand: true,
-        cwd: "node_modules/",
+        cwd: "bower_components/",
        dest: "build/vendor/"
      },
-      roboto: {
-        src: [ "fonts/roboto/*",
-               "fonts/roboto-slab/*",
-               "css/roboto/roboto-fontface.css",
-               "css/roboto-slab/roboto-slab-fontface.css"
+      robotoSlab: {
+        src: [ "fonts/*",
+               "roboto-slab-fontface.css"
             ],
        expand: true,
        dest: "build/",
-        cwd: "node_modules/roboto-fontface/"
+        cwd: "bower_components/roboto-slab-fontface"
+      },
+      roboto: {
+        src: [ "fonts/*",
+               "roboto-fontface.css"
+             ],
+        expand: true,
+        dest: "build/",
+        cwd: "bower_components/roboto-fontface"
      },
      ionicons: {
        src: [ "fonts/*",
@ -41,20 +47,19 @@ module.exports = function(grunt) {
             ],
        expand: true,
        dest: "build/",
-        cwd: "node_modules/ionicons/"
+        cwd: "bower_components/ionicons/"
      },
      leafletImages: {
        src: [ "images/*" ],
        expand: true,
        dest: "build/",
-        cwd: "node_modules/leaflet/dist/"
+        cwd: "bower_components/leaflet/dist/"
      }
    },
    sass: {
      options: {
        sourceMap: true,
-        outputStyle: "compressed",
-        implementation: require("dart-sass")
+        outputStyle: "compressed"
      },
      dist: {
        files: {
@ -78,18 +83,31 @@ module.exports = function(grunt) {
    cssmin: {
      target: {
        files: {
-          "build/style.css": [ "node_modules/leaflet/dist/leaflet.css",
-                               "node_modules/leaflet-label/dist/leaflet.label.css",
+          "build/style.css": [ "bower_components/leaflet/dist/leaflet.css",
+                               "bower_components/Leaflet.label/dist/leaflet.label.css",
                               "style.css"
                             ]
        }
      }
    },
+    "bower-install-simple": {
+        options: {
+          directory: "<%=bowerdir%>",
+          color: true,
+          interactive: false,
+          production: true
+        },
+        "prod": {
+          options: {
+            production: true
+          }
+        }
+      },
    requirejs: {
      compile: {
        options: {
          baseUrl: "lib",
-          name: "../node_modules/almond/almond",
+          name: "../bower_components/almond/almond",
          mainConfigFile: "app.js",
          include: "../app",
          wrap: true,
@ -100,6 +118,7 @@ module.exports = function(grunt) {
    }
  })

+  grunt.loadNpmTasks("grunt-bower-install-simple")
  grunt.loadNpmTasks("grunt-contrib-copy")
  grunt.loadNpmTasks("grunt-contrib-requirejs")
  grunt.loadNpmTasks("grunt-sass")
--- a/tasks/linting.js
+++ b/tasks/linting.js
@ -4,6 +4,11 @@ module.exports = function (grunt) {
      options: {
        install: true
      },
+      bower: {
+        options: {
+          packageManager: "bower"
+        }
+      },
      npm: {}
    },
    eslint: {
--- a/yarn.lock
+++ b/yarn.lock