fix modal
This commit is contained in:
aungthetkhaing
File diff suppressed because it is too large
Load Diff
@@ -219,13 +219,12 @@
|
|||||||
<button type="button" class="btn btn-primary action-btn create col-md-12 m-t-5" id="create_pay_order" disabled="disabled" data-toggle="modal" data-target="#read_modal" style=" height: 50px; width: 100%;">Update Order & Pay</button>
|
<button type="button" class="btn btn-primary action-btn create col-md-12 m-t-5" id="create_pay_order" disabled="disabled" data-toggle="modal" data-target="#read_modal" style=" height: 50px; width: 100%;">Update Order & Pay</button>
|
||||||
<% else %>
|
<% else %>
|
||||||
<% if @sale_id.nil?%>
|
<% if @sale_id.nil?%>
|
||||||
<button type="button" class="btn btn-primary action-btn create col-md-6 d-inline" id="create_pay_order" disabled="disabled" data-toggle="modal" data-target="#read_modal" style="padding-top:4px !important;padding-bottom:4px !important;"><i class="material-icons" style="font-size:34px;width:34px">attach_money</i></button>
|
<button type="button" class="btn btn-primary action-btn create col-md-5 d-inline" id="create_pay_order" disabled="disabled" data-toggle="modal" data-target="#payment_modal" style="padding-top:4px !important;padding-bottom:4px !important;"><i class="material-icons" style="font-size:34px;width:34px">attach_money</i></button>
|
||||||
<% else %>
|
<% else %>
|
||||||
<button type="button" class="btn btn-primary action-btn create col-md-6 d-inline" id="add_to_existing_order" disabled="disabled" style="padding-top:4px !important;padding-bottom:4px !important;"><i class="material-icons" style="font-size:34px;width:34px">attach_money</i></button>
|
<button type="button" class="btn btn-primary action-btn create col-md-5 d-inline" id="add_to_existing_order" disabled="disabled" style="padding-top:4px !important;padding-bottom:4px !important;"><i class="material-icons" style="font-size:34px;width:34px">attach_money</i></button>
|
||||||
<% end %>
|
<% end %>
|
||||||
<button type="button" class="btn btn-warning action-btn create col-md-6 d-inline" id="mmqr" disabled="disabled" style="padding-top:15px !important;padding-bottom:15px !important;">MMQR</button>
|
<button type="button" class="btn btn-primary w-full action-btn create col-md-7 d-inline" id="create_order" disabled="disabled" style="padding-top:15px !important;padding-bottom:15px !important;">Add Order</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-primary w-full action-btn create col-12 d-inline" id="create_order" disabled="disabled" style="padding-top:15px !important;padding-bottom:15px !important;">Add Order</button>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -878,47 +877,4 @@ function create_order(data,paymentMethod = "") {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#mmqr').click(function() {
|
|
||||||
// alert("MMQR");
|
|
||||||
const paymentMethod = 'MMQR';
|
|
||||||
const $serverMode = $('#server_mode');
|
|
||||||
const $createOrderBtn = $('#create_order');
|
|
||||||
const $createPayOrderBtn = $('#create_pay_order');
|
|
||||||
|
|
||||||
const params = {
|
|
||||||
order_source: "food_court",
|
|
||||||
order_type: "dine_in",
|
|
||||||
customer_id: $("#customer_id").text(),
|
|
||||||
guest_info: "",
|
|
||||||
table_id: $("#table_id").text(),
|
|
||||||
order_items: JSON.stringify(get_order_item_rows()),
|
|
||||||
create_type: "create_pay",
|
|
||||||
};
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: '/foodcourt/addorders/create',
|
|
||||||
method: 'POST',
|
|
||||||
contentType: 'application/json',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
|
|
||||||
},
|
|
||||||
data: JSON.stringify(params),
|
|
||||||
success: function(result) {
|
|
||||||
const booking_id = result.booking_id;
|
|
||||||
window.location.href = `/foodcourt/${result.sale_id}/qrpay/init`;
|
|
||||||
if ($serverMode.val() !== "cloud" && $("#display_type").val() === "2") {
|
|
||||||
// customer_display_view(null, "reload");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function(xhr) {
|
|
||||||
$('#oqs_loading_wrapper').hide();
|
|
||||||
$createOrderBtn.prop('disabled', false);
|
|
||||||
$createPayOrderBtn.prop('disabled', false);
|
|
||||||
|
|
||||||
const errorMsg = xhr.status ? `Status: ${xhr.status} - ${xhr.statusText}` : "Network error";
|
|
||||||
// swal("Error", errorMsg, "error");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,20 +1,4 @@
|
|||||||
<<<<<<< Updated upstream
|
|
||||||
<div class="modal fade" id="read_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
|
|
||||||
<div class="modal-dialog read-dialog" role="document">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header" style="background-color: #54A5AF;padding-top:10px !important;">
|
|
||||||
<h4 class="modal-title" id="defaultModalLabel" style="color:#fff;">Customer Detail</h4>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p style="text-align: center; font-weight: bolder; color: black; font-size: larger">Please tap NFC Card or Scan Code</p>
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<img src="/image/nfc.png" style="height: 200px"><br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer" style="justify-content: center;">
|
|
||||||
<button type="button" class="btn btn-danger" id="close" >Cancel</button>
|
|
||||||
</div>
|
|
||||||
=======
|
|
||||||
<style>
|
<style>
|
||||||
/* Base Styling */
|
/* Base Styling */
|
||||||
.payment-modal {
|
.payment-modal {
|
||||||
@@ -23,11 +7,6 @@
|
|||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
|
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
#read_modal{
|
|
||||||
pointer-events: auto;
|
|
||||||
zindex: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.payment-header {
|
.payment-header {
|
||||||
background: #f8fbfc;
|
background: #f8fbfc;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
@@ -163,7 +142,27 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="modal fade payment-modal" id="read_modal" role="dialog">
|
<div class="modal fade" id="read_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
|
||||||
|
<div class="modal-dialog read-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header" style="background-color: #54A5AF;padding-top:10px !important;">
|
||||||
|
<h4 class="modal-title" id="defaultModalLabel" style="color:#fff;">Customer Detail</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<p style="text-align: center; font-weight: bolder; color: black; font-size: larger">Please tap NFC Card or Scan Code</p>
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<img src="/image/barcode.png" style="height: 200px">
|
||||||
|
<img src="/image/nfc.png" style="height: 200px"><br>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer" style="justify-content: center;">
|
||||||
|
<button type="button" class="btn btn-danger" id="close" >Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal fade payment-modal" id="payment_modal" tabindex="-1" role="dialog">
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog" role="document">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="payment-header">
|
<div class="payment-header">
|
||||||
@@ -179,87 +178,94 @@
|
|||||||
|
|
||||||
<div class="text-center text-bold text-muted">
|
<div class="text-center text-bold text-muted">
|
||||||
(Or)
|
(Or)
|
||||||
>>>>>>> Stashed changes
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Read NFC Card -->
|
||||||
|
<button type="button" id="read_nfc" data-toggle="modal" data-target="#read_modal">
|
||||||
|
<div class="payment-card disabled" id="read_nfc" style="grid-column: span 2;">
|
||||||
|
<div class="payment-icon text-center">
|
||||||
|
<img src="/image/nfc.png" width="100" height="100" />
|
||||||
|
</div>
|
||||||
|
<div class="payment-label text-center">Tap your NFC-enabled card or device</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn-cancel" id="close">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<script defer type="text/javascript">
|
||||||
#read_modal {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
text-align: center;
|
const paymentCards = document.querySelectorAll('.payment-card:not(.disabled)');
|
||||||
padding: 0!important;
|
const cancelButton = document.querySelector('.btn-cancel');
|
||||||
}
|
|
||||||
|
|
||||||
#read_modal:before {
|
$("#read_nfc").on('click', function() {
|
||||||
display: inline-block;
|
$('#payment_modal').css('display', 'none');
|
||||||
vertical-align: middle;
|
$('.modal-backdrop.fade').css('display', 'none');
|
||||||
content: " ";
|
});
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-dialog {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: left;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
cancelButton.addEventListener('click', function () {
|
||||||
$('#mmqr').click(function() {
|
console.log("Action: Cancel payment.");
|
||||||
// alert("MMQR");
|
|
||||||
|
|
||||||
const paymentMethod = 'MMQR';
|
paymentCards.forEach(c => c.classList.remove('active'));
|
||||||
const $serverMode = $('#server_mode');
|
|
||||||
const $createOrderBtn = $('#create_order');
|
|
||||||
const $createPayOrderBtn = $('#create_pay_order');
|
|
||||||
|
|
||||||
const params = {
|
styleProceedButton(false);
|
||||||
order_source: "food_court",
|
});
|
||||||
order_type: "dine_in",
|
|
||||||
customer_id: $("#customer_id").text(),
|
|
||||||
guest_info: "",
|
|
||||||
table_id: $("#table_id").text(),
|
|
||||||
order_items: JSON.stringify(get_order_item_rows()),
|
|
||||||
create_type: "create_pay",
|
|
||||||
};
|
|
||||||
|
|
||||||
$.ajax({
|
const disabledNfcCard = document.querySelector('.payment-card.disabled');
|
||||||
url: '/foodcourt/addorders/create',
|
|
||||||
method: 'POST',
|
|
||||||
contentType: 'application/json',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
|
|
||||||
},
|
|
||||||
data: JSON.stringify(params),
|
|
||||||
success: function(result) {
|
|
||||||
const booking_id = result.booking_id;
|
|
||||||
window.location.href = `/foodcourt/${result.sale_id}/qrpay/init`;
|
|
||||||
if ($serverMode.val() !== "cloud" && $("#display_type").val() === "2") {
|
|
||||||
// customer_display_view(null, "reload");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function(xhr) {
|
|
||||||
$('#oqs_loading_wrapper').hide();
|
|
||||||
$createOrderBtn.prop('disabled', false);
|
|
||||||
$createPayOrderBtn.prop('disabled', false);
|
|
||||||
|
|
||||||
const errorMsg = xhr.status ? `Status: ${xhr.status} - ${xhr.statusText}` : "Network error";
|
document.querySelector('.payment-card#dynamic_qr').addEventListener('click', function() {
|
||||||
swal("Error", errorMsg, "error");
|
initDynamicQrPay();
|
||||||
|
});
|
||||||
|
|
||||||
|
function initDynamicQrPay() {
|
||||||
|
const paymentMethod = 'MMQR';
|
||||||
|
const $serverMode = $('#server_mode');
|
||||||
|
const $createOrderBtn = $('#create_order');
|
||||||
|
const $createPayOrderBtn = $('#create_pay_order');
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
order_source: "food_court",
|
||||||
|
order_type: "dine_in",
|
||||||
|
customer_id: $("#customer_id").text(),
|
||||||
|
guest_info: "",
|
||||||
|
table_id: $("#table_id").text(),
|
||||||
|
order_items: JSON.stringify(get_order_item_rows()),
|
||||||
|
create_type: "create_pay",
|
||||||
|
};
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: '/foodcourt/addorders/create',
|
||||||
|
method: 'POST',
|
||||||
|
contentType: 'application/json',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
|
||||||
|
},
|
||||||
|
data: JSON.stringify(params),
|
||||||
|
success: function(result) {
|
||||||
|
const booking_id = result.booking_id;
|
||||||
|
window.location.href = `/foodcourt/${result.sale_id}/qrpay/init`;
|
||||||
|
if ($serverMode.val() !== "cloud" && $("#display_type").val() === "2") {
|
||||||
|
// customer_display_view(null, "reload");
|
||||||
}
|
}
|
||||||
});
|
},
|
||||||
})
|
error: function(xhr) {
|
||||||
|
$('#oqs_loading_wrapper').hide();
|
||||||
|
$createOrderBtn.prop('disabled', false);
|
||||||
|
$createPayOrderBtn.prop('disabled', false);
|
||||||
|
|
||||||
// function get_order_item_rows(){
|
const errorMsg = xhr.status ? `Status: ${xhr.status} - ${xhr.statusText}` : "Network error";
|
||||||
// var order_items = [];
|
swal("Error", errorMsg, "error");
|
||||||
// var item_row = $('.summary-items tbody tr');
|
}
|
||||||
// $(item_row).each(function(i){
|
});
|
||||||
// var order_item = {};
|
}
|
||||||
|
});
|
||||||
// // order_item.item_name = $(item_row[i]).attr('data-item-name');
|
|
||||||
// order_item.item_instance_code = $(item_row[i]).attr('data-instance-code');
|
|
||||||
|
|
||||||
// order_items.push(order_item);
|
|
||||||
// });
|
|
||||||
// return order_items;
|
|
||||||
// }
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user