listen websocket with action cable consumer
This commit is contained in:
@@ -254,70 +254,66 @@
|
|||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
const $paymentWaiting = $('.payment-waiting');
|
const $paymentWaiting = $('.payment-waiting');
|
||||||
const amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
|
const amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
|
||||||
const $receiptNo = $('#receipt_no');
|
const receiptNo = $('#receipt_no').text();
|
||||||
const ws = new WebSocket("wss://juicecorner-0mo.sx-fc.app/cable");
|
const cable = ActionCable.createConsumer("wss://juicecorner-0mo.sx-fc.app/cable");
|
||||||
|
|
||||||
ws.onopen = function() {
|
const subscription = cable.subscriptions.create(
|
||||||
console.log("Nagato channel connected");
|
{
|
||||||
ws.send(JSON.stringify({
|
channel: "TestChannel",
|
||||||
command: "subscribe",
|
receipt_no: receiptNo
|
||||||
identifier: JSON.stringify({
|
},
|
||||||
channel: "TestChannel",
|
{
|
||||||
receipt_no: $receiptNo.text()
|
connected() {
|
||||||
})
|
console.log("Nagato channel connected");
|
||||||
}));
|
},
|
||||||
};
|
|
||||||
|
|
||||||
ws.onmessage = function(e) {
|
received(data) {
|
||||||
const msg = JSON.parse(e.data);
|
console.log("Received:", data);
|
||||||
console.log("Received:", msg);
|
|
||||||
|
|
||||||
if (msg.type === 'confirm_subscription') {
|
if (data.status === "PAY_SUCCESS") {
|
||||||
console.log("This world shall know pain");
|
this.handlePaymentSuccess();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handlePaymentSuccess() {
|
||||||
|
$paymentWaiting.html(`
|
||||||
|
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
|
||||||
|
<div class="payment-success text-center">
|
||||||
|
<i class="material-icons" style="font-size: 50px; color: #4CAF50;">check_circle</i>
|
||||||
|
<h3 class="m-t-20" style="color: #4CAF50;">Payment Successful!</h3>
|
||||||
|
<p>Amount Received: ${amountToReceive}</p>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: '/foodcourt/qrpay/process_payment',
|
||||||
|
method: 'POST',
|
||||||
|
contentType: 'application/json',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
|
||||||
|
},
|
||||||
|
data: JSON.stringify({ sale_id: "<%= @sale_data.sale_id %>" }),
|
||||||
|
success: (data) => {
|
||||||
|
if (data.status) {
|
||||||
|
customer_display_view({
|
||||||
|
msg: "Payment Successful",
|
||||||
|
paid_amount: amountToReceive,
|
||||||
|
receipt_no: receiptNo
|
||||||
|
}, "pay_success");
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = "/";
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: (xhr, status, error) => {
|
||||||
|
console.log("Error:", error);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
if (msg?.message?.status === "PAY_SUCCESS") {
|
|
||||||
$paymentWaiting.html(`
|
|
||||||
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
|
|
||||||
<div class="payment-success text-center">
|
|
||||||
<i class="material-icons" style="font-size: 50px; color: #4CAF50;">check_circle</i>
|
|
||||||
<h3 class="m-t-20" style="color: #4CAF50;">Payment Successful!</h3>
|
|
||||||
<p>Amount Received: ${amountToReceive}</p>
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: '/foodcourt/qrpay/process_payment',
|
|
||||||
method: 'POST',
|
|
||||||
contentType: 'application/json',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
|
|
||||||
},
|
|
||||||
data: JSON.stringify({ sale_id: "<%= @sale_data.sale_id %>" }),
|
|
||||||
success: function(data) {
|
|
||||||
if (data.status) {
|
|
||||||
customer_display_view({
|
|
||||||
msg: "Payment Successful",
|
|
||||||
paid_amount: amountToReceive,
|
|
||||||
receipt_no: $receiptNo.text()
|
|
||||||
}, "pay_success");
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
window.location.href = "/";
|
|
||||||
}, 3000);
|
|
||||||
ws.close();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function(xhr, status, error) {
|
|
||||||
console.log("Error:", error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ws.onerror = function(e) {
|
|
||||||
console.error("WebSocket error:", e);
|
|
||||||
};
|
|
||||||
|
|
||||||
function customer_display_view(data, status) {
|
function customer_display_view(data, status) {
|
||||||
$.post('/foodcourt/customer_view', {
|
$.post('/foodcourt/customer_view', {
|
||||||
|
|||||||
Reference in New Issue
Block a user