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="PointOfSale">
   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="steps">
  12                 <input type="radio" id="products-step-button" class="step-button" data-step='products' name="radio" checked="checked" />
  13                 <label for="products-step-button">Products</label>
  14                 <img src="/point_of_sale/static/src/img/steps-arrow.png" />
  15                 <input type="radio" id="payment-step-button" class="step-button" data-step='payment' name="radio" />
  16                 <label for="payment-step-button">Payment</label>
  17                 <img src="/point_of_sale/static/src/img/steps-arrow.png" />
  18                 <input type="radio" id="receipt-step-button" class="step-button" data-step='receipt' name="radio" />
  19                 <label for="receipt-step-button">Receipt</label>
  20             </div>
  21             <div id="loggedas">
  22                 <span class="oe_pos_synch-notification"></span>
  23                 <button>Close</button>
  24             </div>
  25             <div id="rightheader">
  26                 <div id="order-selector">
  27                     <button id="neworder-button">+</button>
  28                     <ol id="orders"></ol>
  29                 </div>
  30             </div>
  31         </div>
  32         <div id="content">
  33
  34             <div id="leftpane">
  35                 <div id="current-order">
  36                     <table>
  37                         <thead>
  38                             <tr>
  39                                 <td>Product</td>
  40                                 <td>Price</td>
  41                                 <td>Disc (%)</td>
  42                                 <td>Qty</td>
  43                                 <td>Total</td>
  44                             </tr>
  45                         </thead>
  46                         <tbody id="current-order-content"></tbody>
  47                     </table>
  48                 </div>
  49                 <footer>
  50                     <ul id="amounts">
  51                         <li>
  52                             Subtotal:
  53                             <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"/>
  54                         </li>
  55                         <li>
  56                             Tax:
  57                             <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"/>
  58                         </li>
  59                         <li>
  60                             Total:
  61                             <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"/>
  62                         </li>
  63                     </ul>
  64                     <div id="paypad"></div>
  65                     <div id="numpad">
  66                         <button class="input-button number-char">1</button>
  67                         <button class="input-button number-char">2</button>
  68                         <button class="input-button number-char">3</button>
  69                         <button class="mode-button" data-mode='quantity'>Qty</button>
  70                         <br />
  71                         <button class="input-button number-char">4</button>
  72                         <button class="input-button number-char">5</button>
  73                         <button class="input-button number-char">6</button>
  74                         <button class="mode-button" data-mode='discount'>Disc</button>
  75                         <br />
  76                         <button class="input-button number-char">7</button>
  77                         <button class="input-button number-char">8</button>
  78                         <button class="input-button number-char">9</button>
  79                         <button class="mode-button" data-mode='list_price'>Price</button>
  80                         <br />
  81                         <button class="input-button" id="numpad-minus" >+/-</button>
  82                         <button class="input-button number-char">0</button>
  83                         <button class="input-button number-char">.</button>
  84                         <button class="input-button" id="numpad-backspace">
  85                             <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
  86                         </button>
  87                         <br />
  88                     </div>
  89                 </footer>
  90             </div>
  91             <div id="rightpane">
  92                 <div id="products-screen" class="step-screen selected-step">
  93                     <div id="products-screen-categories"/>
  94                     <ol id="products-screen-ol" class="product-list"></ol>
  95                 </div>
  96                 <div id="payment-screen" class="step-screen" style="display:none">
  97                     <header><h2>Payment</h2></header>
  98                     <div class="pos-step-container">
  99                         <div class="pos-payment-container">
 100                             <br />
 101                             <table>
 102                                 <tr>
 103                                     <td class="paymentline-type">Total:</td>
 104                                     <td class="paymentline-amount pos-rigth-align">
 105                                         <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
 106                                         <span id="payment-due-total"></span>
 107                                         <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
 108                                     </td>
 109                                 </tr>
 110                             </table>
 111                             <table id="paymentlines">
 112                             </table>
 113                             <table>
 114                                 <tr>
 115                                     <td class="paymentline-type">Paid:</td>
 116                                     <td class="paymentline-amount pos-rigth-align">
 117                                         <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
 118                                         <span id="payment-paid-total"></span>
 119                                         <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
 120                                     </td>
 121                                 </tr>
 122                                 <tr>
 123                                     <td class="paymentline-type">Change:</td>
 124                                     <td class="paymentline-amount pos-rigth-align">
 125                                         <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
 126                                         <span id="payment-remaining"></span>
 127                                         <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
 128                                     </td>
 129                                 </tr>
 130                             </table>
 131                         </div>
 132                         <div class="pos-payment-buttons">
 133                             <button class="oe-back-to-products">
 134                                 <img src="/web/static/src/img/icons/gtk-go-back.png"></img>
 135                                 Back to Products</button>
 136                             <button id="validate-order">
 137                                 <img src="/web/static/src/img/icons/gtk-apply.png"></img>
 138                                 Validate</button>
 139                         </div>
 140                     </div>
 141                 </div>
 142                 <span id="receipt-screen"></span>
 143             </div>
 144         </div>
 145     </div>
 146     </t>
 147     <t t-name="pos-synch-notification">
 148         <span>
 149         <a t-if="widget.nbr_pending &gt; 0" href="javascript:void(0)" class="oe_pos_synch-notification-button">
 150             <t t-esc="widget.nbr_pending"/> pending orders
 151         </a>
 152         </span>
 153     </t>
 154     <t t-name="pos-close-warning">
 155         <div>There are pending operations that could not be saved into the database, are you sure you want to exit?</div>
 156     </t>
 157     <t t-name="pos-category-template">
 158         <header>
 159             <ol class="breadcrumb">
 160                 <li class="oe-pos-categories-list">
 161                     <a href="javascript:void(0)">
 162                         <img src="/point_of_sale/static/src/img/home.png" class="homeimg" />
 163                     </a>
 164                 </li>
 165                 <t t-foreach="breadcrumb" t-as="category">
 166                     <li class="oe-pos-categories-list">
 167                         <img src="/point_of_sale/static/src/img/bc-arrow.png" class="bc-arrow" />
 168                         <a href="javascript:void(0)" t-att-data-category-id="category.id">
 169                             <t t-esc="category.name"/>
 170                         </a>
 171                     </li>
 172                 </t>
 173             </ol>
 174             <div class="searchbox">
 175                 <input placeholder="Search Products" />
 176                 <img class="search-clear" src="/point_of_sale/static/src/img/search_reset.gif" />
 177             </div>
 178         </header>
 179         <div id="categories">
 180             <ol>
 181                 <t t-foreach="categories" t-as="category">
 182                     <li class="oe-pos-categories-list">
 183                         <a href="javascript:void(0)" t-att-data-category-id="category.id" class="button">
 184                             <t t-esc="category.name"/>
 185                         </a>
 186                     </li>
 187                 </t>
 188             </ol>
 189         </div>
 190     </t>
 191     <t t-name="pos-product-template">
 192         <a href="#">
 193             <div class="product-img">
 194                 <img t-att-src="'data:image/gif;base64,'+ product_image" />
 195                 <span class="price-tag">
 196                     <t t-esc="format_amount(list_price)"/>
 197                 </span>
 198             </div>
 199             <div class="product-name">
 200                 <t t-esc="name"/>
 201             </div>
 202         </a>
 203     </t>
 204     <t t-name="pos-orderline-template">
 205         <td>
 206             <t t-esc="name"/>
 207         </td>
 208         <td>
 209             <t t-esc="format_amount(list_price.toFixed(2))"/>
 210         </td>
 211         <td>
 212             <t t-esc="discount.toFixed(2)"/>
 213         </td>
 214         <td>
 215             <t t-esc="quantity.toFixed(0)"/>
 216         </td>
 217         <td>
 218             <t t-esc="format_amount((list_price * (1 - discount/100) * quantity).toFixed(2))"/>
 219         </td>
 220     </t>
 221     <t t-name="pos-paymentline-template">
 222         <td class="paymentline-type">
 223             <t t-esc="name"/>
 224         </td>
 225         <td class="paymentline-amount pos-rigth-align">
 226             <input type="text" t-att-value="amount.toFixed(2)" />
 227             <a href='javascript:void(0)' class='delete-payment-line'><img src="/point_of_sale/static/src/img/search_reset.gif" /></a>
 228         </td>
 229     </t>
 230     <t t-name="pos-payment-button-template">
 231         <button class="payment-button" t-att-cash-register-id="id">
 232             <t t-esc="name"/>
 233         </button>
 234         <br />
 235     </t>
 236     <t t-name="pos-order-selector-button-template">
 237         <button class="select-order"><t t-esc="widget.order.get('creationDate').toString('t')"/></button>
 238     </t>
 239     <t t-name="pos-receipt-view">
 240         <div id="receipt-screen" class="step-screen" style="display:none">
 241             <header><h2>Receipt</h2></header>
 242             <div class="pos-step-container">
 243                 <div class="pos-receipt-container">
 244                 </div>
 245                 <div class='receipt-buttons'>
 246                         <button id="print-the-ticket">
 247                             Print</button>
 248                         <button id="pos-finish-order">Next Order</button>
 249                 </div>
 250             </div>
 251         </div>
 252     </t>
 253     <t t-name="pos-ticket">
 254         <div class="pos-sale-ticket">
 255             <div class="pos-rigth-align"><t t-esc="new Date().toString(Date.CultureInfo.formatPatterns.shortDate + ' ' +
 256                 Date.CultureInfo.formatPatterns.longTime)"/></div>
 257             <br />
 258             <t t-esc="widget.company.name"/><br />
 259             Phone: <t t-esc="widget.company.phone || ''"/><br />
 260             User: <t t-esc="widget.user.name"/><br />
 261             Shop: <t t-esc="widget.shop_obj.name"/><br />
 262             <br />
 263             <table>
 264                 <tr t-foreach="widget.currentOrderLines.toArray()" t-as="order">
 265                     <td>
 266                         <t t-esc="order.get('name')"/>
 267                     </td>
 268                     <td class="pos-rigth-align">
 269                         <t t-esc="order.get('quantity').toFixed(0)"/>
 270                     </td>
 271                     <td class="pos-rigth-align">
 272                         <t t-esc="format_amount((order.get('list_price') * (1 - order.get('discount')/100) * order.get('quantity')).toFixed(2))"/>
 273                     </td>
 274                 </tr>
 275             </table>
 276             <br />
 277             <table>
 278                 <tr><td>Tax:</td><td class="pos-rigth-align">
 279                     <t t-esc="format_amount(widget.currentOrder.getTax().toFixed(2))"/>
 280                     </td></tr>
 281                 <tr><td>Total:</td><td class="pos-rigth-align">
 282                     <t t-esc="format_amount(widget.currentOrder.getTotal().toFixed(2))"/>
 283                     </td></tr>
 284             </table>
 285             <br />
 286             <table>
 287                 <tr t-foreach="widget.currentPaymentLines.toArray()" t-as="pline">
 288                     <td>
 289                         <t t-esc="pline.get('journal_id')[1]"/>
 290                     </td>
 291                     <td class="pos-rigth-align">
 292                         <t t-esc="format_amount((pline.getAmount()).toFixed(2))"/>
 293                     </td>
 294                 </tr>
 295             </table>
 296             <br />
 297             <table>
 298                 <tr><td>Change:</td><td class="pos-rigth-align">
 299                     <t t-esc="format_amount((widget.currentOrder.getPaidTotal() - widget.currentOrder.getTotal()).toFixed(2))"/>
 300                     </td></tr>
 301             </table>
 302         </div>
 303     </t>
 304 </templates>