diff options
Diffstat (limited to 'testapi/opnfv_testapi/ui/shared')
7 files changed, 345 insertions, 0 deletions
diff --git a/testapi/opnfv_testapi/ui/shared/alerts/alertModal.html b/testapi/opnfv_testapi/ui/shared/alerts/alertModal.html new file mode 100644 index 0000000..59fd500 --- /dev/null +++ b/testapi/opnfv_testapi/ui/shared/alerts/alertModal.html @@ -0,0 +1,8 @@ +<div class="modal-body" style="padding:0px"> + <div class="alert alert-{{alert.data.mode}}" style="margin-bottom:0px"> + <button type="button" class="close" data-ng-click="alert.close()" > + <span class="glyphicon glyphicon-remove-circle"></span> + </button> + <strong>{{alert.data.title}}</strong> {{alert.data.text}} + </div> +</div> diff --git a/testapi/opnfv_testapi/ui/shared/alerts/alertModalFactory.js b/testapi/opnfv_testapi/ui/shared/alerts/alertModalFactory.js new file mode 100644 index 0000000..929f543 --- /dev/null +++ b/testapi/opnfv_testapi/ui/shared/alerts/alertModalFactory.js @@ -0,0 +1,74 @@ +/* + * 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 () { + 'use strict'; + + angular + .module('testapiApp') + .factory('raiseAlert', raiseAlert); + + raiseAlert.$inject = ['$uibModal']; + + /** + * This allows alert pop-ups to be raised. Just inject it as a dependency + * in the calling controller. + */ + function raiseAlert($uibModal) { + return function(mode, title, text) { + $uibModal.open({ + templateUrl: 'testapi-ui/shared/alerts/alertModal.html', + controller: 'RaiseAlertModalController as alert', + backdrop: true, + keyboard: true, + backdropClick: true, + size: 'md', + resolve: { + data: function () { + return { + mode: mode, + title: title, + text: text + }; + } + } + }); + }; + } + + angular + .module('testapiApp') + .controller('RaiseAlertModalController', RaiseAlertModalController); + + RaiseAlertModalController.$inject = ['$uibModalInstance', 'data']; + + /** + * This is the controller for the alert pop-up. + */ + function RaiseAlertModalController($uibModalInstance, data) { + var ctrl = this; + + ctrl.close = close; + ctrl.data = data; + + /** + * This method will close the alert modal. The modal will close + * when the user clicks the close button or clicks outside of the + * modal. + */ + function close() { + $uibModalInstance.close(); + } + } +})(); diff --git a/testapi/opnfv_testapi/ui/shared/alerts/confirmModal.html b/testapi/opnfv_testapi/ui/shared/alerts/confirmModal.html new file mode 100644 index 0000000..e5397e0 --- /dev/null +++ b/testapi/opnfv_testapi/ui/shared/alerts/confirmModal.html @@ -0,0 +1,23 @@ +<div class="modal-header"><h3 class="modal-title">Confirm</h3></div> +<div class="modal-body"> + <div class="confirm" ng-class="{ 'hidden': confirmModal.data.text=='Delete' }"> + <div class="form-group"> + <label for="confirmText">{{confirmModal.data.text}}:</label> + <textarea type="text" class="form-control" + rows="5" ng-model="confirmModal.inputText" id="confirmText"> + </textarea> + </div> + </div> + <div class="Delete" ng-class="{ 'hidden': confirmModal.data.text!='Delete' }"> + <div class="form-group"> + <label for="confirmText"> You are about to delete.</label> + <br> + Do you want to proceed? + </div> + </div> + +</div> +<div class="modal-footer"> + <button class="btn btn-primary" ng-click="confirmModal.confirm()">Ok</button> + <button class="btn btn-default" ng-click="confirmModal.cancel()">Cancel</button> +</div> diff --git a/testapi/opnfv_testapi/ui/shared/alerts/confirmModalFactory.js b/testapi/opnfv_testapi/ui/shared/alerts/confirmModalFactory.js new file mode 100644 index 0000000..aba205e --- /dev/null +++ b/testapi/opnfv_testapi/ui/shared/alerts/confirmModalFactory.js @@ -0,0 +1,67 @@ +(function () { + 'use strict'; + + angular + .module('testapiApp') + .factory('confirmModal', confirmModal); + + confirmModal.$inject = ['$uibModal']; + + /** + * Opens confirm modal dialog with input textbox + */ + function confirmModal($uibModal) { + return function(text, successHandler) { + $uibModal.open({ + templateUrl: '/testapi-ui/shared/alerts/confirmModal.html', + controller: 'CustomConfirmModalController as confirmModal', + size: 'md', + resolve: { + data: function () { + return { + text: text, + successHandler: successHandler + }; + } + } + }); + }; + } + + angular + .module('testapiApp') + .controller('CustomConfirmModalController', + CustomConfirmModalController); + + CustomConfirmModalController.$inject = ['$uibModalInstance', 'data']; + + /** + * This is the controller for the alert pop-up. + */ + function CustomConfirmModalController($uibModalInstance, data) { + var ctrl = this; + + ctrl.confirm = confirm; + ctrl.cancel = cancel; + + ctrl.data = angular.copy(data); + + /** + * Initiate confirmation and call the success handler with the + * input text. + */ + function confirm() { + $uibModalInstance.close(); + if (angular.isDefined(ctrl.data.successHandler)) { + ctrl.data.successHandler(ctrl.inputText); + } + } + + /** + * Close the confirm modal without initiating changes. + */ + function cancel() { + $uibModalInstance.dismiss('cancel'); + } + } +})(); diff --git a/testapi/opnfv_testapi/ui/shared/filters.js b/testapi/opnfv_testapi/ui/shared/filters.js new file mode 100644 index 0000000..4a4b7bd --- /dev/null +++ b/testapi/opnfv_testapi/ui/shared/filters.js @@ -0,0 +1,55 @@ +/* + * 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 () { + 'use strict'; + + /** + * Convert an object of objects to an array of objects to use with ng-repeat + * filters. + */ + angular + .module('testapiApp') + .filter('arrayConverter', arrayConverter); + + /** + * Convert an object of objects to an array of objects to use with ng-repeat + * filters. + */ + function arrayConverter() { + return function (objects) { + var array = []; + angular.forEach(objects, function (object, key) { + if (!('id' in object)) { + object.id = key; + } + array.push(object); + }); + return array; + }; + } + + angular + .module('testapiApp') + .filter('capitalize', capitalize); + + /** + * Angular filter that will capitalize the first letter of a string. + */ + function capitalize() { + return function (string) { + return string.substring(0, 1).toUpperCase() + string.substring(1); + }; + } +})(); diff --git a/testapi/opnfv_testapi/ui/shared/header/header.html b/testapi/opnfv_testapi/ui/shared/header/header.html new file mode 100644 index 0000000..4b3f8dd --- /dev/null +++ b/testapi/opnfv_testapi/ui/shared/header/header.html @@ -0,0 +1,55 @@ +<div class="heading"><a ui-sref="home"><img src="testapi-ui/assets/img/testapi-logo.png" alt="TestAPI"></a> +TestAPI +</div> +<nav class="navbar navbar-default" role="navigation" ng-controller="HeaderController as header"> + <div class="container-fluid"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" ng-click="header.navbarCollapsed = !header.navbarCollapsed"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + </div> + + <div class="collapse navbar-collapse" id="navbar" uib-collapse="header.navbarCollapsed"> + <ul class="nav navbar-nav"> + <li ng-class="{ active: header.isActive('/')}"><a ui-sref="home">Home</a></li> + <li ng-class="{ active: header.isActive('/about')}"><a ui-sref="about">About</a></li> + <li ng-class="{ active: header.isActive('/pods')}"><a ui-sref="pods">Pods</a></li> + <li ng-class="{ active: header.isActive('/community_results')}"><a ui-sref="communityResults">Community Results</a></li> + <li ng-class="{ active: header.isActive('/projects')}"><a ui-sref="projects">Projects</a></li> + <!-- + <li ng-class="{ active: header.isCatalogActive('public')}" class="dropdown" uib-dropdown> + <a role="button" class="dropdown-toggle" uib-dropdown-toggle> + Catalog <strong class="caret"></strong> + </a> + <ul class="dropdown-menu"> + <li><a ui-sref="publicVendors">Vendors</a></li> + <li><a ui-sref="publicProducts">Products</a></li> + </ul> + </li> + --> + </ul> + <ul class="nav navbar-nav navbar-right"> + <li ng-class="{ active: header.isActive('/user_results')}" ng-if="auth.isAuthenticated"><a ui-sref="userResults">My Results</a></li> + <!-- + <li ng-if="auth.isAuthenticated" ng-class="{ active: header.isCatalogActive('user')}" class="dropdown" uib-dropdown> + <a role="button" class="dropdown-toggle" uib-dropdown-toggle> + My Catalog <strong class="caret"></strong> + </a> + <ul class="dropdown-menu"> + <li><a ui-sref="userVendors">My Vendors</a></li> + <li><a ui-sref="userProducts">My Products</a></li> + </ul> + </li> + --> + <li ng-class="{ active: header.isActive('/profile')}" ng-if="auth.isAuthenticated"><a ui-sref="profile">Profile</a></li> + <li ng-if="auth.isAuthenticated"><a href="" ng-click="auth.doSignOut()">Sign Out</a></li> + <li ng-if="!auth.isAuthenticated"><a href="" ng-click="auth.doSignIn()">Sign In / Sign Up</a></li> + </ul> + </div> + </div> +</nav> + diff --git a/testapi/opnfv_testapi/ui/shared/header/headerController.js b/testapi/opnfv_testapi/ui/shared/header/headerController.js new file mode 100644 index 0000000..0a14a41 --- /dev/null +++ b/testapi/opnfv_testapi/ui/shared/header/headerController.js @@ -0,0 +1,63 @@ +/* + * 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 () { + 'use strict'; + + angular + .module('testapiApp') + .controller('HeaderController', HeaderController); + + HeaderController.$inject = ['$location']; + + /** + * TestAPI Header Controller + * This controller is for the header template which contains the site + * navigation. + */ + function HeaderController($location) { + var ctrl = this; + + ctrl.isActive = isActive; + ctrl.isCatalogActive = isCatalogActive; + + /** Whether the Navbar is collapsed for small displays. */ + ctrl.navbarCollapsed = true; + + /** + * This determines whether a button should be in the active state based + * on the URL. + */ + function isActive(viewLocation) { + var path = $location.path().substr(0, viewLocation.length); + if (path === viewLocation) { + // Make sure "/" only matches when viewLocation is "/". + if (!($location.path().substr(0).length > 1 && + viewLocation.length === 1 )) { + return true; + } + } + return false; + } + + /** This determines the active state for the catalog dropdown. Type + * parameter should be passed in to specify if the catalog is the + * public or user one. + */ + function isCatalogActive(type) { + return ctrl.isActive('/' + type + '_vendors') + || ctrl.isActive('/' + type + '_products'); + } + } +})(); |