change split bill ui
This commit is contained in:
phyusin
@@ -7,158 +7,205 @@
|
||||
<div class="col-lg-7 col-md-7 col-sm-7">
|
||||
<!-- Order Details -->
|
||||
<div class="card" >
|
||||
<!-- <div class="card-header">
|
||||
<div><strong id="order-title">ORDER DETAILS</strong></div>
|
||||
</div> -->
|
||||
<div class="card-block">
|
||||
<div class="card-title row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12">
|
||||
<span class="hidden" id ="table_id" value="<%=@table.id%>"><%=@table.id%></span>
|
||||
<span class="hidden" id="table_type" value="<%=@table.type%>"><%=@table.type%></span>
|
||||
<% if !@order.nil? %>
|
||||
<span class="hidden" id="customer_id" value="<%= @order.customer_id %>"><%= @order.customer_id %></span>
|
||||
<% end %>
|
||||
<p class="m-l-15">Order Lists</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="order-detail-slimscroll" data-height="160">
|
||||
<div class="card-text dining">
|
||||
<table class="table table-default" id="order-items-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="item-name">Items</th>
|
||||
<th class="item-attr">QTY</th>
|
||||
<th class="item-attr">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% sub_total = 0 %>
|
||||
<% @order_items.each do |order_item| %>
|
||||
<%
|
||||
sub_total += order_item.qty*order_item.price
|
||||
%>
|
||||
<tr class="item-row" id=<%= order_item.order_items_id %> >
|
||||
<td style="width:60%; text-align:left">
|
||||
<span id="item-order-id" class="hidden"><%=order_item.order_id%></span>
|
||||
<span id="item-account-type" class="hidden"><%=order_item.account_id%></span>
|
||||
<span id="item-name-price"><%=order_item.item_name%></span>
|
||||
</td>
|
||||
<td style="width:20%; text-align:right">
|
||||
<span id="item-qty"><%=order_item.qty%></span>
|
||||
</td>
|
||||
<td style="width:20%; text-align:right">
|
||||
<span id="item-total-price"><%=(order_item.qty*order_item.price)%></span>
|
||||
</td>
|
||||
</tr>
|
||||
<%
|
||||
end
|
||||
%>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<table class="table" id="order-charges-table" border="0">
|
||||
<tr>
|
||||
<td class="charges-name"><strong>Sub Total:</strong></td>
|
||||
<td class="item-attr"><strong id="order-sub-total"><%=sub_total%></strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column One -->
|
||||
<!-- Column Two -->
|
||||
<div class="col-lg-4 col-md-4 col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="card-title row">
|
||||
<p class="m-l-15">Receipt Lists</p>
|
||||
</div>
|
||||
<div id="order-detail-slimscroll" data-height="160">
|
||||
<div class="card-text dining">
|
||||
<% if !@sale_data.nil? %>
|
||||
<table class="table table-default">
|
||||
<tbody>
|
||||
<% @sale_data.each do |sale_data| %>
|
||||
<tr class="receipt_row" id=<%= sale_data.sale_id %> >
|
||||
<td>Receipt No. - <span id="receipt_no"><%= sale_data.receipt_no %></span></td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column Two -->
|
||||
<!-- Column Three -->
|
||||
<div class="col-lg-1 col-md-1 col-sm-1">
|
||||
<!-- Action Panel -->
|
||||
<div>
|
||||
<button type="button" class="btn bg-default btn-block" id="back" ><i class="material-icons">reply</i> Back </button>
|
||||
<button id="order_item_split" class="btn btn-primary btn- action-btn">Order Items Split</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column Three -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="card-title row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12">
|
||||
<span class="hidden" id ="table_id" value="<%=@table.id%>"><%=@table.id%></span>
|
||||
<span class="hidden" id="table_type" value="<%=@table.type%>"><%=@table.type%></span>
|
||||
<% if !@order.nil? %>
|
||||
<span class="hidden" id="customer_id" value="<%= @order.customer_id %>"><%= @order.customer_id %></span>
|
||||
<% end %>
|
||||
<p class="m-l-15">Order Lists</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="split-order-slimscroll" data-height="100">
|
||||
<div class="card-text dining">
|
||||
<% if !@orders.nil? %>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12">
|
||||
<div class="row m-l-5">
|
||||
<div class="col-lg-3 col-md-3 col-sm-3">
|
||||
<ul class="nav nav-tabs tabs-left sideways">
|
||||
<% @orders.each.with_index(0) do |order, order_index| %>
|
||||
<% active_class = "" %>
|
||||
<% if order_index == 0 %>
|
||||
<% active_class = "active" %>
|
||||
<% end %>
|
||||
<li class="order-row <%= active_class %>">
|
||||
<a href="#<%= order.order_id %>" data-toggle="tab"><%= order.order_id %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-8 col-sm-8">
|
||||
<div class="tab-content">
|
||||
<% @orders.each.with_index(0) do |order, order_index| %>
|
||||
<% active_class = "" %>
|
||||
<% if order_index == 0 %>
|
||||
<% active_class = "active" %>
|
||||
<% end %>
|
||||
<div class="tab-pane <%= active_class %>" id="<%= order.order_id %>">
|
||||
<div class="card-title">
|
||||
<p class="m-l-2">Order Items</p>
|
||||
</div>
|
||||
<div id="order-detail-slimscroll-<%= order.order_id %>" data-height="200">
|
||||
<div class="card-text dining">
|
||||
<table class="table table-default" id="order-items-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="item-name">Items</th>
|
||||
<th class="item-attr">QTY</th>
|
||||
<th class="item-attr">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% if !order.order_items.nil? %>
|
||||
<% sub_total = 0 %>
|
||||
<% order.order_items.each do |order_item| %>
|
||||
<%
|
||||
sub_total += order_item.qty*order_item.price
|
||||
%>
|
||||
<tr class="item-row" id=<%= order_item.order_items_id %> >
|
||||
<td style="width:60%; text-align:left">
|
||||
<span id="item-order-id" class="hidden"><%=order_item.order_id%></span>
|
||||
<span id="item-account-type" class="hidden"><%=order_item.account_id%></span>
|
||||
<span id="item-name-price">
|
||||
<%=order_item.item_name%>
|
||||
<% if !order_item.set_menu_items.nil?
|
||||
order_item.set_menu_items.each do |item_instance| %>
|
||||
<br><span class="font-13"><%= item_instance %></span>
|
||||
<% end
|
||||
end %>
|
||||
</span>
|
||||
</td>
|
||||
<td style="width:20%; text-align:right">
|
||||
<span id="item-qty"><%=order_item.qty%></span>
|
||||
</td>
|
||||
<td style="width:20%; text-align:right">
|
||||
<span id="item-total-price"><%=(order_item.qty*order_item.price)%></span>
|
||||
</td>
|
||||
</tr>
|
||||
<%
|
||||
end
|
||||
%>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="card-footer"> -->
|
||||
<table class="table m-b-20" id="order-charges-table" border="0">
|
||||
<tr>
|
||||
<td class="charges-name"><strong>Sub Total:</strong></td>
|
||||
<td class="item-attr align-right"><strong id="order-sub-total"><%=sub_total%></strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column One -->
|
||||
<!-- Column Two -->
|
||||
<div class="col-lg-4 col-md-4 col-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="card-title row">
|
||||
<p class="m-l-15">Receipt Lists</p>
|
||||
</div>
|
||||
<div id="split-receipt-slimscroll" data-height="160">
|
||||
<div class="card-text dining">
|
||||
<% if !@sale_data.nil? %>
|
||||
<table class="table table-default">
|
||||
<tbody>
|
||||
<% @sale_data.each do |sale_data| %>
|
||||
<tr class="receipt_row" id=<%= sale_data.sale_id %> >
|
||||
<td>Receipt No. - <span id="receipt_no"><%= sale_data.receipt_no %></span></td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column Two -->
|
||||
<!-- Column Three -->
|
||||
<div class="col-lg-1 col-md-1 col-sm-1">
|
||||
<!-- Action Panel -->
|
||||
<div>
|
||||
<button type="button" class="btn bg-default btn-block" id="back" ><i class="material-icons">reply</i> Back </button>
|
||||
<button id="order_split" class="btn btn-primary text-center action-btn" style="width:100%">Orders Split</button>
|
||||
<button id="order_item_split" class="btn btn-primary text-center action-btn">Order Items Split</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Column Three -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
$('#back').on('click',function(){
|
||||
backToOrigami();
|
||||
})
|
||||
$('#back').on('click',function(){
|
||||
backToOrigami();
|
||||
})
|
||||
|
||||
$(".cashier_number").on('click', function(event){
|
||||
if(event.handled !== true) {
|
||||
var original_value=0;
|
||||
original_value = $('#per_person').val();
|
||||
var input_type = $(this).attr("data-type");
|
||||
switch (input_type) {
|
||||
case 'num':
|
||||
var input_value = $(this).attr("data-value");
|
||||
if (original_value == "0"){
|
||||
$('#per_person').val(input_value);
|
||||
}
|
||||
else{
|
||||
$('#per_person').val(original_value + '' + input_value);
|
||||
}
|
||||
break;
|
||||
$(".cashier_number").on('click', function(event){
|
||||
if(event.handled !== true) {
|
||||
var original_value=0;
|
||||
original_value = $('#per_person').val();
|
||||
var input_type = $(this).attr("data-type");
|
||||
switch (input_type) {
|
||||
case 'num':
|
||||
var input_value = $(this).attr("data-value");
|
||||
if (original_value == "0"){
|
||||
$('#per_person').val(input_value);
|
||||
}
|
||||
else{
|
||||
$('#per_person').val(original_value + '' + input_value);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'add':
|
||||
var input_value = $(this).attr("data-value");
|
||||
amount = parseInt(input_value);
|
||||
$('#per_person').val(amount);
|
||||
break;
|
||||
case 'add':
|
||||
var input_value = $(this).attr("data-value");
|
||||
amount = parseInt(input_value);
|
||||
$('#per_person').val(amount);
|
||||
break;
|
||||
|
||||
case 'del' :
|
||||
var discount_text=$('#per_person').val();
|
||||
$('#per_person').val(discount_text.substr(0,discount_text.length-1));
|
||||
break;
|
||||
case 'del' :
|
||||
var discount_text=$('#per_person').val();
|
||||
$('#per_person').val(discount_text.substr(0,discount_text.length-1));
|
||||
break;
|
||||
|
||||
case 'clr':
|
||||
$('#per_person').val("0");
|
||||
break;
|
||||
}
|
||||
event.handled = true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
case 'clr':
|
||||
$('#per_person').val("0");
|
||||
break;
|
||||
}
|
||||
event.handled = true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Select Sale Item
|
||||
$('.item-row').on('click',function(){
|
||||
if($(this).hasClass('selected-item') == true){
|
||||
$(this).removeClass('selected-item');
|
||||
if($(this).hasClass('selected-split-item') == true){
|
||||
$(this).removeClass('selected-split-item');
|
||||
}
|
||||
else {
|
||||
$(this).addClass('selected-item');
|
||||
$(this).addClass('selected-split-item');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -170,24 +217,63 @@
|
||||
if (order_items.length > 0){
|
||||
// if(cnt_items > 0){
|
||||
swal({
|
||||
title: "Alert",
|
||||
text: "Are you sure, you want to Split?",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#DD6B55",
|
||||
confirmButtonText: "Yes, split it!",
|
||||
closeOnConfirm: false
|
||||
}, function (isConfirm) {
|
||||
if(isConfirm){
|
||||
splitBillProcess(cnt_items);
|
||||
}
|
||||
});
|
||||
title: "Alert",
|
||||
text: "Are you sure, you want to Split?",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#DD6B55",
|
||||
confirmButtonText: "Yes, split it!",
|
||||
closeOnConfirm: false
|
||||
}, function (isConfirm) {
|
||||
if(isConfirm){
|
||||
orderItemSplitBillProcess(cnt_items);
|
||||
}
|
||||
});
|
||||
// }
|
||||
// else{
|
||||
// splitBillProcess(cnt_items);
|
||||
// orderItemSplitBillProcess(cnt_items);
|
||||
// }
|
||||
}else{
|
||||
swal("Opps","Please select at least on item!","warning");
|
||||
swal("Opps","Please select at least one item!","warning");
|
||||
}
|
||||
});
|
||||
|
||||
// Selected Order
|
||||
$('.order-row').on('click',function(){
|
||||
if($(this).hasClass('selected-split-item') == true){
|
||||
$(this).removeClass('selected-split-item');
|
||||
}
|
||||
else {
|
||||
$(this).addClass('selected-split-item');
|
||||
}
|
||||
});
|
||||
|
||||
//order_item_split
|
||||
$('#order_split').on('click',function () {
|
||||
var cnt_orders = "<%= @orders.count %>";
|
||||
var orders = get_selected_orders();// Selected Order Items
|
||||
var cnt_odrs = parseInt(cnt_orders) - parseInt(orders.length);
|
||||
if (orders.length > 0){
|
||||
// if(cnt_odrs > 0){
|
||||
swal({
|
||||
title: "Alert",
|
||||
text: "Are you sure, you want to Split?",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#DD6B55",
|
||||
confirmButtonText: "Yes, split it!",
|
||||
closeOnConfirm: false
|
||||
}, function (isConfirm) {
|
||||
if(isConfirm){
|
||||
orderSplitBillProcess(cnt_odrs);
|
||||
}
|
||||
});
|
||||
// }
|
||||
// else{
|
||||
// orderSplitBillProcess(cnt_odrs);
|
||||
// }
|
||||
}else{
|
||||
swal("Opps","Please select at least one order!","warning");
|
||||
}
|
||||
});
|
||||
|
||||
@@ -197,10 +283,45 @@
|
||||
var sale_id = $(this).attr('id').substr(0,16);
|
||||
window.location = '/origami/table/' + dining_id + "/table_invoice/" + sale_id;
|
||||
});
|
||||
|
||||
//slimscroll for order, order items, reciept
|
||||
var height = ($(window).height() - ($('.legal').outerHeight() + $('.user-info').outerHeight() + $('.navbar').innerHeight()));
|
||||
|
||||
$('#split-order-slimscroll').slimScroll({
|
||||
height: height-$('#split-order-slimscroll').attr('data-height'),
|
||||
size: '5px',
|
||||
color: 'rgba(0,0,0,0.5)',
|
||||
alwaysVisible: false,
|
||||
borderRadius: '0',
|
||||
railBorderRadius: '0'
|
||||
});
|
||||
|
||||
$('#split-receipt-slimscroll').slimScroll({
|
||||
height: height-$('#split-receipt-slimscroll').attr('data-height'),
|
||||
size: '5px',
|
||||
color: 'rgba(0,0,0,0.5)',
|
||||
alwaysVisible: false,
|
||||
borderRadius: '0',
|
||||
railBorderRadius: '0'
|
||||
});
|
||||
|
||||
var orders = JSON.parse('<%= @orders.to_json.html_safe %>');
|
||||
if(orders.length > 0){
|
||||
$.each(orders, function(key,order){
|
||||
$('#order-detail-slimscroll-'+order.order_id).slimScroll({
|
||||
height: height-$('#split-receipt-slimscroll').attr('data-height'),
|
||||
size: '5px',
|
||||
color: 'rgba(0,0,0,0.5)',
|
||||
alwaysVisible: false,
|
||||
borderRadius: '0',
|
||||
railBorderRadius: '0'
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/* function for split bill process */
|
||||
function splitBillProcess(cnt_items){
|
||||
/* function for order items split bill process */
|
||||
function orderItemSplitBillProcess(cnt_items){
|
||||
var dining_id = $("#table_id").text();
|
||||
var type = $("#table_type").text();
|
||||
var customer_id = $("#customer_id").text();
|
||||
@@ -222,15 +343,48 @@ function splitBillProcess(cnt_items){
|
||||
|
||||
var ajax_url = "/origami/split_bills";
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: ajax_url,
|
||||
dataType: 'JSON',
|
||||
data: {'dining_id' : dining_id, 'type': type, 'customer_id' : customer_id, 'booking_id' : booking_id, 'order_ids' : order_ids, 'order_items' : JSON.stringify(order_items)},
|
||||
success: function (result) {
|
||||
if (!result.status) {
|
||||
swal("Information!", result.error_message);
|
||||
type: "POST",
|
||||
url: ajax_url,
|
||||
dataType: 'JSON',
|
||||
data: {'dining_id' : dining_id, 'type': type, 'customer_id' : customer_id, 'booking_id' : booking_id, 'order_ids' : order_ids, 'order_items' : JSON.stringify(order_items), 'orders' : ''},
|
||||
success: function (result) {
|
||||
if (!result.status) {
|
||||
swal("Information!", result.error_message);
|
||||
}
|
||||
else {
|
||||
// if (cnt_items > 0){
|
||||
window.location.reload();
|
||||
// }else{
|
||||
// backToOrigami();
|
||||
// }
|
||||
}
|
||||
else {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* function for order items split bill process */
|
||||
function orderSplitBillProcess(cnt_orders){
|
||||
var dining_id = $("#table_id").text();
|
||||
var type = $("#table_type").text();
|
||||
var customer_id = $("#customer_id").text();
|
||||
var orders = get_selected_orders();// Selected Orders
|
||||
var json_booking = JSON.parse('<%= @booking.to_json.html_safe %>');
|
||||
var booking_id = "";
|
||||
if(cnt_orders == 0){
|
||||
booking_id = json_booking.booking_id;
|
||||
}
|
||||
|
||||
var ajax_url = "/origami/split_bills";
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: ajax_url,
|
||||
dataType: 'JSON',
|
||||
data: {'dining_id' : dining_id, 'type': type, 'customer_id' : customer_id, 'booking_id' : booking_id, 'order_ids' : [], 'order_items' : '', 'orders' : JSON.stringify(orders)},
|
||||
success: function (result) {
|
||||
if (!result.status) {
|
||||
swal("Information!", result.error_message);
|
||||
}
|
||||
else {
|
||||
// if (cnt_items > 0){
|
||||
window.location.reload();
|
||||
// }else{
|
||||
@@ -252,10 +406,10 @@ function backToOrigami(){
|
||||
}
|
||||
}
|
||||
|
||||
/* Get Selected Sale Item's ID and Price */
|
||||
/* Get Selected Order Items */
|
||||
function get_selected_order_items(){
|
||||
var order_items = [];
|
||||
$('.item-row.selected-item').each(function(i){
|
||||
$('.item-row.selected-split-item').each(function(i){
|
||||
var order_item = {};
|
||||
order_item.id = $(this).attr('id').substr(0,16);
|
||||
order_item.order_id = $(this).find('#item-order-id').text().trim();
|
||||
@@ -267,6 +421,17 @@ function get_selected_order_items(){
|
||||
return order_items;
|
||||
}
|
||||
|
||||
/* Get Selected Orders */
|
||||
function get_selected_orders(){
|
||||
var orders = [];
|
||||
$('.order-row.selected-split-item').each(function(i){
|
||||
var order = {};
|
||||
order.id = $(this).find('a').attr('href').substr(1);
|
||||
orders.push(order);
|
||||
});
|
||||
return orders;
|
||||
}
|
||||
|
||||
//check for isNumber
|
||||
function isNumberKey(evt) {
|
||||
var charCode = (evt.which) ? evt.which : event.keyCode;
|
||||
|
||||
Reference in New Issue
Block a user