Merge "move self-developed front-end codes to ui/"

4 files changed, 172 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');
+        }
+    }
+})();