addons/point_of_sale/static/src/js/screens.js

   1
   2 // this file contains the screens definitions. Screens are the
   3 // content of the right pane of the pos, containing the main functionalities.
   4 // screens are contained in the PosWidget, in pos_widget.js
   5 // all screens are present in the dom at all time, but only one is shown at the
   6 // same time.
   7 //
   8 // transition between screens is made possible by the use of the screen_selector,
   9 // which is responsible of hiding and showing the screens, as well as maintaining
  10 // the state of the screens between different orders.
  11 //
  12 // all screens inherit from ScreenWidget. the only addition from the base widgets
  13 // are show() and hide() which shows and hides the screen but are also used to
  14 // bind and unbind actions on widgets and devices. The screen_selector guarantees
  15 // that only one screen is shown at the same time and that show() is called after all
  16 // hide()s
  17
  18 function openerp_pos_screens(instance, module){ //module is instance.point_of_sale
  19     var QWeb = instance.web.qweb,
  20     _t = instance.web._t;
  21
  22     var round_pr = instance.web.round_precision
  23
  24     module.ScreenSelector = instance.web.Class.extend({
  25         init: function(options){
  26             this.pos = options.pos;
  27
  28             this.screen_set = options.screen_set || {};
  29
  30             this.popup_set = options.popup_set || {};
  31
  32             this.default_screen = options.default_screen;
  33
  34             this.current_popup = null;
  35
  36             this.current_mode = options.default_mode || 'cashier';
  37
  38             this.current_screen = null;
  39
  40             for(screen_name in this.screen_set){
  41                 this.screen_set[screen_name].hide();
  42             }
  43
  44             for(popup_name in this.popup_set){
  45                 this.popup_set[popup_name].hide();
  46             }
  47
  48             this.pos.get('selectedOrder').set_screen_data({
  49                 'screen': this.default_screen,
  50             });
  51
  52             this.pos.bind('change:selectedOrder', this.load_saved_screen, this);
  53         },
  54         add_screen: function(screen_name, screen){
  55             screen.hide();
  56             this.screen_set[screen_name] = screen;
  57             return this;
  58         },
  59         show_popup: function(name,options){
  60             if(this.current_popup){
  61                 this.close_popup();
  62             }
  63             this.current_popup = this.popup_set[name];
  64             this.current_popup.show(options);
  65         },
  66         close_popup: function(){
  67             if(this.current_popup){
  68                 this.current_popup.close();
  69                 this.current_popup.hide();
  70                 this.current_popup = null;
  71             }
  72         },
  73         load_saved_screen:  function(){
  74             this.close_popup();
  75             var selectedOrder = this.pos.get('selectedOrder');
  76             // FIXME : this changing screen behaviour is sometimes confusing ...
  77             this.set_current_screen(selectedOrder.get_screen_data('screen') || this.default_screen,null,'refresh');
  78             //this.set_current_screen(this.default_screen,null,'refresh');
  79
  80         },
  81         set_user_mode: function(user_mode){
  82             if(user_mode !== this.current_mode){
  83                 this.close_popup();
  84                 this.current_mode = user_mode;
  85                 this.load_saved_screen();
  86             }
  87         },
  88         get_user_mode: function(){
  89             return this.current_mode;
  90         },
  91         set_current_screen: function(screen_name,params,refresh){
  92             var screen = this.screen_set[screen_name];
  93             if(!screen){
  94                 console.error("ERROR: set_current_screen("+screen_name+") : screen not found");
  95             }
  96
  97             this.close_popup();
  98
  99             var order = this.pos.get('selectedOrder');
 100             var old_screen_name = order.get_screen_data('screen');
 101
 102             order.set_screen_data('screen',screen_name);
 103
 104             if(params){
 105                 order.set_screen_data('params',params);
 106             }
 107
 108             if( screen_name !== old_screen_name ){
 109                 order.set_screen_data('previous-screen',old_screen_name);
 110             }
 111
 112             if ( refresh || screen !== this.current_screen){
 113                 if(this.current_screen){
 114                     this.current_screen.close();
 115                     this.current_screen.hide();
 116                 }
 117                 this.current_screen = screen;
 118                 this.current_screen.show();
 119             }
 120         },
 121         get_current_screen: function(){
 122             return this.pos.get('selectedOrder').get_screen_data('screen') || this.default_screen;
 123         },
 124         back: function(){
 125             var previous = this.pos.get('selectedOrder').get_screen_data('previous-screen');
 126             if(previous){
 127                 this.set_current_screen(previous);
 128             }
 129         },
 130         get_current_screen_param: function(param){
 131             var params = this.pos.get('selectedOrder').get_screen_data('params');
 132             return params ? params[param] : undefined;
 133         },
 134         set_default_screen: function(){
 135             this.set_current_screen(this.default_screen);
 136         },
 137     });
 138
 139     module.ScreenWidget = module.PosBaseWidget.extend({
 140
 141         show_numpad:     true,
 142         show_leftpane:   true,
 143
 144         init: function(parent,options){
 145             this._super(parent,options);
 146             this.hidden = false;
 147         },
 148
 149         help_button_action: function(){
 150             this.pos_widget.screen_selector.show_popup('help');
 151         },
 152
 153         barcode_product_screen:         'products',     //if defined, this screen will be loaded when a product is scanned
 154
 155         hotkeys_handlers: {},
 156
 157         // what happens when a product is scanned :
 158         // it will add the product to the order and go to barcode_product_screen.
 159         barcode_product_action: function(code){
 160             var self = this;
 161             if(self.pos.scan_product(code)){
 162                 if(self.barcode_product_screen){
 163                     self.pos_widget.screen_selector.set_current_screen(self.barcode_product_screen);
 164                 }
 165             }else{
 166                 self.pos_widget.screen_selector.show_popup('error-barcode',code.code);
 167             }
 168         },
 169
 170         // what happens when a cashier id barcode is scanned.
 171         // the default behavior is the following :
 172         // - if there's a user with a matching ean, put it as the active 'cashier', go to cashier mode, and return true
 173         // - else : do nothing and return false. You probably want to extend this to show and appropriate error popup...
 174         barcode_cashier_action: function(code){
 175             var users = this.pos.users;
 176             for(var i = 0, len = users.length; i < len; i++){
 177                 if(users[i].ean13 === code.code){
 178                     this.pos.cashier = users[i];
 179                     this.pos_widget.username.refresh();
 180                     return true;
 181                 }
 182             }
 183             this.pos_widget.screen_selector.show_popup('error-barcode',code.code);
 184             return false;
 185         },
 186
 187         // what happens when a client id barcode is scanned.
 188         // the default behavior is the following :
 189         // - if there's a user with a matching ean, put it as the active 'client' and return true
 190         // - else : return false.
 191         barcode_client_action: function(code){
 192             var partner = this.pos.db.get_partner_by_ean13(code.code);
 193             if(partner){
 194                 this.pos.get('selectedOrder').set_client(partner);
 195                 this.pos_widget.username.refresh();
 196                 return true;
 197             }
 198             this.pos_widget.screen_selector.show_popup('error-barcode',code.code);
 199             return false;
 200         },
 201
 202         // what happens when a discount barcode is scanned : the default behavior
 203         // is to set the discount on the last order.
 204         barcode_discount_action: function(code){
 205             var last_orderline = this.pos.get('selectedOrder').getLastOrderline();
 206             if(last_orderline){
 207                 last_orderline.set_discount(code.value)
 208             }
 209         },
 210         // What happens when an invalid barcode is scanned : shows an error popup.
 211         barcode_error_action: function(code){
 212             this.pos_widget.screen_selector.show_popup('error-barcode',code.code);
 213         },
 214         // shows an action bar on the screen. The actionbar is automatically shown when you add a button
 215         // with add_action_button()
 216         show_action_bar: function(){
 217             this.pos_widget.action_bar.show();
 218         },
 219
 220         // hides the action bar. The actionbar is automatically hidden when it is empty
 221         hide_action_bar: function(){
 222             this.pos_widget.action_bar.hide();
 223         },
 224
 225         // adds a new button to the action bar. The button definition takes three parameters, all optional :
 226         // - label: the text below the button
 227         // - icon:  a small icon that will be shown
 228         // - click: a callback that will be executed when the button is clicked.
 229         // the method returns a reference to the button widget, and automatically show the actionbar.
 230         add_action_button: function(button_def){
 231             this.show_action_bar();
 232             return this.pos_widget.action_bar.add_new_button(button_def);
 233         },
 234
 235         // this method shows the screen and sets up all the widget related to this screen. Extend this method
 236         // if you want to alter the behavior of the screen.
 237         show: function(){
 238             var self = this;
 239
 240             this.hidden = false;
 241             if(this.$el){
 242                 this.$el.removeClass('oe_hidden');
 243             }
 244
 245             if(this.pos_widget.action_bar.get_button_count() > 0){
 246                 this.show_action_bar();
 247             }else{
 248                 this.hide_action_bar();
 249             }
 250
 251             var self = this;
 252
 253             this.pos_widget.set_numpad_visible(this.show_numpad);
 254             this.pos_widget.set_leftpane_visible(this.show_leftpane);
 255
 256             this.pos_widget.username.set_user_mode(this.pos_widget.screen_selector.get_user_mode());
 257
 258             this.pos.barcode_reader.set_action_callback({
 259                 'cashier': self.barcode_cashier_action ? function(code){ self.barcode_cashier_action(code); } : undefined ,
 260                 'product': self.barcode_product_action ? function(code){ self.barcode_product_action(code); } : undefined ,
 261                 'client' : self.barcode_client_action ?  function(code){ self.barcode_client_action(code);  } : undefined ,
 262                 'discount': self.barcode_discount_action ? function(code){ self.barcode_discount_action(code); } : undefined,
 263                 'error'   : self.barcode_error_action ?  function(code){ self.barcode_error_action(code);   } : undefined,
 264             });
 265         },
 266
 267         // this method is called when the screen is closed to make place for a new screen. this is a good place
 268         // to put your cleanup stuff as it is guaranteed that for each show() there is one and only one close()
 269         close: function(){
 270             if(this.pos.barcode_reader){
 271                 this.pos.barcode_reader.reset_action_callbacks();
 272             }
 273             this.pos_widget.action_bar.destroy_buttons();
 274         },
 275
 276         // this methods hides the screen. It's not a good place to put your cleanup stuff as it is called on the
 277         // POS initialization.
 278         hide: function(){
 279             this.hidden = true;
 280             if(this.$el){
 281                 this.$el.addClass('oe_hidden');
 282             }
 283         },
 284
 285         // we need this because some screens re-render themselves when they are hidden
 286         // (due to some events, or magic, or both...)  we must make sure they remain hidden.
 287         // the good solution would probably be to make them not re-render themselves when they
 288         // are hidden.
 289         renderElement: function(){
 290             this._super();
 291             if(this.hidden){
 292                 if(this.$el){
 293                     this.$el.addClass('oe_hidden');
 294                 }
 295             }
 296         },
 297     });
 298
 299     module.PopUpWidget = module.PosBaseWidget.extend({
 300         show: function(){
 301             if(this.$el){
 302                 this.$el.removeClass('oe_hidden');
 303             }
 304         },
 305         /* called before hide, when a popup is closed */
 306         close: function(){
 307         },
 308         /* hides the popup. keep in mind that this is called in the initialization pass of the
 309          * pos instantiation, so you don't want to do anything fancy in here */
 310         hide: function(){
 311             if(this.$el){
 312                 this.$el.addClass('oe_hidden');
 313             }
 314         },
 315     });
 316
 317     module.ErrorPopupWidget = module.PopUpWidget.extend({
 318         template:'ErrorPopupWidget',
 319         show: function(options){
 320             options = options || {};
 321             var self = this;
 322             this._super();
 323
 324             $('body').append('<audio src="/point_of_sale/static/src/sounds/error.wav" autoplay="true"></audio>');
 325
 326             this.message = options.message || _t('Error');
 327             this.comment = options.comment || '';
 328
 329             this.renderElement();
 330
 331             this.pos.barcode_reader.save_callbacks();
 332             this.pos.barcode_reader.reset_action_callbacks();
 333
 334             this.$('.footer .button').click(function(){
 335                 self.pos_widget.screen_selector.close_popup();
 336                 if ( options.confirm ) {
 337                     options.confirm.call(self);
 338                 }
 339             });
 340         },
 341         close:function(){
 342             this._super();
 343             this.pos.barcode_reader.restore_callbacks();
 344         },
 345     });
 346
 347     module.ErrorTracebackPopupWidget = module.ErrorPopupWidget.extend({
 348         template:'ErrorTracebackPopupWidget',
 349     });
 350
 351     module.ErrorBarcodePopupWidget = module.ErrorPopupWidget.extend({
 352         template:'ErrorBarcodePopupWidget',
 353         show: function(barcode){
 354             this.barcode = barcode;
 355             this._super();
 356         },
 357     });
 358
 359     module.ConfirmPopupWidget = module.PopUpWidget.extend({
 360         template: 'ConfirmPopupWidget',
 361         show: function(options){
 362             var self = this;
 363             this._super();
 364
 365             this.message = options.message || '';
 366             this.comment = options.comment || '';
 367             this.renderElement();
 368
 369             this.$('.button.cancel').click(function(){
 370                 self.pos_widget.screen_selector.close_popup();
 371                 if( options.cancel ){
 372                     options.cancel.call(self);
 373                 }
 374             });
 375
 376             this.$('.button.confirm').click(function(){
 377                 self.pos_widget.screen_selector.close_popup();
 378                 if( options.confirm ){
 379                     options.confirm.call(self);
 380                 }
 381             });
 382         },
 383     });
 384
 385     module.ErrorNoClientPopupWidget = module.ErrorPopupWidget.extend({
 386         template: 'ErrorNoClientPopupWidget',
 387     });
 388
 389     module.ErrorInvoiceTransferPopupWidget = module.ErrorPopupWidget.extend({
 390         template: 'ErrorInvoiceTransferPopupWidget',
 391     });
 392
 393     module.UnsentOrdersPopupWidget = module.PopUpWidget.extend({
 394         template: 'UnsentOrdersPopupWidget',
 395         show: function(options){
 396             var self = this;
 397             this._super(options);
 398             this.renderElement();
 399             this.$('.button.confirm').click(function(){
 400                 self.pos_widget.screen_selector.close_popup();
 401             });
 402         },
 403     });
 404
 405     module.ScaleScreenWidget = module.ScreenWidget.extend({
 406         template:'ScaleScreenWidget',
 407
 408         next_screen: 'products',
 409         previous_screen: 'products',
 410
 411         show_leftpane:   false,
 412
 413         show: function(){
 414             this._super();
 415             var self = this;
 416             var queue = this.pos.proxy_queue;
 417
 418             this.set_weight(0);
 419             this.renderElement();
 420
 421             this.hotkey_handler = function(event){
 422                 if(event.which === 13){
 423                     self.order_product();
 424                     self.pos_widget.screen_selector.set_current_screen(self.next_screen);
 425                 }else if(event.which === 27){
 426                     self.pos_widget.screen_selector.set_current_screen(self.previous_screen);
 427                 }
 428             };
 429
 430             $('body').on('keyup',this.hotkey_handler);
 431
 432             this.$('.back').click(function(){
 433                 self.pos_widget.screen_selector.set_current_screen(self.previous_screen);
 434             });
 435
 436             this.$('.next,.buy-product').click(function(){
 437                 self.order_product();
 438                 self.pos_widget.screen_selector.set_current_screen(self.next_screen);
 439             });
 440
 441             queue.schedule(function(){
 442                 return self.pos.proxy.scale_read().then(function(weight){
 443                     self.set_weight(weight.weight);
 444                 });
 445             },{duration:50, repeat: true});
 446
 447         },
 448         get_product: function(){
 449             var ss = this.pos_widget.screen_selector;
 450             if(ss){
 451                 return ss.get_current_screen_param('product');
 452             }else{
 453                 return undefined;
 454             }
 455         },
 456         order_product: function(){
 457             this.pos.get('selectedOrder').addProduct(this.get_product(),{ quantity: this.weight });
 458         },
 459         get_product_name: function(){
 460             var product = this.get_product();
 461             return (product ? product.display_name : undefined) || 'Unnamed Product';
 462         },
 463         get_product_price: function(){
 464             var product = this.get_product();
 465             return (product ? product.price : 0) || 0;
 466         },
 467         set_weight: function(weight){
 468             this.weight = weight;
 469             this.$('.weight').text(this.get_product_weight_string());
 470             this.$('.computed-price').text(this.get_computed_price_string());
 471         },
 472         get_product_weight_string: function(){
 473             var product = this.get_product();
 474             var defaultstr = (this.weight || 0).toFixed(3) + ' Kg';
 475             if(!product || !this.pos){
 476                 return defaultstr;
 477             }
 478             var unit_id = product.uos_id || product.uom_id;
 479             if(!unit_id){
 480                 return defaultstr;
 481             }
 482             var unit = this.pos.units_by_id[unit_id[0]];
 483             var weight = round_pr(this.weight || 0, unit.rounding);
 484             var weightstr = weight.toFixed(Math.ceil(Math.log(1.0/unit.rounding) / Math.log(10) ));
 485                 weightstr += ' Kg';
 486             return weightstr;
 487         },
 488         get_computed_price_string: function(){
 489             return this.format_currency(this.get_product_price() * this.weight);
 490         },
 491         close: function(){
 492             var self = this;
 493             this._super();
 494             $('body').off('keyup',this.hotkey_handler);
 495
 496             this.pos.proxy_queue.clear();
 497         },
 498     });
 499
 500     module.ProductScreenWidget = module.ScreenWidget.extend({
 501         template:'ProductScreenWidget',
 502
 503         show_numpad:     true,
 504         show_leftpane:   true,
 505
 506         start: function(){ //FIXME this should work as renderElement... but then the categories aren't properly set. explore why
 507             var self = this;
 508
 509             this.product_list_widget = new module.ProductListWidget(this,{
 510                 click_product_action: function(product){
 511                     if(product.to_weight && self.pos.config.iface_electronic_scale){
 512                         self.pos_widget.screen_selector.set_current_screen('scale',{product: product});
 513                     }else{
 514                         self.pos.get('selectedOrder').addProduct(product);
 515                     }
 516                 },
 517                 product_list: this.pos.db.get_product_by_category(0)
 518             });
 519             this.product_list_widget.replace(this.$('.placeholder-ProductListWidget'));
 520
 521             this.product_categories_widget = new module.ProductCategoriesWidget(this,{
 522                 product_list_widget: this.product_list_widget,
 523             });
 524             this.product_categories_widget.replace(this.$('.placeholder-ProductCategoriesWidget'));
 525         },
 526
 527         show: function(){
 528             this._super();
 529             var self = this;
 530
 531             this.product_categories_widget.reset_category();
 532
 533             this.pos_widget.order_widget.set_editable(true);
 534         },
 535
 536         close: function(){
 537             this._super();
 538
 539             this.pos_widget.order_widget.set_editable(false);
 540
 541             if(this.pos.config.iface_vkeyboard && this.pos_widget.onscreen_keyboard){
 542                 this.pos_widget.onscreen_keyboard.hide();
 543             }
 544         },
 545     });
 546
 547     module.ClientListScreenWidget = module.ScreenWidget.extend({
 548         template: 'ClientListScreenWidget',
 549
 550         init: function(parent, options){
 551             this._super(parent, options);
 552         },
 553
 554         show_leftpane: false,
 555
 556         auto_back: true,
 557
 558         show: function(){
 559             var self = this;
 560             this._super();
 561
 562             this.renderElement();
 563             this.details_visible = false;
 564             this.old_client = this.pos.get('selectedOrder').get('client');
 565             this.new_client = this.old_client;
 566
 567             this.$('.back').click(function(){
 568                 self.pos_widget.screen_selector.back();
 569             });
 570
 571             this.$('.next').click(function(){
 572                 self.save_changes();
 573                 self.pos_widget.screen_selector.back();
 574             });
 575
 576             var partners = this.pos.db.get_partners_sorted(1000);
 577             this.render_list(partners);
 578
 579             this.pos.load_new_partners().then(function(){
 580                 // will only get called if new partners were reloaded.
 581                 self.render_list(self.pos.db.get_partners_sorted(1000));
 582             });
 583
 584             if( this.old_client ){
 585                 this.display_client_details('show',this.old_client,0);
 586             }
 587
 588             this.$('.client-list-contents').delegate('.client-line','click',function(event){
 589                 self.line_select(event,$(this),parseInt($(this).data('id')));
 590             });
 591
 592             var search_timeout = null;
 593
 594             if(this.pos.config.iface_vkeyboard && this.pos_widget.onscreen_keyboard){
 595                 this.pos_widget.onscreen_keyboard.connect(this.$('.searchbox input'));
 596             }
 597
 598             this.$('.searchbox input').on('keyup',function(event){
 599                 clearTimeout(search_timeout);
 600
 601                 var query = this.value;
 602
 603                 search_timeout = setTimeout(function(){
 604                     self.perform_search(query,event.which === 13);
 605                 },70);
 606             });
 607
 608             this.$('.searchbox .search-clear').click(function(){
 609                 self.clear_search();
 610             });
 611         },
 612         perform_search: function(query, associate_result){
 613             if(query){
 614                 var customers = this.pos.db.search_partner(query);
 615                 this.display_client_details('hide');
 616                 if ( associate_result && customers.length === 1){
 617                     this.new_client = customers[0];
 618                     this.save_changes();
 619                     this.pos_widget.screen_selector.back();
 620                 }
 621                 this.render_list(customers);
 622             }else{
 623                 var customers = this.pos.db.get_partners_sorted();
 624                 this.render_list(customers);
 625             }
 626         },
 627         clear_search: function(){
 628             var customers = this.pos.db.get_partners_sorted(1000);
 629             this.render_list(customers);
 630             this.$('.searchbox input')[0].value = '';
 631             this.$('.searchbox input').focus();
 632         },
 633         render_list: function(partners){
 634             var contents = this.$el[0].querySelector('.client-list-contents');
 635             contents.innerHTML = "";
 636             for(var i = 0, len = Math.min(partners.length,1000); i < len; i++){
 637                 var partner    = partners[i];
 638                 var clientline_html = QWeb.render('ClientLine',{widget: this, partner:partners[i]});
 639                 var clientline = document.createElement('tbody');
 640                 clientline.innerHTML = clientline_html;
 641                 clientline = clientline.childNodes[1];
 642
 643                 if( partners === this.new_client ){
 644                     clientline.classList.add('highlight');
 645                 }else{
 646                     clientline.classList.remove('highlight');
 647                 }
 648
 649                 contents.appendChild(clientline);
 650             }
 651         },
 652         save_changes: function(){
 653             if( this.has_client_changed() ){
 654                 this.pos.get('selectedOrder').set_client(this.new_client);
 655             }
 656         },
 657         has_client_changed: function(){
 658             if( this.old_client && this.new_client ){
 659                 return this.old_client.id !== this.new_client.id;
 660             }else{
 661                 return !!this.old_client !== !!this.new_client;
 662             }
 663         },
 664         toggle_save_button: function(){
 665             var $button = this.$('.button.next');
 666             if( this.new_client ){
 667                 if( !this.old_client){
 668                     $button.text(_t('Set Customer'));
 669                 }else{
 670                     $button.text(_t('Change Customer'));
 671                 }
 672             }else{
 673                 $button.text(_t('Deselect Customer'));
 674             }
 675             $button.toggleClass('oe_hidden',!this.has_client_changed());
 676         },
 677         line_select: function(event,$line,id){
 678             var partner = this.pos.db.get_partner_by_id(id);
 679             this.$('.client-list .lowlight').removeClass('lowlight');
 680             if ( $line.hasClass('highlight') ){
 681                 $line.removeClass('highlight');
 682                 $line.addClass('lowlight');
 683                 this.display_client_details('hide',partner);
 684                 this.new_client = null;
 685                 this.toggle_save_button();
 686             }else{
 687                 this.$('.client-list .highlight').removeClass('highlight');
 688                 $line.addClass('highlight');
 689                 var y = event.pageY - $line.parent().offset().top
 690                 this.display_client_details('show',partner,y);
 691                 this.new_client = partner;
 692                 this.toggle_save_button();
 693             }
 694         },
 695         partner_icon_url: function(id){
 696             return '/web/binary/image?model=res.partner&id='+id+'&field=image_small';
 697         },
 698         display_client_details: function(visibility,partner,clickpos){
 699             if(visibility === 'show'){
 700                 var contents = this.$('.client-details-contents');
 701                 var parent   = this.$('.client-list').parent();
 702                 var old_scroll   = parent.scrollTop();
 703                 var old_height   = contents.height();
 704                 contents.empty();
 705                 contents.append($(QWeb.render('ClientDetailsEdit',{widget:this,partner:partner})));
 706                 var new_height   = contents.height();
 707
 708                 if(!this.details_visible){
 709                     if(clickpos < old_scroll + new_height + 20 ){
 710                         parent.scrollTop( clickpos - 20 );
 711                     }else{
 712                         parent.scrollTop(parent.scrollTop() + new_height);
 713                     }
 714                 }else{
 715                     parent.scrollTop(parent.scrollTop() - old_height + new_height);
 716                 }
 717
 718                 this.details_visible = true;
 719             }else if(visibility === 'hide'){
 720                 var contents = this.$('.client-details-contents');
 721                 var parent   = this.$('.client-list').parent();
 722                 var scroll   = parent.scrollTop();
 723                 var height   = contents.height();
 724                 contents.empty();
 725                 if( height > scroll ){
 726                     contents.css({height:height+'px'});
 727                     contents.animate({height:0},400,function(){
 728                         contents.css({height:''});
 729                     });
 730                     //parent.scrollTop(0);
 731                 }else{
 732                     parent.scrollTop( parent.scrollTop() - height);
 733                 }
 734                 this.details_visible = false;
 735             }
 736         },
 737         close: function(){
 738             this._super();
 739         },
 740     });
 741
 742     module.ReceiptScreenWidget = module.ScreenWidget.extend({
 743         template: 'ReceiptScreenWidget',
 744
 745         show_numpad:     true,
 746         show_leftpane:   true,
 747
 748         show: function(){
 749             this._super();
 750             var self = this;
 751
 752             var print_button = this.add_action_button({
 753                     label: _t('Print'),
 754                     icon: '/point_of_sale/static/src/img/icons/png48/printer.png',
 755                     click: function(){ self.print(); },
 756                 });
 757
 758             var finish_button = this.add_action_button({
 759                     label: _t('Next Order'),
 760                     icon: '/point_of_sale/static/src/img/icons/png48/go-next.png',
 761                     click: function() { self.finishOrder(); },
 762                 });
 763
 764             this.refresh();
 765             this.print();
 766
 767             //
 768             // The problem is that in chrome the print() is asynchronous and doesn't
 769             // execute until all rpc are finished. So it conflicts with the rpc used
 770             // to send the orders to the backend, and the user is able to go to the next
 771             // screen before the printing dialog is opened. The problem is that what's
 772             // printed is whatever is in the page when the dialog is opened and not when it's called,
 773             // and so you end up printing the product list instead of the receipt...
 774             //
 775             // Fixing this would need a re-architecturing
 776             // of the code to postpone sending of orders after printing.
 777             //
 778             // But since the print dialog also blocks the other asynchronous calls, the
 779             // button enabling in the setTimeout() is blocked until the printing dialog is
 780             // closed. But the timeout has to be big enough or else it doesn't work
 781             // 2 seconds is the same as the default timeout for sending orders and so the dialog
 782             // should have appeared before the timeout... so yeah that's not ultra reliable.
 783
 784             finish_button.set_disabled(true);
 785             setTimeout(function(){
 786                 finish_button.set_disabled(false);
 787             }, 2000);
 788         },
 789         print: function() {
 790             window.print();
 791         },
 792         finishOrder: function() {
 793             this.pos.get('selectedOrder').destroy();
 794         },
 795         refresh: function() {
 796             var order = this.pos.get('selectedOrder');
 797             $('.pos-receipt-container', this.$el).html(QWeb.render('PosTicket',{
 798                     widget:this,
 799                     order: order,
 800                     orderlines: order.get('orderLines').models,
 801                     paymentlines: order.get('paymentLines').models,
 802                 }));
 803         },
 804         close: function(){
 805             this._super();
 806         }
 807     });
 808
 809
 810     module.PaymentScreenWidget = module.ScreenWidget.extend({
 811         template: 'PaymentScreenWidget',
 812         back_screen: 'products',
 813         next_screen: 'receipt',
 814         init: function(parent, options) {
 815             var self = this;
 816             this._super(parent,options);
 817
 818             this.pos.bind('change:selectedOrder',function(){
 819                     this.bind_events();
 820                     this.renderElement();
 821                 },this);
 822
 823             this.bind_events();
 824
 825             this.line_delete_handler = function(event){
 826                 var node = this;
 827                 while(node && !node.classList.contains('paymentline')){
 828                     node = node.parentNode;
 829                 }
 830                 if(node){
 831                     self.pos.get('selectedOrder').removePaymentline(node.line)
 832                 }
 833                 event.stopPropagation();
 834             };
 835
 836             this.line_change_handler = function(event){
 837                 var node = this;
 838                 while(node && !node.classList.contains('paymentline')){
 839                     node = node.parentNode;
 840                 }
 841                 if(node){
 842                     node.line.set_amount(this.value);
 843                 }
 844             };
 845
 846             this.line_click_handler = function(event){
 847                 var node = this;
 848                 while(node && !node.classList.contains('paymentline')){
 849                     node = node.parentNode;
 850                 }
 851                 if(node){
 852                     self.pos.get('selectedOrder').selectPaymentline(node.line);
 853                 }
 854             };
 855
 856             this.hotkey_handler = function(event){
 857                 if(event.which === 13){
 858                     self.validate_order();
 859                 }else if(event.which === 27){
 860                     self.back();
 861                 }
 862             };
 863
 864         },
 865         show: function(){
 866             this._super();
 867             var self = this;
 868
 869             this.enable_numpad();
 870             this.focus_selected_line();
 871
 872             document.body.addEventListener('keyup', this.hotkey_handler);
 873
 874             this.add_action_button({
 875                     label: _t('Back'),
 876                     icon: '/point_of_sale/static/src/img/icons/png48/go-previous.png',
 877                     click: function(){
 878                         self.back();
 879                     },
 880                 });
 881
 882             this.add_action_button({
 883                     label: _t('Validate'),
 884                     name: 'validation',
 885                     icon: '/point_of_sale/static/src/img/icons/png48/validate.png',
 886                     click: function(){
 887                         self.validate_order();
 888                     },
 889                 });
 890
 891             if( this.pos.config.iface_invoicing ){
 892                 this.add_action_button({
 893                         label: 'Invoice',
 894                         name: 'invoice',
 895                         icon: '/point_of_sale/static/src/img/icons/png48/invoice.png',
 896                         click: function(){
 897                             self.validate_order({invoice: true});
 898                         },
 899                     });
 900             }
 901
 902             if( this.pos.config.iface_cashdrawer ){
 903                 this.add_action_button({
 904                         label: _t('Cash'),
 905                         name: 'cashbox',
 906                         icon: '/point_of_sale/static/src/img/open-cashbox.png',
 907                         click: function(){
 908                             self.pos.proxy.open_cashbox();
 909                         },
 910                     });
 911             }
 912
 913             this.update_payment_summary();
 914
 915         },
 916         close: function(){
 917             this._super();
 918             this.disable_numpad();
 919             document.body.removeEventListener('keyup',this.hotkey_handler);
 920         },
 921         remove_empty_lines: function(){
 922             var order = this.pos.get('selectedOrder');
 923             var lines = order.get('paymentLines').models.slice(0);
 924             for(var i = 0; i < lines.length; i++){
 925                 var line = lines[i];
 926                 if(line.get_amount() === 0){
 927                     order.removePaymentline(line);
 928                 }
 929             }
 930         },
 931         back: function() {
 932             this.remove_empty_lines();
 933             this.pos_widget.screen_selector.set_current_screen(this.back_screen);
 934         },
 935         bind_events: function() {
 936             if(this.old_order){
 937                 this.old_order.unbind(null,null,this);
 938             }
 939             var order = this.pos.get('selectedOrder');
 940                 order.bind('change:selected_paymentline',this.focus_selected_line,this);
 941
 942             this.old_order = order;
 943
 944             if(this.old_paymentlines){
 945                 this.old_paymentlines.unbind(null,null,this);
 946             }
 947             var paymentlines = order.get('paymentLines');
 948                 paymentlines.bind('add', this.add_paymentline, this);
 949                 paymentlines.bind('change:selected', this.rerender_paymentline, this);
 950                 paymentlines.bind('change:amount', function(line){
 951                         if(!line.selected && line.node){
 952                             line.node.value = line.amount.toFixed(2);
 953                         }
 954                         this.update_payment_summary();
 955                     },this);
 956                 paymentlines.bind('remove', this.remove_paymentline, this);
 957                 paymentlines.bind('all', this.update_payment_summary, this);
 958
 959             this.old_paymentlines = paymentlines;
 960
 961             if(this.old_orderlines){
 962                 this.old_orderlines.unbind(null,null,this);
 963             }
 964             var orderlines = order.get('orderLines');
 965                 orderlines.bind('all', this.update_payment_summary, this);
 966
 967             this.old_orderlines = orderlines;
 968         },
 969         focus_selected_line: function(){
 970             var line = this.pos.get('selectedOrder').selected_paymentline;
 971             if(line){
 972                 var input = line.node.querySelector('input');
 973                 if(!input){
 974                     return;
 975                 }
 976                 var value = input.value;
 977                 input.focus();
 978
 979                 if(this.numpad_state){
 980                     this.numpad_state.reset();
 981                 }
 982
 983                 if(Number(value) === 0){
 984                     input.value = '';
 985                 }else{
 986                     input.value = value;
 987                     input.select();
 988                 }
 989             }
 990         },
 991         add_paymentline: function(line) {
 992             var list_container = this.el.querySelector('.payment-lines');
 993                 list_container.appendChild(this.render_paymentline(line));
 994
 995             if(this.numpad_state){
 996                 this.numpad_state.reset();
 997             }
 998         },
 999         render_paymentline: function(line){
1000             var el_html  = openerp.qweb.render('Paymentline',{widget: this, line: line});
1001                 el_html  = _.str.trim(el_html);
1002
1003             var el_node  = document.createElement('tbody');
1004                 el_node.innerHTML = el_html;
1005                 el_node = el_node.childNodes[0];
1006                 el_node.line = line;
1007                 el_node.querySelector('.paymentline-delete')
1008                     .addEventListener('click', this.line_delete_handler);
1009                 el_node.addEventListener('click', this.line_click_handler);
1010                 el_node.querySelector('input')
1011                     .addEventListener('keyup', this.line_change_handler);
1012
1013             line.node = el_node;
1014
1015             return el_node;
1016         },
1017         rerender_paymentline: function(line){
1018             var old_node = line.node;
1019             var new_node = this.render_paymentline(line);
1020
1021             old_node.parentNode.replaceChild(new_node,old_node);
1022         },
1023         remove_paymentline: function(line){
1024             line.node.parentNode.removeChild(line.node);
1025             line.node = undefined;
1026         },
1027         renderElement: function(){
1028             this._super();
1029
1030             var paymentlines   = this.pos.get('selectedOrder').get('paymentLines').models;
1031             var list_container = this.el.querySelector('.payment-lines');
1032
1033             for(var i = 0; i < paymentlines.length; i++){
1034                 list_container.appendChild(this.render_paymentline(paymentlines[i]));
1035             }
1036
1037             this.update_payment_summary();
1038         },
1039         update_payment_summary: function() {
1040             var currentOrder = this.pos.get('selectedOrder');
1041             var paidTotal = currentOrder.getPaidTotal();
1042             var dueTotal = currentOrder.getTotalTaxIncluded();
1043             var remaining = dueTotal > paidTotal ? dueTotal - paidTotal : 0;
1044             var change = paidTotal > dueTotal ? paidTotal - dueTotal : 0;
1045
1046             this.$('.payment-due-total').html(this.format_currency(dueTotal));
1047             this.$('.payment-paid-total').html(this.format_currency(paidTotal));
1048             this.$('.payment-remaining').html(this.format_currency(remaining));
1049             this.$('.payment-change').html(this.format_currency(change));
1050             if(currentOrder.selected_orderline === undefined){
1051                 remaining = 1;  // What is this ?
1052             }
1053
1054             if(this.pos_widget.action_bar){
1055                 this.pos_widget.action_bar.set_button_disabled('validation', !this.is_paid());
1056                 this.pos_widget.action_bar.set_button_disabled('invoice', !this.is_paid());
1057             }
1058         },
1059         is_paid: function(){
1060             var currentOrder = this.pos.get('selectedOrder');
1061             return (currentOrder.getTotalTaxIncluded() < 0.000001
1062                    || currentOrder.getPaidTotal() + 0.000001 >= currentOrder.getTotalTaxIncluded());
1063
1064         },
1065         validate_order: function(options) {
1066             var self = this;
1067             options = options || {};
1068
1069             var currentOrder = this.pos.get('selectedOrder');
1070
1071             if(!this.is_paid()){
1072                 return;
1073             }
1074
1075             // The exact amount must be paid if there is no cash payment method defined.
1076             if (Math.abs(currentOrder.getTotalTaxIncluded() - currentOrder.getPaidTotal()) > 0.00001) {
1077                 var cash = false;
1078                 for (var i = 0; i < this.pos.cashregisters.length; i++) {
1079                     cash = cash || (this.pos.cashregisters[i].journal.type === 'cash');
1080                 }
1081                 if (!cash) {
1082                     this.pos_widget.screen_selector.show_popup('error',{
1083                         message: _t('Cannot return change without a cash payment method'),
1084                         comment: _t('There is no cash payment method available in this point of sale to handle the change.\n\n Please pay the exact amount or add a cash payment method in the point of sale configuration'),
1085                     });
1086                     return;
1087                 }
1088             }
1089
1090             if(    this.pos.config.iface_cashdrawer
1091                 && this.pos.get('selectedOrder').get('paymentLines').find( function(pl){
1092                            return pl.cashregister.journal.type === 'cash';
1093                    })){
1094                     this.pos.proxy.open_cashbox();
1095             }
1096
1097             if(options.invoice){
1098                 // deactivate the validation button while we try to send the order
1099                 this.pos_widget.action_bar.set_button_disabled('validation',true);
1100                 this.pos_widget.action_bar.set_button_disabled('invoice',true);
1101
1102                 var invoiced = this.pos.push_and_invoice_order(currentOrder);
1103
1104                 invoiced.fail(function(error){
1105                     if(error === 'error-no-client'){
1106                         self.pos_widget.screen_selector.show_popup('error',{
1107                             message: _t('An anonymous order cannot be invoiced'),
1108                             comment: _t('Please select a client for this order. This can be done by clicking the order tab'),
1109                         });
1110                     }else{
1111                         self.pos_widget.screen_selector.show_popup('error',{
1112                             message: _t('The order could not be sent'),
1113                             comment: _t('Check your internet connection and try again.'),
1114                         });
1115                     }
1116                     self.pos_widget.action_bar.set_button_disabled('validation',false);
1117                     self.pos_widget.action_bar.set_button_disabled('invoice',false);
1118                 });
1119
1120                 invoiced.done(function(){
1121                     self.pos_widget.action_bar.set_button_disabled('validation',false);
1122                     self.pos_widget.action_bar.set_button_disabled('invoice',false);
1123                     self.pos.get('selectedOrder').destroy();
1124                 });
1125
1126             }else{
1127                 this.pos.push_order(currentOrder)
1128                 if(this.pos.config.iface_print_via_proxy){
1129                     var receipt = currentOrder.export_for_printing();
1130                     this.pos.proxy.print_receipt(QWeb.render('XmlReceipt',{
1131                         receipt: receipt, widget: self,
1132                     }));
1133                     this.pos.get('selectedOrder').destroy();    //finish order and go back to scan screen
1134                 }else{
1135                     this.pos_widget.screen_selector.set_current_screen(this.next_screen);
1136                 }
1137             }
1138
1139             // hide onscreen (iOS) keyboard
1140             setTimeout(function(){
1141                 document.activeElement.blur();
1142                 $("input").blur();
1143             },250);
1144         },
1145         enable_numpad: function(){
1146             this.disable_numpad();  //ensure we don't register the callbacks twice
1147             this.numpad_state = this.pos_widget.numpad.state;
1148             if(this.numpad_state){
1149                 this.numpad_state.reset();
1150                 this.numpad_state.changeMode('payment');
1151                 this.numpad_state.bind('set_value',   this.set_value, this);
1152                 this.numpad_state.bind('change:mode', this.set_mode_back_to_payment, this);
1153             }
1154
1155         },
1156         disable_numpad: function(){
1157             if(this.numpad_state){
1158                 this.numpad_state.unbind('set_value',  this.set_value);
1159                 this.numpad_state.unbind('change:mode',this.set_mode_back_to_payment);
1160             }
1161         },
1162         set_mode_back_to_payment: function() {
1163                 this.numpad_state.set({mode: 'payment'});
1164         },
1165         set_value: function(val) {
1166             var selected_line =this.pos.get('selectedOrder').selected_paymentline;
1167             if(selected_line){
1168                 selected_line.set_amount(val);
1169                 selected_line.node.querySelector('input').value = selected_line.amount.toFixed(2);
1170             }
1171         },
1172     });
1173 }