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     <t t-name="POSWidget">
   6     <div class="point-of-sale">
   7         <div id="topheader">
   8             <div id="branding">
   9                 <img src="/point_of_sale/static/src/img/logo.png" />
  10             </div>
  11             <div id="loggedas">
  12                 <span class="oe_pos_synch-notification"></span>
  13                 <button>Close</button>
  14             </div>
  15             <div id="rightheader">
  16                 <div id="order-selector">
  17                     <button id="neworder-button">+</button>
  18                     <ol id="orders"></ol>
  19                 </div>
  20             </div>
  21         </div>
  22         <div id="content">
  23
  24             <div id="leftpane">
  25                 <div id="current-order">
  26                     <table>
  27                         <thead>
  28                             <tr>
  29                                 <td>Product</td>
  30                                 <td>Price</td>
  31                                 <td>Disc (%)</td>
  32                                 <td>Qty</td>
  33                                 <td>Total</td>
  34                             </tr>
  35                         </thead>
  36                         <tbody id="current-order-content"></tbody>
  37                     </table>
  38                 </div>
  39                 <footer>
  40                     <ul id="amounts">
  41                         <li>
  42                             Subtotal:
  43                             <t t-if="currency.position == 'before'" t-esc="currency.symbol"/> <span id="subtotal">0</span> <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
  44                         </li>
  45                         <li>
  46                             Tax:
  47                             <t t-if="currency.position == 'before'" t-esc="currency.symbol"/> <span id="tax">0</span> <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
  48                         </li>
  49                         <li>
  50                             Total:
  51                             <t t-if="currency.position == 'before'" t-esc="currency.symbol"/> <span id="total">0</span> <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
  52                         </li>
  53                     </ul>
  54                     <div id="paypad"></div>
  55                     <div id="numpad">
  56                         <button class="input-button number-char">1</button>
  57                         <button class="input-button number-char">2</button>
  58                         <button class="input-button number-char">3</button>
  59                         <button class="mode-button" data-mode='quantity'>Qty</button>
  60                         <br />
  61                         <button class="input-button number-char">4</button>
  62                         <button class="input-button number-char">5</button>
  63                         <button class="input-button number-char">6</button>
  64                         <button class="mode-button" data-mode='discount'>Disc</button>
  65                         <br />
  66                         <button class="input-button number-char">7</button>
  67                         <button class="input-button number-char">8</button>
  68                         <button class="input-button number-char">9</button>
  69                         <button class="mode-button" data-mode='list_price'>Price</button>
  70                         <br />
  71                         <button class="input-button" id="numpad-minus" >+/-</button>
  72                         <button class="input-button number-char">0</button>
  73                         <button class="input-button number-char">.</button>
  74                         <button class="input-button" id="numpad-backspace">
  75                             <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
  76                         </button>
  77                         <br />
  78                     </div>
  79                 </footer>
  80             </div>
  81             <div id="rightpane">
  82                 <!-- <div id="products-screen" class="step-screen selected-step">
  83                     <div id="products-screen-categories"/>
  84                     <ol id="products-screen-ol" class="product-list"></ol>
  85                 </div> -->
  86                 <!-- <div id="payment-screen" class="step-screen" style="display:none"> ... </div> -->
  87                 <!-- <span id="receipt-screen"></span> -->
  88             </div>
  89         </div>
  90     </div>
  91     </t>
  92     <t t-name="pos-synch-notification">
  93         <span>
  94         <a t-if="widget.nbr_pending &gt; 0" href="javascript:void(0)" class="oe_pos_synch-notification-button">
  95             <t t-esc="widget.nbr_pending"/> pending orders
  96         </a>
  97         </span>
  98     </t>
  99     <t t-name="pos-scan-warning">
 100         <div>The product could not be recognized. Please contact an employee.</div>
 101     </t>
 102     <t t-name="pos-close-warning">
 103         <div>There are pending operations that could not be saved into the database, are you sure you want to exit?</div>
 104     </t>
 105
 106     <!--   ************   SEARCH PRODUCT SCREEN   ************    -->
 107
 108     <t t-name="ProductCategoriesWidget">
 109         <header>
 110             <ol class="breadcrumb">
 111                 <li class="oe-pos-categories-list">
 112                     <a href="javascript:void(0)">
 113                         <img src="/point_of_sale/static/src/img/home.png" class="homeimg" />
 114                     </a>
 115                 </li>
 116                 <t t-foreach="breadcrumb" t-as="category">
 117                     <li class="oe-pos-categories-list">
 118                         <img src="/point_of_sale/static/src/img/bc-arrow.png" class="bc-arrow" />
 119                         <a href="javascript:void(0)" t-att-data-category-id="category.id">
 120                             <t t-esc="category.name"/>
 121                         </a>
 122                     </li>
 123                 </t>
 124             </ol>
 125             <div class="searchbox">
 126                 <input placeholder="Search Products" />
 127                 <img class="search-clear" src="/point_of_sale/static/src/img/search_reset.gif" />
 128             </div>
 129         </header>
 130         <div id="categories">
 131             <ol>
 132                 <t t-foreach="categories" t-as="category">
 133                     <li class="oe-pos-categories-list">
 134                         <a href="javascript:void(0)" t-att-data-category-id="category.id" class="button">
 135                             <t t-esc="category.name"/>
 136                         </a>
 137                     </li>
 138                 </t>
 139             </ol>
 140         </div>
 141     </t>
 142     <t t-name="ProductListWidget">
 143         <ol id="products-screen-ol" class="product-list">
 144         </ol>
 145     </t>
 146     <t t-name="SearchProductScreenWidget">
 147         <div id="products-screen">
 148             <span class="placeholder-ProductCategoriesWidget" />
 149             <span class="placeholder-ProductListWidget" />
 150         </div>
 151     </t>
 152
 153     <!--   ************   PAYMENT SCREEN   ************    -->
 154
 155     <t t-name="PaymentScreenWidget">
 156         <div id="payment-screen" class="step-screen">
 157             <header><h2>Payment</h2></header>
 158             <div class="pos-step-container">
 159                 <div class="pos-payment-container">
 160                     <br />
 161                     <table>
 162                         <tr>
 163                             <td class="paymentline-type">Total:</td>
 164                             <td class="paymentline-amount pos-right-align">
 165                                 <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
 166                                 <span id="payment-due-total"></span>
 167                                 <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
 168                             </td>
 169                         </tr>
 170                     </table>
 171                     <table id="paymentlines">
 172                     </table>
 173                     <table>
 174                         <tr>
 175                             <td class="paymentline-type">Paid:</td>
 176                             <td class="paymentline-amount pos-right-align">
 177                                 <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
 178                                 <span id="payment-paid-total"></span>
 179                                 <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
 180                             </td>
 181                         </tr>
 182                         <tr>
 183                             <td class="paymentline-type">Change:</td>
 184                             <td class="paymentline-amount pos-right-align">
 185                                 <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
 186                                 <span id="payment-remaining"></span>
 187                                 <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
 188                             </td>
 189                         </tr>
 190                     </table>
 191                 </div>
 192                 <div class="pos-payment-buttons">
 193                     <button class="oe-back-to-products">
 194                         <img src="/web/static/src/img/icons/gtk-go-back.png"></img>
 195                         Back to Products</button>
 196                     <button id="validate-order">
 197                         <img src="/web/static/src/img/icons/gtk-apply.png"></img>
 198                         Validate</button>
 199                 </div>
 200             </div>
 201         </div>
 202     </t> <!-- pos-payment-screen -->
 203
 204     <!--   ************   RECEIPT SCREEN   ************    -->
 205
 206     <t t-name="ReceiptScreenWidget">
 207         <div id="receipt-screen" class="step-screen" >
 208             <header><h2>Receipt</h2></header>
 209             <div class="pos-step-container">
 210                 <div class="pos-receipt-container">
 211                 </div>
 212                 <div class='receipt-buttons'>
 213                         <button id="print-the-ticket">
 214                             Print</button>
 215                         <button id="pos-finish-order">Next Order</button>
 216                 </div>
 217             </div>
 218         </div>
 219     </t>
 220
 221
 222     <t t-name="WelcomeScreenWidget">
 223         <div class="welcome-screen step-screen">
 224             <header><h2>Welcome</h2></header>
 225             <img src="/point_of_sale/static/src/img/scan.png" />
 226             <p> Please scan an item or your member card </p>
 227         </div>
 228     </t>
 229
 230
 231     <t t-name="ScanProductScreenWidget">
 232         <div class="scan-product-screen step-screen">
 233             <header><h2>Please scan an item</h2></header>
 234             <img src="/point_of_sale/static/src/img/scan.png" />
 235         </div>
 236     </t>
 237
 238     <t t-name="ClientPaymentScreenWidget">
 239         <div class="scan-product-screen step-screen">
 240             <header><h2>Payment</h2></header>
 241             <img src="/point_of_sale/static/src/img/bancontact.png" />
 242             <p>Please insert your card in the reader and follow the instructions to complete
 243             your purchase</p>
 244         </div>
 245     </t>
 246
 247     <t t-name="ScaleInviteScreenWidget">
 248         <div class="scale-invite-screen step-screen">
 249             <header><h2>Please put your product on the scale</h2></header>
 250             <img src="/point_of_sale/static/src/img/scale.png" />
 251         </div>
 252     </t>
 253
 254     <t t-name="ScaleProductSelectionScreenWidget">
 255         <div class="scale-product-selection-screen">
 256             <span class="placeholder-ProductCategoriesWidget" />
 257             <span class="placeholder-ProductListWidget" />
 258         </div>
 259     </t>
 260
 261     <t t-name="HelpPopupWidget">
 262         <div class="modal-dialog">
 263             <div class="popup popup-help">
 264                 <p class="message">Please be patient, help is on the way</p>
 265                 <div class="footer">
 266                     <div class="button">
 267                         Cancel
 268                     </div>
 269                 </div>
 270             </div>
 271         </div>
 272     </t>
 273     <t t-name="ReceiptPopupWidget">
 274         <div class="modal-dialog">
 275             <div class="popup popup-help">
 276                 <p class="message">Welcome Mr. FooBar <br /> Choose your type of receipt:</p>
 277                 <div class = "button big-left receipt">
 278                     Ticket
 279                 </div>
 280                 <div class = "button big-right invoice">
 281                     Invoice
 282                 </div>
 283                 <div class="footer">
 284                 </div>
 285             </div>
 286         </div>
 287     </t>
 288
 289     <t t-name="ErrorPopupWidget">
 290         <div class="modal-dialog">
 291             <div class="popup popup-help">
 292                 <p class="message">An unexpected error has occured.<br /> A technician is on the way</p>
 293             </div>
 294         </div>
 295     </t>
 296
 297     <t t-name="ProductWidget">
 298         <a href="#">
 299             <div class="product-img">
 300
 301                 <img t-att-src="'data:image/gif;base64,'+ product_image_small" />
 302                 <t t-if="!weight">
 303                     <span class="price-tag">
 304                         <t t-esc="format_amount(list_price)"/>
 305                     </span>
 306                 </t>
 307                 <t t-if="weight">
 308                     <span class="price-tag">
 309                         <t t-esc="format_amount(list_price)+'/Kg'"/>
 310                     </span>
 311                     <span class="price-subtag">
 312                         <t t-esc="format_amount(list_price *weight)"/>
 313                     </span>
 314                 </t>
 315             </div>
 316             <div class="product-name">
 317                 <t t-esc="name"/>
 318             </div>
 319         </a>
 320     </t>
 321     <t t-name="pos-orderline-template">
 322         <td>
 323             <t t-esc="name"/>
 324         </td>
 325         <td>
 326             <t t-esc="format_amount(list_price.toFixed(2))"/>
 327         </td>
 328         <td>
 329             <t t-esc="discount.toFixed(2)"/>
 330         </td>
 331         <td>
 332             <t t-if="weighted">
 333                 <t t-esc="Math.round(quantity*100)/100+' Kg'"/>
 334             </t>
 335             <t t-if="!weighted">
 336                 <t t-esc="Math.round(quantity*100)/100"/>
 337             </t>
 338         </td>
 339         <td>
 340             <t t-esc="format_amount((list_price * (1 - discount/100) * quantity).toFixed(2))"/>
 341         </td>
 342     </t>
 343     <t t-name="pos-paymentline-template">
 344         <td class="paymentline-type">
 345             <t t-esc="name"/>
 346         </td>
 347         <td class="paymentline-amount pos-right-align">
 348             <input type="text" t-att-value="amount.toFixed(2)" />
 349             <a href='javascript:void(0)' class='delete-payment-line'><img src="/point_of_sale/static/src/img/search_reset.gif" /></a>
 350         </td>
 351     </t>
 352     <t t-name="pos-payment-button-template">
 353         <button class="payment-button" t-att-cash-register-id="id">
 354             <t t-esc="name"/>
 355         </button>
 356         <br />
 357     </t>
 358     <t t-name="pos-order-selector-button-template">
 359         <button class="select-order"><t t-esc="widget.order.get('creationDate').toString('t')"/></button>
 360     </t>
 361     <t t-name="pos-ticket">
 362         <div class="pos-sale-ticket">
 363             <div class="pos-right-align"><t t-esc="new Date().toString(Date.CultureInfo.formatPatterns.shortDate + ' ' +
 364                 Date.CultureInfo.formatPatterns.longTime)"/></div>
 365             <br />
 366             <t t-esc="widget.company.name"/><br />
 367             Phone: <t t-esc="widget.company.phone || ''"/><br />
 368             User: <t t-esc="widget.user.name"/><br />
 369             Shop: <t t-esc="widget.shop_obj.name"/><br />
 370             <br />
 371             <table>
 372                 <tr t-foreach="widget.currentOrderLines.toArray()" t-as="order">
 373                     <td>
 374                         <t t-esc="order.get('name')"/>
 375                     </td>
 376                     <td class="pos-right-align">
 377                         <t t-esc="order.get('quantity').toFixed(0)"/>
 378                     </td>
 379                     <td class="pos-right-align">
 380                         <t t-esc="format_amount((order.get('list_price') * (1 - order.get('discount')/100) * order.get('quantity')).toFixed(2))"/>
 381                     </td>
 382                 </tr>
 383             </table>
 384             <br />
 385             <table>
 386                 <tr><td>Tax:</td><td class="pos-right-align">
 387                     <t t-esc="format_amount(widget.currentOrder.getTax().toFixed(2))"/>
 388                     </td></tr>
 389                 <tr><td>Total:</td><td class="pos-right-align">
 390                     <t t-esc="format_amount(widget.currentOrder.getTotal().toFixed(2))"/>
 391                     </td></tr>
 392             </table>
 393             <br />
 394             <table>
 395                 <tr t-foreach="widget.currentPaymentLines.toArray()" t-as="pline">
 396                     <td>
 397                         <t t-esc="pline.get('journal_id')[1]"/>
 398                     </td>
 399                     <td class="pos-right-align">
 400                         <t t-esc="format_amount((pline.getAmount()).toFixed(2))"/>
 401                     </td>
 402                 </tr>
 403             </table>
 404             <br />
 405             <table>
 406                 <tr><td>Change:</td><td class="pos-right-align">
 407                     <t t-esc="format_amount((widget.currentOrder.getPaidTotal() - widget.currentOrder.getTotal()).toFixed(2))"/>
 408                     </td></tr>
 409             </table>
 410         </div>
 411     </t>
 412     <t t-name="ActionBarWidget">
 413         <div class="pos-actionbar">
 414             <div class="pos-actionbar-left-pane">
 415                 <div class="button help-button">
 416                     <div class='icon'>
 417                         <img src="/point_of_sale/static/src/img/icons/png48/help.png" />
 418                         <div class='iconlabel'>Help</div>
 419                     </div>
 420                 </div>
 421                 <div class="button logout-button">
 422                     <div class='icon'>
 423                         <img src="/point_of_sale/static/src/img/icons/png48/system-log-out.png" />
 424                         <div class='iconlabel'>Exit</div>
 425                     </div>
 426                 </div>
 427                 <p class="total">
 428                     Total: <span class="value"> 0 </span>€
 429                 </p>
 430             </div>
 431             <ul class="pos-actionbar-button-list">
 432                 <!-- <li class="button">BUTTOOON</li>
 433                 <li class="button">JEEENKIINS</li>
 434                 <li class="button rightalign">ARGH</li> -->
 435             </ul>
 436         </div>
 437     </t>
 438
 439     <t t-name="pos-action-button">
 440         <li t-att-class=" 'button '+ (widget.rightalign  ? 'rightalign ' : '')">
 441             <div class='label'>
 442                 <t t-esc="widget.label" />
 443             </div>
 444         </li>
 445     </t>
 446     <t t-name="pos-action-button-with-icon">
 447         <li t-att-class=" 'button '+ (widget.rightalign  ? 'rightalign ' : '')">
 448             <div class='icon'>
 449                 <img t-att-src="widget.icon" />
 450                 <div class='iconlabel'><t t-esc="widget.label" /></div>
 451             </div>
 452         </li>
 453     </t>
 454     <!-- Onscreen Keyboard :
 455          http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ -->
 456     <t t-name="pos-onscreen-keyboard-full-template">
 457         <div class="keyboard_frame">
 458             <ul class="keyboard full_keyboard">
 459                 <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
 460                 <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
 461                 <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
 462                 <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
 463                 <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
 464                 <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
 465                 <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
 466                 <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
 467                 <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
 468                 <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
 469                 <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
 470                 <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
 471                 <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
 472                 <li class="delete lastitem">delete</li>
 473                 <li class="tab firstitem">tab</li>
 474                 <li class="letter">q</li>
 475                 <li class="letter">w</li>
 476                 <li class="letter">e</li>
 477                 <li class="letter">r</li>
 478                 <li class="letter">t</li>
 479                 <li class="letter">y</li>
 480                 <li class="letter">u</li>
 481                 <li class="letter">i</li>
 482                 <li class="letter">o</li>
 483                 <li class="letter">p</li>
 484                 <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
 485                 <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
 486                 <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
 487                 <li class="capslock firstitem">caps lock</li>
 488                 <li class="letter">a</li>
 489                 <li class="letter">s</li>
 490                 <li class="letter">d</li>
 491                 <li class="letter">f</li>
 492                 <li class="letter">g</li>
 493                 <li class="letter">h</li>
 494                 <li class="letter">j</li>
 495                 <li class="letter">k</li>
 496                 <li class="letter">l</li>
 497                 <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
 498                 <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
 499                 <li class="return lastitem">return</li>
 500                 <li class="left-shift firstitem">shift</li>
 501                 <li class="letter">z</li>
 502                 <li class="letter">x</li>
 503                 <li class="letter">c</li>
 504                 <li class="letter">v</li>
 505                 <li class="letter">b</li>
 506                 <li class="letter">n</li>
 507                 <li class="letter">m</li>
 508                 <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
 509                 <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
 510                 <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
 511                 <li class="right-shift lastitem">shift</li>
 512                 <li class="space firstitem lastitem">&amp;nbsp;</li>
 513             </ul>
 514             <p class="close_button">close</p>
 515         </div>
 516     </t>
 517     <t t-name="pos-onscreen-keyboard-simple-template">
 518         <div class="keyboard_frame">
 519             <ul class="keyboard simple_keyboard">
 520                 <li class="symbol firstitem row_qwerty"><span class="off">q</span><span class="on">1</span></li>
 521                 <li class="symbol"><span class="off">w</span><span class="on">2</span></li>
 522                 <li class="symbol"><span class="off">e</span><span class="on">3</span></li>
 523                 <li class="symbol"><span class="off">r</span><span class="on">4</span></li>
 524                 <li class="symbol"><span class="off">t</span><span class="on">5</span></li>
 525                 <li class="symbol"><span class="off">y</span><span class="on">6</span></li>
 526                 <li class="symbol"><span class="off">u</span><span class="on">7</span></li>
 527                 <li class="symbol"><span class="off">i</span><span class="on">8</span></li>
 528                 <li class="symbol"><span class="off">o</span><span class="on">9</span></li>
 529                 <li class="symbol lastitem"><span class="off">p</span><span class="on">0</span></li>
 530
 531                 <li class="symbol firstitem row_asdf"><span class="off">a</span><span class="on">@</span></li>
 532                 <li class="symbol"><span class="off">s</span><span class="on">#</span></li>
 533                 <li class="symbol"><span class="off">d</span><span class="on">%</span></li>
 534                 <li class="symbol"><span class="off">f</span><span class="on">*</span></li>
 535                 <li class="symbol"><span class="off">g</span><span class="on">/</span></li>
 536                 <li class="symbol"><span class="off">h</span><span class="on">-</span></li>
 537                 <li class="symbol"><span class="off">j</span><span class="on">+</span></li>
 538                 <li class="symbol"><span class="off">k</span><span class="on">(</span></li>
 539                 <li class="symbol lastitem"><span class="off">l</span><span class="on">)</span></li>
 540
 541                 <li class="symbol firstitem row_zxcv"><span class="off">z</span><span class="on">?</span></li>
 542                 <li class="symbol"><span class="off">x</span><span class="on">!</span></li>
 543                 <li class="symbol"><span class="off">c</span><span class="on">"</span></li>
 544                 <li class="symbol"><span class="off">v</span><span class="on">'</span></li>
 545                 <li class="symbol"><span class="off">b</span><span class="on">:</span></li>
 546                 <li class="symbol"><span class="off">n</span><span class="on">;</span></li>
 547                 <li class="symbol"><span class="off">m</span><span class="on">,</span></li>
 548                 <li class="delete lastitem">delete</li>
 549
 550                 <li class="numlock firstitem row_space"><span class="off">123</span><span class="on">ABC</span></li>
 551                 <li class="space">&amp;nbsp;</li>
 552                 <li class="symbol"><span class="off">.</span><span class="on">.</span></li>
 553                 <li class="return lastitem">return</li>
 554             </ul>
 555             <p class="close_button">close</p>
 556         </div>
 557     </t>
 558 </templates>