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

<?xml version="1.0" encoding="UTF-8"?>
<!-- vim:fdl=1:
-->
<templates id="template" xml:space="preserve">
    <t t-name="PointOfSale">
    <div class="point-of-sale">
        <div id="topheader">
            <div id="branding">
                <img src="/point_of_sale/static/src/img/logo.png" />
            </div>
            <div id="loggedas">
                <span class="oe_pos_synch-notification"></span>
                <button>Close</button>
            </div>
            <div id="rightheader">
                <div id="order-selector">
                    <button id="neworder-button">+</button>
                    <ol id="orders"></ol>
                </div>
            </div>
        </div>
        <div id="content">

            <div id="leftpane">
                <div id="current-order">
                    <table>
                        <thead>
                            <tr>
                                <td>Product</td>
                                <td>Price</td>
                                <td>Disc (%)</td>
                                <td>Qty</td>
                                <td>Total</td>
                            </tr>
                        </thead>
                        <tbody id="current-order-content"></tbody>
                    </table>
                </div>
                <footer>
                    <ul id="amounts">
                        <li>
                            Subtotal:
                            <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"/>
                        </li>
                        <li>
                            Tax:
                            <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"/>
                        </li>
                        <li>
                            Total:
                            <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"/>
                        </li>
                    </ul>
                    <div id="paypad"></div>
                    <div id="numpad">
                        <button class="input-button number-char">1</button>
                        <button class="input-button number-char">2</button>
                        <button class="input-button number-char">3</button>
                        <button class="mode-button" data-mode='quantity'>Qty</button>
                        <br />
                        <button class="input-button number-char">4</button>
                        <button class="input-button number-char">5</button>
                        <button class="input-button number-char">6</button>
                        <button class="mode-button" data-mode='discount'>Disc</button>
                        <br />
                        <button class="input-button number-char">7</button>
                        <button class="input-button number-char">8</button>
                        <button class="input-button number-char">9</button>
                        <button class="mode-button" data-mode='list_price'>Price</button>
                        <br />
                        <button class="input-button" id="numpad-minus" >+/-</button>
                        <button class="input-button number-char">0</button>
                        <button class="input-button number-char">.</button>
                        <button class="input-button" id="numpad-backspace">
                            <img src="/point_of_sale/static/src/img/backspace.png" width="24" height="21" />
                        </button>
                        <br />
                    </div>
                </footer>
            </div>
            <div id="rightpane">
                <div id="products-screen" class="step-screen selected-step">
                    <div id="products-screen-categories"/>
                    <ol id="products-screen-ol" class="product-list"></ol>
                </div>
                <div id="payment-screen" class="step-screen" style="display:none">
                    <header><h2>Payment</h2></header>
                    <div class="pos-step-container">
                        <div class="pos-payment-container">
                            <br />
                            <table>
                                <tr>
                                    <td class="paymentline-type">Total:</td>
                                    <td class="paymentline-amount pos-right-align">
                                        <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
                                        <span id="payment-due-total"></span>
                                        <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
                                    </td>
                                </tr>
                            </table>
                            <table id="paymentlines">
                            </table>
                            <table>
                                <tr>
                                    <td class="paymentline-type">Paid:</td>
                                    <td class="paymentline-amount pos-right-align">
                                        <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
                                        <span id="payment-paid-total"></span>
                                        <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="paymentline-type">Change:</td>
                                    <td class="paymentline-amount pos-right-align">
                                        <t t-if="currency.position == 'before'" t-esc="currency.symbol"/>
                                        <span id="payment-remaining"></span>
                                        <t t-if="currency.position == 'after'" t-esc="currency.symbol"/>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="pos-payment-buttons">
                            <button class="oe-back-to-products">
                                <img src="/web/static/src/img/icons/gtk-go-back.png"></img>
                                Back to Products</button>
                            <button id="validate-order">
                                <img src="/web/static/src/img/icons/gtk-apply.png"></img>
                                Validate</button>
                        </div>
                    </div>
                </div>
                <span id="receipt-screen"></span>
            </div>
        </div>
    </div>
    </t>
    <t t-name="pos-synch-notification">
        <span>
        <a t-if="widget.nbr_pending &gt; 0" href="javascript:void(0)" class="oe_pos_synch-notification-button">
            <t t-esc="widget.nbr_pending"/> pending orders
        </a>
        </span>
    </t>
    <t t-name="pos-scan-warning">
        <div>The product could not be recognized. Please contact an employee.</div>
    </t>
    <t t-name="pos-close-warning">
        <div>There are pending operations that could not be saved into the database, are you sure you want to exit?</div>
    </t>
    <t t-name="pos-category-template">
        <header>
            <ol class="breadcrumb">
                <li class="oe-pos-categories-list">
                    <a href="javascript:void(0)">
                        <img src="/point_of_sale/static/src/img/home.png" class="homeimg" />
                    </a>
                </li>
                <t t-foreach="breadcrumb" t-as="category">
                    <li class="oe-pos-categories-list">
                        <img src="/point_of_sale/static/src/img/bc-arrow.png" class="bc-arrow" />
                        <a href="javascript:void(0)" t-att-data-category-id="category.id">
                            <t t-esc="category.name"/>
                        </a>
                    </li>
                </t>
            </ol>
            <div class="searchbox">
                <input placeholder="Search Products" />
                <img class="search-clear" src="/point_of_sale/static/src/img/search_reset.gif" />
            </div>
        </header>
        <div id="categories">
            <ol>
                <t t-foreach="categories" t-as="category">
                    <li class="oe-pos-categories-list">
                        <a href="javascript:void(0)" t-att-data-category-id="category.id" class="button">
                            <t t-esc="category.name"/>
                        </a>
                    </li>
                </t>
            </ol>
        </div>
    </t>
    <t t-name="pos-product-template">
        <a href="#">
            <div class="product-img">
                <img t-att-src="'data:image/gif;base64,'+ product_image_small" />
                <span class="price-tag">
                    <t t-esc="format_amount(list_price)"/>
                </span>
            </div>
            <div class="product-name">
                <t t-esc="name"/>
            </div>
        </a>
    </t>
    <t t-name="pos-orderline-template">
        <td>
            <t t-esc="name"/>
        </td>
        <td>
            <t t-esc="format_amount(list_price.toFixed(2))"/>
        </td>
        <td>
            <t t-esc="discount.toFixed(2)"/>
        </td>
        <td>
            <t t-esc="quantity.toFixed(0)"/>
        </td>
        <td>
            <t t-esc="format_amount((list_price * (1 - discount/100) * quantity).toFixed(2))"/>
        </td>
    </t>
    <t t-name="pos-paymentline-template">
        <td class="paymentline-type">
            <t t-esc="name"/>
        </td>
        <td class="paymentline-amount pos-right-align">
            <input type="text" t-att-value="amount.toFixed(2)" />
            <a href='javascript:void(0)' class='delete-payment-line'><img src="/point_of_sale/static/src/img/search_reset.gif" /></a>
        </td>
    </t>
    <t t-name="pos-payment-button-template">
        <button class="payment-button" t-att-cash-register-id="id">
            <t t-esc="name"/>
        </button>
        <br />
    </t>
    <t t-name="pos-order-selector-button-template">
        <button class="select-order"><t t-esc="widget.order.get('creationDate').toString('t')"/></button>
    </t>
    <t t-name="pos-receipt-view">
        <div id="receipt-screen" class="step-screen" style="display:none">
            <header><h2>Receipt</h2></header>
            <div class="pos-step-container">
                <div class="pos-receipt-container">
                </div>
                <div class='receipt-buttons'>
	                <button id="print-the-ticket">
	                    Print</button>
	                <button id="pos-finish-order">Next Order</button>
                </div>
            </div>
        </div>
    </t>
    <t t-name="pos-ticket">
        <div class="pos-sale-ticket">
            <div class="pos-right-align"><t t-esc="new Date().toString(Date.CultureInfo.formatPatterns.shortDate + ' ' +
                Date.CultureInfo.formatPatterns.longTime)"/></div>
            <br />
            <t t-esc="widget.company.name"/><br />
            Phone: <t t-esc="widget.company.phone || ''"/><br />
            User: <t t-esc="widget.user.name"/><br />
            Shop: <t t-esc="widget.shop_obj.name"/><br />
            <br />
            <table>
                <tr t-foreach="widget.currentOrderLines.toArray()" t-as="order">
                    <td>
                        <t t-esc="order.get('name')"/>
                    </td>
                    <td class="pos-right-align">
                        <t t-esc="order.get('quantity').toFixed(0)"/>
                    </td>
                    <td class="pos-right-align">
                        <t t-esc="format_amount((order.get('list_price') * (1 - order.get('discount')/100) * order.get('quantity')).toFixed(2))"/>
                    </td>
                </tr>
            </table>
            <br />
            <table>
                <tr><td>Tax:</td><td class="pos-right-align">
                    <t t-esc="format_amount(widget.currentOrder.getTax().toFixed(2))"/>
                    </td></tr>
                <tr><td>Total:</td><td class="pos-right-align">
                    <t t-esc="format_amount(widget.currentOrder.getTotal().toFixed(2))"/>
                    </td></tr>
            </table>
            <br />
            <table>
                <tr t-foreach="widget.currentPaymentLines.toArray()" t-as="pline">
                    <td>
                        <t t-esc="pline.get('journal_id')[1]"/>
                    </td>
                    <td class="pos-right-align">
                        <t t-esc="format_amount((pline.getAmount()).toFixed(2))"/>
                    </td>
                </tr>
            </table>
            <br />
            <table>
                <tr><td>Change:</td><td class="pos-right-align">
                    <t t-esc="format_amount((widget.currentOrder.getPaidTotal() - widget.currentOrder.getTotal()).toFixed(2))"/>
                    </td></tr>
            </table>
        </div>
    </t>
    <!-- Onscreen Keyboard : 
         http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ -->
    <t t-name="pos-onscreen-keyboard-full-template">
        <div class="keyboard_frame">
            <ul class="keyboard full_keyboard">
                <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
                <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
                <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
                <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
                <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
                <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
                <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
                <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
                <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
                <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
                <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
                <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
                <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
                <li class="delete lastitem">delete</li>
                <li class="tab firstitem">tab</li>
                <li class="letter">q</li>
                <li class="letter">w</li>
                <li class="letter">e</li>
                <li class="letter">r</li>
                <li class="letter">t</li>
                <li class="letter">y</li>
                <li class="letter">u</li>
                <li class="letter">i</li>
                <li class="letter">o</li>
                <li class="letter">p</li>
                <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
                <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
                <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
                <li class="capslock firstitem">caps lock</li>
                <li class="letter">a</li>
                <li class="letter">s</li>
                <li class="letter">d</li>
                <li class="letter">f</li>
                <li class="letter">g</li>
                <li class="letter">h</li>
                <li class="letter">j</li>
                <li class="letter">k</li>
                <li class="letter">l</li>
                <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
                <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
                <li class="return lastitem">return</li>
                <li class="left-shift firstitem">shift</li>
                <li class="letter">z</li>
                <li class="letter">x</li>
                <li class="letter">c</li>
                <li class="letter">v</li>
                <li class="letter">b</li>
                <li class="letter">n</li>
                <li class="letter">m</li>
                <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
                <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
                <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
                <li class="right-shift lastitem">shift</li>
                <li class="space firstitem lastitem">&amp;nbsp;</li>
            </ul>
            <p class="close_button">close</p>
        </div>
    </t>
    <t t-name="pos-onscreen-keyboard-simple-template">
        <div class="keyboard_frame">
            <ul class="keyboard simple_keyboard">
                <li class="symbol firstitem row_qwerty"><span class="off">q</span><span class="on">1</span></li>
                <li class="symbol"><span class="off">w</span><span class="on">2</span></li>
                <li class="symbol"><span class="off">e</span><span class="on">3</span></li>
                <li class="symbol"><span class="off">r</span><span class="on">4</span></li>
                <li class="symbol"><span class="off">t</span><span class="on">5</span></li>
                <li class="symbol"><span class="off">y</span><span class="on">6</span></li>
                <li class="symbol"><span class="off">u</span><span class="on">7</span></li>
                <li class="symbol"><span class="off">i</span><span class="on">8</span></li>
                <li class="symbol"><span class="off">o</span><span class="on">9</span></li>
                <li class="symbol lastitem"><span class="off">p</span><span class="on">0</span></li>

                <li class="symbol firstitem row_asdf"><span class="off">a</span><span class="on">@</span></li>
                <li class="symbol"><span class="off">s</span><span class="on">#</span></li>
                <li class="symbol"><span class="off">d</span><span class="on">%</span></li>
                <li class="symbol"><span class="off">f</span><span class="on">*</span></li>
                <li class="symbol"><span class="off">g</span><span class="on">/</span></li>
                <li class="symbol"><span class="off">h</span><span class="on">-</span></li>
                <li class="symbol"><span class="off">j</span><span class="on">+</span></li>
                <li class="symbol"><span class="off">k</span><span class="on">(</span></li>
                <li class="symbol lastitem"><span class="off">l</span><span class="on">)</span></li>

                <li class="symbol firstitem row_zxcv"><span class="off">z</span><span class="on">?</span></li>
                <li class="symbol"><span class="off">x</span><span class="on">!</span></li>
                <li class="symbol"><span class="off">c</span><span class="on">"</span></li>
                <li class="symbol"><span class="off">v</span><span class="on">'</span></li>
                <li class="symbol"><span class="off">b</span><span class="on">:</span></li>
                <li class="symbol"><span class="off">n</span><span class="on">;</span></li>
                <li class="symbol"><span class="off">m</span><span class="on">,</span></li>
                <li class="delete lastitem">delete</li>

                <li class="numlock firstitem row_space"><span class="off">123</span><span class="on">ABC</span></li>
                <li class="space">&amp;nbsp;</li>
                <li class="symbol"><span class="off">.</span><span class="on">.</span></li>
                <li class="return lastitem">return</li>
            </ul>
            <p class="close_button">close</p>
        </div>
    </t>
</templates>