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

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!-- vim:fdl=1:
   3 -->
   4 <templates id="template" xml:space="preserve">
   5
   6     <t t-name="PosWidget">
   7         <div class="pos">
   8             <div class="pos-topheader">
   9                 <div class="pos-branding">
  10                     <img class="pos-logo" src="/point_of_sale/static/src/img/logo.png" />
  11                     <span class="placeholder-UsernameWidget"></span>
  12                 </div>
  13                 <div class="pos-rightheader">
  14                     <div class="order-selector">
  15                         <span class="orders"></span>
  16                         <span class="order-button square neworder-button"><i class='fa fa-plus' /></span>
  17                         <span class="order-button square deleteorder-button"><i class='fa fa-minus' /></span>
  18                     </div>
  19                     <!-- here goes header buttons -->
  20                 </div>
  21             </div>
  22
  23             <div class="pos-content">
  24
  25                 <div class="pos-leftpane">
  26                     <div class='window'>
  27                         <div class='subwindow'>
  28                             <div class='subwindow-container'>
  29                                 <div class='subwindow-container-fix'>
  30                                     <div class="placeholder-OrderWidget"></div>
  31                                 </div>
  32                             </div>
  33                         </div>
  34
  35                         <div class='subwindow collapsed'>
  36                             <div class='subwindow-container'>
  37                                 <div class='subwindow-container-fix pads'>
  38                                     <div class="control-buttons oe_hidden"></div>
  39                                     <div class="placeholder-ActionpadWidget"></div>
  40                                     <div class="placeholder-NumpadWidget"></div>
  41                                 </div>
  42                             </div>
  43                         </div>
  44
  45                     </div>
  46                 </div>
  47
  48                 <div class="rightpane">
  49                     <div class='window'>
  50                         <div class='subwindow'>
  51                             <div class='subwindow-container'>
  52                                 <div class='subwindow-container-fix screens'>
  53                                 </div>
  54                             </div>
  55                         </div>
  56                     </div>
  57                 </div>
  58
  59                 <div class="placeholder-OnscreenKeyboardWidget"></div>
  60             </div>
  61
  62             <div class="loader">
  63                 <div class='loader-feedback oe_hidden'>
  64                     <h1 class='message'>Loading</h1>
  65                     <div class='progressbar'>
  66                         <div class='progress' width='50%'></div>
  67                     </div>
  68                     <div class='oe_hidden button skip'>
  69                         Skip
  70                     </div>
  71                 </div>
  72             </div>
  73
  74             &lt;!--[if IE]&gt;
  75             <div class='not-supported-browser'>
  76                 <div class='message'>
  77                     <img src='/point_of_sale/static/src/img/pos_screenshot.jpg' />
  78                     <p>
  79                         The Point of Sale is not supported by Microsoft Internet Explorer. Please use
  80                         a modern browser like <a href="http://www.mozilla.org/firefox/" target="_blank">Mozilla Firefox</a>
  81                         or <a href="http://www.google.com/chrome" target="_blank">Google Chrome</a>.
  82                     </p>
  83                 </div>
  84             </div>
  85             &lt;![endif]--&gt;
  86         </div>
  87     </t>
  88
  89     <t t-name="SynchNotificationWidget">
  90         <div class="oe_status js_synch">
  91             <span class='js_msg oe_hidden'>0</span>
  92             <div class="js_connected oe_icon oe_green">
  93                 <i class='fa fa-fw fa-rss'></i>
  94             </div>
  95             <div class="js_connecting oe_icon oe_hidden">
  96                 <i class='fa fa-fw fa-spin fa-spinner'></i>
  97             </div>
  98             <div class="js_disconnected oe_icon oe_red oe_hidden">
  99                 <i class='fa fa-fw fa-rss'></i>
 100             </div>
 101         </div>
 102     </t>
 103
 104     <t t-name="ProxyStatusWidget">
 105         <div class="oe_status js_proxy">
 106             <span class='js_msg oe_orange oe_hidden'></span>
 107             <div class="js_connected oe_icon oe_green">
 108                 <i class='fa fa-fw fa-sitemap'></i>
 109             </div>
 110             <div class="js_connecting oe_icon oe_hidden">
 111                 <i class='fa fa-fw fa-spin fa-spinner'></i>
 112             </div>
 113             <div class="js_warning oe_icon oe_orange oe_hidden">
 114                 <i class='fa fa-fw fa-sitemap'></i>
 115             </div>
 116             <div class="js_disconnected oe_icon oe_red oe_hidden">
 117                 <i class='fa fa-fw fa-sitemap'></i>
 118             </div>
 119         </div>
 120     </t>
 121
 122     <t t-name="HeaderButtonWidget">
 123         <div class="header-button">
 124             <t t-esc="widget.label" />
 125         </div>
 126     </t>
 127
 128     <t t-name="PosCloseWarning">
 129         <div>There are pending operations that could not be saved into the database, are you sure you want to exit?</div>
 130     </t>
 131
 132     <t t-name="ActionpadWidget">
 133         <div class='actionpad'>
 134             <button class='button set-customer'>
 135                 <i class='fa fa-user' /> Set Customer
 136             </button>
 137             <button class="button pay">
 138                 <i class='fa fa-chevron-right' /> Payment
 139             </button>
 140         </div>
 141     </t>
 142
 143     <t t-name="NumpadWidget">
 144         <div class="numpad">
 145             <button class="input-button number-char">1</button>
 146             <button class="input-button number-char">2</button>
 147             <button class="input-button number-char">3</button>
 148             <button class="mode-button" data-mode='quantity'>Qty</button>
 149             <br />
 150             <button class="input-button number-char">4</button>
 151             <button class="input-button number-char">5</button>
 152             <button class="input-button number-char">6</button>
 153             <button class="mode-button" data-mode='discount'>Disc</button>
 154             <br />
 155             <button class="input-button number-char">7</button>
 156             <button class="input-button number-char">8</button>
 157             <button class="input-button number-char">9</button>
 158             <button class="mode-button" data-mode='price'>Price</button>
 159             <br />
 160             <button class="input-button numpad-minus" >+/-</button>
 161             <button class="input-button number-char">0</button>
 162             <button class="input-button number-char">.</button>
 163             <button class="input-button numpad-backspace">
 164                 <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
 165             </button>
 166             <br />
 167         </div>
 168     </t>
 169
 170     <t t-name="CategoryButton">
 171         <span class='category-button js-category-switch' t-att-data-category-id="category.id" >
 172             <div class="category-img">
 173                 <img t-att-src="image_url" />
 174             </div>
 175             <div class="category-name">
 176                 <t t-esc="category.name"/>
 177             </div>
 178         </span>
 179     </t>
 180
 181     <t t-name="CategorySimpleButton">
 182         <span class='category-simple-button js-category-switch' t-att-data-category-id="category.id" >
 183             <t t-esc="category.name"/>
 184         </span>
 185     </t>
 186
 187     <t t-name="ProductCategoriesWidget">
 188         <div>
 189         <header class='rightpane-header'>
 190             <div class="breadcrumbs">
 191                 <span class="breadcrumb">
 192                     <span class=" breadcrumb-button js-category-switch">
 193                         <img src="/point_of_sale/static/src/img/home.png" class="breadcrumb-homeimg" />
 194                     </span>
 195                 </span>
 196                 <t t-foreach="widget.breadcrumb" t-as="category">
 197                     <span class="breadcrumb">
 198                         <img src="/point_of_sale/static/src/img/bc-arrow-big.png" class="breadcrumb-arrow" />
 199                         <span class="breadcrumb-button js-category-switch" t-att-data-category-id="category.id">
 200                             <t t-esc="category.name"/>
 201                         </span>
 202                     </span>
 203                 </t>
 204             </div>
 205             <div class="searchbox">
 206                 <input placeholder="Search Products" />
 207                 <span class="search-clear"></span>
 208             </div>
 209         </header>
 210         <t t-if="widget.subcategories.length > 0">
 211             <div class="categories">
 212                 <div class="category-list">
 213                 </div>
 214             </div>
 215         </t>
 216         </div>
 217     </t>
 218
 219     <t t-name="ProductListWidget">
 220         <div class='product-list-container'>
 221             <div class="product-list-scroller touch-scrollable">
 222                 <div class="product-list">
 223                 </div>
 224             </div>
 225             <span class="placeholder-ScrollbarWidget" />
 226         </div>
 227     </t>
 228
 229     <t t-name="ProductScreenWidget">
 230         <div class="product-screen screen">
 231             <table class="layout-table">
 232
 233                 <tr class="header-row">
 234                     <td class="header-cell">
 235                         <span class="placeholder-ProductCategoriesWidget" />
 236                     </td>
 237                 </tr>
 238
 239                 <tr class="content-row">
 240                     <td class="content-cell">
 241                         <div class="content-container">
 242                             <span class="placeholder-ProductListWidget" />
 243                         </div>
 244                     </td>
 245                 </tr>
 246
 247             </table>
 248         </div>
 249     </t>
 250
 251     <t t-name="ScaleScreenWidget">
 252         <div class="scale-screen screen">
 253             <div class="screen-content">
 254                 <div class="top-content">
 255                     <span class='button back'>
 256                         <i class='fa fa-angle-double-left'></i>
 257                         Back
 258                     </span>
 259                     <h1 class='product-name'><t t-esc="widget.get_product_name()" /></h1>
 260                 </div>
 261                 <div class="centered-content">
 262                     <div class='weight js-weight'>
 263                         <t t-esc="widget.get_product_weight_string()" />
 264                     </div>
 265                     <div class='product-price'>
 266                         <t t-esc="widget.format_currency(widget.get_product_price()) + '/Kg'" />
 267                     </div>
 268                     <div class='computed-price'>
 269                         123.14 €
 270                     </div>
 271                     <div class='buy-product'>
 272                         Order
 273                         <i class='fa fa-angle-double-right'></i>
 274                     </div>
 275                 </div>
 276             </div>
 277         </div>
 278     </t>
 279
 280     <t t-name="ClientLine">
 281         <tr class='client-line' t-att-data-id='partner.id'>
 282             <td><t t-esc='partner.name' /></td>
 283             <td><t t-esc='partner.address' /></td>
 284             <td><t t-esc='partner.phone or partner.mobile or ""' /></td>
 285         </tr>
 286     </t>
 287
 288     <t t-name="ClientDetails">
 289         <section class='client-details'>
 290             <div class='client-picture'>
 291                 <img t-att-src='widget.partner_icon_url(partner.id)' />
 292                 <!--<img src='http://static.fjcdn.com/gifs/Aku_c019d6_2548127.gif' />-->
 293             </div>
 294             <div class='client-name'><t t-esc='partner.name' /></div>
 295             <div class='client-details-box clearfix'>
 296                 <div class='client-details-left'>
 297                     <div class='client-detail'>
 298                         <span class='label'>Address</span>
 299                         <span class='detail client-address'><t t-esc='partner.address' /></span>
 300                     </div>
 301                     <div class='client-detail'>
 302                         <span class='label'>email</span>
 303                         <span class='detail client-email'><t t-esc='partner.email' /></span>
 304                     </div>
 305                     <div class='client-detail'>
 306                         <span class='label'>phone</span>
 307                         <t t-if='partner.phone'>
 308                             <span class='detail client-phone'><t t-esc='partner.phone' /></span>
 309                         </t>
 310                         <t t-if='!partner.phone'>
 311                             <span class='detail client-phone empty'>N/A</span>
 312                         </t>
 313                     </div>
 314                 </div>
 315                 <div class='client-details-right'>
 316                     <div class='client-detail'>
 317                         <span class='label'>ID</span>
 318                         <t t-if='partner.ean13'>
 319                             <span class='detail client-id'><t t-esc='partner.ean13'/></span>
 320                         </t>
 321                         <t t-if='!partner.ean13'>
 322                             <span class='detail client-id empty'>N/A</span>
 323                         </t>
 324                     </div>
 325                 </div>
 326             </div>
 327         </section>
 328     </t>
 329
 330     <t t-name="ClientListScreenWidget">
 331         <div class="clientlist-screen screen">
 332             <div class="screen-content">
 333                 <section class="top-content">
 334                     <span class='button back'>
 335                         <i class='fa fa-angle-double-left'></i>
 336                         Cancel
 337                     </span>
 338                     <span class='searchbox'>
 339                         <input placeholder='Search Customers' />
 340                         <span class='search-clear'></span>
 341                     </span>
 342                     <span class='searchbox'></span>
 343                     <span class='button next oe_hidden highlight'>
 344                         Select Customer
 345                         <i class='fa fa-angle-double-right'></i>
 346                     </span>
 347                 </section>
 348                 <section class="full-content">
 349                     <div class='window'>
 350                         <section class='subwindow collapsed'>
 351                             <div class='subwindow-container'>
 352                                 <div class='subwindow-container-fix client-details-contents'>
 353                                 </div>
 354                             </div>
 355                         </section>
 356                         <section class='subwindow'>
 357                             <div class='subwindow-container'>
 358                                 <div class='subwindow-container-fix touch-scrollable scrollable-y'>
 359                                     <table class='client-list'>
 360                                         <thead>
 361                                             <tr>
 362                                                 <th>Name</th>
 363                                                 <th>Address</th>
 364                                                 <th>Phone</th>
 365                                             </tr>
 366                                         </thead>
 367                                         <tbody class='client-list-contents'>
 368                                         </tbody>
 369                                     </table>
 370                                 </div>
 371                             </div>
 372                         </section>
 373                     </div>
 374                 </section>
 375             </div>
 376         </div>
 377     </t>
 378
 379     <t t-name="PaymentScreen-Paymentlines">
 380         <t t-if="!paymentlines.length">
 381             <div class='paymentlines-empty'>
 382                 <div class='total'>
 383                     <t t-esc="widget.format_currency(order.getTotalTaxIncluded())"/>
 384                 </div>
 385                 <div class='message'>
 386                     Please select a payment method.
 387                 </div>
 388             </div>
 389         </t>
 390
 391         <t t-if="paymentlines.length">
 392             <table class='paymentlines'>
 393                 <colgroup>
 394                     <col class='due' />
 395                     <col class='tendered' />
 396                     <col class='change' />
 397                     <col class='method' />
 398                     <col class='controls' />
 399                 </colgroup>
 400                 <thead>
 401                     <tr class='label'>
 402                         <th>Due</th>
 403                         <th>Tendered</th>
 404                         <th>Change</th>
 405                         <th>Method</th>
 406                         <th></th>
 407                     </tr>
 408                 </thead>
 409                 <tbody>
 410                     <t t-foreach='paymentlines' t-as='line'>
 411                         <t t-if='line.selected'>
 412                             <tr class='paymentline selected'>
 413                                 <td class='col-due'> <t t-esc='widget.format_currency_no_symbol(order.getDueLeft(line))' /> </td>
 414                                 <td class='col-tendered edit'>
 415                                     <t t-esc='widget.inputbuffer' />
 416                                     <!-- <t t-esc='line.get_amount()' /> -->
 417                                 </td>
 418                                 <t t-if='order.getChange(line)'>
 419                                     <td class='col-change highlight' >
 420                                         <t t-esc='widget.format_currency_no_symbol(order.getChange(line))' />
 421                                     </td>
 422                                 </t>
 423                                 <t t-if='!order.getChange(line)'>
 424                                     <td class='col-change' ></td>
 425                                 </t>
 426
 427                                 <td class='col-name' > <t t-esc='line.name' /> </td>
 428                                 <td class='delete-button' t-att-data-cid='line.cid'> <i class='fa fa-times-circle' /> </td>
 429                             </tr>
 430                         </t>
 431                         <t t-if='!line.selected'>
 432                             <tr class='paymentline' t-att-data-cid='line.cid'>
 433                                 <td class='col-due'> <t t-esc='widget.format_currency_no_symbol(order.getDueLeft(line))' /> </td>
 434                                 <td class='col-tendered'> <t t-esc='widget.format_currency_no_symbol(line.get_amount())' /> </td>
 435                                 <td class='col-change'>
 436                                     <t t-if='order.getChange(line)'>
 437                                         <t t-esc='widget.format_currency_no_symbol(order.getChange(line))' />
 438                                      </t>
 439                                 </td>
 440                                 <td class='col-name'> <t t-esc='line.name' /> </td>
 441                                 <td class='delete-button' t-att-data-cid='line.cid'> <i class='fa fa-times-circle' /> </td>
 442                             </tr>
 443                         </t>
 444                     </t>
 445                 </tbody>
 446             </table>
 447         </t>
 448
 449     </t>
 450
 451     <t t-name="PaymentScreen-Numpad">
 452         <div class="numpad">
 453             <button class="input-button number-char" data-action='1'>1</button>
 454             <button class="input-button number-char" data-action='2'>2</button>
 455             <button class="input-button number-char" data-action='3'>3</button>
 456             <button class="mode-button" data-action='+10'>+10</button>
 457             <br />
 458             <button class="input-button number-char" data-action='4'>4</button>
 459             <button class="input-button number-char" data-action='5'>5</button>
 460             <button class="input-button number-char" data-action='6'>6</button>
 461             <button class="mode-button" data-action='+20'>+20</button>
 462             <br />
 463             <button class="input-button number-char" data-action='7'>7</button>
 464             <button class="input-button number-char" data-action='8'>8</button>
 465             <button class="input-button number-char" data-action='9'>9</button>
 466             <button class="mode-button" data-action='+50'>+50</button>
 467             <br />
 468             <button class="input-button numpad-char" data-action='CLEAR' >C</button>
 469             <button class="input-button number-char" data-action='0'>0</button>
 470             <button class="input-button number-char" data-action='.'>.</button>
 471             <button class="input-button numpad-backspace" data-action='BACKSPACE' >
 472                 <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
 473             </button>
 474             <br />
 475         </div>
 476     </t>
 477
 478     <t t-name="PaymentScreen-Paymentmethods">
 479         <div class='paymentmethods'>
 480             <t t-foreach="widget.pos.cashregisters" t-as="cashregister">
 481                 <div class="paymentmethod" t-att-data-id="cashregister.journal_id[0]">
 482                     <t t-esc="cashregister.journal_id[1]" />
 483                 </div>
 484             </t>
 485         </div>
 486     </t>
 487
 488     <t t-name="PaymentScreenWidget">
 489         <div class='payment-screen screen'>
 490             <div class='screen-content'>
 491                 <div class='top-content'>
 492                     <span class='button back'>
 493                         <i class='fa fa-angle-double-left'></i>
 494                         Back
 495                     </span>
 496                     <h1>Payment</h1>
 497                     <span class='button next'>
 498                         Validate
 499                         <i class='fa fa-angle-double-right'></i>
 500                     </span>
 501                 </div>
 502                 <div class='left-content pc40 touch-scrollable scrollable-y'>
 503
 504                     <div class='paymentmethods-container'>
 505                     </div>
 506
 507                 </div>
 508                 <div class='right-content pc60 touch-scrollable scrollable-y'>
 509
 510                     <section class='paymentlines-container'>
 511                     </section>
 512
 513                     <section class='payment-numpad'>
 514                     </section>
 515
 516                     <div class='payment-buttons'>
 517                         <t t-if='widget.pos.config.iface_invoicing'>
 518                             <div t-attf-class='button js_invoice #{ widget.pos.get_order().is_to_invoice() ? "highlight" : ""} '>
 519                                 <i class='fa fa-file-text-o' /> Invoice
 520                             </div>
 521                         </t>
 522                         <t t-if='widget.pos.config.iface_cashdrawer'>
 523                             <div class='button js_invoice'>
 524                                 <i class='fa fa-archive' /> Open Cashbox
 525                             </div>
 526                         </t>
 527                     </div>
 528
 529
 530                 </div>
 531             </div>
 532         </div>
 533
 534     </t>
 535
 536     <t t-name="ReceiptScreenWidget">
 537         <div class='receipt-screen screen'>
 538             <div class='screen-content'>
 539                 <div class='top-content'>
 540                     <h1>Receipt</h1>
 541                     <span class='button next'>
 542                         Next Order
 543                         <i class='fa fa-angle-double-right'></i>
 544                     </span>
 545                 </div>
 546                 <div class="centered-content">
 547                     <div class="button print">
 548                         <i class='fa fa-print'></i> Print
 549                     </div>
 550                     <div class="pos-receipt-container">
 551                     </div>
 552                 </div>
 553             </div>
 554         </div>
 555     </t>
 556
 557     <t t-name="XmlReceipt">
 558         <receipt align='center' width='40' value-thousands-separator='' >
 559             <t t-if='receipt.company.logo'>
 560                 <img t-att-src='receipt.company.logo' />
 561                 <br/>
 562             </t>
 563             <t t-if='!receipt.company.logo'>
 564                 <h1><t t-esc='receipt.company.name' /></h1>
 565                 <br/>
 566             </t>
 567             <div font='b'>
 568                 <t t-if='receipt.shop.name'>
 569                     <div><t t-esc='receipt.shop.name' /></div>
 570                 </t>
 571                 <t t-if='receipt.company.contact_address'>
 572                     <div><t t-esc='receipt.company.contact_address' /></div>
 573                 </t>
 574                 <t t-if='receipt.company.phone'>
 575                     <div>Tel:<t t-esc='receipt.company.phone' /></div>
 576                 </t>
 577                 <t t-if='receipt.company.vat'>
 578                     <div>VAT:<t t-esc='receipt.company.vat' /></div>
 579                 </t>
 580                 <t t-if='receipt.company.email'>
 581                     <div><t t-esc='receipt.company.email' /></div>
 582                 </t>
 583                 <t t-if='receipt.company.website'>
 584                     <div><t t-esc='receipt.company.website' /></div>
 585                 </t>
 586                 <t t-if='receipt.header'>
 587                     <div><t t-esc='receipt.header' /></div>
 588                 </t>
 589                 <t t-if='receipt.cashier'>
 590                     <div>--------------------------------</div>
 591                     <div>Served by <t t-esc='receipt.cashier' /></div>
 592                 </t>
 593             </div>
 594             <br /><br />
 595
 596             <!-- Orderlines -->
 597
 598             <div line-ratio='0.6'>
 599                 <t t-foreach='receipt.orderlines' t-as='line'>
 600                     <t t-set='simple' t-value='line.discount === 0 and line.unit_name === "Unit(s)" and line.quantity === 1' />
 601                     <t t-if='simple'>
 602                         <line>
 603                             <left><t t-esc='line.product_name' /></left>
 604                             <right><value><t t-esc='line.price_display' /></value></right>
 605                         </line>
 606                     </t>
 607                     <t t-if='!simple'>
 608                         <line><left><t t-esc='line.product_name' /></left></line>
 609                         <t t-if='line.discount !== 0'>
 610                             <line indent='1'><left>Discount: <t t-esc='line.discount' />%</left></line>
 611                         </t>
 612                         <line indent='1'>
 613                             <left>
 614                                 <value value-decimals='3' value-autoint='on'>
 615                                     <t t-esc='line.quantity' />
 616                                 </value>
 617                                 <t t-if='line.unit_name !== "Unit(s)"'>
 618                                     <t t-esc='line.unit_name' />
 619                                 </t>
 620                                 x
 621                                 <value value-decimals='2'>
 622                                     <t t-esc='line.price' />
 623                                 </value>
 624                             </left>
 625                             <right>
 626                                 <value><t t-esc='line.price_display' /></value>
 627                             </right>
 628                         </line>
 629                     </t>
 630                 </t>
 631             </div>
 632
 633             <!-- Subtotal -->
 634
 635             <t t-set='taxincluded' t-value='Math.abs(receipt.subtotal - receipt.total_with_tax) &lt;= 0.000001' />
 636             <t t-if='!taxincluded'>
 637                 <line><right>--------</right></line>
 638                 <line><left>Subtotal</left><right> <value><t t-esc="receipt.subtotal" /></value></right></line>
 639                 <t t-foreach='receipt.tax_details' t-as='tax'>
 640                     <line>
 641                         <left><t t-esc='tax.name' /></left>
 642                         <right><value><t t-esc='tax.amount' /></value></right>
 643                     </line>
 644                 </t>
 645             </t>
 646
 647             <!-- Total -->
 648
 649             <line><right>--------</right></line>
 650             <line size='double-height'>
 651                 <left><pre>        TOTAL</pre></left>
 652                 <right><value><t t-esc='receipt.total_with_tax' /></value></right>
 653             </line>
 654             <br/><br/>
 655
 656             <!-- Payment Lines -->
 657
 658             <t t-foreach='receipt.paymentlines' t-as='line'>
 659                 <line>
 660                     <left><t t-esc='line.journal' /></left>
 661                     <right><value><t t-esc='line.amount'/></value></right>
 662                 </line>
 663             </t>
 664             <br/>
 665
 666             <line size='double-height'>
 667                 <left><pre>        CHANGE</pre></left>
 668                 <right><value><t t-esc='receipt.change' /></value></right>
 669             </line>
 670             <br/>
 671
 672             <!-- Extra Payment Info -->
 673
 674             <t t-if='receipt.total_discount'>
 675                 <line>
 676                     <left>Discounts</left>
 677                     <right><value><t t-esc='receipt.total_discount'/></value></right>
 678                 </line>
 679             </t>
 680             <t t-if='taxincluded'>
 681                 <t t-foreach='receipt.tax_details' t-as='tax'>
 682                     <line>
 683                         <left><t t-esc='tax.name' /></left>
 684                         <right><value><t t-esc='tax.amount' /></value></right>
 685                     </line>
 686                 </t>
 687             </t>
 688
 689             <!-- Footer -->
 690             <t t-if='receipt.footer'>
 691                 <br/>
 692                 <pre><t t-esc='receipt.footer' /></pre>
 693                 <br/>
 694                 <br/>
 695             </t>
 696
 697             <br/>
 698             <div font='b'>
 699                 <div><t t-esc='receipt.name' /></div>
 700                 <div><t t-esc='receipt.date.localestring' /></div>
 701             </div>
 702
 703         </receipt>
 704     </t>
 705
 706     <t t-name="ChooseReceiptPopupWidget">
 707         <div class="modal-dialog">
 708             <div class="popup popup-receipt">
 709                 <p class="message">Welcome <t t-esc="widget.get_client_name()" /><br /> Choose your type of receipt:</p>
 710                 <div class = "button big-left receipt">
 711                     Ticket
 712                 </div>
 713                 <div class = "button big-right invoice">
 714                     Invoice
 715                 </div>
 716             </div>
 717         </div>
 718     </t>
 719
 720     <t t-name="FullscreenPopupWidget">
 721         <div class="modal-dialog">
 722             <div class="popup popup-fullscreen">
 723                 <p class="message">Fullscreen Setup</p>
 724
 725                 <t t-if='widget.ismobile()'>
 726                     <p class="comment">
 727                         The best way to make the point of sale fullscreen on mobile
 728                         devices is to add the point of sale to your home screen. On
 729                         iPhone and iPad this is done by tapping <img src='/point_of_sale/static/src/img/ios-share-icon.png' />
 730                         and then <i>Add to Homescreen</i>
 731                     </p>
 732                     <p class='comment'>
 733                         This also works on Android with the Chrome Beta Browser, using the <i>Add to Homescreen</i> option
 734                         in the browser's menu.
 735                     </p>
 736                     <p class='comment'>
 737                         If you want to work in fullscreen just this time tap the <i>Go Fullscreen</i> button.
 738                     </p>
 739                 </t>
 740
 741                 <t t-if='!widget.ismobile()'>
 742                     <p class="comment">
 743                         The best way to make the point of sale fullscreen on desktop
 744                         and laptops is to launch your browser in kiosk mode. Please
 745                         refer to your browser's documentation for the specific
 746                         instructions.
 747                     </p>
 748                     <p class="comment">
 749                         If you want to work in fullscreen just this time, click the <i> Go Fullscreen</i> button.
 750                     </p>
 751                 </t>
 752
 753                 <div class="footer">
 754                     <div class="button fullscreen">
 755                         Go Fullscreen
 756                     </div>
 757                     <div class="button cancel">
 758                         Cancel
 759                     </div>
 760                 </div>
 761             </div>
 762         </div>
 763     </t>
 764
 765     <t t-name="ErrorSessionPopupWidget">
 766         <div class="modal-dialog">
 767             <div class="popup popup-nosession">
 768                 <p class="message">Sorry, we could not create a session for this user.</p>
 769             </div>
 770         </div>
 771     </t>
 772
 773     <t t-name="ErrorInvoiceTransferPopupWidget">
 774         <div class="modal-dialog">
 775             <div class="popup popup-invoice">
 776                 <p class="message">The Order could not be sent to the server for invoicing. Invoices cannot be generated
 777                     in offline mode. Please check your internet connection and try again.</p>
 778                 <div class="footer">
 779                     <div class="button">
 780                         Ok
 781                     </div>
 782                 </div>
 783             </div>
 784         </div>
 785     </t>
 786
 787     <t t-name="ErrorPopupWidget">
 788         <div class="modal-dialog">
 789             <div class="popup popup-error">
 790                 <p class="message"><t t-esc=" widget.message || 'Error' " /></p>
 791                 <p class="comment"><t t-esc=" widget.comment || '' "/></p>
 792                 <div class="footer">
 793                     <div class="button">
 794                         Ok
 795                     </div>
 796                 </div>
 797             </div>
 798         </div>
 799     </t>
 800
 801     <t t-name="ErrorTracebackPopupWidget">
 802         <div class="modal-dialog">
 803             <div class="popup popup-error">
 804                 <p class="message"><t t-esc=" widget.message || 'Error' " /></p>
 805                 <p class="comment traceback"><t t-esc=" widget.comment || '' "/></p>
 806                 <div class="footer">
 807                     <div class="button">
 808                         Ok
 809                     </div>
 810                 </div>
 811             </div>
 812         </div>
 813     </t>
 814
 815     <t t-name="ErrorTracebackPopupWidget">
 816         <div class="modal-dialog">
 817             <div class="popup popup-error">
 818                 <p class="message"><t t-esc=" widget.message || 'Error' " /></p>
 819                 <p class="comment traceback"><t t-esc=" widget.comment || '' "/></p>
 820                 <div class="footer">
 821                     <div class="button">
 822                         Ok
 823                     </div>
 824                 </div>
 825             </div>
 826         </div>
 827     </t>
 828
 829     <t t-name="ErrorBarcodePopupWidget">
 830         <div class="modal-dialog">
 831             <div class="popup popup-barcode">
 832                 <p class="message">Unknown Barcode
 833                     <br />
 834                     <span class='barcode'></span>
 835                 </p>
 836                 <p class="comment">
 837                     The Point of Sale could not find any product, client, employee
 838                     or action associated with the scanned barcode.
 839                 </p>
 840                 <div class="footer">
 841                     <div class="button">
 842                         Ok
 843                     </div>
 844                 </div>
 845             </div>
 846         </div>
 847     </t>
 848
 849     <t t-name="ConfirmPopupWidget">
 850         <div class="modal-dialog">
 851             <div class="popup popup-confirm">
 852                 <p class="message"><t t-esc=" widget.message || 'Confirm ?' " /></p>
 853                 <p class="comment"><t t-esc=" widget.comment || '' "/></p>
 854                 <div class="footer">
 855                     <div class="button confirm">
 856                         Confirm
 857                     </div>
 858                     <div class="button cancel">
 859                         Cancel
 860                     </div>
 861                 </div>
 862             </div>
 863         </div>
 864     </t>
 865
 866     <t t-name="UnsentOrdersPopupWidget">
 867         <div class="modal-dialog">
 868             <div class="popup popup-unsent-orders">
 869                 <p class="message">Unsent Orders</p>
 870                 <t t-if='widget.pos.db.get_orders().length === 0'>
 871                     <p class='comment'>
 872                         There are no unsent orders
 873                     </p>
 874                 </t>
 875                 <t t-if='widget.pos.db.get_orders().length > 0'>
 876                     <p class='comment traceback'>
 877                         <t t-esc='JSON.stringify(widget.pos.db.get_orders(),null,2)' />
 878                     </p>
 879                 </t>
 880                 <div class="footer">
 881                     <div class="button confirm">
 882                         Ok
 883                     </div>
 884                 </div>
 885             </div>
 886         </div>
 887     </t>
 888
 889     <t t-name="Product">
 890         <span class='product' t-att-data-product-id="product.id">
 891             <div class="product-img">
 892                 <img t-att-src='image_url' />
 893                 <t t-if="!product.to_weight">
 894                     <span class="price-tag">
 895                         <t t-esc="widget.format_currency(product.price)"/>
 896                     </span>
 897                 </t>
 898                 <t t-if="product.to_weight">
 899                     <span class="price-tag">
 900                         <t t-esc="widget.format_currency(product.price)+'/Kg'"/>
 901                     </span>
 902                 </t>
 903             </div>
 904             <div class="product-name">
 905                 <t t-esc="product.display_name"/>
 906             </div>
 907         </span>
 908     </t>
 909
 910     <t t-name="Orderline">
 911         <li t-attf-class="orderline #{ line.selected ? 'selected' : '' }">
 912             <span class="product-name">
 913                 <t t-esc="line.get_product().display_name"/>
 914             </span>
 915             <span class="price">
 916                 <t t-esc="widget.format_currency(line.get_display_price())"/>
 917             </span>
 918             <ul class="info-list">
 919                 <t t-if="line.get_quantity_str() !== '1' || line.selected ">
 920                     <li class="info">
 921                         <em>
 922                             <t t-esc="line.get_quantity_str()" />
 923                         </em>
 924                         <t t-esc="line.get_unit().name" />
 925                         at
 926                         <t t-esc="widget.format_currency(line.get_unit_price())" />
 927                         /
 928                         <t t-esc="line.get_unit().name" />
 929                     </li>
 930                 </t>
 931                 <t t-if="line.get_discount_str() !== '0'">
 932                     <li class="info">
 933                         With a
 934                         <em>
 935                             <t t-esc="line.get_discount_str()" />%
 936                         </em>
 937                         discount
 938                     </li>
 939                 </t>
 940             </ul>
 941         </li>
 942     </t>
 943
 944     <t t-name="OrderWidget">
 945         <div class="order-container">
 946             <div class="order-scroller touch-scrollable">
 947                 <div class="order">
 948                     <ul class="orderlines">
 949                         <t t-if="orderlines.length === 0">
 950                             <li class="orderline empty">
 951                                 Your shopping cart is empty
 952                             </li>
 953                         </t>
 954                     </ul>
 955                     <div class="summary clearfix">
 956                         <div t-attf-class="line #{orderlines.length === 0 ? 'empty' : ''}">
 957                             <div class='entry total'>
 958                                 <span class="label">Total: </span> <span class="value">0.00 €</span>
 959                                 <div class='subentry'>Taxes: <span class="value">0.00€</span></div>
 960                             </div>
 961                         </div>
 962                     </div>
 963                 </div>
 964             </div>
 965         </div>
 966     </t>
 967
 968
 969
 970     <t t-name="DebugWidget">
 971         <div class="debug-widget">
 972             <h1>Debug Window</h1>
 973             <div class="toggle">▾</div>
 974             <div class="content">
 975                 <p class="category">Electronic Scale</p>
 976                 <ul>
 977                     <li><input type="text" class="weight"></input></li>
 978                     <li class="button set_weight">Set Weight</li>
 979                     <li class="button reset_weight">Reset</li>
 980                 </ul>
 981
 982                 <p class="category">Barcode Scanner</p>
 983                 <ul>
 984                     <li><input type="text" class="ean"></input></li>
 985                     <li class="button custom_ean">Custom Ean13</li>
 986                     <li class="button admin_badge">Admin Badge</li>
 987                     <li class="button client_badge">Client Badge</li>
 988                     <li class="button soda_33cl">Soda 33cl</li>
 989                     <li class="button oranges_kg">3.141Kg Oranges</li>
 990                     <li class="button lemon_price">1.54€ Lemon</li>
 991                     <li class="button unknown_product">Unknown Product</li>
 992                     <li class="button invalid_ean">Invalid Ean</li>
 993                     <li class="button reference">Reference</li>
 994                 </ul>
 995
 996                 <p class="category">Unsent Orders</p>
 997                 <ul>
 998                     <li class="button show_orders">Show All Unsent Orders</li>
 999                     <li class="button delete_orders">Delete All Unsent Orders</li>
1000                 </ul>
1001
1002                 <p class="category">Hardware Status</p>
1003                 <ul>
1004                     <li class="status weighting">Weighting</li>
1005                 </ul>
1006                 <p class="category">Hardware Events</p>
1007                 <ul>
1008                     <li class="event open_cashbox">Open Cashbox</li>
1009                     <li class="event print_receipt">Print Receipt</li>
1010                     <li class="event scale_read">Read Weighting Scale</li>
1011                 </ul>
1012             </div>
1013         </div>
1014     </t>
1015
1016
1017     <t t-name="Paymentline">
1018         <div t-attf-class="paymentline #{line.selected ? 'selected' : ''}">
1019             <div class='paymentline-name'>
1020                 <t t-esc="line.name"/>
1021             </div>
1022             <input class='paymentline-input' type="number" step="0.01" t-att-value="line.get_amount().toFixed(2)" />
1023             <span  class='paymentline-delete'>
1024                 <img src="/point_of_sale/static/src/img/search_reset.gif" />
1025             </span>
1026         </div>
1027     </t>
1028
1029     <t t-name="PaymentlineOld">
1030         <tr t-attf-class="paymentline #{line.selected ? 'selected' : ''}">
1031             <td class="paymentline-type">
1032                 <t t-esc="line.name"/>
1033             </td>
1034             <td class="paymentline-amount pos-right-align">
1035                 <input type="number" step="0.01" t-att-value="line.get_amount().toFixed(2)" />
1036                 <span class='delete-payment-line'><img src="/point_of_sale/static/src/img/search_reset.gif" /></span>
1037             </td>
1038         </tr>
1039     </t>
1040
1041     <t t-name="OrderButtonWidget">
1042         <span class="order-button select-order">
1043             <t t-if='widget.selected'>
1044                 <span class='order-sequence'>
1045                     <t t-esc='widget.order.sequence_number' />
1046                 </span>
1047                 <t t-if="widget.order.get_client()">
1048                     <i class='fa fa-user'/>
1049                 </t>
1050                 <t t-esc="(widget.order.get_client() ? widget.order.get_client_name()+' : ':'Unknown Customer: ') + widget.order.get('creationDate').toString('t')"/>
1051             </t>
1052             <t t-if='!widget.selected'>
1053                 <span class='order-sequence'>
1054                     <t t-esc='widget.order.sequence_number' />
1055                 </span>
1056             </t>
1057         </span>
1058     </t>
1059
1060     <t t-name="UsernameWidget">
1061         <span class="username">
1062             <t t-esc="widget.get_name()" />
1063         </span>
1064     </t>
1065
1066     <t t-name="PosTicket">
1067         <div class="pos-sale-ticket">
1068
1069             <div class="pos-center-align"><t t-esc="new Date().toString(Date.CultureInfo.formatPatterns.shortDate + ' ' +
1070                 Date.CultureInfo.formatPatterns.longTime)"/> <t t-esc="order.get('name')"/></div>
1071             <br />
1072             <t t-esc="widget.pos.company.name"/><br />
1073             Phone: <t t-esc="widget.pos.company.phone || ''"/><br />
1074             User: <t t-esc="widget.pos.cashier ? widget.pos.cashier.name : widget.pos.user.name"/><br />
1075             Shop: <t t-esc="widget.pos.shop.name"/><br />
1076             <br />
1077             <t t-if="widget.pos.config.receipt_header">
1078                 <div style='text-align:center'>
1079                     <t t-esc="widget.pos.config.receipt_header" />
1080                 </div>
1081                 <br />
1082             </t>
1083             <table>
1084                 <colgroup>
1085                     <col width='50%' />
1086                     <col width='25%' />
1087                     <col width='25%' />
1088                 </colgroup>
1089                 <tr t-foreach="orderlines" t-as="orderline">
1090                     <td>
1091                         <t t-esc="orderline.get_product().display_name"/>
1092                          <t t-if="orderline.get_discount() > 0">
1093                             <div class="pos-disc-font">
1094                                 With a <t t-esc="orderline.get_discount()"/>% discount
1095                             </div>
1096                         </t>
1097                     </td>
1098                     <td class="pos-right-align">
1099                         <t t-esc="orderline.get_quantity_str_with_unit()"/>
1100                     </td>
1101                     <td class="pos-right-align">
1102                         <t t-esc="widget.format_currency(orderline.get_display_price())"/>
1103                     </td>
1104                 </tr>
1105             </table>
1106             <br />
1107             <table>
1108                 <tr>
1109                     <td>Subtotal:</td>
1110                     <td class="pos-right-align">
1111                         <t t-esc="widget.format_currency(order.getSubtotal())"/>
1112                     </td>
1113                 </tr>
1114                 <t t-foreach="order.getTaxDetails()" t-as="taxdetail">
1115                     <tr>
1116                         <td><t t-esc="taxdetail.tax.name" /></td>
1117                         <td class="pos-right-align">
1118                             <t t-esc="widget.format_currency(taxdetail.amount)" />
1119                         </td>
1120                     </tr>
1121                 </t>
1122                 <tr>
1123                     <td>Discount:</td>
1124                     <td class="pos-right-align">
1125                         <t t-esc="widget.format_currency(order.getDiscountTotal())"/>
1126                     </td>
1127                 </tr>
1128                 <tr class="emph">
1129                     <td>Total:</td>
1130                     <td class="pos-right-align">
1131                         <t t-esc="widget.format_currency(order.getTotalTaxIncluded())"/>
1132                     </td>
1133                 </tr>
1134             </table>
1135             <br />
1136             <table>
1137                 <tr t-foreach="paymentlines" t-as="line">
1138                     <td>
1139                         <t t-esc="line.name"/>
1140                     </td>
1141                     <td class="pos-right-align">
1142                         <t t-esc="widget.format_currency(line.get_amount())"/>
1143                     </td>
1144                 </tr>
1145             </table>
1146             <br />
1147             <table>
1148                 <tr><td>Change:</td><td class="pos-right-align">
1149                     <t t-esc="widget.format_currency(order.getChange())"/>
1150                     </td></tr>
1151             </table>
1152             <t t-if="widget.pos.config.receipt_footer">
1153                 <br />
1154                 <div style='text-align:center'>
1155                     <t t-esc="widget.pos.config.receipt_footer" />
1156                 </div>
1157             </t>
1158         </div>
1159     </t>
1160
1161     <!-- Onscreen Keyboard :
1162          http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ -->
1163     <t t-name="OnscreenKeyboardFull">
1164         <div class="keyboard_frame">
1165             <ul class="keyboard full_keyboard">
1166                 <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
1167                 <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
1168                 <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
1169                 <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
1170                 <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
1171                 <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
1172                 <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
1173                 <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
1174                 <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
1175                 <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
1176                 <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
1177                 <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
1178                 <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
1179                 <li class="delete lastitem">delete</li>
1180                 <li class="tab firstitem">tab</li>
1181                 <li class="letter">q</li>
1182                 <li class="letter">w</li>
1183                 <li class="letter">e</li>
1184                 <li class="letter">r</li>
1185                 <li class="letter">t</li>
1186                 <li class="letter">y</li>
1187                 <li class="letter">u</li>
1188                 <li class="letter">i</li>
1189                 <li class="letter">o</li>
1190                 <li class="letter">p</li>
1191                 <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
1192                 <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
1193                 <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
1194                 <li class="capslock firstitem">caps lock</li>
1195                 <li class="letter">a</li>
1196                 <li class="letter">s</li>
1197                 <li class="letter">d</li>
1198                 <li class="letter">f</li>
1199                 <li class="letter">g</li>
1200                 <li class="letter">h</li>
1201                 <li class="letter">j</li>
1202                 <li class="letter">k</li>
1203                 <li class="letter">l</li>
1204                 <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
1205                 <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
1206                 <li class="return lastitem">return</li>
1207                 <li class="left-shift firstitem">shift</li>
1208                 <li class="letter">z</li>
1209                 <li class="letter">x</li>
1210                 <li class="letter">c</li>
1211                 <li class="letter">v</li>
1212                 <li class="letter">b</li>
1213                 <li class="letter">n</li>
1214                 <li class="letter">m</li>
1215                 <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
1216                 <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
1217                 <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
1218                 <li class="right-shift lastitem">shift</li>
1219                 <li class="space firstitem lastitem">&amp;nbsp;</li>
1220             </ul>
1221             <p class="close_button">close</p>
1222         </div>
1223     </t>
1224
1225     <t t-name="OnscreenKeyboardSimple">
1226         <div class="keyboard_frame">
1227             <ul class="keyboard simple_keyboard">
1228                 <li class="symbol firstitem row_qwerty"><span class="off">q</span><span class="on">1</span></li>
1229                 <li class="symbol"><span class="off">w</span><span class="on">2</span></li>
1230                 <li class="symbol"><span class="off">e</span><span class="on">3</span></li>
1231                 <li class="symbol"><span class="off">r</span><span class="on">4</span></li>
1232                 <li class="symbol"><span class="off">t</span><span class="on">5</span></li>
1233                 <li class="symbol"><span class="off">y</span><span class="on">6</span></li>
1234                 <li class="symbol"><span class="off">u</span><span class="on">7</span></li>
1235                 <li class="symbol"><span class="off">i</span><span class="on">8</span></li>
1236                 <li class="symbol"><span class="off">o</span><span class="on">9</span></li>
1237                 <li class="symbol lastitem"><span class="off">p</span><span class="on">0</span></li>
1238
1239                 <li class="symbol firstitem row_asdf"><span class="off">a</span><span class="on">@</span></li>
1240                 <li class="symbol"><span class="off">s</span><span class="on">#</span></li>
1241                 <li class="symbol"><span class="off">d</span><span class="on">%</span></li>
1242                 <li class="symbol"><span class="off">f</span><span class="on">*</span></li>
1243                 <li class="symbol"><span class="off">g</span><span class="on">/</span></li>
1244                 <li class="symbol"><span class="off">h</span><span class="on">-</span></li>
1245                 <li class="symbol"><span class="off">j</span><span class="on">+</span></li>
1246                 <li class="symbol"><span class="off">k</span><span class="on">(</span></li>
1247                 <li class="symbol lastitem"><span class="off">l</span><span class="on">)</span></li>
1248
1249                 <li class="symbol firstitem row_zxcv"><span class="off">z</span><span class="on">?</span></li>
1250                 <li class="symbol"><span class="off">x</span><span class="on">!</span></li>
1251                 <li class="symbol"><span class="off">c</span><span class="on">"</span></li>
1252                 <li class="symbol"><span class="off">v</span><span class="on">'</span></li>
1253                 <li class="symbol"><span class="off">b</span><span class="on">:</span></li>
1254                 <li class="symbol"><span class="off">n</span><span class="on">;</span></li>
1255                 <li class="symbol"><span class="off">m</span><span class="on">,</span></li>
1256                 <li class="delete lastitem">delete</li>
1257
1258                 <li class="numlock firstitem row_space"><span class="off">123</span><span class="on">ABC</span></li>
1259                 <li class="space">&amp;nbsp;</li>
1260                 <li class="symbol"><span class="off">.</span><span class="on">.</span></li>
1261                 <li class="return lastitem">return</li>
1262             </ul>
1263             <p class="close_button">close</p>
1264         </div>
1265     </t>
1266
1267 </templates>