GUI -- Added theme listeners, so the instance panel can update the instances on a theme change.

Change-Id: If26d5a6ce9fadc02c7184c5ad4d252fc168300a8

@@ -140,8 +140,9 @@
             var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
             var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
                 lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'],
                 lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'],
 
 
-                darkNorm  = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
-                darkMute  = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'];
+                // let's try slightly brigher colors for dark normal..
+                darkNorm  = ['#364D7F', '#7F5236', '#A93114', '#018D61', '#7E116D', '#02747A', '#378300'],
+                darkMute  = ['#1B2645', '#432B1C', '#76220E', '#035433', '#560B4A', '#013A3E', '#2D6D00'];
 
 
             var colors= {
             var colors= {
                 light: {
                 light: {

@@ -20,11 +20,13 @@
 (function () {
 (function () {
     'use strict';
     'use strict';
 
 
-    var $log;
+    var $log, fs;
 
 
     var themes = ['light', 'dark'],
     var themes = ['light', 'dark'],
         themeStr = themes.join(' '),
         themeStr = themes.join(' '),
-        thidx;
+        thidx,
+        listeners = {},
+        nextListenerId = 1;
 
 
     function init() {
     function init() {
         thidx = 0;
         thidx = 0;
@@ -59,16 +61,46 @@
     }
     }
 
 
     function themeEvent(w) {
     function themeEvent(w) {
-        // TODO: emit a theme-changed event
-        var m = 'Theme-Change-('+w+'): ' + getTheme();
+        var t = getTheme(),
+            m = 'Theme-Change-('+w+'): ' + t;
         $log.debug(m);
         $log.debug(m);
+        angular.forEach(listeners, function(value) {
+            value.cb(
+                {
+                    event: 'themeChange',
+                    value: t
+                }
+            );
+        });
     }
     }
 
 
-    // TODO: add hook for theme-change listener
+    function addListener(callback) {
+        var id = nextListenerId++,
+            cb = fs.isF(callback),
+            o = { id: id, cb: cb };
+
+        if (cb) {
+            listeners[id] = o;
+        } else {
+            $log.error('ThemeService.addListener(): callback not a function');
+            o.error = 'No callback defined';
+        }
+        return o;
+    }
+
+    function removeListener(lsnr) {
+        var id = lsnr && lsnr.id,
+            o = listeners[id];
+        if (o) {
+            delete listeners[id];
+        }
+    }
 
 
     angular.module('onosUtil')
     angular.module('onosUtil')
-        .factory('ThemeService', ['$log', function (_$log_) {
+        .factory('ThemeService', ['$log', 'FnService',
+        function (_$log_, _fs_) {
             $log = _$log_;
             $log = _$log_;
+            fs = _fs_;
             thidx = 0;
             thidx = 0;
 
 
             return {
             return {
@@ -80,7 +112,9 @@
                         setTheme(x);
                         setTheme(x);
                     }
                     }
                 },
                 },
-                toggleTheme: toggleTheme
+                toggleTheme: toggleTheme,
+                addListener: addListener,
+                removeListener: removeListener
             };
             };
     }]);
     }]);
 
 

@@ -50,7 +50,8 @@
     var onosInstances,
     var onosInstances,
         onosOrder,
         onosOrder,
         oiShowMaster,
         oiShowMaster,
-        oiBox;
+        oiBox,
+        themeListener;
 
 
 
 
     // ==========================
     // ==========================
@@ -291,9 +292,15 @@
         onosInstances = {};
         onosInstances = {};
         onosOrder = [];
         onosOrder = [];
         oiShowMaster = false;
         oiShowMaster = false;
+
+        // we want to update the instances, each time the theme changes
+        themeListener = ts.addListener(updateInstances);
     }
     }
 
 
     function destroyInst() {
     function destroyInst() {
+        ts.removeListener(themeListener);
+        themeListener = null;
+
         ps.destroyPanel(idIns);
         ps.destroyPanel(idIns);
         oiBox = null;
         oiBox = null;
     }
     }

@@ -70,11 +70,11 @@ describe('factory: fw/svg/svgUtil.js', function() {
 
 
 
 
     it('should provide an alternate (dark) shade of blue', function () {
     it('should provide an alternate (dark) shade of blue', function () {
-       expect(sus.cat7().getColor('foo', false, 'dark')).toEqual('#3E5780');
+       expect(sus.cat7().getColor('foo', false, 'dark')).toEqual('#364D7F');
     });
     });
 
 
     it('should provide an alternate (dark) shade of blue for muted', function () {
     it('should provide an alternate (dark) shade of blue for muted', function () {
-        expect(sus.cat7().getColor('foo', true, 'dark')).toEqual('#A8B8CC');
+        expect(sus.cat7().getColor('foo', true, 'dark')).toEqual('#1B2645');
     });
     });
 
 
     it('should iterate across the colors', function () {
     it('should iterate across the colors', function () {

@@ -18,16 +18,28 @@
  ONOS GUI -- Util -- Theme Service - Unit Tests
  ONOS GUI -- Util -- Theme Service - Unit Tests
  */
  */
 describe('factory: fw/util/theme.js', function() {
 describe('factory: fw/util/theme.js', function() {
-    var ts, $log;
+    var ts, $log, fs;
 
 
     beforeEach(module('onosUtil'));
     beforeEach(module('onosUtil'));
 
 
-    beforeEach(inject(function (ThemeService, _$log_) {
+    beforeEach(inject(function (ThemeService, _$log_, FnService) {
         ts = ThemeService;
         ts = ThemeService;
         $log = _$log_;
         $log = _$log_;
+        fs = FnService;
         ts.init();
         ts.init();
     }));
     }));
 
 
+    it('should define MapService', function () {
+        expect(ts).toBeDefined();
+    });
+
+    it('should define api functions', function () {
+        expect(fs.areFunctions(ts, [
+            'init', 'theme', 'toggleTheme', 'addListener', 'removeListener'
+        ])).toBeTruthy();
+    });
+
+
     function verifyBodyClass(yes, no) {
     function verifyBodyClass(yes, no) {
         function bodyHasClass(c) {
         function bodyHasClass(c) {
             return d3.select('body').classed(c);
             return d3.select('body').classed(c);
@@ -78,4 +90,8 @@ describe('factory: fw/util/theme.js', function() {
         expect($log.debug).not.toHaveBeenCalled();
         expect($log.debug).not.toHaveBeenCalled();
         verifyBodyClass('light', 'dark');
         verifyBodyClass('light', 'dark');
     });
     });
+
+
+    // TODO : Unit tests for listeners...
+
 });
 });

+{
+  "event": "addInstance",
+  "payload": {
+    "id": "instF",
+    "ip": "123.6.6.6",
+    "online": true,
+    "uiAttached": false,
+    "switches": 6,
+    "labels": [
+      "instF",
+      "123.6.6.6"
+    ]
+  }
+}

+{
+  "event": "addInstance",
+  "payload": {
+    "id": "instG",
+    "ip": "123.7.7.7",
+    "online": true,
+    "uiAttached": false,
+    "switches": 7,
+    "labels": [
+      "instG",
+      "123.7.7.7"
+    ]
+  }
+}

+{
+  "event": "addInstance",
+  "payload": {
+    "id": "instB",
+    "ip": "123.22.33.241",
+    "online": true,
+    "uiAttached": false,
+    "switches": 14,
+    "labels": [
+      "instB",
+      "123.22.33.241"
+    ]
+  }
+}

+{
+  "event": "addInstance",
+  "payload": {
+    "id": "instE",
+    "ip": "123.5.5.5",
+    "online": true,
+    "uiAttached": false,
+    "switches": 5,
+    "labels": [
+      "instE",
+      "123.5.5.5"
+    ]
+  }
+}