.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 ********* */
// 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);
});
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();
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
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;
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;
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');
- },
});
</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">