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

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

@@ -1,12 +1,12 @@
<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-header bg-primary text-white">
<h4 class="mb-0">Invoice Details</h4>
</div>
<div class="card-block h-100">
<div class="card-block">
<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">
<thead class="thead-light">
<tr>
@@ -46,13 +46,13 @@
</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-header text-white" style="background-color: #ffc107;">
<h4 class="mb-0">Payment Options</h4>
<h4 class="mb-0">MMQR Payment Option</h4>
</div>
<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>
<p class="text-muted">Use your mobile wallet app</p>
</div>
@@ -66,7 +66,7 @@
</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>Invoice #:</strong> <span id="qr-invoice"><%= @invoice_id %></span></p>
<p class="text-muted small">Expires in 15 minutes</p>
@@ -88,7 +88,6 @@
</div>
<style>
/* Add these styles to your existing CSS */
.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border: none;

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

@@ -94,7 +94,7 @@
<%= render 'slider' %>
</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' %>
</div>
</div>