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

/*
 * Copyright 2016-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.
 */

/*
 ONOS GUI -- Topology View Module.
 Module that displays the details panel for selected nodes
 */

(function () {
    'use strict';

    // TODO: Topo2Panel - A view that draws the container for Summary and Details Panels
    // TODO: as well as the show/hide/toggle methods.

    // TODO: Topo2DetailsPanel should extend Topo2Panel and add methods to controller position
    // TODO: based on the visibility of Topo2Summary

    // TODO: Topo2<Device|Link|Host>Panel should only be concerned with the content displayed

    // Injected Services
    var Panel, flash;

    // Internal State
    var useDetails = true,
        detailsPanel,
        summaryPanel;

    // configuration
    var id = 'topo2-p-detail',
        className = 'topo2-p',
        transTime = 750,
        panelPadding = 64,
        panelSpacing = 20,
        panelOpts = {
            width: 260, // summary and detail panel width
        };

    function getInstance(_summaryPanel_) {
        if (detailsPanel) {
            return detailsPanel;
        }

        summaryPanel = _summaryPanel_;

        var options = angular.extend({}, panelOpts, {
            class: className,
        });

        Panel = Panel.extend({
            up: function () {
                detailsPanel.el.el()
                    .transition()
                    .duration(transTime)
                    .style('top', panelPadding + 'px');
            },
            down: function (position, callback) {
                detailsPanel.el.el()
                    .transition()
                    .duration(transTime)
                    .style('top', position + (panelPadding + panelSpacing) + 'px')
                    .each('end', callback);
            },
            show: function () {

                if (!useDetails) {
                    return;
                }

                var summaryInstance = summaryPanel.getInstance(),
                    position = 0;

                if (summaryInstance.isVisible()) {
                    position = summaryInstance.el.bbox().height;
                    position = position + panelSpacing;
                }

                detailsPanel.el.el()
                    .style('top', panelPadding + position + 'px');
                detailsPanel.el.show();
            },
            hide: function () {
                detailsPanel.el.hide();
            },
            toggleUseDetailsFlag: function (x) {
                var kev = (x === 'keyev'),
                    verb;

                useDetails = kev ? !useDetails : !!x;
                verb = useDetails ? 'Enable' : 'Disable';

                if (useDetails) {
                    this.show();
                } else {
                    this.hide();
                }

                flash.flash(verb + ' details panel');
                return useDetails;
            },
        });

        detailsPanel = new Panel(id, options);
        detailsPanel.el.classed(className, true);

        return detailsPanel;
    }


    angular.module('ovTopo2')
    .factory('Topo2DetailsPanelService', [
        'Topo2PanelService', 'FlashService',
        function (_ps_, _flash_) {
            Panel = _ps_;
            flash = _flash_;

            return getInstance;
        },
    ]);
})();