update addorder
This commit is contained in:
Aung Myo
@@ -49,47 +49,6 @@
|
||||
</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="modal-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"> Ks</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<h4>Options</h4>
|
||||
|
||||
<h4>Attributes</h4>
|
||||
|
||||
</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>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="sx_itemModal" tabindex="-1" role="dialog" aria-labelledby="sx_itemModalLabel" aria-hidden="true">
|
||||
@@ -129,6 +88,47 @@
|
||||
</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(){
|
||||
@@ -143,7 +143,7 @@ $(function(){
|
||||
|
||||
$(".change_qty").change(function(){
|
||||
qty = $(this).val();
|
||||
price = $("#total_price").text();
|
||||
price = $("#unit_price").text();
|
||||
$("#total_price").text(qty*price);
|
||||
|
||||
});
|
||||
@@ -160,43 +160,39 @@ $(function(){
|
||||
data: {},
|
||||
dataType: "json",
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
var menu_items_list = $('.menu_items_list');
|
||||
menu_items_list.empty();
|
||||
menu_items = data.menu_items;
|
||||
console.log(data);
|
||||
for(var field in menu_items) {
|
||||
|
||||
var code = menu_items[field].instances[0].code
|
||||
var name = menu_items[field].instances[0].name
|
||||
var price = parseFloat(menu_items[field].instances[0].price).toFixed(2);
|
||||
var is_available = menu_items[field].instances[0].is_available
|
||||
var is_on_promotion = menu_items[field].instances[0].is_on_promotion
|
||||
var item_attributes = menu_items[field].instances[0].item_attributes
|
||||
var promotion_price = menu_items[field].instances[0].promotion_price
|
||||
|
||||
|
||||
row = '<div class="card">'
|
||||
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-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="'+ code +'"'
|
||||
+'data-instance="'+ name +'"'
|
||||
+'data-promotion-price="'+ promotion_price +'"'
|
||||
+'>'
|
||||
+"<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-toggle="modal" data-target=".sx_item_detailModal">'
|
||||
+"<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>'
|
||||
@@ -212,7 +208,39 @@ $(function(){
|
||||
});
|
||||
//end Ajax
|
||||
}
|
||||
//end show detail function
|
||||
//end show list function
|
||||
|
||||
//click item row for add order
|
||||
$(document).on('click', '.menu_item_box', function(event){
|
||||
data = $(this).parent().children().children('.add_icon');
|
||||
attributes = $(this).data('id');
|
||||
selected_item = $(this).data('item');
|
||||
|
||||
for(var field in attributes) {
|
||||
value = attributes[field]["value"];
|
||||
|
||||
row = "<h4>"+attributes[field]["type"]+"</h4>"
|
||||
|
||||
$(value).each(function(i){
|
||||
$(selected_item).each(function(item){
|
||||
if (value[i] == selected_item[item]) {
|
||||
$('.custom-btn').addClass('selected-option');
|
||||
}else{
|
||||
$('.custom-btn').removeClass('selected-option');
|
||||
}
|
||||
});
|
||||
console.log(jQuery.inArray(value[i], selected_item));
|
||||
|
||||
row +='<button id="selected-option" data-type="'+attributes[field]["type"]+'" class="btn btn-default custom-btn">'+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 plus icon for add
|
||||
$(document).on('click', '.add_icon', function(event){
|
||||
@@ -225,9 +253,9 @@ $(function(){
|
||||
qty = 1;
|
||||
append = 0;
|
||||
price = parseFloat(data.attr('data-price')).toFixed(2);
|
||||
instance_code = data.attr('data-instance');
|
||||
instance_name = data.attr('data-instance');
|
||||
|
||||
if (instance_code == "undefined"){
|
||||
if (instance_name == "undefined"){
|
||||
instance = '';
|
||||
}else{
|
||||
instance = "("+data.attr('data-instance')+")";
|
||||
@@ -249,9 +277,9 @@ $(function(){
|
||||
});
|
||||
|
||||
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')+"'>"
|
||||
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 + '</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)
|
||||
@@ -271,14 +299,6 @@ $(function(){
|
||||
$('#modal-qty').val(qty);
|
||||
});
|
||||
|
||||
//click item row for update qty
|
||||
$(document).on('click', '.menu_item_box', function(event){
|
||||
|
||||
data = $(this).parent().children().children('.add_icon');
|
||||
$('#title_name').text(data.attr('data-name'));
|
||||
$('#total_price').text(data.attr('data-price'));
|
||||
});
|
||||
|
||||
//click remove buttom in modal box
|
||||
$('#sx_itemModal').on('click','#remove', function(){
|
||||
$('.summary-items tr').filter(function(){
|
||||
@@ -412,6 +432,17 @@ $(function(){
|
||||
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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user