ONOS-5579 Refactoring Details Panel
Added an Editable Textfield Component
Refactored Device View
Refactored Host View
Change-Id: I7ca423f6c198f8e09b20ed4e57e352de04b797e9
diff --git a/web/gui/src/main/webapp/app/fw/layer/details-panel.js b/web/gui/src/main/webapp/app/fw/layer/details-panel.js
new file mode 100644
index 0000000..cc72a06
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/layer/details-panel.js
@@ -0,0 +1,178 @@
+/*
+ * Copyright 2017-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+
+ var ps, fs, mast, wss, is, EditableTextComponent;
+
+ var panel,
+ pStartY,
+ wSize,
+ wssHandlers = {},
+ options;
+
+ // Constants
+ var topPdg = 28,
+ defaultLabelWidth = 110,
+ defaultValueWidth = 80;
+
+ // Elements
+ var container,
+ top,
+ bottom;
+
+ function createDetailsPanel(name, _options) {
+ options = _options;
+ scope = options.scope;
+
+ panel = ps.createPanel(name, options);
+
+ calculatePositions();
+
+ panel.el().style({
+ position: 'absolute',
+ top: pStartY + 'px',
+ });
+
+ hide();
+
+ return panel;
+ }
+
+ function calculatePositions() {
+ pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
+ + mast.mastHeight() + topPdg;
+ wSize = fs.windowSize(pStartY);
+ pHeight = wSize.height;
+ }
+
+ function hide() {
+ panel.hide();
+ }
+
+ function setResponse(name, callback) {
+ var additionalHandler = {};
+ additionalHandler[name] = callback;
+
+ wss.bindHandlers(additionalHandler);
+ wssHandlers = _.extend({}, wssHandlers, additionalHandler);
+ }
+
+ function addContainers() {
+ container = panel.append('div').classed('container', true);
+ top = container.append('div').classed('top', true);
+ bottom = container.append('div').classed('bottom', true);
+ }
+
+ function addCloseButton(onClose) {
+ var closeBtn = top.append('div').classed('close-btn', true);
+
+ is.loadEmbeddedIcon(closeBtn, 'close', 20);
+ closeBtn.on('click', onClose || function () {});
+ }
+
+ function addHeading(icon) {
+ top.append('div').classed('iconDiv ' + icon, true);
+ new EditableTextComponent(top.append('h2'), {
+ scope: options.scope,
+ nameChangeRequest: options.nameChangeRequest,
+ keyBindings: options.keyBindings,
+ });
+ }
+
+ function addTable(parent, className) {
+ return parent.append('div').classed(className, true).append('table');
+ }
+
+ function addProp(tbody, key, value) {
+ console.log(tbody);
+ var tr = tbody.append('tr');
+
+ function addCell(cls, txt, width) {
+ tr.append('td').attr('class', cls).attr('width', width).text(txt);
+ }
+
+ addCell('label', key + ' :', defaultLabelWidth);
+ addCell('value', value, defaultValueWidth);
+ }
+
+ function addPropsList(el, props) {
+ var tblDiv = el.append('div').classed('top-tables', true);
+ var left = addTable(tblDiv, 'left').append('tbody');
+ var right = addTable(tblDiv, 'right').append('tbody');
+
+ var keys = _.keys(props);
+
+ _.each(props, function (value, key) {
+ var index = keys.indexOf(key);
+
+ if (index < keys.length / 2) {
+ addProp(left, key, value);
+ } else {
+ addProp(right, key, value);
+ }
+ });
+ }
+
+ function empty() {
+ panel.empty();
+ }
+
+ function select(id) {
+ return panel.el().select(id);
+ }
+
+ function destroy() {
+ wss.unbindHandlers(wssHandlers);
+ }
+
+ angular.module('onosLayer')
+ .factory('DetailsPanelService', [
+
+ 'PanelService', 'FnService', 'MastService', 'WebSocketService',
+ 'IconService', 'EditableTextComponent',
+
+ function (_ps_, _fs_, _mast_, _wss_, _is_, _etc_) {
+
+ ps = _ps_;
+ fs = _fs_;
+ mast = _mast_;
+ wss = _wss_;
+ is = _is_;
+ EditableTextComponent = _etc_;
+
+ return {
+ create: createDetailsPanel,
+ setResponse: setResponse,
+
+ addContainers: addContainers,
+ addCloseButton: addCloseButton,
+ addHeading: addHeading,
+ addPropsList: addPropsList,
+
+ // Elements
+ container: function () { return container; },
+ top: function () { return top; },
+ bottom: function () { return bottom; },
+ select: select,
+
+ empty: empty,
+ hide: hide,
+ destroy: destroy,
+ };
+ },
+ ]);
+})();