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

feat: add loading at cancel and req bill

Browse Source
This commit is contained in:
Pyae Bhone Zaw
2025-06-20 10:58:31 +06:30
parent 1112d80fc4
commit cc32bb0b16
2 changed files with 85 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/views/foodcourt/orders/_read_modal.html.erb
View File

@@ -141,8 +141,61 @@
cursor: pointer; cursor: pointer;
/* cursor: not-allowed; */ /* cursor: not-allowed; */
} }
/* Loading Dot */
.processing-indicator {
display: flex;
gap: 6px;
}
.processing-dot {
width: 10px;
height: 10px;
background: #2196F3;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
}
.processing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.processing-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-12px);
}
}
#fullpage-loading {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.712);
align-items: center;
justify-content: center;
}
</style> </style>
<div id="fullpage-loading" style="display:none; position:fixed; z-index:9999; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.35); align-items:center; justify-content:center;">
<div>
<div style="display:flex; gap:10px; justify-content:center;">
<div class="processing-dot"></div>
<div class="processing-dot"></div>
<div class="processing-dot"></div>
</div>
<div style="color:white; text-align:center; margin-top:1rem; font-size:1.2rem;">Please Wait...</div>
</div>
</div>
<div class="modal fade" id="read_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" > <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-dialog read-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
@@ -221,6 +274,11 @@ document.addEventListener('DOMContentLoaded', function () {
// }); // });
document.querySelector('.payment-card#dynamic_qr').addEventListener('click', function() { document.querySelector('.payment-card#dynamic_qr').addEventListener('click', function() {
document.getElementById('fullpage-loading').style.display = 'flex';
setTimeout(function() {
document.getElementById('fullpage-loading').style.display = 'none';
}, 5000);
initDynamicQrPay(); initDynamicQrPay();
}); });

27
app/views/foodcourt/qrpay/init.html.erb
View File

@@ -29,6 +29,17 @@
} }
} }
#fullpage-loading {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.712);
align-items: center;
justify-content: center;
}
</style> </style>
<div class="container-fluid h-100"> <div class="container-fluid h-100">
@@ -47,6 +58,17 @@
%> %>
<% end %> <% end %>
<div id="fullpage-loading" style="display:none; position:fixed; z-index:9999; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.35); align-items:center; justify-content:center;">
<div>
<div style="display:flex; gap:10px; justify-content:center;">
<div class="processing-dot"></div>
<div class="processing-dot"></div>
<div class="processing-dot"></div>
</div>
<div style="color:white; text-align:center; margin-top:1rem; font-size:1.2rem;">Please Wait...</div>
</div>
</div>
<div class="row clearfix h-100"> <div class="row clearfix h-100">
<% if @error %> <% if @error %>
<input type="hidden" name="error_message" id="error_message" value="<%= json_escape(@error.to_json) %>"> <input type="hidden" name="error_message" id="error_message" value="<%= json_escape(@error.to_json) %>">
@@ -419,6 +441,11 @@ $(document).ready(function() {
} }
$('#cancel-btn').on('click', function(e) { $('#cancel-btn').on('click', function(e) {
document.getElementById('fullpage-loading').style.display = 'flex';
setTimeout(function() {
document.getElementById('fullpage-loading').style.display = 'none';
}, 5000);
const postData = { const postData = {
sale_id: "<%= @sale_data.sale_id %>" sale_id: "<%= @sale_data.sale_id %>"
}; };