GUI -- Sketched out structure for multi-views; each with own controller, template html and css.
- routes currently hard-coded... some thought needed to handle views contributed at runtime.
Change-Id: Ied012744d74e46c5072143283364557f9485056c
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index 7699630..b96e408 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -46,11 +46,15 @@
<link rel="stylesheet" href="fw/mast/mast.css">
<!-- This is where contributed javascript get injected -->
- <!-- INJECTED-JAVASCRIPT -->
+ <!-- {INJECTED-JAVASCRIPT} -->
+ <script src="view/sample/sample.js"></script>
+ <script src="view/topo/topo.js"></script>
<!-- TODO: inject javascript refs server-side -->
<!-- This is where contributed stylesheets get injected -->
- <!-- INJECTED-CSS-STYLESHEETS -->
+ <!-- {INJECTED-CSS-STYLESHEETS} -->
+ <link rel="stylesheet" href="view/sample/sample.css">
+ <link rel="stylesheet" href="view/topo/topo.css">
<!-- TODO: inject style-sheet refs server-side -->
</head>
<body class="light" ng-app="onosApp">
diff --git a/web/gui/src/main/webapp/app/onos.css b/web/gui/src/main/webapp/app/onos.css
index cc5b956..3944f59 100644
--- a/web/gui/src/main/webapp/app/onos.css
+++ b/web/gui/src/main/webapp/app/onos.css
@@ -36,3 +36,11 @@
margin: 0;
overflow: hidden;
}
+
+#view {
+ padding: 6px;
+}
+
+#view h2 {
+ color: #800;
+}
diff --git a/web/gui/src/main/webapp/app/onos.js b/web/gui/src/main/webapp/app/onos.js
index 73af667..9769857 100644
--- a/web/gui/src/main/webapp/app/onos.js
+++ b/web/gui/src/main/webapp/app/onos.js
@@ -23,12 +23,38 @@
(function () {
'use strict';
- angular.module('onosApp', ['onosUtil', 'onosMast'])
- .controller('OnosCtrl', ['$log', 'KeyService', 'ThemeService',
- function (_$log_, ks, ts) {
+ var coreDependencies = [
+ 'ngRoute',
+ 'onosUtil',
+ 'onosMast'
+ ];
+
+ var viewDependencies = [
+ // TODO: inject view dependencies server side
+ // NOTE: 'ov' == 'Onos View'...
+ // {INJECTED-VIEW-MODULE-DEPENDENCIES}
+ 'ovSample',
+ 'ovTopo',
+ // NOTE: dummy element allows all previous entries to end with comma
+ '___dummy___'
+ ];
+
+ var dependencies = coreDependencies.concat(viewDependencies);
+ dependencies.pop(); // remove dummy
+
+ angular.module('onosApp', dependencies)
+
+ .controller('OnosCtrl', [
+ '$log', '$route', '$routeParams', '$location',
+ 'KeyService', 'ThemeService',
+
+ function (_$log_, $route, $routeParams, $location, ks, ts) {
var $log = _$log_,
self = this;
+ self.$route = $route;
+ self.$routeParams = $routeParams;
+ self.$location = $location;
self.version = '1.1.0';
// initialize onos (main app) controller here...
@@ -36,6 +62,28 @@
ks.installOn(d3.select('body'));
$log.log('OnosCtrl has been created');
+
+ $log.debug('route: ', self.$route);
+ $log.debug('routeParams: ', self.$routeParams);
+ $log.debug('location: ', self.$location);
+ }])
+
+ .config(['$routeProvider', function ($routeProvider) {
+ // TODO: figure out a way of handling contributed views...
+ $routeProvider
+ .when('/', {
+ controller: 'OvSampleCtrl',
+ controllerAs: 'ctrl',
+ templateUrl: 'view/sample/sample.html'
+ })
+ .when('/topo', {
+ controller: 'OvTopoCtrl',
+ controllerAs: 'ctrl',
+ templateUrl: 'view/topo/topo.html'
+ })
+ .otherwise({
+ redirectTo: '/'
+ })
}]);
}());
diff --git a/web/gui/src/main/webapp/app/view/sample/README.txt b/web/gui/src/main/webapp/app/view/sample/README.txt
new file mode 100644
index 0000000..0d137bc
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/sample/README.txt
@@ -0,0 +1,4 @@
+# ONOS Sample View
+
+Code and resources for implementing a sample view.
+
diff --git a/web/gui/src/main/webapp/app/view/sample/sample.css b/web/gui/src/main/webapp/app/view/sample/sample.css
new file mode 100644
index 0000000..9e616ac
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/sample/sample.css
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2014 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 -- Sample View -- CSS file
+
+ @author Simon Hunt
+ */
+
+#ov-sample .msg {
+ font-style: italic;
+ color: darkorange;
+}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/sample/sample.html b/web/gui/src/main/webapp/app/view/sample/sample.html
new file mode 100644
index 0000000..113b725
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/sample/sample.html
@@ -0,0 +1,18 @@
+<!-- Sample partial HTML -->
+<div id="ov-sample">
+ <h2> A Sample View </h2>
+
+ <img class="logo" src="../data/img/onos-logo.png">
+
+ <p>
+ This is a <i>view</i> distinct from the Topology viewer,
+ to help facilitate development of the navigation model.
+ </p>
+ <p>
+ A message from the controller:
+ <span class="msg">{{ ctrl.message }}</span>
+ </p>
+ <p>
+ Try visiting the <a href="#/topo">Topology View</a>.
+ </p>
+</div>
diff --git a/web/gui/src/main/webapp/app/view/sample/sample.js b/web/gui/src/main/webapp/app/view/sample/sample.js
new file mode 100644
index 0000000..5c3add5
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/sample/sample.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2014 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 -- Sample View Module
+
+ @author Simon Hunt
+ */
+
+(function () {
+ 'use strict';
+ angular.module('ovSample', ['onosUtil'])
+ .controller('OvSampleCtrl', ['$log', function (_$log_) {
+ var self = this,
+ $log = _$log_;
+
+ self.message = 'Hey there folks!';
+
+ $log.log('OvSampleCtrl has been created');
+ }]);
+}());
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
new file mode 100644
index 0000000..141bc32
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2014 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 -- Topology View -- CSS file
+
+ @author Simon Hunt
+ */
+
+#ov-topo .msg {
+ font-family: "Bookman", Georgia, "Times New Roman", serif;
+ font-size: 40pt;
+ font-weight: bold;
+ font-style: italic;
+ color: seagreen;
+}
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.html b/web/gui/src/main/webapp/app/view/topo/topo.html
new file mode 100644
index 0000000..a1e0749
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo/topo.html
@@ -0,0 +1,10 @@
+<!-- Topology View partial HTML -->
+<div id="ov-topo">
+ <h2> Topology View </h2>
+
+ <p>
+ This is a place-holder for the topology viewer.
+ </p>
+
+ <div class="msg"> {{ctrl.message}} </div>
+</div>
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
new file mode 100644
index 0000000..ee803ab
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2014 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 -- Topology View Module
+
+ @author Simon Hunt
+ */
+
+(function () {
+ 'use strict';
+ angular.module('ovTopo', ['onosUtil'])
+ .controller('OvTopoCtrl', ['$log', function (_$log_) {
+ var self = this,
+ $log = _$log_;
+
+ self.message = 'Topo View Rocks!';
+
+ $log.log('OvTopoCtrl has been created');
+ }]);
+}());