162 lines
4.1 KiB
Plaintext
162 lines
4.1 KiB
Plaintext
<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 %>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-lg-6">
|
|
<div class="card-columns menu_items_list" style="column-gap: 10px;">
|
|
|
|
<!-- <div class="card">
|
|
<div class="card-header">
|
|
<small>Menu Name</small>
|
|
</div>
|
|
<div class="card-block">
|
|
<%= image_tag "logo.png" ,width: '75', height: '75', :style => '' %>
|
|
</div>
|
|
<div class="card-footer">
|
|
<small>Price : 3000</small>
|
|
</div>
|
|
</div> -->
|
|
</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="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>
|
|
|
|
</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
|
|
|
|
function show_details(url_item){
|
|
alert(url_item)
|
|
//Start Ajax
|
|
$.ajax({
|
|
type: "GET",
|
|
url: url_item,
|
|
data: {},
|
|
dataType: "json",
|
|
success: function(data) {
|
|
|
|
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[0].price).toFixed(2);
|
|
}else{
|
|
var price = parseFloat(menu_items[field].price).toFixed(2);
|
|
}
|
|
|
|
|
|
row = '<div class="card">'
|
|
+'<div class="card-header">'
|
|
+'<small>'+ menu_items[field].name +'</small>'
|
|
+'</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);
|
|
}
|
|
}
|
|
});
|
|
//end Ajax
|
|
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<style type="text/css">
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|