better feedback after annotation sent
authorcavaliet
Fri, 10 Oct 2014 14:59:09 +0200
changeset 10 90918426079c
parent 9 ae8a74bd6add
child 11 c0f9f9ab2a8a
better feedback after annotation sent
client/app/annotationclient.html
client/app/app.css
client/app/app.js
--- a/client/app/annotationclient.html	Fri Oct 10 12:03:01 2014 +0200
+++ b/client/app/annotationclient.html	Fri Oct 10 14:59:09 2014 +0200
@@ -33,7 +33,7 @@
               </div>
           </div>
         </div>
-        <div class="mons-button hand send" ng-click="sendAnnotation(yourchoice)">
+        <div class="mons-button hand send" id="sendButton" ng-click="sendAnnotation(yourchoice)" ng-class="{'success-border':sendBtnSuccess}">
           <div class="content">
               <div class="table">
                 <div class="table-cell">
@@ -46,7 +46,8 @@
     </div>
     <div class="mons-content">
       <div ng-show="!selectedlevel">
-          <div class="mons-button hand" ng-repeat="c in data.categories" style="background-color: {{ '{{' }} c.color {{ '}}' }}" ng-click="selectLevel($index, c.event_code)">
+          <div class="mons-button hand" ng-repeat="c in data.categories" style="background-color: {{ '{{' }} c.color {{ '}}' }}" 
+                                        ng-click="selectLevel(c.event_code, c)" ng-class="{'success-border':c.sendSuccess}">
             <div class="content">
                 <div class="table">
                   <div class="table-cell">
@@ -58,7 +59,8 @@
           </div>
       </div>
       <div ng-show="selectedlevel">
-          <div class="mons-button hand" ng-repeat="c in selectedlevel" style="background-color: {{ '{{' }} c.color {{ '}}' }}" ng-click="sendAnnotation(c.event_code)">
+          <div class="mons-button hand" ng-repeat="c in selectedlevel" style="background-color: {{ '{{' }} c.color {{ '}}' }}" 
+                                        ng-click="sendAnnotation(c.event_code, c)" ng-class="{'success-border':c.sendSuccess}">
             <div class="content">
                 <div class="table">
                   <div class="table-cell">
--- a/client/app/app.css	Fri Oct 10 12:03:01 2014 +0200
+++ b/client/app/app.css	Fri Oct 10 14:59:09 2014 +0200
@@ -27,12 +27,13 @@
 }
 .mons-button{
 	background-color: #1e1e1e;
+    border: 10px solid #fff;
     float: left;
-    margin: 1.66%;
+    margin: 0.5%;
     overflow: hidden;
-    padding-bottom: 30%;
+    padding-bottom: 32%;
     position: relative;
-    width: 45%;
+    width: 47%;
 }
 .mons-button .content{
 	height: 90%;
@@ -78,6 +79,9 @@
 	top: 0px;
 	z-index: 7000;
 }
+.success-border{
+	border: 10px solid #3c763d;
+}
 
 /*.ng-scope{
     border: red 1px solid;
--- a/client/app/app.js	Fri Oct 10 12:03:01 2014 +0200
+++ b/client/app/app.js	Fri Oct 10 14:59:09 2014 +0200
@@ -60,8 +60,9 @@
                     $interval.cancel($scope.currentInterval);
                     $scope.currentInterval = false;
                 }
-                $scope.currentInterval = $interval(function(){ console.log('fin interval !'); $interval.cancel($scope.currentInterval); $scope.showAlertDiv = false; }, 2000, 1);
+                $scope.currentInterval = $interval(function(){ $interval.cancel($scope.currentInterval); $scope.showAlertDiv = false; }, 2000, 1);
             }
+            $scope.annotPile = [];
             
             
 
@@ -115,11 +116,29 @@
                     if(context.logging===true){
                         log('Got message: ' + e.data);
                     }
-                    showAlert('Annotation bien reçue.', true);
+                    //showAlert('Annotation bien reçue.', true);
+                    console.log('2 message', $scope.annotPile.length);
+                    if($scope.annotPile.length>0){
+                        var c = $scope.annotPile.shift();
+                        console.log('3 message', c);
+                        var i;
+                        if(c===false){
+                            //showAlert('Annotation envoyée.', true);
+                            $scope.sendBtnSuccess = true;
+                            i = $interval(function(){ $interval.cancel(i); $scope.sendBtnSuccess = false; }, 2000, 1);
+                        }
+                        else{
+                            c.sendSuccess = true;
+                            i = $interval(function(){ $interval.cancel(i); c.sendSuccess = false; }, 2000, 1);
+                        }
+                        if(!$scope.$$phase) {
+                            $scope.$apply();
+                        }
+                    }
                 };
             }
 
-            $scope.sendAnnotation = function(eventCode){
+            $scope.sendAnnotation = function(eventCode, c){
                 if($scope.username==='' || typeof $scope.username==='undefined'){
                     showAlert('Vous devez indiquer un nom d\'utilisateur.', false);
                     return;
@@ -138,6 +157,12 @@
                     if(context.logging===true){
                         log('Sent: ' + JSON.stringify(new_annot));
                     }
+                    if(typeof c==='undefined'){
+                        $scope.annotPile.push(false);
+                    }
+                    else{
+                        $scope.annotPile.push(c);
+                    }
                 } else {
                     showAlert('La socket ne fonctionne pas.', false);
                     if(context.logging===true){
@@ -147,19 +172,20 @@
             };
             
             // Interface management
-            $scope.selectLevel = function(i, eventCode){
-                if(i===false){
+            $scope.selectLevel = function(eventCode, c){
+                if(typeof c==='undefined'){
                     $scope.returnVisStyle = {visibility:'hidden'};
                     $scope.selectedlevel = false;
                     return;
                 }
-                if(typeof $scope.data.categories[i].subcategories!=='undefined' && $scope.data.categories[i].subcategories.length>0){
-                    $scope.selectedlevel = $scope.data.categories[i].subcategories;
+                if(typeof c.subcategories!=='undefined' && c.subcategories.length>0){
+                    $scope.selectedlevel = c.subcategories;
                     $scope.returnVisStyle = {visibility:'show'};
                 }
                 else{
                     // Send query
-                    $scope.sendAnnotation(eventCode);
+                    console.log('send ntm', c);
+                    $scope.sendAnnotation(eventCode, c);
                 }
             };