--- a/client/app/annotationclient.html	Thu Oct 09 15:59:48 2014 +0200
+++ b/client/app/annotationclient.html	Fri Oct 10 12:03:01 2014 +0200
@@ -80,12 +80,14 @@
         </div>
       </div>
     </footer>
+    <div class="row messages">
+      <div class="alert" ng-class="{'alert-success':showSuccessAlert, 'alert-danger':!showSuccessAlert}" role="alert" ng-show="showAlertDiv">{{ '{{' }} alertMessage {{ '}}' }}</div>
+    </div>
   </div>
   <script type="text/javascript" src="{{ pre_static_path }}static/js/lib.js"></script>
   <!--script type="text/javascript" src="{{ pre_static_path }}static/js/templates.js"></script-->
   <script type="text/javascript" src="{{ pre_static_path }}static/js/app.js"></script>
   <script type="text/javascript">
-      
     angular.module("mons")
         .value('context', {
             {% if logging %}logging: true,{% endif %}
@@ -93,7 +95,6 @@
                 dataUrl: "{{ pre_static_path }}static/data/categories.json"
             }
         });
-
   </script>
 </body>
 </html>

--- a/client/app/app.css	Thu Oct 09 15:59:48 2014 +0200
+++ b/client/app/app.css	Fri Oct 10 12:03:01 2014 +0200
@@ -69,47 +69,15 @@
 	padding-bottom: 20%;
 }
 
-/* autocomplete css source : https://github.com/JustGoscha/allmighty-autocomplete/blob/master/style/autocomplete.css */
 .row input{
     font-size: 1.2em;
 }
-/*.autocomplete{
-	width: 100%;
-	position: relative;
-}
-.autocomplete input{
-	width: 100%;
-	padding:0.4em;
-}
-.autocomplete ul{
-	position: absolute;
-	left: 0;
-	width: 100%;
-	border-left: 1px solid #888;
-	border-right: 1px solid #888;
-	border-bottom: 1px solid #888;
-	z-index: 1;
-	padding-left: 0px;
+
+.messages {
+	position: fixed;
+	top: 0px;
+	z-index: 7000;
 }
-.autocomplete li{
-	text-align: left;
-	list-style:none;
-	width: 100%;
-	padding:0.4em;
-	background-color: #fff;
-}
-.autocomplete li.active{
-	width: 100%;
-	background-color: #4bf;
-}
-.autocomplete .highlight {
-    background-color: #E2E2E2;
-}
-.autocomplete li.active .highlight {
-	background: #666;
-	color: #fff;
-}*/
-/* autocomplete css */
 
 /*.ng-scope{
     border: red 1px solid;

--- a/client/app/app.js	Thu Oct 09 15:59:48 2014 +0200
+++ b/client/app/app.js	Fri Oct 10 12:03:01 2014 +0200
@@ -22,7 +22,7 @@
             //console.log('dataModel',this,dataApi);
             this.data = dataApi.dataResource.get();
         })
-        .controller('homeCtrl', function($scope, $location, dataModel, context){
+        .controller('homeCtrl', function($scope, $location, dataModel, context, $interval){
             //console.log('homeCtrl 1', $scope, $location, context);
             console.log('homeCtrl 2', context);
             $scope.data = dataModel.data;
@@ -45,7 +45,23 @@
             });
             
             $scope.selectedlevel = false;
-            
+
+            $scope.currentInterval = false;
+            $scope.showSuccessAlert = false;
+            $scope.showAlertDiv = false;
+            function showAlert(m, success){
+                $scope.alertMessage = m;
+                $scope.showSuccessAlert = success;
+                $scope.showAlertDiv = true;
+                if(!$scope.$$phase) {
+                    $scope.$apply();
+                }
+                if($scope.currentInterval){
+                    $interval.cancel($scope.currentInterval);
+                    $scope.currentInterval = false;
+                }
+                $scope.currentInterval = $interval(function(){ console.log('fin interval !'); $interval.cancel($scope.currentInterval); $scope.showAlertDiv = false; }, 2000, 1);
+            }
             
             
 
@@ -79,7 +95,7 @@
                 }
                 window.location = 'http://autobahn.ws/unsupportedbrowser';
             }
-            console.log('socket in controller = ', sock);
+            
             if (sock) {
                 sock.onopen = function() {
                     if(context.logging===true){
@@ -91,7 +107,7 @@
                     if(context.logging===true){
                         log('Connection closed (wasClean = ' + e.wasClean + ', code = ' + e.code + ', reason = ' + e.reason + ')');
                     }
-                    alert('Communication interrompue : la socket vient de se fermer.');
+                    showAlert('Communication interrompue : la socket vient de se fermer.', false);
                     sock = null;
                 };
 
@@ -99,17 +115,17 @@
                     if(context.logging===true){
                         log('Got message: ' + e.data);
                     }
-                    alert('Annotation bien reçue.');
+                    showAlert('Annotation bien reçue.', true);
                 };
             }
 
             $scope.sendAnnotation = function(eventCode){
                 if($scope.username==='' || typeof $scope.username==='undefined'){
-                    alert('Vous devez indiquer un nom d\'utilisateur.');
+                    showAlert('Vous devez indiquer un nom d\'utilisateur.', false);
                     return;
                 }
                 if(eventCode==='' || typeof eventCode==='undefined'){
-                    alert('Vous devez indiquer un nom de catégorie.');
+                    showAlert('Vous devez indiquer un nom de catégorie.', false);
                     return;
                 }
                 // Send query
@@ -123,7 +139,7 @@
                         log('Sent: ' + JSON.stringify(new_annot));
                     }
                 } else {
-                    alert('La socket ne fonctionne pas.');
+                    showAlert('La socket ne fonctionne pas.', false);
                     if(context.logging===true){
                         log('Not connected.');
                     }