From 34b7cbb178cc7dd7f7999af31dbc1414486daaf3 Mon Sep 17 00:00:00 2001
From: nyanlinhtut <nyanlinhtut@code2lab.com>
Date: Thu, 25 May 2023 13:46:59 +0630
Subject: [PATCH] change read NFC UI

---
 app/assets/javascripts/addorder.js            | 37 +++++++--
 app/assets/javascripts/foodcourt/addorder.js  |  6 +-
 app/assets/stylesheets/addorder.scss          | 54 ++++++-------
 app/assets/stylesheets/foodcourt.scss         | 75 +++++++++----------
 app/views/foodcourt/addorders/detail.html.erb | 16 ++--
 .../foodcourt/orders/app_orders.html.erb      | 22 ++----
 app/views/foodcourt/payments/show.html.erb    | 56 +++++++-------
 app/views/layouts/_read_modal.html.erb        | 39 ++++++++++
 8 files changed, 180 insertions(+), 125 deletions(-)
 create mode 100644 app/views/layouts/_read_modal.html.erb

diff --git a/app/assets/javascripts/addorder.js b/app/assets/javascripts/addorder.js
index f1afd604..36b5026f 100755
--- a/app/assets/javascripts/addorder.js
+++ b/app/assets/javascripts/addorder.js
@@ -1194,11 +1194,26 @@ $(function() {
 
 
   // Pay Discount for Payment
-  $("#create_pay_order").on('click', function(e){
+  // $("#create_pay_order").on('click', function(e){
+    
+  //   $(this).prop("disabled", true);
+  //   $("#create_order").prop("disabled", true);
+  //   $("#read_modal").attr('data-for', 'member');
+  //   e.preventDefault();
+  //   getCardNo();
+
+  //   onScan.attachTo(document, {
+  //     onScan: function(sCode) {
+  //       setCardNo(sCode)
+  //     }
+  //   });
+  // });
+
+  $("#read_modal").on('shown.bs.modal', function(e) {
     $(this).prop("disabled", true);
+    $("#create_pay_order").prop("disabled", true);
     $("#create_order").prop("disabled", true);
-    $("#sxModal").show();
-    $("#sxModal").attr('data-for', 'member');
+    $("#read_modal").attr('data-for', 'member');
     e.preventDefault();
     getCardNo();
 
@@ -1209,14 +1224,21 @@ $(function() {
     });
   });
 
-  $("#sxModal .btn_cancel").on('click',function(){
+  $("#read_modal #close").on('click',function(){
     if ($("#order-items-table tr").length > 1){
       $("#create_pay_order").prop("disabled", false);
       $("#create_order").prop("disabled", false);
     }
-    $("#sxModal").hide();
+    $("#read_modal").modal('hide');
   });
 
+  $('#read_modal').on('hidden.bs.modal', function () {
+    if ($("#order-items-table tr").length > 1) {
+      $("#create_pay_order").prop("disabled", false);
+      $("#create_order").prop("disabled", false);
+    }
+  })
+
   //click item row for update qty
   $('.summary-items').on('click', '.item_box', function(){
     $(this).attr('data-active',true);
@@ -1249,6 +1271,11 @@ $(function() {
   $('#sx_item_set_detailModal').on('click','#close', function(){
     $("#sx_item_set_detailModal").css({ 'display': "none" });
   });
+
+  $('#read_modal').on('click','#close', function(){
+    $("#read_modal").css({ 'display': "none" });
+  });
+
   //click save buttom after change qty
   $(document).on('click','#save', function(){
     if ($('#modal-qty').val()>0) {
diff --git a/app/assets/javascripts/foodcourt/addorder.js b/app/assets/javascripts/foodcourt/addorder.js
index c32a0452..02f4b6ca 100644
--- a/app/assets/javascripts/foodcourt/addorder.js
+++ b/app/assets/javascripts/foodcourt/addorder.js
@@ -6,12 +6,12 @@ function getCardNo(){
 function setCardNo(cardNo){
   if(cardNo.length == 16){
     $("#paypar_account_no").val(cardNo);
-    if ($("#sxModal").attr("data-for") == 'member') {
+    if ($("#read_modal").attr("data-for") == 'member') {
       member_card(cardNo)
-    } else if ($("#sxModal").attr('data-for') == 'payment') {
+    } else if ($("#read_modal").attr('data-for') == 'payment') {
       pay_with_card(cardNo);
     }
-    $("#sxModal").hide();
+    $("#read_modal").modal('hide');
   }
 }
 function member_card(cardNo) {
diff --git a/app/assets/stylesheets/addorder.scss b/app/assets/stylesheets/addorder.scss
index f3bcdaff..f9de5b64 100755
--- a/app/assets/stylesheets/addorder.scss
+++ b/app/assets/stylesheets/addorder.scss
@@ -26,34 +26,34 @@ section .content{
 .custom-card-block {
     padding: 0.3rem !important;
 }
-#sxModal {
-	display: none;
-    overflow: auto;
-    width: 100%;
-    height: 100%;
-    background-color: #000;
-    background-color: rgba(0,0,0,0.4);
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1100;
-}
+// #sxModal {
+// 	display: none;
+//     overflow: auto;
+//     width: 100%;
+//     height: 100%;
+//     background-color: #000;
+//     background-color: rgba(0,0,0,0.4);
+//     position: fixed;
+//     top: 0;
+//     right: 0;
+//     bottom: 0;
+//     left: 0;
+//     z-index: 1100;
+// }
 
-#sxModal-Content {
-	position: relative;
-	left: 42%;
-	top: 30%;
-	background-color: #32ad1a;
-	color: #fff;
-	text-align: center;
-    width: 200px;
-    height: 200px;
-    padding-top: 5%;
-    border-radius: 100px;
-    z-index: 1101;
-}
+// #sxModal-Content {
+// 	position: relative;
+// 	left: 42%;
+// 	top: 30%;
+// 	background-color: #32ad1a;
+// 	color: #fff;
+// 	text-align: center;
+//     width: 200px;
+//     height: 200px;
+//     padding-top: 5%;
+//     border-radius: 100px;
+//     z-index: 1101;
+// }
 
   @media (min-width: 34em) {
     .custom-card-columns {
diff --git a/app/assets/stylesheets/foodcourt.scss b/app/assets/stylesheets/foodcourt.scss
index eae6042a..2a203037 100644
--- a/app/assets/stylesheets/foodcourt.scss
+++ b/app/assets/stylesheets/foodcourt.scss
@@ -113,16 +113,11 @@ select.form-control {
 	opacity:0.6,
 }
 
-.pay{
-	text-align:center;
-	font-size:20px;
-  color:white;
-  border-radius: 50% !important;
-  width: 45%;
-  height: 220px;
-  margin: 0 auto !important;
-  line-height: 210px;
-}
+// .btn_paymal_member{
+//   padding: 40px;
+//   font-size: 20px;
+//   font-weight: bolder;
+// }
 
 .move_table{
 	width: 100%;
@@ -318,34 +313,34 @@ select.form-control {
   border-left:1px solid #fff;
 }
 
-#sxModal {
-	display: none;
-    overflow: auto;
-    width: 100%;
-    height: 100%;
-    background-color: #000;
-    background-color: rgba(0,0,0,0.4);
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1100;
-}
+// #sxModal {
+// 	display: none;
+//     overflow: auto;
+//     width: 100%;
+//     height: 100%;
+//     background-color: #000;
+//     background-color: rgba(0,0,0,0.4);
+//     position: fixed;
+//     top: 0;
+//     right: 0;
+//     bottom: 0;
+//     left: 0;
+//     z-index: 1100;
+// }
 
-#sxModal-Content {
-	position: relative;
-	left: 42%;
-	top: 30%;
-	background-color: #32ad1a;
-	color: #fff;
-	text-align: center;
-    width: 200px;
-    height: 200px;
-    padding-top: 5%;
-    border-radius: 100px;
-    z-index: 1101;
-}
+// #sxModal-Content {
+// 	position: relative;
+// 	left: 42%;
+// 	top: 30%;
+// 	background-color: #32ad1a;
+// 	color: #fff;
+// 	text-align: center;
+//     width: 200px;
+//     height: 200px;
+//     padding-top: 5%;
+//     border-radius: 100px;
+//     z-index: 1101;
+// }
 
 /*Loading gif for payment*/
 
@@ -379,8 +374,10 @@ select.form-control {
 	width:43%;
 }
 
-.payment-left {
-	margin-left: 20px;
+.btn_paymal_member {
+  padding: 40px !important;
+  font-size: 20px !important;
+  font-weight: bolder;
 }
 
 /* End Payment Page */
diff --git a/app/views/foodcourt/addorders/detail.html.erb b/app/views/foodcourt/addorders/detail.html.erb
index d9c96721..d31f2d1b 100644
--- a/app/views/foodcourt/addorders/detail.html.erb
+++ b/app/views/foodcourt/addorders/detail.html.erb
@@ -215,10 +215,10 @@
                   </tr>
                 </table>
                 <% if params[:update] %>
-                  <button type="button" class="btn btn-primary action-btn create col-md-12 m-t-5" id="create_pay_order" disabled="disabled" 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 %>
                   <% if @sale_id.nil?%>
-                    <button type="button" class="btn btn-primary action-btn create col-md-4 d-inline" id="create_pay_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-4 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>
                   <% else %>
                     <button type="button" class="btn btn-primary action-btn create col-md-4 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 %>
@@ -356,14 +356,8 @@
   </div>
 </div>
 </div>
-<div id="sxModal">
-  <div id="sxModal-Content">
-    <h3>Scan OR Tap Card</h3>
-  </div>
-  <div style="position: absolute; bottom: 0; margin-left: 45%; margin-bottom: 60px;">
-      <button type="button" class="btn btn-lg btn-link bg-red waves-effect btn_cancel">Cancel</button>
-  </div>
-</div>
+
+<%= render "layouts/read_modal" %>
 
 <!-- Large modal -->
 <div class="modal sx_item_set_detailModal h-100" id="sx_item_set_detailModal" tabindex="-1" role="dialog" aria-labelledby="sx_item_set_detailLabel" aria-hidden="true" >
@@ -828,4 +822,4 @@ showHideNavbar(webview);
 <% end %>
 });
 
-  </script>
+</script>
diff --git a/app/views/foodcourt/orders/app_orders.html.erb b/app/views/foodcourt/orders/app_orders.html.erb
index abb6b8db..443a7e35 100644
--- a/app/views/foodcourt/orders/app_orders.html.erb
+++ b/app/views/foodcourt/orders/app_orders.html.erb
@@ -410,14 +410,14 @@
         <%end%>
 
         <% if current_user.role != "waiter" && @status != "order"%>
-          <button type="button" id="pay" class="btn bg-blue btn-block">Pay</button>
+          <button type="button" id="pay" class="btn bg-blue btn-block" data-toggle="modal" data-target="#read_modal">Pay</button>
           <button type="button" id="void" class="btn btn-block bg-red waves-effect" >VOID</button>
         <%end%>
 
         <% if @status != "sale"%>
           <!-- <button type="button" id="request_bills" class="btn btn-block bg-blue waves-effect">Req.Bill</button> -->
           <% order_id = @pending.try(:orders).try(:first).try(:order_id) if @status == 'order' %>
-          <button type="button" class="btn btn-block bg-blue waves-effect req_bill" >Req.Bill</button>
+          <button type="button" class="btn btn-block bg-blue waves-effect req_bill" data-toggle="modal" data-target="#read_modal" >Req.Bill</button>
           <button type="button" id="order_cancel" class="btn btn-block bg-red waves-effect" >CANCEL</button>
           <input type="hidden" id="save_order_id" value="<%=order_id%>">
         <%end%>
@@ -498,14 +498,8 @@
     </div>
   </div>
 </div>
-<div id="sxModal">
-  <div id="sxModal-Content">
-    <h3>Scan OR Tap Card</h3>
-  </div>
-  <div style="position: absolute; bottom: 0; margin-left: 45%; margin-bottom: 60px;">
-      <button type="button" class="btn btn-lg btn-link bg-red waves-effect btn_cancel">Cancel</button>
-  </div>
-</div>
+<%= render "layouts/read_modal" %>
+
 <script type="text/javascript">
   var cashier_type = 'food_court';
   $(document).ready( function() {
@@ -515,8 +509,8 @@
   })
 
   $('#pay, .req_bill').on('click', function () {
-    $("#sxModal").show();
-    $("#sxModal").attr('data-for', 'member');
+    $("#read_modal").show();
+    $("#read_modal").attr('data-for', 'member');
     var sale_id = $('#sale_id').text();
     getCardNo();
 
@@ -531,11 +525,11 @@
 //     getCardNo();
 //   });
 
- $("#sxModal .btn_cancel").on('click',function(){
+ $("#read_modal #close").on('click',function(){
     if($("#order-items-table tr").length > 1){
       $( "#create_pay_order" ).prop( "disabled", false );
     }
-    $("#sxModal").hide();
+    $("#read_modal").modal('hide');
   });
 
   $('#addorder').on('click', function () {
diff --git a/app/views/foodcourt/payments/show.html.erb b/app/views/foodcourt/payments/show.html.erb
index b0447040..4733e7e1 100755
--- a/app/views/foodcourt/payments/show.html.erb
+++ b/app/views/foodcourt/payments/show.html.erb
@@ -36,7 +36,7 @@
               <div class="col-lg-6 col-md-6 col-sm-6">
                 <strong>Customer :</strong>
                 <% if @cashier_type == 'quick_service' || @cashier_type == 'food_court' %>
-                  <button type="button" class="btn bg-info waves-effect" id='customer_name'><%= @sale_data.customer.name%></button>
+                  <button type="button" class="btn bg-info waves-effect" id='customer_name' data-toggle="modal" data-target="#read_modal"><%= @sale_data.customer.name%></button>
                   <input type="hidden" name="paypar_account_no" id="paypar_account_no" value='<%=@sale_data.customer.paypar_account_no%>' />
                 <% else %>
                 <input type="hidden" name="paypar_account_no" id="paypar_account_no" value='<%=@sale_data.customer.paypar_account_no%>' />
@@ -170,7 +170,7 @@
 
 <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 d-flex flex-column h-100" style="padding-right: 10px;">
   <div class="card h-100" style="margin-bottom: 15px">
-    <div class="card-header" style="margin-bottom: 20%;">
+    <div class="card-header">
       <div class="row m-l-5 m-r-5 m-t-20" style="padding-bottom: 14px;">
         <div class="col-md-8"><strong class='amount_balance' style="font-size: 30px">Amount Due: <% if !@sale_payment.nil? %>( Credit )<% end %></strong></div>
         <div class="col-md-4 text-right">
@@ -197,10 +197,7 @@
     <div class="card-block">
       <input type="hidden" name="server_mode" value="<%=ENV["SERVER_MODE"]%>" id="server_mode">
       <input type="hidden" name="display_type" id="display_type" value="<%= @display_type%>">
-
-      <div class="btn_paymal_member pay border-top border- border-left purple payment-left">
-        Pay
-      </div>
+      <button type="button" class="btn btn-block btn-lg btn-success waves-effect btn_paymal_member pay">[ Complete Payment ]</button>
     </div>
   </div>
 </div>
@@ -412,14 +409,7 @@
   </div>
 </div>
 
-<div id="sxModal">
-  <div id="sxModal-Content">
-    <h3>Scan OR Tap Card</h3>
-  </div>
-  <div style="position: absolute; bottom: 0; margin-left: 45%; margin-bottom: 60px;">
-      <button type="button" class="btn btn-lg btn-link bg-red waves-effect btn_cancel">Cancel</button>
-  </div>
-</div>
+<%= render "layouts/read_modal" %>
 
 <script type="text/javascript">
 // //control borwser back
@@ -435,7 +425,7 @@ var paymalcount = <%= @paymalcount %>;
 var customer_paypar_account = '<%= @sale_data.customer.paypar_account_no %>';
 // console.log(pdf_view)
 $(document).ready(function(){
-    $("#sxModal").hide();
+    $("#read_modal").modal('hide');
     /* replace url type*/
     if(!trans_flag){
       localStorage.setItem("trans_flag", trans_flag);
@@ -718,8 +708,8 @@ $(document).ready(function(){
   // Read Card Reader
   $(".btn_member").on('click', function(){
     $("#is_memberModal").hide();
-    $("#sxModal").attr('data-for', 'member');
-    $("#sxModal").show();
+    $("#read_modal").attr('data-for', 'member');
+    $("#read_modal").show();
     getCardNo();
 
     onScan.attachTo(document, {
@@ -903,12 +893,12 @@ $(document).ready(function(){
   function setCardNo(cardNo){
     if(cardNo.length == 16){
       $("#paypar_account_no").val(cardNo);
-      if ($("#sxModal").attr("data-for") == 'member') {
+      if ($("#read_modal").attr("data-for") == 'member') {
         member_card(cardNo);
-      } else if ($("#sxModal").attr('data-for') == 'payment') {
+      } else if ($("#read_modal").attr('data-for') == 'payment') {
         pay_with_card(cardNo);
       }
-      $("#sxModal").hide();
+      $("#read_modal").modal('hide');
     }
   }
 
@@ -979,8 +969,8 @@ $(document).ready(function(){
     });
   }
 
-  $("#sxModal .btn_cancel").on('click',function(){
-    $("#sxModal").hide();
+  $("#read_modal #close").on('click',function(){
+    $("#read_modal").modal('hide');
   });
 
   $(".btn_customer_assign").on('click', function(){
@@ -1200,8 +1190,8 @@ $(document).ready(function(){
   $("#customer_name").on("click",function(){
     //start customer modal popup
     if((cashier_type=='quick_service' || cashier_type=='food_court') && (customer_id!=undefined) && (customer_id!=null) && (customer_id!="")){
-      $("#sxModal").attr('data-for', 'member');
-      $("#sxModal").show();
+      $("#read_modal").attr('data-for', 'member');
+      $("#read_modal").show();
       getCardNo();
 
       onScan.attachTo(document, {
@@ -1212,14 +1202,28 @@ $(document).ready(function(){
     }
   });
 
+  // $("#read_modal").on('shown.bs.modal', function(e) {
+  //   if((cashier_type=='quick_service' || cashier_type=='food_court') && (customer_id!=undefined) && (customer_id!=null) && (customer_id!="")){
+  //     $("#read_modal").attr('data-for', 'member');
+  //     $("#read_modal").show();
+  //     getCardNo();
+
+  //     onScan.attachTo(document, {
+  //       onScan: function(sCode) {
+  //         setCardNo(sCode)
+  //       }
+  //     });
+  //   }
+  // });
+
   // Read Card Reader - Paymal payment for FoodCourt
   $(".btn_paymal_member").on('click', function (){
     $(this).off('click');
     if(customer_paypar_account !== null && customer_paypar_account !== '') {
       pay_with_card($("#paypar_account_no").val())
     }else{
-      $("#sxModal").attr('data-for', 'member');
-      $("#sxModal").show();
+      $("#read_modal").attr('data-for', 'member');
+      $("#read_modal").show();
       getCardNo();
       onScan.attachTo(document, {
         onScan: function(sCode) {
diff --git a/app/views/layouts/_read_modal.html.erb b/app/views/layouts/_read_modal.html.erb
new file mode 100644
index 00000000..617f0697
--- /dev/null
+++ b/app/views/layouts/_read_modal.html.erb
@@ -0,0 +1,39 @@
+<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>
+
+<style>
+  #read_modal {
+  text-align: center;
+  padding: 0!important;
+}
+
+  #read_modal:before {
+    display: inline-block;
+    vertical-align: middle;
+    content: " ";
+    height: 100%;
+  }
+
+  .read-dialog {
+    display: inline-block;
+    text-align: left;
+    vertical-align: middle;
+  }
+</style>
\ No newline at end of file