CORD GUI -- Login page now takes emails to log into different accounts. Bundle page layout WIP.
Change-Id: I4af52d68f481b637a9b5576ddaba0bad1d113c28
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.html b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.html
index 5e2f1e8..15e1132 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.html
@@ -1,19 +1,4 @@
-<!--
- ~ Copyright 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.
- -->
-
+<!--Foot partial html-->
<div class="foot">
<div class="left">
Sample copyright notice here
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
index af0e940..6f300d4 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
@@ -1,4 +1,4 @@
-<div id="available">
+<div ng-cloak class="ng-hide ng-cloak" ng-show="show" id="available">
<h3>{{available.name}}</h3>
<p>{{available.desc}}</p>
<button ng-click="changeBundle(available.id)">Apply</button>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
index bc36f1d..5683011 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
@@ -16,13 +16,11 @@
div#bundle div.main-left {
width: 61%;
- padding-left: 1%;
+ padding: 4% 0 0 1%;
}
div#bundle div.main-right {
width: 37%;
- height: 85vh;
- background-color: rgba(173, 216, 230, 0.25);
- border-radius: 5px;
+ padding-top: 4%;
}
#bundle table {
@@ -57,18 +55,42 @@
border: none;
}
+#bundle img {
+ width: 100%;
+}
+
#bundle h2 {
text-align: center;
padding: 3%;
- background-color: rgba(173, 216, 230, 0.75);
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- color: white;
- font-weight: normal;
+ font-weight: lighter;
+ border: 1px solid #3C3C3C;
+ cursor: pointer;
+}
+#bundle h2:hover {
+ color: #CE5650;
+ border-color: #CE5650;
+}
+
+div#bundles {
+ position: relative;
+}
+
+div#available.ng-hide-add.ng-hide-add-active,
+div#available.ng-hide-remove.ng-hide-remove-active {
+ -webkit-transition: all linear 0.5s;
+ transition: all linear 0.5s;
+}
+div#available.ng-hide {
+ opacity: 0;
+ top: -80px;
}
div#available {
+ position: absolute;
padding: 5%;
+ opacity: 1;
+ top: -10px;
+ width: 100%;
}
#available p {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
index 1fafa79..fb4211f 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
@@ -13,7 +13,10 @@
</table>
</div>
<div class="main-right">
- <h2>Available Bundles</h2>
- <div bundle-available></div>
+ <img src="imgs/binary.jpg">
+ <div ng-click="showBundles()">
+ <h2>Available Bundles</h2>
+ </div>
+ <div id="bundles" bundle-available></div>
</div>
</div>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
index c7281f9..a5b59d0 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
@@ -28,6 +28,7 @@
var BundleData, resource,
getData;
$scope.page.curr = 'bundle';
+ $scope.show = false;
getData = function (id) {
if (!id) { id = ''; }
@@ -61,6 +62,10 @@
getData(id);
};
+ $scope.showBundles = function () {
+ $scope.show = !$scope.show;
+ };
+
$log.debug('Cord Bundle Ctrl has been created.');
}])
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
index 20d1bf81..759c32d 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
@@ -14,6 +14,10 @@
* limitations under the License.
*/
+[ng\:cloak], [ng-cloak], .ng-cloak {
+ display: none !important;
+}
+
head, body, footer,
h1, h2, h3, h4, h5, h6, p,
a, ul, li, div,
@@ -27,6 +31,7 @@
p, a, li, th, td,
select, input, option, label {
font-family: sans-serif, "Droid Sans", "Lucida Grande", Arial, Helvetica;
+ color: #3C3C3C;
}
body {
@@ -57,7 +62,7 @@
margin-bottom: 1%;
}
p {
- font-size: 70%;
+ font-size: 100%;
color: rgba(0,0,0, 0.8);
text-indent: 20px;
text-align: justify;
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
index 0ce4112..cc22598 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
@@ -9,9 +9,11 @@
<div class="outline"></div>
<h2>Subscriber Portal</h2>
<form>
- <input type="text" placeholder="email">
+ <input ng-model="email" type="text" placeholder="email">
<input type="password" placeholder="password">
- <a href="#/home"><input type="button" value="Log In"></a>
+ <a href="#/home">
+ <input ng-click="login()" type="button" value="Log In">
+ </a>
</form>
</div>
</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js
index e13a0ef..279ab4f 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.js
@@ -16,11 +16,25 @@
(function () {
'use strict';
+ var urlSuffix = '/rs/login';
angular.module('cordLogin', [])
- .controller('CordLoginCtrl', ['$log', '$scope',
- function ($log, $scope) {
- $scope.page.curr = 'login';
- $log.debug('Cord Login Ctrl has been created.');
+ .controller('CordLoginCtrl', ['$log', '$scope', '$resource',
+ function ($log, $scope, $resource) {
+ var LoginData, resource;
+ $scope.page.curr = 'login';
+
+ $scope.login = function () {
+ var email;
+ if (!$scope.email) {
+ email = 'mom@user.org';
+ } else {
+ email = $scope.email
+ }
+ LoginData = $resource($scope.shared.url + urlSuffix + '/' + email);
+ resource = LoginData.get();
+ };
+
+ $log.debug('Cord Login Ctrl has been created.');
}]);
}());