[imp] converted html in .html file to qweb

bzr revid: nicolas.vanhoren@openerp.com-20111004113932-m06ug2lscp8pubh6
This commit is contained in:
niv-openerp 2011-10-04 13:39:32 +02:00
parent 5b069503c8
commit 1d0e74cc9d
4 changed files with 231 additions and 183 deletions

View File

@ -189,7 +189,7 @@ li {
width: 29%; }
#paypad {
padding: 9px;
padding: 8px;
float: left;
text-align: center; }
#paypad button {

View File

@ -31,6 +31,8 @@
/* end */
var db = openerp.init();
var QWeb = db.web.qweb;
QWeb.add_template("/point_of_sale/static/src/xml/pos.xml");
/*
Local store access. Read once from localStorage upon construction and persist on every change.
There should only be one store active at any given time to ensure data consistency.
@ -154,6 +156,8 @@
})();
window.pos = new Pos;
$( function() {
var rendered = QWeb.render("PointOfSale");
$("body").html(rendered);
var App, CashRegister, CashRegisterCollection, Category, CategoryCollection, CategoryView, NumpadState, NumpadView, Order, OrderButtonView, OrderCollection, OrderView, Orderline, OrderlineCollection, OrderlineView, PaymentButtonView, PaymentView, Paymentline, PaymentlineCollection, PaymentlineView, PaypadView, Product, ProductCollection, ProductListView, ProductView, ReceiptLineView, ReceiptView, Shop, ShopView, StepsView;
$('#steps').buttonset();
/*
@ -581,7 +585,7 @@
PaymentButtonView.__super__.constructor.apply(this, arguments);
}
PaymentButtonView.prototype.template = _.template($('#payment-button-template').html());
PaymentButtonView.prototype.template = _.template(QWeb.render('pos-payment-button-template'));
PaymentButtonView.prototype.render = function() {
return $(this.el).html(this.template({
id: this.model.get('id'),
@ -629,7 +633,7 @@
}
OrderlineView.prototype.tagName = 'tr';
OrderlineView.prototype.template = _.template($('#orderline-template').html());
OrderlineView.prototype.template = _.template(QWeb.render('pos-orderline-template'));
OrderlineView.prototype.initialize = function(options) {
this.model.bind('change', __bind( function() {
$(this.el).hide();
@ -724,7 +728,7 @@
CategoryView.__super__.constructor.apply(this, arguments);
}
CategoryView.prototype.template = _.template($('#category-template').html());
CategoryView.prototype.template = _.template(QWeb.render('pos-category-template'));
CategoryView.prototype.render = function(ancestors, children) {
var c;
return $(this.el).html(this.template({
@ -758,7 +762,7 @@
ProductView.prototype.tagName = 'li';
ProductView.prototype.className = 'product';
ProductView.prototype.template = _.template($('#product-template').html());
ProductView.prototype.template = _.template(QWeb.render('pos-product-template'));
ProductView.prototype.events = {
'click a': 'addToOrder'
};
@ -810,7 +814,7 @@
PaymentlineView.prototype.tagName = 'li';
PaymentlineView.prototype.className = 'paymentline';
PaymentlineView.prototype.template = _.template($('#paymentline-template').html());
PaymentlineView.prototype.template = _.template(QWeb.render('pos-paymentline-template'));
PaymentlineView.prototype.initialize = function() {
return this.model.bind('change', this.render, this);
};
@ -918,7 +922,7 @@
ReceiptLineView.prototype.tagName = 'li';
ReceiptLineView.prototype.className = 'receiptline';
ReceiptLineView.prototype.template = _.template($('#receiptline-template').html());
ReceiptLineView.prototype.template = _.template(QWeb.render('pos-receiptline-template'));
ReceiptLineView.prototype.initialize = function() {
return this.model.bind('change', this.render, this);
};
@ -994,7 +998,7 @@
OrderButtonView.prototype.tagName = 'li';
OrderButtonView.prototype.className = 'order-selector-button';
OrderButtonView.prototype.template = _.template($('#order-selector-button-template').html());
OrderButtonView.prototype.template = _.template(QWeb.render('pos-order-selector-button-template'));
OrderButtonView.prototype.initialize = function(options) {
this.order = options.order;
this.shop = options.shop;
@ -1124,7 +1128,8 @@
return _ref = p.pos_categ_id[0], __indexOf.call(c.subtree, _ref) >= 0;
});
(this.shop.get('products')).reset(products);
$('.searchbox input').keyup( function() {
var self = this;
$('.searchbox input').keyup(function() {
var m, s;
s = $(this).val().toLowerCase();
if (s) {
@ -1136,7 +1141,7 @@
m = products;
$('.search-clear').fadeOut();
}
return (this.shop.get('products')).reset(m);
return (self.shop.get('products')).reset(m);
});
return $('.search-clear').click( function() {
(this.shop.get('products')).reset(products);

View File

@ -23,178 +23,5 @@
<body>
<div id="topheader">
<div id="branding"><img src="/point_of_sale/static/src/img/logo.png" /></div>
<div id="steps">
<input type="radio" id="products-step-button" class="step-button" data-step='products' name="radio" checked="checked" />
<label for="products-step-button">Products</label>
<img src="/point_of_sale/static/src/img/steps-arrow.png">
<input type="radio" id="payment-step-button" class="step-button" data-step='payment' name="radio" />
<label for="payment-step-button">Payment</label>
<img src="/point_of_sale/static/src/img/steps-arrow.png">
<input type="radio" id="receipt-step-button" class="step-button" data-step='receipt' name="radio" />
<label for="receipt-step-button">Receipt</label>
</div>
<div id="rightheader">
<div id="order-selector">
<button id="neworder-button">+</button>
<ol id="orders">
</ol>
</div>
</div>
<div id="loggedas">
<p>Minh Tran</p>
<button>Logout</button>
</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: <span id="subtotal">0</span> &euro;</li>
<li> Tax: <span id="tax">0</span> &euro;</li>
<li> Total: <span id="total">0</span> &euro;</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 selected-mode" 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>
<div id="payment-screen" class="step-screen" style="display:none">
<header>Payment</header>
<section>
<p>Due: <span id="payment-due-total"></span> &euro;</p>
<p>Paid: </p>
<ol id="paymentlines"></ol>
</section>
<footer>
<p>Total paid: <span id="payment-paid-total"></span> &euro;</p>
<p><span id="payment-remaining"></span> &euro;</p>
<p><button id="validate-order">Validate</button></p>
</footer>
</div>
<div id="receipt-screen" class="step-screen" style="display:none">
<header>Receipt</header>
<section>
<ol id="receiptlines"></ol>
</section>
<footer id="receipt-summary">
<ul>
<li>Total: <span id="receipt-summary-total"></span> &euro;</li>
<li>Tax: <span id="receipt-summary-tax"></span> &euro;</li>
<li>Change: <span id="receipt-summary-change"></span> &euro;</li>
</ul>
</footer>
<p><button id="print-receipt">Print receipt</button></p>
</div>
</div>
</div>
<script type="text/template" id="category-template">
<header>
<ol class="breadcrumb">
<li>
<a href="#"><img src="/point_of_sale/static/src/img/home.png" class="homeimg"></a>
</li>
<% _.each(breadcrumb, function(category) { %>
<li>
<img src="/point_of_sale/static/src/img/bc-arrow.png" class="bc-arrow">
<a href="#category/<%= category.id %>"><%= category.name %></a>
</li>
<% }); %>
</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">
<h4>Categories:</h4>
<ol>
<% _.each(categories, function(category) { %>
<li><a href="#category/<%= category.id %>" class="button"><%= category.name %></a></li>
<% }); %>
</ol>
</div>
</script>
<script type="text/template" id="product-template">
<a href="#">
<div class="product-img">
<img src="data:image/gif;base64,<%= img %>">
<span class="price-tag"><%= list_price %> &euro;</span>
</div>
<div class="product-name"><%= name %></div>
</a>
</script>
<script type="text/template" id="orderline-template">
<td><%= name %></td>
<td><%= list_price.toFixed(2) %> &euro;</td>
<td><%= discount.toFixed(2) %></td>
<td><%= quantity.toFixed(0) %></td>
<td><%= (list_price * (1 - discount/100) * quantity).toFixed(2) %> &euro;</td>
</script>
<script type="text/template" id="paymentline-template">
<span class="paymentline-type"><%= name %></span>
<span class="paymentline-amount"><input type="text" value="<%= amount.toFixed(2) %>" /></span>
</script>
<script type="text/template" id="receiptline-template">
<span class="receiptline-quantity"><%= quantity.toFixed(0) %></span>
<span class="receiptline-name"><%= name %></span>
<span class="receiptline-amount"><%= (list_price * (1 - discount/100) * quantity).toFixed(2) %> &euro;</span>
</script>
<script type="test/template" id="payment-button-template">
<button class="payment-button" cash-register-id="<%= id %>"><%= name %></button><br>
</script>
<script type="test/template" id="order-selector-button-template">
<button class="select-order">Order</button><button class="close-order">X</button>
</script>
</body>
</html>

View File

@ -0,0 +1,216 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- vim:fdl=1:
-->
<templates id="template" xml:space="preserve">
<t t-name="PointOfSale">
<div id="topheader">
<div id="branding">
<img src="/point_of_sale/static/src/img/logo.png" />
</div>
<div id="steps">
<input type="radio" id="products-step-button" class="step-button" data-step='products' name="radio" checked="checked" />
<label for="products-step-button">Products</label>
<img src="/point_of_sale/static/src/img/steps-arrow.png" />
<input type="radio" id="payment-step-button" class="step-button" data-step='payment' name="radio" />
<label for="payment-step-button">Payment</label>
<img src="/point_of_sale/static/src/img/steps-arrow.png" />
<input type="radio" id="receipt-step-button" class="step-button" data-step='receipt' name="radio" />
<label for="receipt-step-button">Receipt</label>
</div>
<div id="rightheader">
<div id="order-selector">
<button id="neworder-button">+</button>
<ol id="orders"></ol>
</div>
</div>
<div id="loggedas">
<p>Minh Tran</p>
<button>Logout</button>
</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:
<span id="subtotal">0</span>
</li>
<li>
Tax:
<span id="tax">0</span>
</li>
<li>
Total:
<span id="total">0</span>
</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 selected-mode" 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>
<div id="payment-screen" class="step-screen" style="display:none">
<header>Payment</header>
<section>
<p>
Due:
<span id="payment-due-total"></span>
</p>
<p>Paid:</p>
<ol id="paymentlines"></ol>
</section>
<footer>
<p>
Total paid:
<span id="payment-paid-total"></span>
</p>
<p>
<span id="payment-remaining"></span>
</p>
<p>
<button id="validate-order">Validate</button>
</p>
</footer>
</div>
<div id="receipt-screen" class="step-screen" style="display:none">
<header>Receipt</header>
<section>
<ol id="receiptlines"></ol>
</section>
<footer id="receipt-summary">
<ul>
<li>
Total:
<span id="receipt-summary-total"></span>
</li>
<li>
Tax:
<span id="receipt-summary-tax"></span>
</li>
<li>
Change:
<span id="receipt-summary-change"></span>
</li>
</ul>
</footer>
<p>
<button id="print-receipt">Print receipt</button>
</p>
</div>
</div>
</div>
</t>
<t t-name="pos-category-template">
<![CDATA[
<header>
<ol class="breadcrumb">
<li>
<a href="#"><img src="/point_of_sale/static/src/img/home.png" class="homeimg" /></a>
</li>
<% _.each(breadcrumb, function(category) { %>
<li>
<img src="/point_of_sale/static/src/img/bc-arrow.png" class="bc-arrow">
<a href="#category/<%= category.id %>"><%= category.name %></a>
</li>
<% }); %>
</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">
<h4>Categories:</h4>
<ol>
<% _.each(categories, function(category) { %>
<li><a href="#category/<%= category.id %>" class="button"><%= category.name %></a></li>
<% }); %>
</ol>
</div>
]]>
</t>
<t t-name="pos-product-template">
<![CDATA[
<a href="#">
<div class="product-img">
<img src="data:image/gif;base64,<%= img %>">
<span class="price-tag"><%= list_price %> €</span>
</div>
<div class="product-name"><%= name %></div>
</a>
]]>
</t>
<t t-name="pos-orderline-template">
<![CDATA[
<td><%= name %></td>
<td><%= list_price.toFixed(2) %> €</td>
<td><%= discount.toFixed(2) %></td>
<td><%= quantity.toFixed(0) %></td>
<td><%= (list_price * (1 - discount/100) * quantity).toFixed(2) %> €</td>
]]>
</t>
<t t-name="pos-paymentline-template">
<![CDATA[
<span class="paymentline-type"><%= name %></span>
<span class="paymentline-amount"><input type="text" value="<%= amount.toFixed(2) %>" /></span>
]]>
</t>
<t t-name="pos-receiptline-template">
<![CDATA[
<span class="receiptline-quantity"><%= quantity.toFixed(0) %></span>
<span class="receiptline-name"><%= name %></span>
<span class="receiptline-amount"><%= (list_price * (1 - discount/100) * quantity).toFixed(2) %> €</span>
]]>
</t>
<t t-name="pos-payment-button-template">
<![CDATA[
<button class="payment-button" cash-register-id="<%= id %>"><%= name %></button><br>
]]>
</t>
<t t-name="pos-order-selector-button-template">
<![CDATA[
<button class="select-order">Order</button><button class="close-order">X</button>
]]>
</t>
</templates>