GUI -- Implemented Panel Service.
Change-Id: I5e60c6ffa5676bc11f7312681af7bca85b4f8036
diff --git a/web/gui/src/main/webapp/app/fw/layer/panel.css b/web/gui/src/main/webapp/app/fw/layer/panel.css
new file mode 100644
index 0000000..f83d595
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/layer/panel.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2014,2015 Open Networking Laboratory
+ *
+ * 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 -- Panel Service -- CSS file
+ */
+
+.floatpanel {
+ position: absolute;
+ z-index: 100;
+ display: block;
+ top: 64px;
+ width: 200px;
+ right: -220px;
+ opacity: 0;
+ background-color: rgba(255,255,255,0.8);
+
+ padding: 10px;
+ color: black;
+ font-size: 10pt;
+
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ box-shadow: 0px 2px 12px #777;
+}
+
+/* TODO: light/dark themes */
+.light .floatpanel {
+
+}
+.dark .floatpanel {
+
+}
diff --git a/web/gui/src/main/webapp/app/fw/layer/panel.js b/web/gui/src/main/webapp/app/fw/layer/panel.js
index 6b85e07..2209487 100644
--- a/web/gui/src/main/webapp/app/fw/layer/panel.js
+++ b/web/gui/src/main/webapp/app/fw/layer/panel.js
@@ -20,46 +20,161 @@
(function () {
'use strict';
- var $log;
+ var $log, fs;
var defaultSettings = {
- position: 'TR',
- side: 'right',
- width: 200
+ edge: 'right',
+ width: 200,
+ height: 80,
+ margin: 20,
+ xtnTime: 750
};
+ var panels,
+ panelLayer;
+
+
+ function init() {
+ panelLayer = d3.select('#floatpanels');
+ panelLayer.html('');
+ panels = {};
+ }
+
+ // helpers for panel
+ function noop() {}
+
+ function margin(p) {
+ return p.settings.margin;
+ }
+ function noPx(p, what) {
+ return Number(p.el.style(what).replace(/px$/, ''));
+ }
+ function widthVal(p) {
+ return noPx(p, 'width');
+ }
+ function heightVal(p) {
+ return noPx(p, 'height');
+ }
+ function pxShow(p) {
+ return margin(p) + 'px';
+ }
+ function pxHide(p) {
+ return (-margin(p) - widthVal(p)) + 'px';
+ }
+
+ function makePanel(id, settings) {
+ var p = {
+ id: id,
+ settings: settings,
+ on: false,
+ el: null
+ },
+ api = {
+ show: showPanel,
+ hide: hidePanel,
+ empty: emptyPanel,
+ append: appendPanel,
+ width: panelWidth,
+ height: panelHeight,
+ isVisible: panelIsVisible
+ };
+
+ p.el = panelLayer.append('div')
+ .attr('id', id)
+ .attr('class', 'floatpanel')
+ .style('opacity', 0);
+
+ // has to be called after el is set
+ p.el.style(p.settings.edge, pxHide(p));
+ panelWidth(p.settings.width);
+ panelHeight(p.settings.height);
+
+ panels[id] = p;
+
+ function showPanel(cb) {
+ var endCb = fs.isF(cb) || noop;
+ p.on = true;
+ p.el.transition().duration(p.settings.xtnTime)
+ .each('end', endCb)
+ .style(p.settings.edge, pxShow(p))
+ .style('opacity', 1);
+ }
+
+ function hidePanel(cb) {
+ var endCb = fs.isF(cb) || noop;
+ p.on = false;
+ p.el.transition().duration(p.settings.xtnTime)
+ .each('end', endCb)
+ .style(p.settings.edge, pxHide(p))
+ .style('opacity', 0);
+ }
+
+ function emptyPanel() {
+ return p.el.html('');
+ }
+
+ function appendPanel(what) {
+ return p.el.append(what);
+ }
+
+ function panelWidth(w) {
+ if (w === undefined) {
+ return widthVal(p);
+ }
+ p.el.style('width', w + 'px');
+ }
+
+ function panelHeight(h) {
+ if (h === undefined) {
+ return heightVal(p);
+ }
+ p.el.style('height', h + 'px');
+ }
+
+ function panelIsVisible() {
+ return p.on;
+ }
+
+ return api;
+ }
+
+ function removePanel(id) {
+ panelLayer.select('#' + id).remove();
+ delete panels[id];
+ }
+
angular.module('onosLayer')
- .factory('PanelService', ['$log', function (_$log_) {
+ .factory('PanelService', ['$log', 'FnService', function (_$log_, _fs_) {
$log = _$log_;
+ fs = _fs_;
-
- function createPanel(opts) {
+ function createPanel(id, opts) {
var settings = angular.extend({}, defaultSettings, opts);
-
- function renderPanel() {
-
+ if (!id) {
+ $log.warn('createPanel: no ID given');
+ return null;
}
-
- function showPanel() {
-
+ if (panels[id]) {
+ $log.warn('Panel with ID "' + id + '" already exists');
+ return null;
}
+ $log.debug('creating panel:', id, settings);
+ return makePanel(id, settings);
+ }
- function hidePanel() {
-
+ function destroyPanel(id) {
+ if (panels[id]) {
+ $log.debug('destroying panel:', id);
+ removePanel(id);
+ } else {
+ $log.debug('no panel to destroy:', id);
}
-
- var api = {
- render: renderPanel,
- show: showPanel,
- hide: hidePanel
- };
-
- $log.debug('creating panel with settings: ', settings);
- return api;
}
return {
- createPanel: createPanel
+ init: init,
+ createPanel: createPanel,
+ destroyPanel: destroyPanel
};
}]);
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index c26b8f7..beeb2d3 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -66,6 +66,7 @@
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="fw/mast/mast.css">
<link rel="stylesheet" href="fw/svg/icon.css">
+ <link rel="stylesheet" href="fw/layer/panel.css">
<link rel="stylesheet" href="fw/nav/nav.css">
<!-- This is where contributed javascript will get injected -->
diff --git a/web/gui/src/main/webapp/app/onos.js b/web/gui/src/main/webapp/app/onos.js
index b7be490..23e777c 100644
--- a/web/gui/src/main/webapp/app/onos.js
+++ b/web/gui/src/main/webapp/app/onos.js
@@ -24,12 +24,13 @@
// define core module dependencies here...
var coreDependencies = [
'ngRoute',
- 'onosWidget',
+ 'onosMast',
+ 'onosNav',
'onosUtil',
'onosSvg',
'onosRemote',
- 'onosMast',
- 'onosNav'
+ 'onosLayer',
+ 'onosWidget'
];
// view IDs.. note the first view listed is loaded at startup
@@ -63,9 +64,9 @@
.controller('OnosCtrl', [
'$log', '$route', '$routeParams', '$location',
- 'KeyService', 'ThemeService', 'GlyphService',
+ 'KeyService', 'ThemeService', 'GlyphService', 'PanelService',
- function ($log, $route, $routeParams, $location, ks, ts, gs) {
+ function ($log, $route, $routeParams, $location, ks, ts, gs, ps) {
var self = this;
self.$route = $route;
@@ -77,6 +78,7 @@
ts.init();
ks.installOn(d3.select('body'));
gs.init();
+ ps.init();
$log.log('OnosCtrl has been created');
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
index 729f006..5addda8 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -28,7 +28,7 @@
];
// references to injected services etc.
- var $log, ks, zs, gs, ms, wss;
+ var $log, ks, zs, gs, ms, wss, ps;
// DOM elements
var ovtopo, svg, defs, zoomLayer, map;
@@ -170,11 +170,12 @@
angular.module('ovTopo', moduleDependencies)
.controller('OvTopoCtrl', [
- '$scope', '$log', '$location',
+ '$scope', '$log', '$location', '$timeout',
'KeyService', 'ZoomService', 'GlyphService', 'MapService',
- 'WebSocketService',
+ 'WebSocketService', 'PanelService',
- function ($scope, _$log_, $loc, _ks_, _zs_, _gs_, _ms_, _wss_) {
+ function ($scope, _$log_, $loc, $timeout,
+ _ks_, _zs_, _gs_, _ms_, _wss_, _ps_) {
var self = this;
$log = _$log_;
ks = _ks_;
@@ -182,16 +183,18 @@
gs = _gs_;
ms = _ms_;
wss = _wss_;
+ ps = _ps_;
self.notifyResize = function () {
svgResized(svg.style('width'), svg.style('height'));
};
+ // Cleanup on destroyed scope..
$scope.$on('$destroy', function () {
$log.log('OvTopoCtrl is saying Buh-Bye!');
- // TODO: cleanup when the scope is destroyed...
- // for example, closing the web socket.
-
+ wsock && wsock.close();
+ wsock = null;
+ ps.destroyPanel('topo-p-summary');
});
// svg layer and initialization of components
@@ -204,6 +207,12 @@
setUpMap();
setUpWebSocket($loc.search().wsport);
+ // TODO: remove this temporary code....
+ var p = ps.createPanel('topo-p-summary');
+ p.append('h1').text('Hello World');
+ p.show();
+ $timeout(function () { p.hide(); }, 2000);
+
$log.log('OvTopoCtrl has been created');
}]);
}());