From 2c7500f1bbbb7bfb0522343fb18a51df1a254d9d Mon Sep 17 00:00:00 2001
From: Xaver Maierhofer <xaver.maierhofer@xwissen.info>
Date: Sun, 5 Nov 2017 18:23:40 +0100
Subject: [PATCH] [TASK] Make more colors configurable

---
 app.js                    |  2 --
 config.default.json       | 58 +++++++++++++++++++++++++++++++++++++++
 gulp/tasks/html.js        |  2 +-
 lib/forcegraph/draw.js    | 15 +++-------
 lib/gui.js                |  2 +-
 lib/map.js                |  4 +--
 lib/map/labellayer.js     |  6 ++--
 lib/map/locationmarker.js | 35 ++---------------------
 lib/proportions.js        |  2 +-
 lib/utils/helper.js       |  6 ++--
 10 files changed, 76 insertions(+), 56 deletions(-)

diff --git a/app.js b/app.js
index 84316b2..5e6d0b0 100644
--- a/app.js
+++ b/app.js
@@ -37,7 +37,5 @@ require.config({
 });
 
 require(['main'], function (main) {
-  /** global: config */
-  window.config = jsonData;
   main();
 });
diff --git a/config.default.json b/config.default.json
index 367aaa0..9ad9529 100644
--- a/config.default.json
+++ b/config.default.json
@@ -75,6 +75,7 @@
     "fr",
     "ru"
   ],
+  // Color configs
   "icon": {
     "base": {
       "fillOpacity": 0.6,
@@ -107,5 +108,62 @@
       "fillColor": "#93E929"
     }
   },
+  "client": {
+    "wifi24": "rgba(220, 0, 103, 0.7)",
+    "wifi5": "rgba(10, 156, 146, 0.7)",
+    "other": "rgba(227, 166, 25, 0.7)"
+  },
+  "map": {
+    "labelNewColor": "#459c18",
+    "tqFrom": "#F02311",
+    "tqTo": "#04C714",
+    "highlightNode": {
+      "color": "#ad2358",
+      "weight": 8,
+      "fillOpacity": 1,
+      "opacity": 0.4,
+      "className": "stroke-first"
+    },
+    "highlightLink": {
+      "weight": 4,
+      "opacity": 1,
+      "dashArray": "5, 10"
+    }
+  },
+  "forceGraph": {
+    "nodeColor": "#fff",
+    "highlightColor": "rgba(255, 255, 255, 0.2)",
+    "labelColor": "#fff",
+    "tqFrom": "#770038",
+    "tqTo": "#dc0067"
+  },
+  "locate": {
+    "outerCircle": {
+      "stroke": false,
+      "color": "#4285F4",
+      "opacity": 1,
+      "fillOpacity": 0.3,
+      "clickable": false,
+      "radius": 16
+    },
+    "innerCircle": {
+      "stroke:": true,
+      "color": "#ffffff",
+      "fillColor": "#4285F4",
+      "weight": 1.5,
+      "clickable": false,
+      "opacity": 1,
+      "fillOpacity": 1,
+      "radius": 7
+    },
+    "accuracyCircle": {
+      "stroke": true,
+      "color": "#4285F4",
+      "weight": 1,
+      "clickable": false,
+      "opacity": 0.7,
+      "fillOpacity": 0.2
+    }
+  },
   "cacheBreaker": "<!-- inject:cache-breaker -->"
 }
diff --git a/gulp/tasks/html.js b/gulp/tasks/html.js
index 5c56e72..2c1aa0e 100644
--- a/gulp/tasks/html.js
+++ b/gulp/tasks/html.js
@@ -10,7 +10,7 @@ module.exports = function (gulp, plugins, config, env) {
             JSON.parse(JSON.minify(defaultConfig)),
             JSON.parse(JSON.minify(customConfig.contents.toString('utf8')))
           );
-          return '<script>var jsonData =' +
+          return '<script>window.config =' +
             JSON.stringify(buildConfig)
               .replace('<!-- inject:cache-breaker -->',
                 Math.random().toString(12).substring(7)) +
diff --git a/lib/forcegraph/draw.js b/lib/forcegraph/draw.js
index 38323f7..5847b0f 100644
--- a/lib/forcegraph/draw.js
+++ b/lib/forcegraph/draw.js
@@ -4,16 +4,9 @@ define(['helper'], function (helper) {
   var ctx;
   var width;
   var height;
-
   var transform;
-
   var highlight;
 
-  var nodeColor = '#fff';
-  var highlightColor = 'rgba(255, 255, 255, 0.2)';
-
-  var labelColor = '#fff';
-
   var NODE_RADIUS = 15;
   var LINE_RADIUS = 12;
 
@@ -26,7 +19,7 @@ define(['helper'], function (helper) {
         name = d.o.hostname;
       }
       ctx.textAlign = 'center';
-      ctx.fillStyle = labelColor;
+      ctx.fillStyle = config.forceGraph.labelColor;
       ctx.fillText(name, d.x, d.y + 20);
     }
   }
@@ -34,7 +27,7 @@ define(['helper'], function (helper) {
   function drawHighlightNode(d) {
     if (highlight && highlight.type === 'node' && d.o.node_id === highlight.id) {
       ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
-      ctx.fillStyle = highlightColor;
+      ctx.fillStyle = config.forceGraph.highlightColor;
       ctx.fill();
       ctx.beginPath();
     }
@@ -43,7 +36,7 @@ define(['helper'], function (helper) {
   function drawHighlightLink(d, to) {
     if (highlight && highlight.type === 'link' && d.o.id === highlight.id) {
       ctx.lineTo(to[0], to[1]);
-      ctx.strokeStyle = highlightColor;
+      ctx.strokeStyle = config.forceGraph.highlightColor;
       ctx.lineWidth = LINE_RADIUS * 2;
       ctx.lineCap = 'round';
       ctx.stroke();
@@ -62,7 +55,7 @@ define(['helper'], function (helper) {
 
     ctx.moveTo(d.x + 3, d.y);
     ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI);
-    ctx.fillStyle = nodeColor;
+    ctx.fillStyle = config.forceGraph.nodeColor;
     ctx.fill();
 
     drawDetailNode(d);
diff --git a/lib/gui.js b/lib/gui.js
index a6d5639..84583c5 100644
--- a/lib/gui.js
+++ b/lib/gui.js
@@ -12,7 +12,7 @@ function (d3Interpolate, Map, Sidebar, Tabs, Container, Legend, Linklist,
     var content;
     var contentDiv;
 
-    var linkScale = d3Interpolate.interpolate('#F02311', '#04C714');
+    var linkScale = d3Interpolate.interpolate(config.map.tqFrom, config.map.tqTo);
     var sidebar;
 
     var buttons = document.createElement('div');
diff --git a/lib/map.js b/lib/map.js
index 6b1d9fd..b021856 100644
--- a/lib/map.js
+++ b/lib/map.js
@@ -152,10 +152,10 @@ define(['map/clientlayer', 'map/labellayer', 'map/button', 'leaflet'],
         if (highlight !== undefined) {
           if (highlight.type === 'node' && nodeDict[highlight.o.node_id]) {
             m = nodeDict[highlight.o.node_id];
-            m.setStyle({ color: '#ad2358', weight: 8, fillOpacity: 1, opacity: 0.4, className: 'stroke-first' });
+            m.setStyle(config.map.highlightNode);
           } else if (highlight.type === 'link' && linkDict[highlight.o.id]) {
             m = linkDict[highlight.o.id];
-            m.setStyle({ weight: 4, opacity: 1, dashArray: '5, 10' });
+            m.setStyle(config.map.highlightLink);
           }
         }
 
diff --git a/lib/map/labellayer.js b/lib/map/labellayer.js
index fdd4742..3bceeb6 100644
--- a/lib/map/labellayer.js
+++ b/lib/map/labellayer.js
@@ -212,9 +212,9 @@ define(['leaflet', 'rbush', 'helper', 'moment'],
         // - color (string)
 
         var labelsOnline = d.online.map(prepareLabel(null, 11, 8, true));
-        var labelsOffline = d.offline.map(prepareLabel('rgba(212, 62, 42, 0.9)', 9, 5, false));
-        var labelsNew = d.new.map(prepareLabel('rgba(48, 99, 20, 0.9)', 11, 8, true));
-        var labelsLost = d.lost.map(prepareLabel('rgba(212, 62, 42, 0.9)', 11, 8, true));
+        var labelsOffline = d.offline.map(prepareLabel(config.icon.offline.color, 9, 5, false));
+        var labelsNew = d.new.map(prepareLabel(config.map.labelNewColor, 11, 8, true));
+        var labelsLost = d.lost.map(prepareLabel(config.icon.lost.color, 11, 8, true));
 
         var labels = []
           .concat(labelsNew)
diff --git a/lib/map/locationmarker.js b/lib/map/locationmarker.js
index f465a3a..905aedc 100644
--- a/lib/map/locationmarker.js
+++ b/lib/map/locationmarker.js
@@ -2,39 +2,10 @@ define(['leaflet'], function (L) {
   'use strict';
 
   return L.CircleMarker.extend({
-    outerCircle: {
-      stroke: false,
-      color: '#4285F4',
-      opacity: 1,
-      fillOpacity: 0.3,
-      clickable: false,
-      radius: 16
-    },
-
-    innerCircle: {
-      stroke: true,
-      color: '#ffffff',
-      fillColor: '#4285F4',
-      weight: 1.5,
-      clickable: false,
-      opacity: 1,
-      fillOpacity: 1,
-      radius: 7
-    },
-
-    accuracyCircle: {
-      stroke: true,
-      color: '#4285F4',
-      weight: 1,
-      clickable: false,
-      opacity: 0.7,
-      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);
+      this.accuracyCircle = L.circle(latlng, 0, config.locate.accuracyCircle);
+      this.outerCircle = L.circleMarker(latlng, config.locate.outerCircle);
+      L.CircleMarker.prototype.initialize.call(this, latlng, config.locate.innerCircle);
 
       this.on('remove', function () {
         this._map.removeLayer(this.accuracyCircle);
diff --git a/lib/proportions.js b/lib/proportions.js
index 0176564..847ba0e 100644
--- a/lib/proportions.js
+++ b/lib/proportions.js
@@ -5,7 +5,7 @@ define(['d3-interpolate', 'snabbdom', 'filters/genericnode', 'helper'],
 
     return function (filterManager) {
       var self = this;
-      var scale = d3Interpolate.interpolate('#770038', '#dc0067');
+      var scale = d3Interpolate.interpolate(config.forceGraph.tqFrom, config.forceGraph.tqTo);
 
       var statusTable;
       var fwTable;
diff --git a/lib/utils/helper.js b/lib/utils/helper.js
index e53caa8..bd83b45 100644
--- a/lib/utils/helper.js
+++ b/lib/utils/helper.js
@@ -151,7 +151,7 @@ define({
     var mode = 0;
 
     ctx.beginPath();
-    ctx.fillStyle = 'rgba(220, 0, 103, 0.7)';
+    ctx.fillStyle = config.client.wifi24;
 
     for (var orbit = 0, i = 0; i < node.clients; orbit++) {
       var distance = startDistance + orbit * 2 * radius * a;
@@ -163,12 +163,12 @@ define({
           mode = 1;
           ctx.fill();
           ctx.beginPath();
-          ctx.fillStyle = 'rgba(10, 156, 146, 0.7)';
+          ctx.fillStyle = config.client.wifi5;
         } else if (mode === 0 && i >= node.clients_wifi24) {
           mode = 2;
           ctx.fill();
           ctx.beginPath();
-          ctx.fillStyle = 'rgba(227, 166, 25, 0.7)';
+          ctx.fillStyle = config.client.other;
         }
         var angle = 2 * Math.PI / n * j;
         var x = p.x + distance * Math.cos(angle + startAngle);