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
 215         // this method shows the screen and sets up all the widget related to this screen. Extend this method
 216         // if you want to alter the behavior of the screen.
 217         show: function(){
 218             var self = this;
 219
 220             this.hidden = false;
 221             if(this.$el){
 222                 this.$el.removeClass('oe_hidden');
 223             }
 224
 225             var self = this;
 226
 227             this.pos_widget.set_numpad_visible(this.show_numpad);
 228             this.pos_widget.set_leftpane_visible(this.show_leftpane);
 229
 230             this.pos_widget.username.set_user_mode(this.pos_widget.screen_selector.get_user_mode());
 231
 232             this.pos.barcode_reader.set_action_callback({
 233                 'cashier': self.barcode_cashier_action ? function(code){ self.barcode_cashier_action(code); } : undefined ,
 234                 'product': self.barcode_product_action ? function(code){ self.barcode_product_action(code); } : undefined ,
 235                 'client' : self.barcode_client_action ?  function(code){ self.barcode_client_action(code);  } : undefined ,
 236                 'discount': self.barcode_discount_action ? function(code){ self.barcode_discount_action(code); } : undefined,
 237                 'error'   : self.barcode_error_action ?  function(code){ self.barcode_error_action(code);   } : undefined,
 238             });
 239         },
 240
 241         // this method is called when the screen is closed to make place for a new screen. this is a good place
 242         // to put your cleanup stuff as it is guaranteed that for each show() there is one and only one close()
 243         close: function(){
 244             if(this.pos.barcode_reader){
 245                 this.pos.barcode_reader.reset_action_callbacks();
 246             }
 247         },
 248
 249         // this methods hides the screen. It's not a good place to put your cleanup stuff as it is called on the
 250         // POS initialization.
 251         hide: function(){
 252             this.hidden = true;
 253             if(this.$el){
 254                 this.$el.addClass('oe_hidden');
 255             }
 256         },
 257
 258         // we need this because some screens re-render themselves when they are hidden
 259         // (due to some events, or magic, or both...)  we must make sure they remain hidden.
 260         // the good solution would probably be to make them not re-render themselves when they
 261         // are hidden.
 262         renderElement: function(){
 263             this._super();
 264             if(this.hidden){
 265                 if(this.$el){
 266                     this.$el.addClass('oe_hidden');
 267                 }
 268             }
 269         },
 270     });
 271
 272     module.PopUpWidget = module.PosBaseWidget.extend({
 273         show: function(){
 274             if(this.$el){
 275                 this.$el.removeClass('oe_hidden');
 276             }
 277         },
 278         /* called before hide, when a popup is closed */
 279         close: function(){
 280         },
 281         /* hides the popup. keep in mind that this is called in the initialization pass of the
 282          * pos instantiation, so you don't want to do anything fancy in here */
 283         hide: function(){
 284             if(this.$el){
 285                 this.$el.addClass('oe_hidden');
 286             }
 287         },
 288     });
 289
 290     module.FullscreenPopup = module.PopUpWidget.extend({
 291         template:'FullscreenPopupWidget',
 292         show: function(){
 293             var self = this;
 294             this._super();
 295             this.renderElement();
 296             this.$('.button.fullscreen').off('click').click(function(){
 297                 window.document.body.webkitRequestFullscreen();
 298                 self.pos_widget.screen_selector.close_popup();
 299             });
 300             this.$('.button.cancel').off('click').click(function(){
 301                 self.pos_widget.screen_selector.close_popup();
 302             });
 303         },
 304         ismobile: function(){
 305             return typeof window.orientation !== 'undefined';
 306         }
 307     });
 308
 309
 310     module.ErrorPopupWidget = module.PopUpWidget.extend({
 311         template:'ErrorPopupWidget',
 312         show: function(options){
 313             options = options || {};
 314             var self = this;
 315             this._super();
 316
 317             $('body').append('<audio src="/point_of_sale/static/src/sounds/error.wav" autoplay="true"></audio>');
 318
 319             this.message = options.message || _t('Error');
 320             this.comment = options.comment || '';
 321
 322             this.renderElement();
 323
 324             this.pos.barcode_reader.save_callbacks();
 325             this.pos.barcode_reader.reset_action_callbacks();
 326
 327             this.$('.footer .button').click(function(){
 328                 self.pos_widget.screen_selector.close_popup();
 329                 if ( options.confirm ) {
 330                     options.confirm.call(self);
 331                 }
 332             });
 333         },
 334         close:function(){
 335             this._super();
 336             this.pos.barcode_reader.restore_callbacks();
 337         },
 338     });
 339
 340     module.ErrorTracebackPopupWidget = module.ErrorPopupWidget.extend({
 341         template:'ErrorTracebackPopupWidget',
 342     });
 343
 344     module.ErrorBarcodePopupWidget = module.ErrorPopupWidget.extend({
 345         template:'ErrorBarcodePopupWidget',
 346         show: function(barcode){
 347             this.barcode = barcode;
 348             this._super();
 349         },
 350     });
 351
 352     module.ConfirmPopupWidget = module.PopUpWidget.extend({
 353         template: 'ConfirmPopupWidget',
 354         show: function(options){
 355             var self = this;
 356             this._super();
 357
 358             this.message = options.message || '';
 359             this.comment = options.comment || '';
 360             this.renderElement();
 361
 362             this.$('.button.cancel').click(function(){
 363                 self.pos_widget.screen_selector.close_popup();
 364                 if( options.cancel ){
 365                     options.cancel.call(self);
 366                 }
 367             });
 368
 369             this.$('.button.confirm').click(function(){
 370                 self.pos_widget.screen_selector.close_popup();
 371                 if( options.confirm ){
 372                     options.confirm.call(self);
 373                 }
 374             });
 375         },
 376     });
 377
 378     module.ErrorInvoiceTransferPopupWidget = module.ErrorPopupWidget.extend({
 379         template: 'ErrorInvoiceTransferPopupWidget',
 380     });
 381
 382     module.UnsentOrdersPopupWidget = module.PopUpWidget.extend({
 383         template: 'UnsentOrdersPopupWidget',
 384         show: function(options){
 385             var self = this;
 386             this._super(options);
 387             this.renderElement();
 388             this.$('.button.confirm').click(function(){
 389                 self.pos_widget.screen_selector.close_popup();
 390             });
 391         },
 392     });
 393
 394     module.ScaleScreenWidget = module.ScreenWidget.extend({
 395         template:'ScaleScreenWidget',
 396
 397         next_screen: 'products',
 398         previous_screen: 'products',
 399
 400         show_leftpane:   false,
 401
 402         show: function(){
 403             this._super();
 404             var self = this;
 405             var queue = this.pos.proxy_queue;
 406
 407             this.set_weight(0);
 408             this.renderElement();
 409
 410             this.hotkey_handler = function(event){
 411                 if(event.which === 13){
 412                     self.order_product();
 413                     self.pos_widget.screen_selector.set_current_screen(self.next_screen);
 414                 }else if(event.which === 27){
 415                     self.pos_widget.screen_selector.set_current_screen(self.previous_screen);
 416                 }
 417             };
 418
 419             $('body').on('keyup',this.hotkey_handler);
 420
 421             this.$('.back').click(function(){
 422                 self.pos_widget.screen_selector.set_current_screen(self.previous_screen);
 423             });
 424
 425             this.$('.next,.buy-product').click(function(){
 426                 self.order_product();
 427                 self.pos_widget.screen_selector.set_current_screen(self.next_screen);
 428             });
 429
 430             queue.schedule(function(){
 431                 return self.pos.proxy.scale_read().then(function(weight){
 432                     self.set_weight(weight.weight);
 433                 });
 434             },{duration:50, repeat: true});
 435
 436         },
 437         get_product: function(){
 438             var ss = this.pos_widget.screen_selector;
 439             if(ss){
 440                 return ss.get_current_screen_param('product');
 441             }else{
 442                 return undefined;
 443             }
 444         },
 445         order_product: function(){
 446             this.pos.get('selectedOrder').addProduct(this.get_product(),{ quantity: this.weight });
 447         },
 448         get_product_name: function(){
 449             var product = this.get_product();
 450             return (product ? product.display_name : undefined) || 'Unnamed Product';
 451         },
 452         get_product_price: function(){
 453             var product = this.get_product();
 454             return (product ? product.price : 0) || 0;
 455         },
 456         set_weight: function(weight){
 457             this.weight = weight;
 458             this.$('.weight').text(this.get_product_weight_string());
 459             this.$('.computed-price').text(this.get_computed_price_string());
 460         },
 461         get_product_weight_string: function(){
 462             var product = this.get_product();
 463             var defaultstr = (this.weight || 0).toFixed(3) + ' Kg';
 464             if(!product || !this.pos){
 465                 return defaultstr;
 466             }
 467             var unit_id = product.uos_id || product.uom_id;
 468             if(!unit_id){
 469                 return defaultstr;
 470             }
 471             var unit = this.pos.units_by_id[unit_id[0]];
 472             var weight = round_pr(this.weight || 0, unit.rounding);
 473             var weightstr = weight.toFixed(Math.ceil(Math.log(1.0/unit.rounding) / Math.log(10) ));
 474                 weightstr += ' Kg';
 475             return weightstr;
 476         },
 477         get_computed_price_string: function(){
 478             return this.format_currency(this.get_product_price() * this.weight);
 479         },
 480         close: function(){
 481             var self = this;
 482             this._super();
 483             $('body').off('keyup',this.hotkey_handler);
 484
 485             this.pos.proxy_queue.clear();
 486         },
 487     });
 488
 489     module.ProductScreenWidget = module.ScreenWidget.extend({
 490         template:'ProductScreenWidget',
 491
 492         show_numpad:     true,
 493         show_leftpane:   true,
 494
 495         start: function(){ //FIXME this should work as renderElement... but then the categories aren't properly set. explore why
 496             var self = this;
 497
 498             this.product_list_widget = new module.ProductListWidget(this,{
 499                 click_product_action: function(product){
 500                     if(product.to_weight && self.pos.config.iface_electronic_scale){
 501                         self.pos_widget.screen_selector.set_current_screen('scale',{product: product});
 502                     }else{
 503                         self.pos.get('selectedOrder').addProduct(product);
 504                     }
 505                 },
 506                 product_list: this.pos.db.get_product_by_category(0)
 507             });
 508             this.product_list_widget.replace(this.$('.placeholder-ProductListWidget'));
 509
 510             this.product_categories_widget = new module.ProductCategoriesWidget(this,{
 511                 product_list_widget: this.product_list_widget,
 512             });
 513             this.product_categories_widget.replace(this.$('.placeholder-ProductCategoriesWidget'));
 514         },
 515
 516         show: function(){
 517             this._super();
 518             var self = this;
 519
 520             this.product_categories_widget.reset_category();
 521
 522             this.pos_widget.order_widget.set_editable(true);
 523         },
 524
 525         close: function(){
 526             this._super();
 527
 528             this.pos_widget.order_widget.set_editable(false);
 529
 530             if(this.pos.config.iface_vkeyboard && this.pos_widget.onscreen_keyboard){
 531                 this.pos_widget.onscreen_keyboard.hide();
 532             }
 533         },
 534     });
 535
 536     module.ClientListScreenWidget = module.ScreenWidget.extend({
 537         template: 'ClientListScreenWidget',
 538
 539         init: function(parent, options){
 540             this._super(parent, options);
 541             this.partner_cache = new module.DomCache();
 542         },
 543
 544         show_leftpane: false,
 545
 546         auto_back: true,
 547
 548         show: function(){
 549             var self = this;
 550             this._super();
 551
 552             this.renderElement();
 553             this.details_visible = false;
 554             this.old_client = this.pos.get('selectedOrder').get('client');
 555             this.new_client = this.old_client;
 556
 557             this.$('.back').click(function(){
 558                 self.pos_widget.screen_selector.back();
 559             });
 560
 561             this.$('.next').click(function(){
 562                 self.save_changes();
 563                 self.pos_widget.screen_selector.back();
 564             });
 565
 566             this.$('.new-customer').click(function(){
 567                 self.display_client_details('edit',{
 568                     'country_id': self.pos.company.country_id,
 569                 });
 570             });
 571
 572             var partners = this.pos.db.get_partners_sorted(1000);
 573             this.render_list(partners);
 574
 575             this.reload_partners();
 576
 577             if( this.old_client ){
 578                 this.display_client_details('show',this.old_client,0);
 579             }
 580
 581             this.$('.client-list-contents').delegate('.client-line','click',function(event){
 582                 self.line_select(event,$(this),parseInt($(this).data('id')));
 583             });
 584
 585             var search_timeout = null;
 586
 587             if(this.pos.config.iface_vkeyboard && this.pos_widget.onscreen_keyboard){
 588                 this.pos_widget.onscreen_keyboard.connect(this.$('.searchbox input'));
 589             }
 590
 591             this.$('.searchbox input').on('keyup',function(event){
 592                 clearTimeout(search_timeout);
 593
 594                 var query = this.value;
 595
 596                 search_timeout = setTimeout(function(){
 597                     self.perform_search(query,event.which === 13);
 598                 },70);
 599             });
 600
 601             this.$('.searchbox .search-clear').click(function(){
 602                 self.clear_search();
 603             });
 604         },
 605         barcode_client_action: function(code){
 606             if (this.editing_client) {
 607                 this.$('.detail.barcode').val(code.code);
 608             } else if (this.pos.db.get_partner_by_ean13(code.code)) {
 609                 this.display_client_details('show',this.pos.db.get_partner_by_ean13(code.code));
 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 = this.partner_cache.get_node(partner.id);
 639                 if(!clientline){
 640                     var clientline_html = QWeb.render('ClientLine',{widget: this, partner:partners[i]});
 641                     var clientline = document.createElement('tbody');
 642                     clientline.innerHTML = clientline_html;
 643                     clientline = clientline.childNodes[1];
 644                     this.partner_cache.cache_node(partner.id,clientline);
 645                 }
 646                 if( partners === this.new_client ){
 647                     clientline.classList.add('highlight');
 648                 }else{
 649                     clientline.classList.remove('highlight');
 650                 }
 651                 contents.appendChild(clientline);
 652             }
 653         },
 654         save_changes: function(){
 655             if( this.has_client_changed() ){
 656                 this.pos.get('selectedOrder').set_client(this.new_client);
 657             }
 658         },
 659         has_client_changed: function(){
 660             if( this.old_client && this.new_client ){
 661                 return this.old_client.id !== this.new_client.id;
 662             }else{
 663                 return !!this.old_client !== !!this.new_client;
 664             }
 665         },
 666         toggle_save_button: function(){
 667             var $button = this.$('.button.next');
 668             if (this.editing_client) {
 669                 $button.addClass('oe_hidden');
 670                 return;
 671             } else if( this.new_client ){
 672                 if( !this.old_client){
 673                     $button.text(_t('Set Customer'));
 674                 }else{
 675                     $button.text(_t('Change Customer'));
 676                 }
 677             }else{
 678                 $button.text(_t('Deselect Customer'));
 679             }
 680             $button.toggleClass('oe_hidden',!this.has_client_changed());
 681         },
 682         line_select: function(event,$line,id){
 683             var partner = this.pos.db.get_partner_by_id(id);
 684             this.$('.client-list .lowlight').removeClass('lowlight');
 685             if ( $line.hasClass('highlight') ){
 686                 $line.removeClass('highlight');
 687                 $line.addClass('lowlight');
 688                 this.display_client_details('hide',partner);
 689                 this.new_client = null;
 690                 this.toggle_save_button();
 691             }else{
 692                 this.$('.client-list .highlight').removeClass('highlight');
 693                 $line.addClass('highlight');
 694                 var y = event.pageY - $line.parent().offset().top
 695                 this.display_client_details('show',partner,y);
 696                 this.new_client = partner;
 697                 this.toggle_save_button();
 698             }
 699         },
 700         partner_icon_url: function(id){
 701             return '/web/binary/image?model=res.partner&id='+id+'&field=image_small';
 702         },
 703
 704         // ui handle for the 'edit selected customer' action
 705         edit_client_details: function(partner) {
 706             this.display_client_details('edit',partner);
 707         },
 708
 709         // ui handle for the 'cancel customer edit changes' action
 710         undo_client_details: function(partner) {
 711             if (!partner.id) {
 712                 this.display_client_details('hide');
 713             } else {
 714                 this.display_client_details('show',partner);
 715             }
 716         },
 717
 718         // what happens when we save the changes on the client edit form -> we fetch the fields, sanitize them,
 719         // send them to the backend for update, and call saved_client_details() when the server tells us the
 720         // save was successfull.
 721         save_client_details: function(partner) {
 722             var self = this;
 723
 724             var fields = {}
 725             this.$('.client-details-contents .detail').each(function(idx,el){
 726                 fields[el.name] = el.value;
 727             });
 728
 729             if (!fields.name) {
 730                 this.pos_widget.screen_selector.show_popup('error',{
 731                     message: _t('A Customer Name Is Required'),
 732                 });
 733                 return;
 734             }
 735
 736             if (this.uploaded_picture) {
 737                 fields.image = this.uploaded_picture;
 738             }
 739
 740             fields.id           = partner.id || false;
 741             fields.country_id   = fields.country_id || false;
 742             fields.ean13        = fields.ean13 ? this.pos.barcode_reader.sanitize_ean(fields.ean13) : false;
 743
 744             new instance.web.Model('res.partner').call('create_from_ui',[fields]).then(function(partner_id){
 745                 self.saved_client_details(partner_id);
 746             });
 747         },
 748
 749         // what happens when we've just pushed modifications for a partner of id partner_id
 750         saved_client_details: function(partner_id){
 751             var self = this;
 752             this.reload_partners().then(function(){
 753                 var partner = self.pos.db.get_partner_by_id(partner_id);
 754                 if (partner) {
 755                     self.new_client = partner;
 756                     self.toggle_save_button();
 757                     self.display_client_details('show',partner);
 758                 } else {
 759                     // should never happen, because create_from_ui must return the id of the partner it
 760                     // has created, and reload_partner() must have loaded the newly created partner.
 761                     self.display_client_details('hide');
 762                 }
 763             });
 764         },
 765
 766         // resizes an image, keeping the aspect ratio intact,
 767         // the resize is useful to avoid sending 12Mpixels jpegs
 768         // over a wireless connection.
 769         resize_image_to_dataurl: function(img, maxwidth, maxheight, callback){
 770             img.onload = function(){
 771                 var png = new Image();
 772                 var canvas = document.createElement('canvas');
 773                 var ctx    = canvas.getContext('2d');
 774                 var ratio  = 1;
 775
 776                 if (img.width > maxwidth) {
 777                     ratio = maxwidth / img.width;
 778                 }
 779                 if (img.height * ratio > maxheight) {
 780                     ratio = maxheight / img.height;
 781                 }
 782                 var width  = Math.floor(img.width * ratio);
 783                 var height = Math.floor(img.height * ratio);
 784
 785                 canvas.width  = width;
 786                 canvas.height = height;
 787                 ctx.drawImage(img,0,0,width,height);
 788
 789                 var dataurl = canvas.toDataURL();
 790                 callback(dataurl);
 791             }
 792         },
 793
 794         // Loads and resizes a File that contains an image.
 795         // callback gets a dataurl in case of success.
 796         load_image_file: function(file, callback){
 797             var self = this;
 798             if (!file.type.match(/image.*/)) {
 799                 this.pos_widget.screen_selector.show_popup('error',{
 800                     message:_t('Unsupported File Format'),
 801                     comment:_t('Only web-compatible Image formats such as .png or .jpeg are supported'),
 802                 });
 803                 return;
 804             }
 805
 806             var reader = new FileReader();
 807             reader.onload = function(event){
 808                 var dataurl = event.target.result;
 809                 var img     = new Image();
 810                 img.src = dataurl;
 811                 self.resize_image_to_dataurl(img,800,600,callback);
 812             }
 813             reader.onerror = function(){
 814                 self.pos_widget.screen_selector.show_popup('error',{
 815                     message:_t('Could Not Read Image'),
 816                     comment:_t('The provided file could not be read due to an unknown error'),
 817                 });
 818             };
 819             reader.readAsDataURL(file);
 820         },
 821
 822         // This fetches partner changes on the server, and in case of changes,
 823         // rerenders the affected views
 824         reload_partners: function(){
 825             var self = this;
 826             return this.pos.load_new_partners().then(function(){
 827                 self.render_list(self.pos.db.get_partners_sorted(1000));
 828
 829                 // update the currently assigned client if it has been changed in db.
 830                 var curr_client = self.pos.get_order().get_client();
 831                 if (curr_client) {
 832                     self.pos.get_order().set_client(self.pos.db.get_partner_by_id(curr_client.id));
 833                 }
 834             });
 835         },
 836
 837         // Shows,hides or edit the customer details box :
 838         // visibility: 'show', 'hide' or 'edit'
 839         // partner:    the partner object to show or edit
 840         // clickpos:   the height of the click on the list (in pixel), used
 841         //             to maintain consistent scroll.
 842         display_client_details: function(visibility,partner,clickpos){
 843             var self = this;
 844             var contents = this.$('.client-details-contents');
 845             var parent   = this.$('.client-list').parent();
 846             var scroll   = parent.scrollTop();
 847             var height   = contents.height();
 848
 849             contents.off('click','.button.edit');
 850             contents.off('click','.button.save');
 851             contents.off('click','.button.undo');
 852             contents.on('click','.button.edit',function(){ self.edit_client_details(partner); });
 853             contents.on('click','.button.save',function(){ self.save_client_details(partner); });
 854             contents.on('click','.button.undo',function(){ self.undo_client_details(partner); });
 855             this.editing_client = false;
 856             this.uploaded_picture = null;
 857
 858             if(visibility === 'show'){
 859                 contents.empty();
 860                 contents.append($(QWeb.render('ClientDetails',{widget:this,partner:partner})));
 861
 862                 var new_height   = contents.height();
 863
 864                 if(!this.details_visible){
 865                     if(clickpos < scroll + new_height + 20 ){
 866                         parent.scrollTop( clickpos - 20 );
 867                     }else{
 868                         parent.scrollTop(parent.scrollTop() + new_height);
 869                     }
 870                 }else{
 871                     parent.scrollTop(parent.scrollTop() - height + new_height);
 872                 }
 873
 874                 this.details_visible = true;
 875                 this.toggle_save_button();
 876             } else if (visibility === 'edit') {
 877                 this.editing_client = true;
 878                 contents.empty();
 879                 contents.append($(QWeb.render('ClientDetailsEdit',{widget:this,partner:partner})));
 880                 this.toggle_save_button();
 881
 882                 contents.find('.image-uploader').on('change',function(){
 883                     self.load_image_file(event.target.files[0],function(res){
 884                         if (res) {
 885                             contents.find('.client-picture img, .client-picture .fa').remove();
 886                             contents.find('.client-picture').append("<img src='"+res+"'>");
 887                             contents.find('.detail.picture').remove();
 888                             self.uploaded_picture = res;
 889                         }
 890                     });
 891                 });
 892             } else if (visibility === 'hide') {
 893                 contents.empty();
 894                 if( height > scroll ){
 895                     contents.css({height:height+'px'});
 896                     contents.animate({height:0},400,function(){
 897                         contents.css({height:''});
 898                     });
 899                 }else{
 900                     parent.scrollTop( parent.scrollTop() - height);
 901                 }
 902                 this.details_visible = false;
 903                 this.toggle_save_button();
 904             }
 905         },
 906         close: function(){
 907             this._super();
 908         },
 909     });
 910
 911     module.ReceiptScreenWidget = module.ScreenWidget.extend({
 912         template: 'ReceiptScreenWidget',
 913         show_numpad:     false,
 914         show_leftpane:   false,
 915
 916         show: function(){
 917             this._super();
 918             var self = this;
 919
 920             this.refresh();
 921             this.print();
 922
 923             // The problem is that in chrome the print() is asynchronous and doesn't
 924             // execute until all rpc are finished. So it conflicts with the rpc used
 925             // to send the orders to the backend, and the user is able to go to the next
 926             // screen before the printing dialog is opened. The problem is that what's
 927             // printed is whatever is in the page when the dialog is opened and not when it's called,
 928             // and so you end up printing the product list instead of the receipt...
 929             //
 930             // Fixing this would need a re-architecturing
 931             // of the code to postpone sending of orders after printing.
 932             //
 933             // But since the print dialog also blocks the other asynchronous calls, the
 934             // button enabling in the setTimeout() is blocked until the printing dialog is
 935             // closed. But the timeout has to be big enough or else it doesn't work
 936             // 2 seconds is the same as the default timeout for sending orders and so the dialog
 937             // should have appeared before the timeout... so yeah that's not ultra reliable.
 938
 939             this.lock_screen(true);
 940             setTimeout(function(){
 941                 self.lock_screen(false);
 942             }, 2000);
 943         },
 944         lock_screen: function(locked) {
 945             this._locked = locked;
 946             if (locked) {
 947                 this.$('.next').removeClass('highlight');
 948             } else {
 949                 this.$('.next').addClass('highlight');
 950             }
 951         },
 952         print: function() {
 953             window.print();
 954         },
 955         finish_order: function() {
 956             if (!this._locked) {
 957                 this.pos.get_order().finalize();
 958             }
 959         },
 960         renderElement: function() {
 961             var self = this;
 962             this._super();
 963             this.$('.next').click(function(){
 964                 self.finish_order();
 965             });
 966             this.$('.button.print').click(function(){
 967                 self.print();
 968             });
 969         },
 970         refresh: function() {
 971             var order = this.pos.get_order();
 972             this.$('.pos-receipt-container').html(QWeb.render('PosTicket',{
 973                     widget:this,
 974                     order: order,
 975                     orderlines: order.get('orderLines').models,
 976                     paymentlines: order.get('paymentLines').models,
 977                 }));
 978         },
 979     });
 980
 981     module.PaymentScreenWidget = module.ScreenWidget.extend({
 982         template:      'PaymentScreenWidget',
 983         back_screen:   'product',
 984         next_screen:   'receipt',
 985         show_leftpane: false,
 986         show_numpad:   false,
 987         init: function(parent, options) {
 988             var self = this;
 989             this._super(parent, options);
 990
 991             this.pos.bind('change:selectedOrder',function(){
 992                     this.renderElement();
 993                     this.watch_order_changes();
 994                 },this);
 995             this.watch_order_changes();
 996
 997             this.inputbuffer = "";
 998             this.firstinput  = true;
 999             this.keyboard_handler = function(event){
1000                 var key = '';
1001                 if ( event.keyCode === 13 ) {         // Enter
1002                     self.validate_order();
1003                 } else if ( event.keyCode === 190 ) { // Dot
1004                     key = '.';
1005                 } else if ( event.keyCode === 46 ) {  // Delete
1006                     key = 'CLEAR';
1007                 } else if ( event.keyCode === 8 ) {   // Backspace
1008                     key = 'BACKSPACE';
1009                     event.preventDefault(); // Prevents history back nav
1010                 } else if ( event.keyCode >= 48 && event.keyCode <= 57 ){       // Numbers
1011                     key = '' + (event.keyCode - 48);
1012                 } else if ( event.keyCode >= 96 && event.keyCode <= 105 ){      // Numpad Numbers
1013                     key = '' + (event.keyCode - 96);
1014                 } else if ( event.keyCode === 189 || event.keyCode === 109 ) {  // Minus
1015                     key = '-';
1016                 } else if ( event.keyCode === 107 ) { // Plus
1017                     key = '+';
1018                 }
1019
1020                 self.payment_input(key);
1021
1022             };
1023         },
1024         // resets the current input buffer
1025         reset_input: function(){
1026             var line = this.pos.get_order().selected_paymentline;
1027             this.firstinput  = true;
1028             if (line) {
1029                 this.inputbuffer = this.format_currency_no_symbol(line.get_amount());
1030             } else {
1031                 this.inputbuffer = "";
1032             }
1033         },
1034         // handle both keyboard and numpad input. Accepts
1035         // a string that represents the key pressed.
1036         payment_input: function(input) {
1037             var oldbuf = this.inputbuffer.slice(0);
1038
1039             if (input === '.') {
1040                 if (this.firstinput) {
1041                     this.inputbuffer = "0.";
1042                 }else if (!this.inputbuffer.length || this.inputbuffer === '-') {
1043                     this.inputbuffer += "0.";
1044                 } else if (this.inputbuffer.indexOf('.') < 0){
1045                     this.inputbuffer = this.inputbuffer + '.';
1046                 }
1047             } else if (input === 'CLEAR') {
1048                 this.inputbuffer = "";
1049             } else if (input === 'BACKSPACE') {
1050                 this.inputbuffer = this.inputbuffer.substring(0,this.inputbuffer.length - 1);
1051             } else if (input === '+') {
1052                 if ( this.inputbuffer[0] === '-' ) {
1053                     this.inputbuffer = this.inputbuffer.substring(1,this.inputbuffer.length);
1054                 }
1055             } else if (input === '-') {
1056                 if ( this.inputbuffer[0] === '-' ) {
1057                     this.inputbuffer = this.inputbuffer.substring(1,this.inputbuffer.length);
1058                 } else {
1059                     this.inputbuffer = '-' + this.inputbuffer;
1060                 }
1061             } else if (input[0] === '+' && !isNaN(parseFloat(input))) {
1062                 this.inputbuffer = '' + ((parseFloat(this.inputbuffer) || 0) + parseFloat(input));
1063             } else if (!isNaN(parseInt(input))) {
1064                 if (this.firstinput) {
1065                     this.inputbuffer = '' + input;
1066                 } else {
1067                     this.inputbuffer += input;
1068                 }
1069             }
1070
1071             this.firstinput = false;
1072
1073             if (this.inputbuffer !== oldbuf) {
1074                 var order = this.pos.get_order();
1075                 if (order.selected_paymentline) {
1076                     order.selected_paymentline.set_amount(parseFloat(this.inputbuffer));
1077                     this.order_changes();
1078                     this.render_paymentlines();
1079                     this.$('.paymentline.selected .edit').text(this.inputbuffer);
1080                 }
1081             }
1082         },
1083         click_numpad: function(button) {
1084             this.payment_input(button.data('action'));
1085         },
1086         render_numpad: function() {
1087             var self = this;
1088             var numpad = $(QWeb.render('PaymentScreen-Numpad', { widget:this }));
1089             numpad.on('click','button',function(){
1090                 self.click_numpad($(this));
1091             });
1092             return numpad;
1093         },
1094         click_delete_paymentline: function(cid){
1095             var lines = this.pos.get_order().get('paymentLines').models;
1096             for ( var i = 0; i < lines.length; i++ ) {
1097                 if (lines[i].cid === cid) {
1098                     this.pos.get_order().removePaymentline(lines[i]);
1099                     this.reset_input();
1100                     this.render_paymentlines();
1101                     return;
1102                 }
1103             }
1104         },
1105         click_paymentline: function(cid){
1106             var lines = this.pos.get_order().get('paymentLines').models;
1107             for ( var i = 0; i < lines.length; i++ ) {
1108                 if (lines[i].cid === cid) {
1109                     this.pos.get_order().selectPaymentline(lines[i]);
1110                     this.reset_input();
1111                     this.render_paymentlines();
1112                     return;
1113                 }
1114             }
1115         },
1116         render_paymentlines: function() {
1117             var self  = this;
1118             var order = this.pos.get_order();
1119             var lines = order.get('paymentLines').models;
1120
1121             this.$('.paymentlines-container').empty();
1122             var lines = $(QWeb.render('PaymentScreen-Paymentlines', {
1123                 widget: this,
1124                 order: order,
1125                 paymentlines: lines,
1126             }));
1127
1128             lines.on('click','.delete-button',function(){
1129                 self.click_delete_paymentline($(this).data('cid'));
1130             });
1131
1132             lines.on('click','.paymentline',function(){
1133                 self.click_paymentline($(this).data('cid'));
1134             });
1135
1136             lines.appendTo(this.$('.paymentlines-container'));
1137         },
1138         click_paymentmethods: function(id) {
1139             var cashregister = null;
1140             for ( var i = 0; i < this.pos.cashregisters.length; i++ ) {
1141                 if ( this.pos.cashregisters[i].journal_id[0] === id ){
1142                     cashregister = this.pos.cashregisters[i];
1143                     break;
1144                 }
1145             }
1146             this.pos.get_order().addPaymentline( cashregister );
1147             this.reset_input();
1148             this.render_paymentlines();
1149         },
1150         render_paymentmethods: function() {
1151             var self = this;
1152             var methods = $(QWeb.render('PaymentScreen-Paymentmethods', { widget:this }));
1153                 methods.on('click','.paymentmethod',function(){
1154                     self.click_paymentmethods($(this).data('id'));
1155                 });
1156             return methods;
1157         },
1158         click_invoice: function(){
1159             var order = this.pos.get_order();
1160             order.set_to_invoice(!order.is_to_invoice());
1161             if (order.is_to_invoice()) {
1162                 this.$('.js_invoice').addClass('highlight');
1163             } else {
1164                 this.$('.js_invoice').removeClass('highlight');
1165             }
1166         },
1167         renderElement: function() {
1168             var self = this;
1169             this._super();
1170
1171             var numpad = this.render_numpad();
1172             numpad.appendTo(this.$('.payment-numpad'));
1173
1174             var methods = this.render_paymentmethods();
1175             methods.appendTo(this.$('.paymentmethods-container'));
1176
1177             this.render_paymentlines();
1178
1179             this.$('.back').click(function(){
1180                 self.pos_widget.screen_selector.back();
1181             });
1182
1183             this.$('.next').click(function(){
1184                 self.validate_order();
1185             });
1186
1187             this.$('.js_invoice').click(function(){
1188                 self.click_invoice();
1189             });
1190
1191         },
1192         show: function(){
1193             this.pos.get_order().clean_empty_paymentlines();
1194             this.reset_input();
1195             this.render_paymentlines();
1196             this.order_changes();
1197             window.document.body.addEventListener('keydown',this.keyboard_handler);
1198             this._super();
1199         },
1200         hide: function(){
1201             window.document.body.removeEventListener('keydown',this.keyboard_handler);
1202             this._super();
1203         },
1204         // sets up listeners to watch for order changes
1205         watch_order_changes: function() {
1206             var self = this;
1207             var order = this.pos.get_order();
1208             if(this.old_order){
1209                 this.old_order.unbind(null,null,this);
1210             }
1211             order.bind('all',function(){
1212                 self.order_changes();
1213             });
1214             this.old_order = order;
1215         },
1216         // called when the order is changed, used to show if
1217         // the order is paid or not
1218         order_changes: function(){
1219             var self = this;
1220             var order = this.pos.get_order();
1221             if (order.isPaid()) {
1222                 self.$('.next').addClass('highlight');
1223             }else{
1224                 self.$('.next').removeClass('highlight');
1225             }
1226         },
1227         // Check if the order is paid, then sends it to the backend,
1228         // and complete the sale process
1229         validate_order: function() {
1230             var self = this;
1231
1232             var order = this.pos.get_order();
1233
1234             if (!order.isPaid() || this.invoicing) {
1235                 return;
1236             }
1237
1238             // The exact amount must be paid if there is no cash payment method defined.
1239             if (Math.abs(order.getTotalTaxIncluded() - order.getPaidTotal()) > 0.00001) {
1240                 var cash = false;
1241                 for (var i = 0; i < this.pos.cashregisters.length; i++) {
1242                     cash = cash || (this.pos.cashregisters[i].journal.type === 'cash');
1243                 }
1244                 if (!cash) {
1245                     this.pos_widget.screen_selector.show_popup('error',{
1246                         message: _t('Cannot return change without a cash payment method'),
1247                         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'),
1248                     });
1249                     return;
1250                 }
1251             }
1252
1253             if (order.isPaidWithCash() && this.pos.config.iface_cashdrawer) {
1254
1255                     this.pos.proxy.open_cashbox();
1256             }
1257
1258             if (order.is_to_invoice()) {
1259                 var invoiced = this.pos.push_and_invoice_order(order);
1260                 this.invoicing = true;
1261
1262                 invoiced.fail(function(error){
1263                     self.invoicing = false;
1264                     if (error === 'error-no-client') {
1265                         self.pos_widget.screen_selector.show_popup('confirm',{
1266                             message: _t('Please select the Customer'),
1267                             comment: _t('You need to select the customer before you can invoice an order.'),
1268                             confirm: function(){
1269                                 self.pos_widget.screen_selector.set_current_screen('clientlist');
1270                             },
1271                         });
1272                     } else {
1273                         self.pos_widget.screen_selector.show_popup('error',{
1274                             message: _t('The order could not be sent'),
1275                             comment: _t('Check your internet connection and try again.'),
1276                         });
1277                     }
1278                 });
1279
1280                 invoiced.done(function(){
1281                     self.invoicing = false;
1282                     order.finalize();
1283                 });
1284             } else {
1285                 this.pos.push_order(order)
1286                 if (this.pos.config.iface_print_via_proxy) {
1287                     var receipt = currentOrder.export_for_printing();
1288                     this.pos.proxy.print_receipt(QWeb.render('XmlReceipt',{
1289                         receipt: receipt, widget: self,
1290                     }));
1291                     order.finalize();    //finish order and go back to scan screen
1292                 } else {
1293                     this.pos_widget.screen_selector.set_current_screen(this.next_screen);
1294                 }
1295             }
1296         },
1297     });
1298
1299 }