[IMP] point_of_sale: less confusing synchronisation indicator

bzr revid: fva@openerp.com-20140116172846-7lyz50jr69crbxsn

addons/point_of_sale/static/src/css/pos.css

@@ -373,17 +373,17 @@ td {
 .pos .oe_pos_synch-notification.oe_inactive{
     cursor: default;
 }
-.pos .oe_pos_synch-notification .oe_status_red{
+.pos .oe_pos_synch-notification .oe_status{
     display:inline-block;
     cursor:pointer;
     width:16px; height:16px;
-    background: url("../img/gtk-no.png") no-repeat ;
+    color: white;
 }
-
-.pos .oe_pos_synch-notification .oe_status_green{
-    display:inline-block;
-    width:16px; height:16px;
-    background: url("../img/gtk-yes.png") no-repeat;
+.pos .oe_pos_synch-notification .oe_red{
+    color: rgb(197, 52, 0);
+}
+.pos .oe_pos_synch-notification .oe_green{
+    color: rgb(94, 185, 55);
 }
 
 /*  ********* Contains everything below the  bar ********* */

addons/point_of_sale/static/src/js/models.js

@@ -53,11 +53,20 @@ function openerp_pos_models(instance, module){ //module is instance.point_of_sal
 
             // these dynamic attributes can be watched for change by other models or widgets
             this.set({
-                'nbr_pending_operations': 0,    
+                'synch':            { state:'connected', pending:0 }, 
                 'orders':           new module.OrderCollection(),
                 'selectedOrder':    null,
             });
 
+            this.bind('change:synch',function(pos,synch){
+                clearTimeout(self.synch_timeout);
+                self.synch_timeout = setTimeout(function(){
+                    if(synch.state !== 'disconnected' && synch.pending > 0){
+                        self.set('synch',{state:'disconnected', pending:synch.pending});
+                    }
+                },3000);
+            });
+
             this.get('orders').bind('remove', function(order,_unused_,options){ 
                 self.on_removed_order(order,options.index,options.reason); 
             });
@@ -296,7 +305,7 @@ function openerp_pos_models(instance, module){ //module is instance.point_of_sal
             var order_id = this.db.add_order(order.export_as_JSON());
             var pushed = new $.Deferred();
 
-            this.set('nbr_pending_operations',self.db.get_orders().length);
+            this.set('synch',{state:'connecting', pending:self.db.get_orders().length});
 
             this.flush_mutex.exec(function(){
                 var flushed = self._flush_all_orders();
@@ -329,7 +338,7 @@ function openerp_pos_models(instance, module){ //module is instance.point_of_sal
 
             var order_id = this.db.add_order(order.export_as_JSON());
 
-            this.set('nbr_pending_operations',self.db.get_orders().length);
+            this.set('synch',{state:'connecting', pending:self.db.get_orders().length});
 
             this.flush_mutex.exec(function(){
                 var done = new $.Deferred(); // holds the mutex
@@ -396,6 +405,8 @@ function openerp_pos_models(instance, module){ //module is instance.point_of_sal
             options = options || {};
             timeout = typeof options.timeout === 'number' ? options.timeout : 7500;
 
+            this.set('synch',{state:'connecting', pending: this.get('synch').pending});
+
             var order  = this.db.get_order(order_id);
             order.to_invoice = options.to_invoice || false;
 
@@ -417,7 +428,8 @@ function openerp_pos_models(instance, module){ //module is instance.point_of_sal
 
             rpc.done(function(){
                 self.db.remove_order(order_id);
-                self.set('nbr_pending_operations',self.db.get_orders().length);
+                var pending = self.db.get_orders().length;
+                self.set('synch',{state: pending ? 'connecting' : 'connected', pending:pending});
             });
 
             return rpc;

addons/point_of_sale/static/src/js/widgets.js

@@ -832,19 +832,32 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
         renderElement: function() {
             var self = this;
             this._super();
+            
+            var pending = this.pos.get('nbr_pending_orders');
+            this.set_status(pending ? 'disconnected' : 'connected',pending);
+
             this.$el.click(function(){
                 self.pos.flush();
             });
         },
+        set_status: function(state,pending){
+            var self = this;
+            this.$('.js_connected, .js_connecting, .js_disconnected, .js_pending').addClass('oe_hidden');
+            this.$('.js_pending').html(pending || '');
+            if(state === 'connected'){
+                this.$('.js_connected').removeClass('oe_hidden');
+            }else if(state === 'disconnected'){
+                this.$('.js_disconnected, .js_pending').removeClass('oe_hidden');
+            }else if(state === 'connecting'){
+                this.$('.js_connecting, .js_pending').removeClass('oe_hidden');
+            }
+        },
         start: function(){
             var self = this;
-            this.pos.bind('change:nbr_pending_operations', function(){
-                self.renderElement();
+            this.pos.bind('change:synch', function(pos,synch){
+                self.set_status(synch.state, synch.pending);
             });
         },
-        get_nbr_pending: function(){
-            return this.pos.get('nbr_pending_operations');
-        },
     });
 
 

addons/point_of_sale/static/src/xml/pos.xml

@@ -101,17 +101,18 @@
     </t>
 
     <t t-name="SynchNotificationWidget">
-        <t t-if="widget.get_nbr_pending() > 0">
-            <div class="oe_pos_synch-notification">
-                <t   t-esc="widget.get_nbr_pending()"/>
-                <div class="oe_status_red"></div>
+        <div class="oe_pos_synch-notification">
+            <span class='js_pending oe_hidden'>0</span>
+            <div class="js_connected oe_status oe_green">
+                <i class='fa fa-fw fa-circle'></i>
             </div>
-        </t>
-        <t t-if="widget.get_nbr_pending() === 0">
-            <div class="oe_pos_synch-notification oe_inactive">
-                <div class="oe_status_green"></div>
+            <div class="js_connecting oe_status oe_hidden">
+                <i class='fa fa-fw fa-spin fa-spinner'></i>
             </div>
-        </t>
+            <div class="js_disconnected oe_status oe_red oe_hidden">
+                <i class='fa fa-fw fa-circle'></i>
+            </div>
+        </div>
     </t>
 
     <t t-name="HeaderButtonWidget">