Topo2: Multi Details panel

Change-Id: Iab16aa38e5271a59da57d00fb4cb308036f86e2c

web/gui/src/main/webapp/app/view/topo2/topo2Collection.js

@@ -77,6 +77,9 @@
 
             return this;
         },
+        filter: function (comparator) {
+            return _.filter(this.models, comparator);
+        },
         _reset: function () {
             this._byId = [];
             this.models = [];

web/gui/src/main/webapp/app/view/topo2/topo2Device.js

@@ -60,6 +60,13 @@
                     events: {
                         'click': 'onClick'
                     },
+                    onChange: function () {
+
+                        // Update class names when the model changes
+                        if (this.el) {
+                            this.el.attr('class', this.svgClassName());
+                        }
+                    },
                     nodeType: 'device',
                     icon: function () {
                         var type = this.get('type');
@@ -71,27 +78,35 @@
 
                         if (ev.shiftKey) {
                             // TODO: Multi-Select Details Panel
+                            this.set('selected', true);
                         } else {
 
-                            var selected = this.get('selected'),
+                            var s = Boolean(this.get('selected'));
-                                id = this.get('id'),
+                            // Clear all selected Items
-                                nodeType = this.get('nodeType');
-
                             _.each(this.collection.models, function (m) {
                                 m.set('selected', false);
-                                m.el.attr('class', m.svgClassName());
                             });
 
-                            if (selected) {
+                            this.set('selected', !s);
-                                this.set('selected', false);
-                                detailsPanel.hide();
-                            } else {
-                                this.set('selected', true);
-                                detailsPanel.updateDetails(id, nodeType);
-                                detailsPanel.show();
                         }
 
-                            this.el.attr('class', this.svgClassName());
+                        var selected = this.collection.filter(function (m) {
+                            return m.get('selected');
+                        });
+
+                        if (_.isArray(selected) && selected.length > 0) {
+                            if (selected.length === 1) {
+                                var model = selected[0],
+                                    id = model.get('id'),
+                                    nodeType = model.get('nodeType');
+                                detailsPanel.updateDetails(id, nodeType);
+                                detailsPanel.show();
+                            } else {
+                                // Multi Panel
+                                detailsPanel.showMulti(selected);
+                            }
+                        } else {
+                            detailsPanel.hide();
                         }
                     },
                     onExit: function () {

web/gui/src/main/webapp/app/view/topo2/topo2DeviceDetailsPanel.js

@@ -136,6 +136,7 @@
                     cb: function () { ns.navTo(path, { devId: devId }); }
                 });
             }
+            // TODO: Implement Overlay service
             // else if (btn = _getButtonDef(id, data)) {
             //     addAction(btn);
             // }
@@ -152,26 +153,30 @@
             title = detailsPanel.appendToHeader('h2')
                 .classed('clickable', true),
             table = detailsPanel.appendToBody('table'),
-            tbody = table.append('tbody'),
+            tbody = table.append('tbody');
-            navFn;
 
         gs.addGlyph(svg, (data.type || 'unknown'), 26);
         title.text(data.title);
 
-        // // only add navigation when displaying a device
-        // if (isDevice[data.type]) {
-        //     navFn = function () {
-        //         ns.navTo(devPath, { devId: data.id });
-        //     };
-        //
-        //     svg.on('click', navFn);
-        //     title.on('click', navFn);
-        // }
-
         listProps(tbody, data);
         addBtnFooter();
     }
 
+    function renderMulti(nodes) {
+        detailsPanel.emptyRegions();
+
+        var title = detailsPanel.appendToHeader('h3'),
+            table = detailsPanel.appendToBody('table'),
+            tbody = table.append('tbody');
+
+        title.text('Selected Items');
+        nodes.forEach(function (n, i) {
+            addProp(tbody, i + 1, n.get('id'));
+        });
+
+        // addBtnFooter();
+        show();
+    }
 
     function bindHandlers() {
         wss.bindHandlers(handlerMap);
@@ -226,6 +231,7 @@
             return {
                 init: init,
                 updateDetails: updateDetails,
+                showMulti: renderMulti,
 
                 toggle: toggle,
                 show: show,