458 lines
16 KiB
Plaintext
458 lines
16 KiB
Plaintext
<div class="row">
|
|
<div class="col-lg-2 col-md-2 col-sm-2">
|
|
<ul class="nav nav-tabs flex-column" role="tablist" >
|
|
<% @menu.each do |menu| %>
|
|
<li class="nav-item menu_category" data-ref="<%= api_restaurant_menu_category_path menu.id%>">
|
|
<p class="hidden menu-id"><%= menu.id %></p>
|
|
<a class="nav-link" data-toggle="tab" href="" role="tab"> <%= menu.name%></a>
|
|
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-7 col-lg-7 col-sm-7">
|
|
<div class="card-columns menu_items_list" style="column-gap: 10px;">
|
|
<!-- append data -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 col-lg-3 col-sm-3">
|
|
<div class="card-header">
|
|
<div>
|
|
<strong id="order-title">ORDER DETAILS </strong> | Table <%=@table_id%>
|
|
</div>
|
|
</div>
|
|
<div class="card-block">
|
|
<div class="card-text" style="max-height:550px; overflow:auto"">
|
|
<table class="table table-striped summary-items">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th class="item-name">Items</th>
|
|
<th class="item-qty">QTY</th>
|
|
<th class="item-attr">Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</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="sub_total">0.00</strong></td>
|
|
</tr>
|
|
</table>
|
|
<button type="button" class="btn btn-success create" id="create_order" disabled="disabled">Create Order</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="sx_itemModal" tabindex="-1" role="dialog" aria-labelledby="sx_itemModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 class="modal-title"></h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table width="100%" class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="">Item Name</th>
|
|
<th style="">Quantity</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="item_name" id="modal-item-name"></td>
|
|
<td>
|
|
<input type="number" name="qty" class="form-control col-md-12 input-number" id="modal-qty" value="" min="1" max="100">
|
|
</td>
|
|
<td>
|
|
<button type="button" id="remove" class="btn btn-danger" data-dismiss="modal">Remove</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
|
|
<button type="button" class="btn btn-success" data-dismiss="modal" id="save">Update</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Large modal -->
|
|
|
|
<div class="modal fade sx_item_detailModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header" style="background-color: #54A5AF;">
|
|
<h4 class="modal-title" style="color:#fff;" id="title_name"></h4>
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;color:#fff;">×</button>
|
|
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<%= image_tag "logo.png" ,width: '', height: '', :style => '' %>
|
|
<br><br>
|
|
<div class="form-group">
|
|
<h4 class="col-md-12">Quantity</h4>
|
|
<input type="number" name="qty" class="form-control col-md-12 input-number change_qty" id="change_qty" value="" min="1" max="100">
|
|
</div>
|
|
<div class="form-group row">
|
|
<h4 class="col-md-6">Total</h4>
|
|
<h4 class="col-md-6" id="total_price"> </h4>
|
|
<p class="hidden" id="unit_price"></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="option-list">
|
|
<h4 id="attributes-type"></h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
|
|
<button type="button" class="btn btn-success" data-dismiss="modal" id="save_order">Add Order</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
$(function(){
|
|
|
|
//click menu sidebar menu category
|
|
$(".menu_category").on("click", function(){
|
|
var menu_id = $(this).find(".menu-id").text();
|
|
var url = $(this).attr('data-ref');
|
|
show_menu_item_list(url);
|
|
});
|
|
//End menu category Click
|
|
|
|
$(".change_qty").change(function(){
|
|
qty = $(this).val();
|
|
price = $("#unit_price").text();
|
|
$("#total_price").text(qty*price);
|
|
|
|
});
|
|
|
|
//show menu item list when click menu category
|
|
function show_menu_item_list(url_item){
|
|
var menu_list = $('.menu_items_list');
|
|
menu_list.empty();
|
|
|
|
//Start Ajax
|
|
$.ajax({
|
|
type: "GET",
|
|
url: url_item,
|
|
data: {},
|
|
dataType: "json",
|
|
success: function(data) {
|
|
var menu_items_list = $('.menu_items_list');
|
|
menu_items_list.empty();
|
|
|
|
menu_items = data.menu_items;
|
|
|
|
for(var field in menu_items) {
|
|
|
|
instances = menu_items[field].instances ;
|
|
|
|
$(instances).each(function(i){
|
|
if (instances[i].is_default === true) {
|
|
code = instances[i].code;
|
|
name = instances[i].name;
|
|
price = parseFloat(instances[i].price).toFixed(2);
|
|
is_available = instances[i].is_available ;
|
|
is_on_promotion = instances[i].is_on_promotion;
|
|
item_attributes = instances[i].item_attributes;
|
|
promotion_price = instances[i].promotion_price;
|
|
code = instances[i].code;
|
|
}
|
|
});
|
|
|
|
row = '<div class="card">'
|
|
+'<div class="card-head" style="line-height:14px;">'
|
|
+'<small class="col-md-9">'+ menu_items[field].name +'</small>'
|
|
+"<div class='col-md-3 add_icon' data-item-code='"+ menu_items[field].item_code +"' data-name='"+ menu_items[field].name +"' data-price = '"+ price +"' data-instance-code = '"+ code +"' data-instance = '"+ name +"' data-promotion-price = '"+ promotion_price +"' data-attributes = '"+ JSON.stringify(item_attributes) +"'>'"
|
|
+'<i class="fa fa-plus "'
|
|
+ 'style="margin-top:4px;">'
|
|
+'</i></div>'
|
|
+'</div>'
|
|
|
|
+"<div class='menu_item_box' data-id = '"+JSON.stringify(menu_items[field].attributes)+"' data-item = '"+JSON.stringify(item_attributes)+"' data-toggle='modal' data-target='.sx_item_detailModal'>'"
|
|
|
|
+'<div class="card-block">'
|
|
+'<%= image_tag "logo.png" ,width: '75', height: '75', :style => '' %>'
|
|
+'</div>'
|
|
|
|
+'<div class="card-footer">'
|
|
+'<small>'+ price +'</small>'
|
|
+'</div>'
|
|
+'</div>';
|
|
$('.menu_items_list').append(row);
|
|
}
|
|
|
|
}
|
|
});
|
|
//end Ajax
|
|
}
|
|
//end show list function
|
|
|
|
//click item row for add order
|
|
$(document).on('click', '.menu_item_box', function(event){
|
|
$('.option-list').empty();
|
|
data = $(this).parent().children().children('.add_icon');
|
|
attributes = $(this).data('id');
|
|
selected_item = $(this).data('item');
|
|
console.log(attributes);
|
|
for(var field in attributes) {
|
|
value = attributes[field]["value"];
|
|
type = attributes[field]["type"]
|
|
row = "<h4>"+attributes[field]["type"]+"</h4>"
|
|
|
|
$(value).each(function(i){
|
|
status ="";
|
|
if(parseInt(jQuery.inArray(value[i], selected_item))!== -1){
|
|
status = "selected-option";
|
|
}
|
|
|
|
row +='<button id="selected-option" data-type="'+type+'" class="btn btn-default custom-btn '+ status +' '+ type +'">'+value[i]+'</button>';
|
|
|
|
});
|
|
$(".option-list").append(row);
|
|
|
|
|
|
}
|
|
$('#change_qty').val(1);
|
|
$('#title_name').text(data.attr('data-name'));
|
|
$('#total_price').text(data.attr('data-price'));
|
|
$('#unit_price').text(data.attr('data-price'));
|
|
});
|
|
|
|
// click select option icon for add
|
|
$(document).on('click', '.custom-btn', function(event){
|
|
type = $(this).data('type');
|
|
$('+ type +').removeClass('selected-option');
|
|
$(this).addClass('selected-option');
|
|
|
|
|
|
}); //End selecct Click
|
|
|
|
|
|
// click plus icon for add
|
|
$(document).on('click', '.add_icon', function(event){
|
|
var item_data = $(this);
|
|
show_item_detail(item_data);
|
|
calculate_sub_total();
|
|
}); //End Add Icon Click
|
|
|
|
function show_item_detail(data){
|
|
qty = 1;
|
|
append = 0;
|
|
price = parseFloat(data.attr('data-price')).toFixed(2);
|
|
instance_name = data.attr('data-instance');
|
|
|
|
if (instance_name == "undefined"){
|
|
instance = '';
|
|
}else{
|
|
instance = "("+data.attr('data-instance')+")";
|
|
}
|
|
|
|
var rowCount = $('.summary-items tbody tr').length+1;
|
|
var item_row = $('.summary-items tbody tr');
|
|
|
|
$(item_row).each(function(i){
|
|
if ($(item_row[i]).attr('data-code') == data.attr('data-item-code')) {
|
|
qty = parseInt($(item_row[i]).children('#item_qty').text()) +1;
|
|
$(item_row[i]).children('#item_qty').text(qty);
|
|
parseFloat($(item_row[i]).children('#item_price').text(price*qty)).toFixed(2);
|
|
|
|
append = 1;
|
|
}else{
|
|
qty = 1;
|
|
}
|
|
});
|
|
|
|
if (append===0) {
|
|
row ="<tr class='item_box' data-price ='"+price+ "'data-toggle='modal' data-target='#sx_itemModal' 'data-instance ='"+instance+ "' data-code='"+data.attr('data-item-code')+"' data-instance-code='"+data.attr('data-instance-code')+"' data-attributes='"+data.attr('data-attributes')+"'>"
|
|
+'<td class="item-cell-no">'+rowCount+'</td>'
|
|
+'<td class="item-cell-name" id="item_name" >' + data.attr('data-name')+ ' ' + instance + data.attr('data-attributes')+'</td>'
|
|
+'<td class="item-cell-qty" id="item_qty">' + qty + '</td>'
|
|
+'<td class="item-cell-price" id="item_price">'
|
|
+ parseFloat(price).toFixed(2)
|
|
+'</td>'
|
|
+'</tr>';
|
|
$(".summary-items tbody").append(row);
|
|
}
|
|
|
|
}
|
|
|
|
//click item row for update qty
|
|
$('.summary-items').on('click', '.item_box', function(){
|
|
$(this).attr('data-active',true);
|
|
name = $(this).children('#item_name').text();
|
|
qty = $(this).children('#item_qty').text();
|
|
$('#modal-item-name').text(name);
|
|
$('#modal-qty').val(qty);
|
|
});
|
|
|
|
//click remove buttom in modal box
|
|
$('#sx_itemModal').on('click','#remove', function(){
|
|
$('.summary-items tr').filter(function(){
|
|
if ($(this).attr('data-active') == 'true'){
|
|
$(this).remove();
|
|
}
|
|
});
|
|
calculate_sub_total();
|
|
});
|
|
|
|
//click close
|
|
$('#sx_itemModal').on('click','#close', function(){
|
|
$(".item_box").removeAttr("data-active");
|
|
});
|
|
|
|
//click save buttom after change qty
|
|
$('#sx_itemModal').on('click','#save', function(){
|
|
summary_items_filter();
|
|
calculate_sub_total();
|
|
});
|
|
|
|
//calculate subtotal
|
|
function calculate_sub_total(){
|
|
var total_price = 0;
|
|
var taxable_amount = 0;
|
|
var item_row = $('.summary-items tbody tr');
|
|
|
|
$(item_row).each(function(i){
|
|
var unit_price = parseFloat($(item_row[i]).attr('data-price'));
|
|
var qty = parseFloat($(item_row[i]).children('#item_qty').text());
|
|
total_price += qty*unit_price;
|
|
});
|
|
var fixed_total_price = parseFloat(total_price).toFixed(2);
|
|
var fixed_taxable_amount = parseFloat(taxable_amount).toFixed(2);
|
|
|
|
$('#sub_total').empty();
|
|
$('#sub_total').append(fixed_total_price);
|
|
|
|
if (fixed_total_price > 0) {
|
|
$('.create').removeAttr("disabled", false);
|
|
}else{
|
|
$('.create').attr("disabled", true);
|
|
}
|
|
|
|
}
|
|
|
|
function summary_items_filter(){
|
|
$('.summary-items tr').filter(function(){
|
|
|
|
if ($(this).attr('data-active') == 'true'){
|
|
qty = $('#modal-qty').val();
|
|
price = parseFloat($(this).attr('data-price'));
|
|
total_price = parseFloat(price*qty).toFixed(2);
|
|
|
|
$(this).find('#item_qty').text(qty);
|
|
$(this).find('.item-cell-price').text(total_price);
|
|
|
|
$(this).removeAttr('data-active');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<style type="text/css">
|
|
.card-head{
|
|
height: 40px;
|
|
background-color: #54A5AF;
|
|
padding:5px;
|
|
color :#fff;
|
|
}
|
|
.card-block {
|
|
padding: 0.3rem !important;
|
|
}
|
|
@media (min-width: 34em) {
|
|
.card-columns {
|
|
-webkit-column-count: 2;
|
|
-moz-column-count: 2;
|
|
column-count: 2;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 48em) {
|
|
.card-columns {
|
|
-webkit-column-count: 3;
|
|
-moz-column-count: 3;
|
|
column-count: 3;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 62em) {
|
|
.card-columns {
|
|
-webkit-column-count: 4;
|
|
-moz-column-count: 4;
|
|
column-count: 4;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 75em) {
|
|
.card-columns {
|
|
-webkit-column-count: 4;
|
|
-moz-column-count: 4;
|
|
column-count: 4;
|
|
}
|
|
}
|
|
|
|
.nav-tabs .nav-item {
|
|
border-bottom: 1px solid #fff;
|
|
border-left: 1px solid #54A5AF;
|
|
border-right: 1px solid #54A5AF;
|
|
}
|
|
.nav > li > a{
|
|
color:#54A5AF;
|
|
}
|
|
.nav-tabs {
|
|
background-color: #eeeeee;
|
|
}
|
|
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
|
|
background-color: #fff;
|
|
border-left: 6px solid #111;
|
|
color:#54A5AF;
|
|
font-weight: bold;
|
|
border-color: #fff #fff #fff #54A5AF;
|
|
}
|
|
|
|
.modal-dialog {
|
|
left:auto;
|
|
right: auto;
|
|
width: 100%;
|
|
padding-top: 100px;
|
|
|
|
}
|
|
.selected-option {
|
|
color: #fff !important;
|
|
background-color: green !important;
|
|
}
|
|
.custom-btn {
|
|
white-space: normal !important;
|
|
height: 60px;
|
|
width: 90px;
|
|
margin-bottom: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
|
|
|