From 40dc0950f904f0c3f031829061dec03002f96f81 Mon Sep 17 00:00:00 2001 From: aungthetkhaing Date: Fri, 23 May 2025 14:21:54 +0630 Subject: [PATCH] fix : second display layout - show item and QR seperately - show total amount and receipt no on the ui --- .../channels/second_display_view.js | 346 +++++++++++------- app/controllers/foodcourt/qrpay_controller.rb | 2 +- .../second_display/_second_display.html.erb | 15 +- .../foodcourt/second_display/index.html.erb | 2 +- 4 files changed, 220 insertions(+), 145 deletions(-) diff --git a/app/assets/javascripts/channels/second_display_view.js b/app/assets/javascripts/channels/second_display_view.js index cef20419..1a0c6adb 100644 --- a/app/assets/javascripts/channels/second_display_view.js +++ b/app/assets/javascripts/channels/second_display_view.js @@ -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 ="" - +''+rowCount+'' - +'' + items[i].name+ ' ' + instance + ' ' + option_name +'' - +'' + qty + '' - +'' - + parseFloat(price).toFixed(2) - +'' - +''; + if (append === 0) { + row = + "" + + '' + + rowCount + + "" + + '' + + items[i].name + + " " + + instance + + " " + + option_name + + "" + + '' + + qty + + "" + + '' + + parseFloat(price).toFixed(2) + + "" + + ""; $(".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 ="" - +''+rowCount+'' - +'' + item_name+ ' ' + name + ''+option+'' - +'' + qty + '' - +'' - + parseFloat(total).toFixed(2) - +'' - +''; - $(".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 = + "" + + '' + + rowCount + + "" + + '' + + item_name + + " " + + name + + "" + + option + + "" + + '' + + qty + + "" + + '' + + parseFloat(total).toFixed(2) + + "" + + ""; + $(".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 = ` +

Amount: ${new Intl.NumberFormat( + "en-IN", + ).format(Number(data.grand_total))} MMK

+

Invoice #: ${data.invoice_no}

+ `; document.querySelector("#qrpay_svg").innerHTML = data.qr_svg; + document.querySelector(".payment-details").innerHTML = html; + $("#mmqr_payment").removeClass("hidden"); + $("#second_display_order_items").addClass("hidden"); } - } + }, }); diff --git a/app/controllers/foodcourt/qrpay_controller.rb b/app/controllers/foodcourt/qrpay_controller.rb index dc9de678..b3b87a25 100644 --- a/app/controllers/foodcourt/qrpay_controller.rb +++ b/app/controllers/foodcourt/qrpay_controller.rb @@ -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 diff --git a/app/views/foodcourt/second_display/_second_display.html.erb b/app/views/foodcourt/second_display/_second_display.html.erb index 56d31bcc..33e5f5dd 100644 --- a/app/views/foodcourt/second_display/_second_display.html.erb +++ b/app/views/foodcourt/second_display/_second_display.html.erb @@ -1,12 +1,12 @@
-
+

Invoice Details

-
+
-
+
@@ -46,13 +46,13 @@ -
+