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

change read NFC UI

Browse Source
This commit is contained in:
nyanlinhtut
2023-05-25 13:46:59 +06:30
parent fe6b1057f3
commit 34b7cbb178
8 changed files with 180 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/javascripts/addorder.js
View File

@@ -1194,11 +1194,26 @@ $(function() {
// Pay Discount for Payment // 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); $(this).prop("disabled", true);
$("#create_pay_order").prop("disabled", true);
$("#create_order").prop("disabled", true); $("#create_order").prop("disabled", true);
$("#sxModal").show(); $("#read_modal").attr('data-for', 'member');
$("#sxModal").attr('data-for', 'member');
e.preventDefault(); e.preventDefault();
getCardNo(); 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){ if ($("#order-items-table tr").length > 1){
$("#create_pay_order").prop("disabled", false); $("#create_pay_order").prop("disabled", false);
$("#create_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 //click item row for update qty
$('.summary-items').on('click', '.item_box', function(){ $('.summary-items').on('click', '.item_box', function(){
$(this).attr('data-active',true); $(this).attr('data-active',true);
@@ -1249,6 +1271,11 @@ $(function() {
$('#sx_item_set_detailModal').on('click','#close', function(){ $('#sx_item_set_detailModal').on('click','#close', function(){
$("#sx_item_set_detailModal").css({ 'display': "none" }); $("#sx_item_set_detailModal").css({ 'display': "none" });
}); });
$('#read_modal').on('click','#close', function(){
$("#read_modal").css({ 'display': "none" });
});
//click save buttom after change qty //click save buttom after change qty
$(document).on('click','#save', function(){ $(document).on('click','#save', function(){
if ($('#modal-qty').val()>0) { if ($('#modal-qty').val()>0) {

6
app/assets/javascripts/foodcourt/addorder.js
View File

@@ -6,12 +6,12 @@ function getCardNo(){
function setCardNo(cardNo){ function setCardNo(cardNo){
if(cardNo.length == 16){ if(cardNo.length == 16){
$("#paypar_account_no").val(cardNo); $("#paypar_account_no").val(cardNo);
if ($("#sxModal").attr("data-for") == 'member') { if ($("#read_modal").attr("data-for") == 'member') {
member_card(cardNo) member_card(cardNo)
} else if ($("#sxModal").attr('data-for') == 'payment') { } else if ($("#read_modal").attr('data-for') == 'payment') {
pay_with_card(cardNo); pay_with_card(cardNo);
} }
$("#sxModal").hide(); $("#read_modal").modal('hide');
} }
} }
function member_card(cardNo) { function member_card(cardNo) {

54
app/assets/stylesheets/addorder.scss
View File

@@ -26,34 +26,34 @@ section .content{
.custom-card-block { .custom-card-block {
padding: 0.3rem !important; padding: 0.3rem !important;
} }
#sxModal { // #sxModal {
display: none; // display: none;
overflow: auto; // overflow: auto;
width: 100%; // width: 100%;
height: 100%; // height: 100%;
background-color: #000; // background-color: #000;
background-color: rgba(0,0,0,0.4); // background-color: rgba(0,0,0,0.4);
position: fixed; // position: fixed;
top: 0; // top: 0;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
z-index: 1100; // z-index: 1100;
} // }
#sxModal-Content { // #sxModal-Content {
position: relative; // position: relative;
left: 42%; // left: 42%;
top: 30%; // top: 30%;
background-color: #32ad1a; // background-color: #32ad1a;
color: #fff; // color: #fff;
text-align: center; // text-align: center;
width: 200px; // width: 200px;
height: 200px; // height: 200px;
padding-top: 5%; // padding-top: 5%;
border-radius: 100px; // border-radius: 100px;
z-index: 1101; // z-index: 1101;
} // }
@media (min-width: 34em) { @media (min-width: 34em) {
.custom-card-columns { .custom-card-columns {

75
app/assets/stylesheets/foodcourt.scss
View File

@@ -113,16 +113,11 @@ select.form-control {
opacity:0.6, opacity:0.6,
} }
.pay{ // .btn_paymal_member{
text-align:center; // padding: 40px;
font-size:20px; // font-size: 20px;
color:white; // font-weight: bolder;
border-radius: 50% !important; // }
width: 45%;
height: 220px;
margin: 0 auto !important;
line-height: 210px;
}
.move_table{ .move_table{
width: 100%; width: 100%;
@@ -318,34 +313,34 @@ select.form-control {
border-left:1px solid #fff; border-left:1px solid #fff;
} }
#sxModal { // #sxModal {
display: none; // display: none;
overflow: auto; // overflow: auto;
width: 100%; // width: 100%;
height: 100%; // height: 100%;
background-color: #000; // background-color: #000;
background-color: rgba(0,0,0,0.4); // background-color: rgba(0,0,0,0.4);
position: fixed; // position: fixed;
top: 0; // top: 0;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
z-index: 1100; // z-index: 1100;
} // }
#sxModal-Content { // #sxModal-Content {
position: relative; // position: relative;
left: 42%; // left: 42%;
top: 30%; // top: 30%;
background-color: #32ad1a; // background-color: #32ad1a;
color: #fff; // color: #fff;
text-align: center; // text-align: center;
width: 200px; // width: 200px;
height: 200px; // height: 200px;
padding-top: 5%; // padding-top: 5%;
border-radius: 100px; // border-radius: 100px;
z-index: 1101; // z-index: 1101;
} // }
/*Loading gif for payment*/ /*Loading gif for payment*/
@@ -379,8 +374,10 @@ select.form-control {
width:43%; width:43%;
} }
.payment-left { .btn_paymal_member {
margin-left: 20px; padding: 40px !important;
font-size: 20px !important;
font-weight: bolder;
} }
/* End Payment Page */ /* End Payment Page */

14
app/views/foodcourt/addorders/detail.html.erb
View File

@@ -215,10 +215,10 @@
</tr> </tr>
</table> </table>
<% if params[:update] %> <% 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 %> <% else %>
<% if @sale_id.nil?%> <% 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 %> <% 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> <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 %> <% end %>
@@ -356,14 +356,8 @@
</div> </div>
</div> </div>
</div> </div>
<div id="sxModal">
<div id="sxModal-Content"> <%= render "layouts/read_modal" %>
<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>
<!-- Large 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" > <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" >

22
app/views/foodcourt/orders/app_orders.html.erb
View File

@@ -410,14 +410,14 @@
<%end%> <%end%>
<% if current_user.role != "waiter" && @status != "order"%> <% 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> <button type="button" id="void" class="btn btn-block bg-red waves-effect" >VOID</button>
<%end%> <%end%>
<% if @status != "sale"%> <% if @status != "sale"%>
<!-- <button type="button" id="request_bills" class="btn btn-block bg-blue waves-effect">Req.Bill</button> --> <!-- <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' %> <% 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> <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%>"> <input type="hidden" id="save_order_id" value="<%=order_id%>">
<%end%> <%end%>
@@ -498,14 +498,8 @@
</div> </div>
</div> </div>
</div> </div>
<div id="sxModal"> <%= render "layouts/read_modal" %>
<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>
<script type="text/javascript"> <script type="text/javascript">
var cashier_type = 'food_court'; var cashier_type = 'food_court';
$(document).ready( function() { $(document).ready( function() {
@@ -515,8 +509,8 @@
}) })
$('#pay, .req_bill').on('click', function () { $('#pay, .req_bill').on('click', function () {
$("#sxModal").show(); $("#read_modal").show();
$("#sxModal").attr('data-for', 'member'); $("#read_modal").attr('data-for', 'member');
var sale_id = $('#sale_id').text(); var sale_id = $('#sale_id').text();
getCardNo(); getCardNo();
@@ -531,11 +525,11 @@
// getCardNo(); // getCardNo();
// }); // });
$("#sxModal .btn_cancel").on('click',function(){ $("#read_modal #close").on('click',function(){
if($("#order-items-table tr").length > 1){ if($("#order-items-table tr").length > 1){
$( "#create_pay_order" ).prop( "disabled", false ); $( "#create_pay_order" ).prop( "disabled", false );
} }
$("#sxModal").hide(); $("#read_modal").modal('hide');
}); });
$('#addorder').on('click', function () { $('#addorder').on('click', function () {

56
app/views/foodcourt/payments/show.html.erb
View File

@@ -36,7 +36,7 @@
<div class="col-lg-6 col-md-6 col-sm-6"> <div class="col-lg-6 col-md-6 col-sm-6">
<strong>Customer :</strong> <strong>Customer :</strong>
<% if @cashier_type == 'quick_service' || @cashier_type == 'food_court' %> <% 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%>' /> <input type="hidden" name="paypar_account_no" id="paypar_account_no" value='<%=@sale_data.customer.paypar_account_no%>' />
<% else %> <% else %>
<input type="hidden" name="paypar_account_no" id="paypar_account_no" value='<%=@sale_data.customer.paypar_account_no%>' /> <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="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 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="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-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"> <div class="col-md-4 text-right">
@@ -197,10 +197,7 @@
<div class="card-block"> <div class="card-block">
<input type="hidden" name="server_mode" value="<%=ENV["SERVER_MODE"]%>" id="server_mode"> <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%>"> <input type="hidden" name="display_type" id="display_type" value="<%= @display_type%>">
<button type="button" class="btn btn-block btn-lg btn-success waves-effect btn_paymal_member pay">[ Complete Payment ]</button>
<div class="btn_paymal_member pay border-top border- border-left purple payment-left">
Pay
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -412,14 +409,7 @@
</div> </div>
</div> </div>
<div id="sxModal"> <%= render "layouts/read_modal" %>
<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>
<script type="text/javascript"> <script type="text/javascript">
// //control borwser back // //control borwser back
@@ -435,7 +425,7 @@ var paymalcount = <%= @paymalcount %>;
var customer_paypar_account = '<%= @sale_data.customer.paypar_account_no %>'; var customer_paypar_account = '<%= @sale_data.customer.paypar_account_no %>';
// console.log(pdf_view) // console.log(pdf_view)
$(document).ready(function(){ $(document).ready(function(){
$("#sxModal").hide(); $("#read_modal").modal('hide');
/* replace url type*/ /* replace url type*/
if(!trans_flag){ if(!trans_flag){
localStorage.setItem("trans_flag", trans_flag); localStorage.setItem("trans_flag", trans_flag);
@@ -718,8 +708,8 @@ $(document).ready(function(){
// Read Card Reader // Read Card Reader
$(".btn_member").on('click', function(){ $(".btn_member").on('click', function(){
$("#is_memberModal").hide(); $("#is_memberModal").hide();
$("#sxModal").attr('data-for', 'member'); $("#read_modal").attr('data-for', 'member');
$("#sxModal").show(); $("#read_modal").show();
getCardNo(); getCardNo();
onScan.attachTo(document, { onScan.attachTo(document, {
@@ -903,12 +893,12 @@ $(document).ready(function(){
function setCardNo(cardNo){ function setCardNo(cardNo){
if(cardNo.length == 16){ if(cardNo.length == 16){
$("#paypar_account_no").val(cardNo); $("#paypar_account_no").val(cardNo);
if ($("#sxModal").attr("data-for") == 'member') { if ($("#read_modal").attr("data-for") == 'member') {
member_card(cardNo); member_card(cardNo);
} else if ($("#sxModal").attr('data-for') == 'payment') { } else if ($("#read_modal").attr('data-for') == 'payment') {
pay_with_card(cardNo); pay_with_card(cardNo);
} }
$("#sxModal").hide(); $("#read_modal").modal('hide');
} }
} }
@@ -979,8 +969,8 @@ $(document).ready(function(){
}); });
} }
$("#sxModal .btn_cancel").on('click',function(){ $("#read_modal #close").on('click',function(){
$("#sxModal").hide(); $("#read_modal").modal('hide');
}); });
$(".btn_customer_assign").on('click', function(){ $(".btn_customer_assign").on('click', function(){
@@ -1200,8 +1190,8 @@ $(document).ready(function(){
$("#customer_name").on("click",function(){ $("#customer_name").on("click",function(){
//start customer modal popup //start customer modal popup
if((cashier_type=='quick_service' || cashier_type=='food_court') && (customer_id!=undefined) && (customer_id!=null) && (customer_id!="")){ if((cashier_type=='quick_service' || cashier_type=='food_court') && (customer_id!=undefined) && (customer_id!=null) && (customer_id!="")){
$("#sxModal").attr('data-for', 'member'); $("#read_modal").attr('data-for', 'member');
$("#sxModal").show(); $("#read_modal").show();
getCardNo(); getCardNo();
onScan.attachTo(document, { 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 // Read Card Reader - Paymal payment for FoodCourt
$(".btn_paymal_member").on('click', function (){ $(".btn_paymal_member").on('click', function (){
$(this).off('click'); $(this).off('click');
if(customer_paypar_account !== null && customer_paypar_account !== '') { if(customer_paypar_account !== null && customer_paypar_account !== '') {
pay_with_card($("#paypar_account_no").val()) pay_with_card($("#paypar_account_no").val())
}else{ }else{
$("#sxModal").attr('data-for', 'member'); $("#read_modal").attr('data-for', 'member');
$("#sxModal").show(); $("#read_modal").show();
getCardNo(); getCardNo();
onScan.attachTo(document, { onScan.attachTo(document, {
onScan: function(sCode) { onScan: function(sCode) {

39
app/views/layouts/_read_modal.html.erb Normal file
View File

@@ -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>