GUI -- WebSocket close now invokes the Veil Service.

- enableKeys(b) added to KeyService.
- minor cleanup of Veil Service.

Change-Id: I640720727a3f1249d81855a61f088a7f2e9525cc

@@ -24,51 +24,55 @@
     'use strict';
     'use strict';
 
 
     // injected references
     // injected references
-    var $log, fs;
+    var $log, fs, ks;
 
 
     var veil, pdiv, svg;
     var veil, pdiv, svg;
 
 
+    // msg should be an array of strings
     function show(msg) {
     function show(msg) {
+        var msgs = fs.isA(msg) || [msg];
         pdiv.selectAll('p').remove();
         pdiv.selectAll('p').remove();
 
 
-        msg.forEach(function (line) {
+        msgs.forEach(function (line) {
             pdiv.append('p').text(line);
             pdiv.append('p').text(line);
         });
         });
 
 
         veil.style('display', 'block');
         veil.style('display', 'block');
-
-        // TODO: disable key bindings
+        ks.enableKeys(false);
     }
     }
 
 
     function hide() {
     function hide() {
         veil.style('display', 'none');
         veil.style('display', 'none');
-        // TODO: re-enable key bindings
+        ks.enableKeys(true);
     }
     }
 
 
     angular.module('onosLayer')
     angular.module('onosLayer')
-        .factory('VeilService', ['$log', 'FnService', 'GlyphService',
-            function (_$log_, _fs_, gs) {
+    .factory('VeilService',
+        ['$log', 'FnService', 'KeyService', 'GlyphService',
+
+        function (_$log_, _fs_, _ks_, gs) {
             $log = _$log_;
             $log = _$log_;
             fs = _fs_;
             fs = _fs_;
+            ks = _ks_;
 
 
             var wSize = fs.windowSize(),
             var wSize = fs.windowSize(),
                 ww = wSize.width,
                 ww = wSize.width,
                 wh = wSize.height,
                 wh = wSize.height,
-                    shrinkConst = wh-(wh * 0.7),
-                    birdDim = wh-shrinkConst,
-                    birdCenter = (ww / 2) - (birdDim / 2);
+                vbox = '0 0 ' + ww + ' ' +  wh,
+                shrink = wh * 0.3,
+                birdDim = wh - shrink,
+                birdCenter = (ww - birdDim) / 2;
 
 
             veil = d3.select('#veil');
             veil = d3.select('#veil');
             pdiv = veil.append('div').classed('msg', true);
             pdiv = veil.append('div').classed('msg', true);
 
 
             svg = veil.append('svg').attr({
             svg = veil.append('svg').attr({
-                    width: (ww + 'px'),
-                    height: (wh + 'px'),
-                    viewBox: '0 0 ' + ww + ' ' +  wh
+                width: ww,
+                height: wh,
+                viewBox: vbox
             }).style('opacity', 0.2);
             }).style('opacity', 0.2);
 
 
-                gs.addGlyph(svg, 'bird', (birdDim + 'px'),
-                    false, [birdCenter, shrinkConst/2]);
+            gs.addGlyph(svg, 'bird', birdDim, false, [birdCenter, shrink/2]);
 
 
             return {
             return {
                 show: show,
                 show: show,

@@ -24,7 +24,8 @@
     var $log, fs, ts;
     var $log, fs, ts;
 
 
     // internal state
     // internal state
-    var keyHandler = {
+    var enabled = true,
+        keyHandler = {
             globalKeys: {},
             globalKeys: {},
             maskedKeys: {},
             maskedKeys: {},
             viewKeys: {},
             viewKeys: {},
@@ -80,6 +81,7 @@
 
 
         d3.event.stopPropagation();
         d3.event.stopPropagation();
 
 
+        if (enabled) {
             // global callback?
             // global callback?
             if (gcb && gcb(token, key, keyCode, event)) {
             if (gcb && gcb(token, key, keyCode, event)) {
                 // if the event was 'handled', we are done
                 // if the event was 'handled', we are done
@@ -90,6 +92,7 @@
                 vcb(token, key, keyCode, event);
                 vcb(token, key, keyCode, event);
             }
             }
         }
         }
+    }
 
 
     function setupGlobalKeys() {
     function setupGlobalKeys() {
         angular.extend(keyHandler, {
         angular.extend(keyHandler, {
@@ -197,6 +200,9 @@
                     } else {
                     } else {
                         keyHandler.viewGestures = fs.isA(g) || [];
                         keyHandler.viewGestures = fs.isA(g) || [];
                     }
                     }
+                },
+                enableKeys: function (b) {
+                    enabled = b;
                 }
                 }
             };
             };
     }]);
     }]);

@@ -27,7 +27,7 @@
     'use strict';
     'use strict';
 
 
     // injected refs
     // injected refs
-    var $log, wss, wes, tps, tis, tfs, tss, tts;
+    var $log, wss, wes, vs, tps, tis, tfs, tss, tts;
 
 
     // internal state
     // internal state
     var wsock, evApis;
     var wsock, evApis;
@@ -89,6 +89,7 @@
         $log.debug('web socket opened...');
         $log.debug('web socket opened...');
         // start by requesting periodic summary data...
         // start by requesting periodic summary data...
         dispatcher.sendEvent('requestSummary');
         dispatcher.sendEvent('requestSummary');
+        vs.hide();
     }
     }
 
 
     function onWsMessage(ev) {
     function onWsMessage(ev) {
@@ -98,21 +99,27 @@
     function onWsClose(reason) {
     function onWsClose(reason) {
         $log.log('web socket closed; reason=', reason);
         $log.log('web socket closed; reason=', reason);
         wsock = null;
         wsock = null;
+        vs.show([
+            'Oops!',
+            'Web-socket connection to server closed...',
+            'Try refreshing the page.'
+        ]);
     }
     }
 
 
     // ==========================
     // ==========================
 
 
     angular.module('ovTopo')
     angular.module('ovTopo')
     .factory('TopoEventService',
     .factory('TopoEventService',
-        ['$log', '$location', 'WebSocketService', 'WsEventService',
+        ['$log', '$location', 'WebSocketService', 'WsEventService', 'VeilService',
             'TopoPanelService', 'TopoInstService', 'TopoForceService',
             'TopoPanelService', 'TopoInstService', 'TopoForceService',
             'TopoSelectService', 'TopoTrafficService',
             'TopoSelectService', 'TopoTrafficService',
 
 
-        function (_$log_, $loc, _wss_, _wes_,
+        function (_$log_, $loc, _wss_, _wes_, _vs_,
                   _tps_, _tis_, _tfs_, _tss_, _tts_) {
                   _tps_, _tis_, _tfs_, _tss_, _tts_) {
             $log = _$log_;
             $log = _$log_;
             wss = _wss_;
             wss = _wss_;
             wes = _wes_;
             wes = _wes_;
+            vs = _vs_;
             tps = _tps_;
             tps = _tps_;
             tis = _tis_;
             tis = _tis_;
             tfs = _tfs_;
             tfs = _tfs_;

@@ -43,6 +43,16 @@ describe('factory: fw/util/keys.js', function() {
         d3.select('#ptest').remove();
         d3.select('#ptest').remove();
     });
     });
 
 
+    it('should define the key service', function () {
+        expect(ks).toBeDefined();
+    });
+
+    it('should define api functions', function () {
+        expect(fs.areFunctions(ks, [
+            'installOn', 'keyBindings', 'gestureNotes', 'enableKeys'
+        ])).toBeTruthy();
+    });
+
     // Code to emulate key presses....
     // Code to emulate key presses....
     // NOTE: kinda messy, but it seems to get the job done.
     // NOTE: kinda messy, but it seems to get the job done.
     function jsKeyDown(element, code) {
     function jsKeyDown(element, code) {
@@ -207,6 +217,29 @@ describe('factory: fw/util/keys.js', function() {
         expect(count).toEqual(1);
         expect(count).toEqual(1);
     });
     });
 
 
+    it('should block keys when disabled', function () {
+        var cbCount = 0;
+
+        function cb() { cbCount++; }
+
+        function pressA() { jsKeyDown(elem, 65); }  // 65 == 'A' keycode
+
+        ks.keyBindings({ A: cb });
+
+        expect(cbCount).toBe(0);
+
+        pressA();
+        expect(cbCount).toBe(1);
+
+        ks.enableKeys(false);
+        pressA();
+        expect(cbCount).toBe(1);
+
+        ks.enableKeys(true);
+        pressA();
+        expect(cbCount).toBe(2);
+    });
+
     // === Gesture notes related tests
     // === Gesture notes related tests
     it('should start with no notes', function () {
     it('should start with no notes', function () {
         expect(ks.gestureNotes()).toEqual([]);
         expect(ks.gestureNotes()).toEqual([]);