update add order
This commit is contained in:
Aung Myo
@@ -1,117 +1,177 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-3 col-sm-3">
|
||||
<div class="ta" style="max-height:550px; overflow:auto">
|
||||
<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 %>
|
||||
|
||||
<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>
|
||||
<div class="col-md-6 col-lg-6">
|
||||
<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 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="card-block">
|
||||
<div class="card-text" style="min-height:500px; max-height:500px; overflow:auto">
|
||||
<table class="table table-striped" id="order-items-table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
<th>#</th>
|
||||
<th class="item-name">Items</th>
|
||||
<th class="item-attr">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td class='item-name'>aaaaa x2</td>
|
||||
<td class='item-attr'>name</td>
|
||||
</tr>
|
||||
<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="min-height:500px; max-height:500px; 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="order-sub-total">22222</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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="order-sub-total">22222</strong></td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function(){
|
||||
|
||||
$(".menu_category").on("click", function(){
|
||||
|
||||
var menu_id = $(this).find(".menu-id").text();
|
||||
|
||||
var url = $(this).attr('data-ref');
|
||||
|
||||
show_details(url);
|
||||
|
||||
}); //End Booking Click
|
||||
$(".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
|
||||
|
||||
function show_details(url_item){
|
||||
var menu_list = $('.menu_items_list');
|
||||
// menu_list.empty();
|
||||
// var row = '';
|
||||
//Start Ajax
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url_item,
|
||||
data: {},
|
||||
dataType: "json",
|
||||
success: function(data) {
|
||||
function show_menu_item_list(url_item){
|
||||
|
||||
menu_items = data.menu_items;
|
||||
var menu_list = $('.menu_items_list');
|
||||
menu_list.empty();
|
||||
|
||||
for(var field in menu_items) {
|
||||
if (menu_items[field].item_instances){
|
||||
console.log(menu_items[field].item_instances[0]);
|
||||
var price = parseFloat(menu_items[field].item_instances[0].price).toFixed(2);
|
||||
}else{
|
||||
var price = parseFloat(menu_items[field].price).toFixed(2);
|
||||
//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) {
|
||||
if (menu_items[field].item_instances){
|
||||
var price = parseFloat(menu_items[field].item_instances[1].price).toFixed(2);
|
||||
var is_available = menu_items[field].item_instances[1].is_available
|
||||
var is_on_promotion = menu_items[field].item_instances[1].is_on_promotion
|
||||
var item_attributes = menu_items[field].item_instances[1].item_attributes
|
||||
var item_instance_code = menu_items[field].item_instances[1].item_instance_item_code
|
||||
var item_instance_name = menu_items[field].item_instances[1].item_instance_name
|
||||
var promotion_price = menu_items[field].item_instances[1].promotion_price
|
||||
}else{
|
||||
var price = parseFloat(menu_items[field].price).toFixed(2);
|
||||
var is_available = menu_items[field].is_available
|
||||
var is_on_promotion = menu_items[field].is_on_promotion
|
||||
var item_attributes = menu_items[field].item_attributes
|
||||
var item_instance_code = menu_items[field].item_instance_item_code
|
||||
var item_instance_name = menu_items[field].item_instance_name
|
||||
var promotion_price = menu_items[field].promotion_price
|
||||
}
|
||||
|
||||
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-id="'+ menu_items[field].name +'"'
|
||||
+'data-item-code="'+ menu_items[field].item_code +'"'
|
||||
+'data-name="'+ menu_items[field].name +'"'
|
||||
+'data-price="'+ price +'"'
|
||||
+'data-available="'+ is_available +'"'
|
||||
+'data-promotion="'+ is_on_promotion +'"'
|
||||
+'data-attributes="'+ item_attributes +'"'
|
||||
+'data-instance-code="'+ item_instance_code +'"'
|
||||
+'data-instance="'+ item_instance_name +'"'
|
||||
+'data-promotion-price="'+ promotion_price +'"'
|
||||
+'>'
|
||||
+'<i class="fa fa-plus "'
|
||||
+ 'style="margin-top:4px;">'
|
||||
+'</i></div>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="card-block">'
|
||||
+'<%= image_tag "logo.png" ,width: '75', height: '75', :style => '' %>'
|
||||
+'</div>'
|
||||
|
||||
+'<div class="card-footer">'
|
||||
+'<small>'+ price +'</small>'
|
||||
+'</div>';
|
||||
$('.menu_items_list').append(row);
|
||||
}
|
||||
|
||||
row = '<div class="card">'
|
||||
+'<div class="card-head" style="line-height:14px;">'
|
||||
+'<small>'+ menu_items[field].name +'</small>'
|
||||
+'</div>'
|
||||
}
|
||||
});
|
||||
//end Ajax
|
||||
}
|
||||
//end show detail function
|
||||
|
||||
+'<div class="card-block">'
|
||||
+'<%= image_tag "logo.png" ,width: '75', height: '75', :style => '' %>'
|
||||
+'</div>'
|
||||
$(document).on('click', '.add_icon', function(event){
|
||||
var item_data = $(this);
|
||||
show_item_detail(item_data);
|
||||
}); //End Add Icon Click
|
||||
|
||||
function show_item_detail(data){
|
||||
|
||||
price = data.attr('data-price');
|
||||
|
||||
if (data.attr('data-qty') === undefined){
|
||||
qty = 1;
|
||||
}else{
|
||||
qty = data.attr('data-qty');
|
||||
}
|
||||
|
||||
if (data.attr('data-instance') == "undefined"){
|
||||
instance = '';
|
||||
}else{
|
||||
instance = data.attr('data-instance');
|
||||
}
|
||||
|
||||
|
||||
|
||||
var rowCount = $('.summary-items tbody');
|
||||
console.log(rowCount);
|
||||
for(var field in rowCount) {
|
||||
// console.log(rowCount[field].attr('data-code'));
|
||||
}
|
||||
|
||||
row ='<tr>'
|
||||
+'<td class="item-cell-no">'+rowCount+'</td>'
|
||||
+'<td class="item-cell-name" data-code='+data.attr('data-item-code')+'>' + data.attr('data-name')+ ' ' + instance + '</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);
|
||||
|
||||
}
|
||||
|
||||
+'<div class="card-footer">'
|
||||
+'<small>'+ price +'</small>'
|
||||
+'</div>';
|
||||
$('.menu_items_list').append(row);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
//end Ajax
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -156,6 +216,25 @@ function show_details(url_item){
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user