web/gui/src/main/webapp/app/fw/layer/details-panel.js

/*
 * 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, makeEditable) {
        top.append('div').classed('iconDiv ' + icon, true);

        if (makeEditable) {
            new EditableTextComponent(top.append('h2'), {
                scope: options.scope,
                nameChangeRequest: options.nameChangeRequest,
                keyBindings: options.keyBindings,
            });
        } else {
            top.append('h2');   // note: title is inserted later
        }
    }

    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,
                };
            },
        ]);
})();