[IMP] point_of_sale: new order widget
bzr revid: fva@openerp.com-20120622165355-jmex9f0vupidambm
This commit is contained in:
Frédéric van der Essen
parent
f68c7f936f
commit
40405d11eb
|
|
@ -10,6 +10,7 @@
|
|||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
.point-of-sale .loader{
|
||||
background-color: #222;
|
||||
|
|
@ -141,7 +142,7 @@
|
|||
/*height: 87%;
|
||||
width: 440px;
|
||||
position: relative;*/
|
||||
border-right: solid 1px #afafb6;
|
||||
border-right: solid 1px #CECBCB;
|
||||
background-color: white;
|
||||
}
|
||||
.point-of-sale #leftpane footer {
|
||||
|
|
@ -149,69 +150,9 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #e0e0e0;
|
||||
background-image: url(../img/headerbackground.jpg);
|
||||
background: #F0EEEE;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.point-of-sale #current-order {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 271px;
|
||||
overflow: auto;
|
||||
}
|
||||
.point-of-sale #current-order thead {
|
||||
background-color: #cccccc;
|
||||
background-image: url(../img/headerbackground.jpg);
|
||||
border: 0px;
|
||||
font-size: 12px;
|
||||
width: 440px;
|
||||
}
|
||||
.point-of-sale #current-order thead td {
|
||||
text-align: center;
|
||||
padding: 8px 0px;
|
||||
min-width: 40px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.point-of-sale #current-order td {
|
||||
padding: 6px 4px;
|
||||
font-size: 11px;
|
||||
text-align: right;
|
||||
min-width: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.point-of-sale #current-order td:first-child {
|
||||
width: 320px;
|
||||
padding: 6px;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.point-of-sale #current-order td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.point-of-sale #current-order tr.selected {
|
||||
background-color: #e9eaf2;
|
||||
}
|
||||
.point-of-sale #current-order tr.selected td {
|
||||
border-top: 2px solid #d5d6e0;
|
||||
border-bottom: 1px solid #d5d6e0;
|
||||
padding-top: 5px;
|
||||
color: #555555;
|
||||
}
|
||||
.point-of-sale #amounts {
|
||||
background: white;
|
||||
border-bottom: solid 1px #d2d2d2;
|
||||
border-top: solid 1px #e9eaec;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
-webkit-margin-before: 0;
|
||||
-webkit-margin-after: 0;
|
||||
}
|
||||
.point-of-sale #amounts li {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
width: 29%;
|
||||
}
|
||||
.point-of-sale #paypad {
|
||||
padding: 8px 4px 8px 8px;
|
||||
display: inline-block;
|
||||
|
|
@ -275,6 +216,7 @@
|
|||
left: 440px;
|
||||
right: 0;
|
||||
vertical-align: top;
|
||||
/*border-left: solid 1px #FFF;*/
|
||||
}
|
||||
.point-of-sale #rightpane header {
|
||||
padding: 0;
|
||||
|
|
@ -364,10 +306,11 @@
|
|||
font-size: 12px;
|
||||
}
|
||||
.point-of-sale .product {
|
||||
position:relative;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
margin: 10px;
|
||||
margin: 5px;
|
||||
max-width: 120px;
|
||||
background:#fff;
|
||||
border: 1px solid #fff;
|
||||
|
|
@ -379,7 +322,7 @@
|
|||
-box-shadow: 0px 1px 8px rgba(0,0,0,0.9);
|
||||
-webkit-filter: blur(3px);
|
||||
}
|
||||
.point-of-sale .product-img {
|
||||
.point-of-sale .product .product-img {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
|
|
@ -387,7 +330,7 @@
|
|||
text-align: center;
|
||||
-webkit-filter: blur(3px);
|
||||
}
|
||||
.point-of-sale .price-tag {
|
||||
.point-of-sale .product .price-tag {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
|
|
@ -399,7 +342,7 @@
|
|||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.point-of-sale .price-subtag {
|
||||
.point-of-sale .product .price-subtag {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 2px;
|
||||
|
|
@ -411,8 +354,15 @@
|
|||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.point-of-sale .product-name {
|
||||
.point-of-sale .product .product-name {
|
||||
position: absolute;
|
||||
-webkit-box-sizing: border-box;
|
||||
bottom:0;
|
||||
top:auto;
|
||||
width:100%;
|
||||
background: -webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1));
|
||||
padding: 3px;
|
||||
padding-top:15px;
|
||||
}
|
||||
.point-of-sale #login-form label, .point-of-sale #login-form input {
|
||||
display: block;
|
||||
|
|
@ -457,11 +407,13 @@
|
|||
}
|
||||
|
||||
.point-of-sale .screen .header-row {
|
||||
border:none;
|
||||
width:100%;
|
||||
height:0px;
|
||||
}
|
||||
|
||||
.point-of-sale .screen .header-cell{
|
||||
border:none;
|
||||
width:100%;
|
||||
height:0px;
|
||||
}
|
||||
|
|
@ -562,6 +514,70 @@
|
|||
}
|
||||
}
|
||||
|
||||
.point-of-sale .order-container{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 229px;
|
||||
width:100%;
|
||||
background: #F0EEEE;
|
||||
overflow:hidden;
|
||||
}
|
||||
.point-of-sale .order{
|
||||
background: #FFF;
|
||||
background: -webkit-linear-gradient(0deg,rgba(245,245,245,1),rgba(255,255,255,1), rgba(245,245,245,1));
|
||||
padding-bottom:15px;
|
||||
padding-top:15px;
|
||||
margin-left:16px;
|
||||
margin-right:16px;
|
||||
margin-top:16px;
|
||||
-webkit-box-shadow: 0px 5px 16px rgba(0,0,0, 0.3);
|
||||
|
||||
}
|
||||
.point-of-sale .orderline{
|
||||
width:100%;
|
||||
margin:0px;
|
||||
padding-top:3px;
|
||||
padding-bottom:10px;
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: border-box;
|
||||
-webkit-transition: background 250ms ease-in-out;
|
||||
}
|
||||
.point-of-sale .orderline:hover{
|
||||
background: rgba(140,143,183,0.05);
|
||||
-webkit-transition: background 50ms ease-in-out;
|
||||
}
|
||||
|
||||
.point-of-sale .orderline.selected{
|
||||
background: rgba(140,143,183,0.2);
|
||||
-webkit-transition: background 250ms ease-in-out;
|
||||
cursor: default;
|
||||
}
|
||||
.point-of-sale .orderline .product-name{
|
||||
padding:0;
|
||||
display:inline-block;
|
||||
font-size:18px;
|
||||
font-weight: bold;
|
||||
width:80%;
|
||||
overflow:hidden;
|
||||
}
|
||||
.point-of-sale .orderline .price{
|
||||
padding:0;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
float:right;
|
||||
}
|
||||
.point-of-sale .orderline .info-list{
|
||||
color: #888;
|
||||
margin-left:10px;
|
||||
}
|
||||
.point-of-sale .orderline .info-list em{
|
||||
color: #777;
|
||||
font-weight: bold;
|
||||
font-style:normal;
|
||||
}
|
||||
|
||||
/* ----------------------- ACTION BAR ---------------------- */
|
||||
|
||||
.point-of-sale .pos-actionbar{
|
||||
|
|
@ -771,6 +787,9 @@
|
|||
text-shadow: rgba(255,255,255,0.5) 0px 0px 10px;
|
||||
-webkit-transition: all 250ms ease-in-out;
|
||||
}
|
||||
.point-of-sale .scrollbar .button:hover{
|
||||
text-shadow: rgba(255,255,255,0.8) 0px 0px 15px;
|
||||
}
|
||||
.point-of-sale .scrollbar .button.disabled{
|
||||
background: rgba(0,0,0,0.3);
|
||||
color:rgba(255,255,255,0.5);
|
||||
|
|
|
|||
|
|
@ -493,6 +493,7 @@ function openerp_pos_models(instance, module){ //module is instance.point_of_sal
|
|||
discount: 0,
|
||||
weighted: false,
|
||||
product_type: 'unit',
|
||||
unit: 'Unit',
|
||||
},
|
||||
initialize: function(attributes) {
|
||||
this.pos = attributes.pos;
|
||||
|
|
|
|||
|
|
@ -92,30 +92,42 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
|
|||
this.$element.remove();
|
||||
}, this));
|
||||
this.order = options.order;
|
||||
},
|
||||
start: function() {
|
||||
this.$element.click(_.bind(this.clickHandler, this));
|
||||
this.refresh();
|
||||
|
||||
if(options.selected){
|
||||
this.select();
|
||||
}else{
|
||||
this.selected = false;
|
||||
}
|
||||
},
|
||||
clickHandler: function() {
|
||||
this.select();
|
||||
},
|
||||
renderElement: function() {
|
||||
this._super();
|
||||
this.select();
|
||||
this.$element.click(_.bind(this.clickHandler, this));
|
||||
if(this.selected){
|
||||
this.$element.addClass('selected');
|
||||
}
|
||||
},
|
||||
refresh: function() {
|
||||
refresh: function(){
|
||||
this.renderElement();
|
||||
var heights = _.map(this.$element.prevAll(), function(el) {return $(el).outerHeight();});
|
||||
heights.push($('#current-order thead').outerHeight());
|
||||
var position = _.reduce(heights, function(memo, num){ return memo + num; }, 0);
|
||||
$('#current-order').scrollTop(position);
|
||||
},
|
||||
select: function() {
|
||||
$('tr.selected').removeClass('selected');
|
||||
this.$element.addClass('selected');
|
||||
console.log('SELECT:',this);
|
||||
if(this.order.selected_widget){
|
||||
this.order.selected_widget.deselect();
|
||||
}
|
||||
this.selected = true;
|
||||
this.order.selected_widget = this;
|
||||
this.order.selected = this.model;
|
||||
this.on_selected();
|
||||
this.$element.addClass('selected');
|
||||
},
|
||||
deselect: function(){
|
||||
this.selected = false;
|
||||
this.order.selected_widget = null;
|
||||
this.order.selected = null;
|
||||
this.$element.removeClass('selected');
|
||||
},
|
||||
on_selected: function() {},
|
||||
});
|
||||
|
|
@ -163,12 +175,12 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
|
|||
var line = new module.OrderlineWidget(null, {
|
||||
model: newLine,
|
||||
pos: this.pos,
|
||||
order: this.pos.get('selectedOrder')
|
||||
order: this.pos.get('selectedOrder'),
|
||||
selected:true,
|
||||
});
|
||||
line.on_selected.add(_.bind(this.selected_line, this));
|
||||
this.selected_line();
|
||||
line.appendTo(this.$element.find('#current-order-content'));
|
||||
this.update_summary();
|
||||
line.appendTo(this.$('.order'));
|
||||
},
|
||||
selected_line: function() {
|
||||
var reset = false;
|
||||
|
|
@ -178,32 +190,20 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
|
|||
this.currentSelected = this.pos.get('selectedOrder').selected;
|
||||
if (reset && this.numpadState)
|
||||
this.numpadState.reset();
|
||||
this.update_summary();
|
||||
},
|
||||
renderElement: function() {
|
||||
this._super();
|
||||
var $content = this.$element.find('#current-order-content');
|
||||
var $content = this.$('.order');
|
||||
$content.empty();
|
||||
this.currentOrderLines.each(_.bind( function(orderLine) {
|
||||
var line = new module.OrderlineWidget(null, {
|
||||
model: orderLine,
|
||||
order: this.pos.get('selectedOrder')
|
||||
order: this.pos.get('selectedOrder'),
|
||||
selected:true,
|
||||
});
|
||||
line.on_selected.add(_.bind(this.selected_line, this));
|
||||
line.appendTo($content);
|
||||
}, this));
|
||||
this.update_summary();
|
||||
},
|
||||
update_summary: function() {
|
||||
var currentOrder, tax, total, totalTaxExcluded;
|
||||
currentOrder = this.pos.get('selectedOrder');
|
||||
total = currentOrder.getTotal();
|
||||
totalTaxExcluded = currentOrder.getTotalTaxExcluded();
|
||||
tax = currentOrder.getTax();
|
||||
this.pos_widget.action_bar.set_total_value(Math.round(total*100)/100);
|
||||
$('#subtotal').html(totalTaxExcluded.toFixed(2)).hide().fadeIn();
|
||||
$('#tax').html(tax.toFixed(2)).hide().fadeIn();
|
||||
$('#total').html(total.toFixed(2)).hide().fadeIn();
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -25,33 +25,8 @@
|
|||
<div id="leftpane">
|
||||
<div id="placeholder-OrderWidget"></div>
|
||||
<footer>
|
||||
|
||||
<ul id="amounts">
|
||||
<li>
|
||||
Subtotal:
|
||||
<t t-if="widget.currency.position === 'before'" t-esc="widget.currency.symbol"/>
|
||||
<span id="subtotal">0</span>
|
||||
<t t-if="widget.currency.position === 'after'" t-esc="widget.currency.symbol"/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Tax:
|
||||
<t t-if="widget.currency.position === 'before'" t-esc="widget.currency.symbol"/>
|
||||
<span id="tax">0</span>
|
||||
<t t-if="widget.currency.position === 'after'" t-esc="widget.currency.symbol"/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Total:
|
||||
<t t-if="widget.currency.position === 'before'" t-esc="widget.currency.symbol"/>
|
||||
<span id="total">0</span>
|
||||
<t t-if="widget.currency.position === 'after'" t-esc="widget.currency.symbol"/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="placeholder-PaypadWidget"></div>
|
||||
<div id="placeholder-NumpadWidget"></div>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
<div id="rightpane">
|
||||
|
|
@ -63,22 +38,6 @@
|
|||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="OrderWidget">
|
||||
<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>
|
||||
</t>
|
||||
|
||||
<t t-name="SynchNotificationWidget">
|
||||
<span>
|
||||
|
|
@ -371,46 +330,44 @@
|
|||
</div>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="OrderlineWidget">
|
||||
<tr>
|
||||
<td>
|
||||
<t t-esc="widget.model.get('name')"/>
|
||||
</td>
|
||||
<td>
|
||||
<t t-esc="widget.format_currency(widget.model.get('list_price'))"/>
|
||||
</td>
|
||||
<td>
|
||||
<t t-esc="widget.model.get('discount').toFixed(2)"/>
|
||||
</td>
|
||||
<td>
|
||||
<t t-if="widget.model.get('weighted')">
|
||||
<t t-esc="Math.round(widget.model.get('quantity')*100)/100+' Kg'"/>
|
||||
</t>
|
||||
<t t-if="!widget.model.get('weighted')">
|
||||
<t t-esc="Math.round(widget.model.get('quantity')*100)/100"/>
|
||||
</t>
|
||||
</td>
|
||||
<td>
|
||||
<t t-esc="widget.format_currency(widget.model.get('list_price') * (1 - widget.model.get('discount')/100) * widget.model.get('quantity'))"/>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<t t-name="OrderWidget">
|
||||
<div class="order-container">
|
||||
<ul class="order">
|
||||
</ul>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="OrderlineWidget2">
|
||||
<t t-name="OrderlineWidget">
|
||||
<li class="orderline">
|
||||
<h4 class="product-name">
|
||||
Pizza
|
||||
</h4>
|
||||
<span class="product-name">
|
||||
<t t-esc="widget.model.get('name')"/>
|
||||
</span>
|
||||
<span class="price">
|
||||
3.14$
|
||||
<t t-esc="widget.format_currency(widget.model.getPriceWithTax())"/>
|
||||
</span>
|
||||
<ul class="info-list">
|
||||
<li class="info">
|
||||
5 pizza at $0.51/pizza
|
||||
</li>
|
||||
<li class="info">
|
||||
25 discount
|
||||
</li>
|
||||
<t t-if="widget.model.get('quantity') !== 1.0">
|
||||
<li class="info">
|
||||
<em>
|
||||
<t t-esc="widget.model.get('quantity')" />
|
||||
</em>
|
||||
<t t-esc="widget.model.get('unit')" />
|
||||
at
|
||||
<t t-esc="widget.format_currency(widget.model.get('list_price'))" />
|
||||
/
|
||||
<t t-esc="widget.model.get('unit')" />
|
||||
</li>
|
||||
</t>
|
||||
<t t-if="widget.model.get('discount') > 0">
|
||||
<li class="info">
|
||||
With a
|
||||
<em>
|
||||
<t t-esc="widget.model.get('discount')" />%
|
||||
</em>
|
||||
discount
|
||||
</li>
|
||||
</t>
|
||||
</ul>
|
||||
</li>
|
||||
</t>
|
||||
|
|
|
|||
Loading…
Reference in New Issue