Merge "Add toast message in pods page"

3 files changed, 80 insertions, 20 deletions

diff --git a/testapi/3rd_party/static/testapi-ui/assets/css/style.css b/testapi/3rd_party/static/testapi-ui/assets/css/style.css
index fb21399..222911c 100644
--- a/testapi/3rd_party/static/testapi-ui/assets/css/style.css
+++ b/testapi/3rd_party/static/testapi-ui/assets/css/style.css
@@ -292,4 +292,53 @@ json-tree .key {
 
 json-tree .leaf-value{
   word-break: normal!important;
+}
+
+#toast {
+  visibility: hidden;
+  min-width: 250px;
+  margin-left: -125px;
+  color: #fff;
+  text-align: center;
+  border-radius: 10px;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 30px;
+}
+
+#toast.error{
+  background-color: #B03838;
+}
+
+#toast.success{
+  background-color: #1A911E;
+}
+
+#toast.show {
+  visibility: visible;
+
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
 }
\ No newline at end of file
diff --git a/testapi/opnfv_testapi/ui/components/pods/pods.html b/testapi/opnfv_testapi/ui/components/pods/pods.html
index 8e66a9c..b5dadf5 100644
--- a/testapi/opnfv_testapi/ui/components/pods/pods.html
+++ b/testapi/opnfv_testapi/ui/components/pods/pods.html
@@ -19,22 +19,18 @@
         <div class="col-sm-1 pull-right">
             <button type="button" class="btn btn-success" ng-click="ctrl.listPods()">
               <i class="fa fa-search"></i> Filter</button>
+            <div ng-class="{'show': ctrl.showError}" id="toast" class="error">
+                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true" ></span>
+                    {{ctrl.error}}</div>
+            <div ng-class="{'show': ctrl.showSuccess}" id="toast" class="success">
+                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+                    {{ctrl.success}}</div>
         </div>
         <div class="col-sm-3 pull-right">
             <span style="margin-top:6px">Search:&nbsp;&nbsp;</span>
             <input type="text" class="form-control search" ng-enter="ctrl.listPods()"  ng-Model="ctrl.filterText" placeholder="Search String">
         </div>
 </div>
-<div class="col-md-12">
-    <div ng-show="ctrl.showError" class="col-md-12 alert alert-danger" role="alert">
-        <span class="pull-right">&nbsp;{{ctrl.error}}</span>
-        <span class="glyphicon glyphicon-exclamation-sign pull-right" aria-hidden="true" >Error:</span>
-    </div>
-    <div ng-show="ctrl.showSuccess" class="col-md-12 alert alert-success" role="alert">
-        <span class="pull-right">&nbsp;{{ctrl.success}}</span>
-        <span class="glyphicon glyphicon-ok pull-right" aria-hidden="true"></span>
-    </div>
-</div>
 <div class="col-md-12" style="padding-right:0px">
     <div class="table-responsive">
         <table class="table table-bordered table-hover"  ng-data="ctrl.data.pods">
diff --git a/testapi/opnfv_testapi/ui/components/pods/podsController.js b/testapi/opnfv_testapi/ui/components/pods/podsController.js
index c50fa5a..3a94338 100644
--- a/testapi/opnfv_testapi/ui/components/pods/podsController.js
+++ b/testapi/opnfv_testapi/ui/components/pods/podsController.js
@@ -21,7 +21,7 @@
 
     PodsController.$inject = [
         '$scope', '$http', '$filter', '$state', '$window', '$uibModal', 'testapiApiUrl','raiseAlert',
-        'confirmModal', 'keepState', 'sortService'
+        'confirmModal', 'keepState', 'sortService', '$timeout'
     ];
 
     /**
@@ -30,7 +30,7 @@
      * through pods declared in TestAPI.
      */
     function PodsController($scope, $http, $filter, $state, $window, $uibModal, testapiApiUrl,
-        raiseAlert, confirmModal, keepState, sortService) {
+        raiseAlert, confirmModal, keepState, sortService, $timeout) {
         var ctrl = this;
         ctrl.url = testapiApiUrl + '/pods';
         ctrl.checkBox = []
@@ -48,6 +48,18 @@
         ctrl.batchDelete = batchDelete;
         ctrl.viewPod = viewPod
         ctrl.sortBy = sortBy
+        ctrl.toastError = toastError
+        ctrl.toastSuccess = toastSuccess
+
+        function toastError() {
+            ctrl.showError = true
+            $timeout(function(){ ctrl.showError = false;}, 3000);
+        }
+
+        function toastSuccess() {
+            ctrl.showSuccess = true
+            $timeout(function(){ ctrl.showSuccess = false;}, 3000);
+        }
 
         function sortBy(field){
             ctrl.data.pods = sortService.sortFunction(ctrl.data.pods, field , ctrl.sorting[field] )
@@ -84,17 +96,19 @@
                 };
                 ctrl.podsRequest =
                     $http.post(pods_url, body).success(function (data) {
-                        ctrl.showSuccess = true ;
                         ctrl.success = "Create Success"
+                        ctrl.toastSuccess()
                         ctrl.listPods();
+                        return true;
                     }).catch(function (data)  {
-                        ctrl.showError = true;
                         ctrl.error = data.statusText;
+                        ctrl.toastError()
+                        return false;
                     });
             }
             else{
-                ctrl.showError = true;
                 ctrl.error = 'Name is missing.'
+                ctrl.toastError()
             }
         }
 
@@ -124,8 +138,8 @@
                     }
                 }).catch(function (data) {
                     ctrl.data = null;
-                    ctrl.showError = true;
                     ctrl.error = data.statusText;
+                    ctrl.toastError()
                 });
         }
 
@@ -139,12 +153,12 @@
         function podDelete(podName){
             var pods_url = ctrl.url + "/" + podName
             $http.delete(pods_url).success(function(){
-                ctrl.showSuccess = true ;
                 ctrl.success = "Delete Success"
+                ctrl.toastSuccess()
                 ctrl.listPods();
             }).catch(function (data)  {
-                ctrl.showError = true;
                 ctrl.error = data.statusText;
+                ctrl.toastError()
             });
         }
 
@@ -247,9 +261,10 @@
          * inputs.
          */
         function confirm() {
-            $uibModalInstance.close();
             if (angular.isDefined(ctrl.data.successHandler)) {
-                ctrl.data.successHandler(ctrl.pod);
+                if(ctrl.data.successHandler(ctrl.pod)){
+                    $uibModalInstance.close();
+                }
             }
         }