git_admin/sx-fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : second display layout

Browse Source 
- show item and QR seperately
- show total amount and receipt no on the ui
This commit is contained in:
aungthetkhaing
2025-05-23 14:21:54 +06:30
parent a12cd193c4
commit 40dc0950f9
4 changed files with 220 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
app/assets/javascripts/channels/second_display_view.js
View File

@@ -1,34 +1,34 @@
App.checkin = App.cable.subscriptions.create('SecondDisplayViewChannel', { App.checkin = App.cable.subscriptions.create("SecondDisplayViewChannel", {
// App.messages = App.cable.subscriptions.create('MessagesChannel', { // App.messages = App.cable.subscriptions.create('MessagesChannel', {
connected: function() {}, connected: function () {},
disconnected: function() {}, disconnected: function () {},
received: function(data) { received: function (data) {
var hostname = location.hostname.trim(); var hostname = location.hostname.trim();
if(data.from == "" || hostname == data.from){ if (data.from == "" || hostname == data.from) {
var items = data.data; var items = data.data;
var tax = data.tax_profiles; var tax = data.tax_profiles;
var status= data.status var status = data.status;
if (status == "reload") { if (status == "reload") {
jQuery('#s_reload').click(); jQuery("#s_reload").click();
} }
// $('#second_display_slider').addClass("hidden") // $('#second_display_slider').addClass("hidden")
$('#second_display_items').removeClass("hidden") $("#second_display_items").removeClass("hidden");
// append items // append items
if (status == "add") { if (status == "add") {
for(var i in items) { for (var i in items) {
qty = parseInt(items[i].qty); qty = parseInt(items[i].qty);
append = 0; append = 0;
price = items[i].price; price = items[i].price;
instance_name = items[i].instance; instance_name = items[i].instance;
if (instance_name == "undefined"){ if (instance_name == "undefined") {
instance = ''; instance = "";
}else{ } else {
instance = "("+items[i].instance+")"; instance = "(" + items[i].instance + ")";
} }
// d_option = items[i].options; // d_option = items[i].options;
@@ -39,162 +39,238 @@ App.checkin = App.cable.subscriptions.create('SecondDisplayViewChannel', {
// } // }
d_option = items[i].opt; d_option = items[i].opt;
console.log(d_option) console.log(d_option);
if (items[i].click_type != "add_icon"){ if (items[i].click_type != "add_icon") {
option_name = "-"+items[i].options; option_name = "-" + items[i].options;
data_option = items[i].options ; data_option = items[i].options;
}else{ } else {
option_name = ' '; option_name = " ";
data_option = '[]'; data_option = "[]";
} }
var rowCount = $('.second_display_items tbody tr').length+1; var rowCount = $(".second_display_items tbody tr").length + 1;
var item_row = $('.second_display_items tbody tr'); var item_row = $(".second_display_items tbody tr");
$(item_row).each(function(j){ $(item_row).each(function (j) {
var item_code = $(item_row[j]).attr('data-code'); var item_code = $(item_row[j]).attr("data-code");
var instance_code = $(item_row[j]).attr('data-instance-code'); var instance_code = $(item_row[j]).attr("data-instance-code");
var r_option = $(item_row[j]).attr('data-opt'); var r_option = $(item_row[j]).attr("data-opt");
console.log(r_option) console.log(r_option);
if (item_code == items[i].item_code && instance_code == items[i].instance_code && r_option==d_option) { if (
item_code == items[i].item_code &&
instance_code == items[i].instance_code &&
r_option == d_option
) {
if (qty > 1) { if (qty > 1) {
qty = parseInt($(item_row[j]).children('#item_qty').text()) + qty; qty =
}else{ parseInt($(item_row[j]).children("#item_qty").text()) + qty;
qty = parseInt($(item_row[j]).children('#item_qty').text()) + 1; } else {
qty = parseInt($(item_row[j]).children("#item_qty").text()) + 1;
} }
$(item_row[j]).children('#item_qty').text(qty); $(item_row[j]).children("#item_qty").text(qty);
parseFloat($(item_row[j]).children('#item_price').text(parseFloat(price*qty).toFixed(2))); parseFloat(
append =1; $(item_row[j])
}else{ .children("#item_price")
.text(parseFloat(price * qty).toFixed(2)),
);
append = 1;
} else {
if (qty > 1) { if (qty > 1) {
qty = qty; qty = qty;
}else{ } else {
qty = 1; qty = 1;
} }
} }
}); });
if (append===0) { if (append === 0) {
row ="<tr class='item_box_"+items[i].instance_code+"' data-price ='" row =
+price+ "' 'data-instance ='" "<tr class='item_box_" +
+instance+ "' data-code='"+items[i].item_code+"' data-instance-code='" items[i].instance_code +
+items[i].instance_code+"' data-attributes='" "' data-price ='" +
+items[i].attributes+"' data-options ='" price +
+data_option+"' data-opt ='" "' 'data-instance ='" +
+items[i].options+"' data-row ='"+rowCount+ "'>" instance +
+'<td class="item-cell-no">'+rowCount+'</td>' "' data-code='" +
+'<td class="item-cell-name" id="item_name" >' + items[i].name+ ' ' + instance + ' ' + option_name +'</td>' items[i].item_code +
+'<td class="item-cell-qty" id="item_qty">' + qty + '</td>' "' data-instance-code='" +
+'<td class="item-cell-price" id="item_price">' items[i].instance_code +
+ parseFloat(price).toFixed(2) "' data-attributes='" +
+'</td>' items[i].attributes +
+'</tr>'; "' data-options ='" +
data_option +
"' data-opt ='" +
items[i].options +
"' data-row ='" +
rowCount +
"'>" +
'<td class="item-cell-no">' +
rowCount +
"</td>" +
'<td class="item-cell-name" id="item_name" >' +
items[i].name +
" " +
instance +
" " +
option_name +
"</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>";
$(".second_display_items tbody").append(row); $(".second_display_items tbody").append(row);
//slim scroll //slim scroll
var scrollContainer = $('#order-detail-slimscroll'); var scrollContainer = $("#order-detail-slimscroll");
scrollContainer.slimScroll({ scrollTo: scrollContainer[0].scrollHeight }); scrollContainer.slimScroll({
scrollTo: scrollContainer[0].scrollHeight,
});
} }
} }
} }
if (status == "set_add") { if (status == "set_add") {
// var option_arr = []; // var option_arr = [];
var attribute_arr = []; var attribute_arr = [];
var rowCount = $('.second_display_items tbody tr').length+1; var rowCount = $(".second_display_items tbody tr").length + 1;
for(var i in items) { for (var i in items) {
code = items[i].code; code = items[i].code;
item_code = items[i].item_code; item_code = items[i].item_code;
name = items[i].name; name = items[i].name;
item_name = items[i].item_name; item_name = items[i].item_name;
qty = items[i].qty; qty = items[i].qty;
price = items[i].price; price = items[i].price;
option = items[i].option; option = items[i].option;
sub_item = items[i].sub_item; sub_item = items[i].sub_item;
total = qty * price ; total = qty * price;
// option_arr.push(option); // option_arr.push(option);
row ="<tr class='item_box_"+item_code+"' data-price ='" row =
+price+ "' data-toggle='modal' data-target='#sx_itemModal' 'data-instance ='" "<tr class='item_box_" +
+name+ "' data-code='"+item_code+"' data-instance-code='" item_code +
+code+"' data-attributes='" "' data-price ='" +
+attribute_arr+"' data-options ='" price +
+option+"' data-row ='"+rowCount+ "' data-sub-item ='"+sub_item+ "'>" "' data-toggle='modal' data-target='#sx_itemModal' 'data-instance ='" +
+'<td class="item-cell-no">'+rowCount+'</td>' name +
+'<td class="item-cell-name" id="item_name" >' + item_name+ ' ' + name + ''+option+'</td>' "' data-code='" +
+'<td class="item-cell-qty" id="item_qty">' + qty + '</td>' item_code +
+'<td class="item-cell-price" id="item_price">' "' data-instance-code='" +
+ parseFloat(total).toFixed(2) code +
+'</td>' "' data-attributes='" +
+'</tr>'; attribute_arr +
$(".second_display_items tbody").append(row); "' data-options ='" +
option +
"' data-row ='" +
rowCount +
"' data-sub-item ='" +
sub_item +
"'>" +
'<td class="item-cell-no">' +
rowCount +
"</td>" +
'<td class="item-cell-name" id="item_name" >' +
item_name +
" " +
name +
"" +
option +
"</td>" +
'<td class="item-cell-qty" id="item_qty">' +
qty +
"</td>" +
'<td class="item-cell-price" id="item_price">' +
parseFloat(total).toFixed(2) +
"</td>" +
"</tr>";
$(".second_display_items tbody").append(row);
var scrollContainer = $('#order-detail-slimscroll'); var scrollContainer = $("#order-detail-slimscroll");
scrollContainer.slimScroll({ scrollTo: scrollContainer[0].scrollHeight }); scrollContainer.slimScroll({
rowCount = rowCount + 1; scrollTo: scrollContainer[0].scrollHeight,
});
rowCount = rowCount + 1;
} }
} }
//remove item //remove item
if(status == "remove"){ if (status == "remove") {
for(var i in items) { for (var i in items) {
var item_code = items[i].instance_code; var item_code = items[i].instance_code;
$("#order-items-table tbody > tr.item_box_"+item_code+"").remove(); $(
"#order-items-table tbody > tr.item_box_" + item_code + "",
).remove();
} }
} }
//remove item //remove item
//update item qty //update item qty
if(status == "update_qty"){ if (status == "update_qty") {
for (var i in items) {
for(var i in items) {
var item_code = items[i].instance_code; var item_code = items[i].instance_code;
var item_qty = parseInt(items[i].qty); var item_qty = parseInt(items[i].qty);
var item_price = parseFloat(items[i].price); var item_price = parseFloat(items[i].price);
var item_total = parseFloat(item_qty * item_price).toFixed(2); var item_total = parseFloat(item_qty * item_price).toFixed(2);
$("#order-items-table tbody > tr.item_box_"+item_code+"").find("#item_qty").text(item_qty); $("#order-items-table tbody > tr.item_box_" + item_code + "")
$("#order-items-table tbody > tr.item_box_"+item_code+"").find("#item_price").text(item_total); .find("#item_qty")
.text(item_qty);
$("#order-items-table tbody > tr.item_box_" + item_code + "")
.find("#item_price")
.text(item_total);
} }
} }
//update item qty //update item qty
//end apend items //end apend items
var total_price = 0; var total_price = 0;
var taxable_amount = 0; var taxable_amount = 0;
var total_discount = 0 var total_discount = 0;
var total_tax_amount = 0 var total_tax_amount = 0;
var item_row = $('.second_display_items tbody tr'); var item_row = $(".second_display_items tbody tr");
//calculate Sub Total //calculate Sub Total
$(item_row).each(function(i){ $(item_row).each(function (i) {
var unit_price = parseFloat($(item_row[i]).attr('data-price')); var unit_price = parseFloat($(item_row[i]).attr("data-price"));
var qty = parseFloat($(item_row[i]).children('#item_qty').text()); var qty = parseFloat($(item_row[i]).children("#item_qty").text());
total_price += qty*unit_price; total_price += qty * unit_price;
}); });
//calculate Tax Amount //calculate Tax Amount
for(var i in tax) { for (var i in tax) {
// substract , to give after discount // substract , to give after discount
var total_tax = total_price - total_discount var total_tax = total_price - total_discount;
// include or execulive // include or execulive
if (tax[i].inclusive){ if (tax[i].inclusive) {
rate = tax[i].rate rate = tax[i].rate;
divided_value = (100 + rate)/rate divided_value = (100 + rate) / rate;
total_tax_amount = total_tax_amount + (total_tax / divided_value) total_tax_amount = total_tax_amount + total_tax / divided_value;
}else{ } else {
total_tax_amount = total_tax_amount + (total_tax * tax[i].rate / 100) total_tax_amount = total_tax_amount + (total_tax * tax[i].rate) / 100;
}
} }
//end calculate Tax amount }
var fixed_total_price = parseFloat(total_price).toFixed(2); //end calculate Tax amount
var fixed_taxable_amount = parseFloat(total_tax_amount).toFixed(2); var fixed_total_price = parseFloat(total_price).toFixed(2);
var fixed_grand_total = parseFloat(total_price + total_tax_amount).toFixed(2); var fixed_taxable_amount = parseFloat(total_tax_amount).toFixed(2);
var fixed_grand_total = parseFloat(
total_price + total_tax_amount,
).toFixed(2);
$('#s_sub_total').empty(); $("#s_sub_total").empty();
$('#s_sub_total').append(fixed_total_price); $("#s_sub_total").append(fixed_total_price);
$('#s_tatal_tax').empty(); $("#s_tatal_tax").empty();
$('#s_tatal_tax').append(fixed_taxable_amount); $("#s_tatal_tax").append(fixed_taxable_amount);
$('#s_grand_total').empty(); $("#s_grand_total").empty();
$('#s_grand_total').append(fixed_grand_total); $("#s_grand_total").append(fixed_grand_total);
} }
if (data.qr_svg) { if (data.qr_svg && data.grand_total && data.invoice_no) {
console.log(data);
const html = `
<p class="mb-1"><strong>Amount:</strong> <span id="qr-amount">${new Intl.NumberFormat(
"en-IN",
).format(Number(data.grand_total))} MMK</span></p>
<p class="mb-1"><strong>Invoice #:</strong> <span id="qr-invoice"> ${data.invoice_no} </span></p>
`;
document.querySelector("#qrpay_svg").innerHTML = data.qr_svg; document.querySelector("#qrpay_svg").innerHTML = data.qr_svg;
document.querySelector(".payment-details").innerHTML = html;
$("#mmqr_payment").removeClass("hidden");
$("#second_display_order_items").addClass("hidden");
} }
} },
}); });

2
app/controllers/foodcourt/qrpay_controller.rb
View File

@@ -244,7 +244,7 @@ class Foodcourt::QrpayController < BaseFoodcourtController
# size: 240 # Approximate size of the image in pixels (e.g., 240x240) # size: 240 # Approximate size of the image in pixels (e.g., 240x240)
# ).to_s # ).to_s
ActionCable.server.broadcast('second_display_view_channel', { data: @qr_string, qr_svg: @qr_svg }) ActionCable.server.broadcast('second_display_view_channel', { data: @qr_string, qr_svg: @qr_svg, grand_total: @sale_data.grand_total, invoice_no: @sale_data.receipt_no })
end end
end end
end end

15
app/views/foodcourt/second_display/_second_display.html.erb
View File

@@ -1,12 +1,12 @@
<div class="row clearfix h-100"> <div class="row clearfix h-100">
<div class="col-lg-6 col-md-6 col-sm-6 h-100"> <div class="col-lg-12 col-md-12 col-sm-12 h-100" id="second_display_order_items">
<div class="card h-100" style="opacity: 0.85; background-color: #f8f9fa;"> <div class="card h-100" style="opacity: 0.85; background-color: #f8f9fa;">
<div class="card-header bg-primary text-white"> <div class="card-header bg-primary text-white">
<h4 class="mb-0">Invoice Details</h4> <h4 class="mb-0">Invoice Details</h4>
</div> </div>
<div class="card-block h-100"> <div class="card-block">
<div class="card-text"> <div class="card-text">
<div id="order-detail-slimscroll" style="max-height: 60vh; overflow-y: auto;"> <div id="order-detail-slimscroll" style="max-height: 55vh; overflow-y: auto;">
<table class="table table-striped second_display_items" id="order-items-table"> <table class="table table-striped second_display_items" id="order-items-table">
<thead class="thead-light"> <thead class="thead-light">
<tr> <tr>
@@ -46,13 +46,13 @@
</div> </div>
</div> </div>
<div class="col-lg-6 col-md-6 col-sm-6 h-100 d-flex flex-column"> <div class="col-lg-12 col-md-12 col-sm-12 d-flex flex-column hidden" style="min-height: 80%; overflow-y: hidden;" id="mmqr_payment" >
<div class="card h-100" style="opacity: 0.85;"> <div class="card h-100" style="opacity: 0.85;">
<div class="card-header text-white" style="background-color: #ffc107;"> <div class="card-header text-white" style="background-color: #ffc107;">
<h4 class="mb-0">Payment Options</h4> <h4 class="mb-0">MMQR Payment Option</h4>
</div> </div>
<div class="card-body d-flex flex-column align-items-center justify-content-center"> <div class="card-body d-flex flex-column align-items-center justify-content-center">
<div class="text-center mb-4"> <div class="text-center">
<h5>Scan to Pay</h5> <h5>Scan to Pay</h5>
<p class="text-muted">Use your mobile wallet app</p> <p class="text-muted">Use your mobile wallet app</p>
</div> </div>
@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="payment-details"> <div class="payment-details text-dark">
<p class="mb-1"><strong>Amount:</strong> <span id="qr-amount"><%= number_to_currency(@total_amount) %></span></p> <p class="mb-1"><strong>Amount:</strong> <span id="qr-amount"><%= number_to_currency(@total_amount) %></span></p>
<p class="mb-1"><strong>Invoice #:</strong> <span id="qr-invoice"><%= @invoice_id %></span></p> <p class="mb-1"><strong>Invoice #:</strong> <span id="qr-invoice"><%= @invoice_id %></span></p>
<p class="text-muted small">Expires in 15 minutes</p> <p class="text-muted small">Expires in 15 minutes</p>
@@ -88,7 +88,6 @@
</div> </div>
<style> <style>
/* Add these styles to your existing CSS */
.card { .card {
box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border: none; border: none;

2
app/views/foodcourt/second_display/index.html.erb
View File

@@ -94,7 +94,7 @@
<%= render 'slider' %> <%= render 'slider' %>
</div> </div>
<div class="item hidden h-100" id="second_display_items"> <div class="item hidden" id="second_display_items" style="max-height: 80%;">
<%= render 'second_display' %> <%= render 'second_display' %>
</div> </div>
</div> </div>