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

feat: add loading in add order page

Browse Source
This commit is contained in:
Pyae Bhone Zaw
2025-06-30 14:39:26 +06:30
parent d922e4ffbb
commit 4ba5c607bd
1 changed files with 57 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,10 +5,62 @@
.completed{
background-color:green;
}
/* 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>
<%= javascript_include_tag 'custom', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'foodcourt/addorder', 'data-turbolinks-track': 'reload' %>
<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="container-fluid h-100" style="padding:0px 3px 0px 3px;margin-top:20px">
<div id="oqs_loading_wrapper" style="display:none;">
<div id="oqs_loading"></div>
@@ -554,6 +606,11 @@
if(dynamicQR) {
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();
});
}