Topo2: Multi Details panel

Change-Id: Iab16aa38e5271a59da57d00fb4cb308036f86e2c
This commit is contained in:
Steven Burrows 2016-10-21 12:35:58 -05:00 committed by Gerrit Code Review
parent 0bf564937b
commit e2d77d6e02
3 changed files with 48 additions and 24 deletions

View File

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

View File

@ -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'),
id = this.get('id'),
nodeType = this.get('nodeType');
var s = Boolean(this.get('selected'));
// Clear all selected Items
_.each(this.collection.models, function (m) {
m.set('selected', false);
m.el.attr('class', m.svgClassName());
});
if (selected) {
this.set('selected', false);
detailsPanel.hide();
} else {
this.set('selected', true);
this.set('selected', !s);
}
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);
}
this.el.attr('class', this.svgClassName());
} else {
detailsPanel.hide();
}
},
onExit: function () {

View File

@ -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'),
navFn;
tbody = table.append('tbody');
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,