fix :
- second display ui adjustment - show ui on cashier
This commit is contained in:
aungthetkhaing
@@ -205,16 +205,22 @@
|
||||
<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-block">
|
||||
<div class="payment-waiting text-center" style="height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
||||
<div class="payment-waiting text-center" style="height: 400px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;">
|
||||
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
|
||||
<h3 class="m-t-20" style="color: #555;">Waiting for Customer Payment</h3>
|
||||
<p class="text-muted">Please ask customer to scan the QR code</p>
|
||||
<div class="processing-indicator m-t-10">
|
||||
<% if @qr_svg %>
|
||||
<div>
|
||||
<%= raw @qr_svg %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="processing-indicator m-t-10" style="margin-top: 8rem;">
|
||||
<div class="processing-dot"></div>
|
||||
<div class="processing-dot"></div>
|
||||
<div class="processing-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="d-flex" style="margin-top: 10rem;">
|
||||
<button class="btn btn-block btn-default waves-effect" id="cancel-btn">Cancel</button>
|
||||
</div>
|
||||
<input type="hidden" name="server_mode" value="<%=ENV["SERVER_MODE"]%>" id="server_mode">
|
||||
@@ -252,8 +258,7 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const paymentWaiting = document.querySelector('.payment-waiting');
|
||||
let amountToReceive = <%= number_with_precision(@sale_data.grand_total, precision: precision.to_i) %>;
|
||||
let receipt_no = document.querySelector('#receipt_no').textContent;
|
||||
console.log(receipt_no);
|
||||
const receipt_no = document.querySelector('#receipt_no').textContent;
|
||||
const ws = new WebSocket("wss://juicecorner-0mo.sx-fc.app/cable");
|
||||
|
||||
|
||||
@@ -264,7 +269,8 @@
|
||||
ws.send(JSON.stringify({
|
||||
command: "subscribe",
|
||||
identifier: JSON.stringify({
|
||||
channel: "TestChannel"
|
||||
channel: "TestChannel",
|
||||
// receipt_no: receipt_no
|
||||
})
|
||||
}));
|
||||
}
|
||||
@@ -279,6 +285,7 @@
|
||||
|
||||
if(msg?.message?.status === "PAY_SUCCESS") {
|
||||
paymentWaiting.innerHTML = `
|
||||
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
|
||||
<div class="payment-success text-center">
|
||||
<i class="material-icons" style="font-size: 50px; color: #4CAF50;">check_circle</i>
|
||||
<h3 class="m-t-20" style="color: #4CAF50;">Payment Successful!</h3>
|
||||
@@ -341,10 +348,12 @@
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
}).then(function(res) {
|
||||
customer_display_view(null,"reload");
|
||||
return res.json();
|
||||
}).then(function(data) {
|
||||
if(data.status) {
|
||||
window.location.href = "/"
|
||||
|
||||
window.location.href = "/";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -50,50 +50,61 @@
|
||||
</div>
|
||||
|
||||
<!-- Second Column: MMQR Payment -->
|
||||
<div class="col-12 d-flex flex-column h-100 hidden" id="mmqr_payment" >
|
||||
<div class="col-12 d-flex flex-column h-100 hidden" id="mmqr_payment">
|
||||
<div class="card h-100" style="opacity: 0.85;">
|
||||
<div class="card-header text-white" style="background-color: #ffc107;">
|
||||
<h4 class="mb-0">MMQR Payment Option</h4>
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
|
||||
<div class="text-center">
|
||||
<h5>Scan to Pay</h5>
|
||||
<p class="text-muted">Use your mobile wallet app</p>
|
||||
</div>
|
||||
<!-- MODIFICATION HERE: Removed flex-column -->
|
||||
<div class="card-body row d-flex align-items-center justify-content-center">
|
||||
|
||||
<div id="qr-payment-container" class="text-center p-3 bg-white rounded border" style="max-width: 300px;">
|
||||
<div id="qr-code" class="mb-2">
|
||||
<div id="qrpay_svg">
|
||||
<svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="100" height="100" fill="#e0e0e0"/>
|
||||
<text x="50" y="55" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">QR Code Here</text>
|
||||
</svg>
|
||||
<!-- This is now Column 1 -->
|
||||
<div class="col-6"> <!-- Using col-md-6 for responsiveness, col-6 is also fine -->
|
||||
<div class="text-center">
|
||||
<img src="/image/mmqr.webp" alt="MMQR Payment" style="max-width: 120px; margin-bottom: 10px;">
|
||||
<h5>Scan to Pay</h5>
|
||||
<p class="text-muted">Use your mobile wallet app</p>
|
||||
</div>
|
||||
|
||||
<div id="qr-payment-container" class="mx-auto text-center p-3 bg-white rounded border" style="max-width: 300px;">
|
||||
<!-- Added mx-auto to center this block within its col-6 parent -->
|
||||
<div id="qr-code" class="mb-2">
|
||||
<div id="qrpay_svg">
|
||||
<svg width="150" height="150" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="100" height="100" fill="#e0e0e0"/>
|
||||
<text x="50" y="55" font-family="Arial, sans-serif" font-size="10" fill="#333" text-anchor="middle">QR Code Here</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payment-details text-dark">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payment-details text-dark">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payment-instructions mt-4 text-center">
|
||||
<h6>How to Pay:</h6>
|
||||
<ol class="text-left small pl-3 mb-0">
|
||||
<li>Open your mobile wallet app</li>
|
||||
<li>Tap on 'Scan QR Code'</li>
|
||||
<li>Point your camera at this code</li>
|
||||
<li>Confirm the payment details</li>
|
||||
</ol>
|
||||
<!-- This is now Column 2 -->
|
||||
<div class="col-6 d-flex flex-column"> <!-- Using col-md-6. Added d-flex flex-column here to make mt-auto work -->
|
||||
<div class="payment-instructions mt-4 text-center">
|
||||
<h6>How to Pay:</h6>
|
||||
<!-- text-left on ol seems fine, but you might want text-md-left if it looks odd on small screens -->
|
||||
<ol class="text-left small pl-3 mb-0" style="display: inline-block;"> <!-- inline-block for text-center to work on ol -->
|
||||
<li>Open your mobile wallet app</li>
|
||||
<li>Tap on 'Scan QR Code'</li>
|
||||
<li>Point your camera at this code</li>
|
||||
<li>Confirm the payment details</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- mt-auto will push this to the bottom of this column if the column has extra space -->
|
||||
<div class="supported-partners-container mt-auto pt-3 pb-3 text-center">
|
||||
<h6 class="supported-partners-title">Supported Partners</h6>
|
||||
<div class="partner-logos">
|
||||
<img src="/image/logo/AYA-Pay.webp" alt="AYA Pay" class="partner-logo">
|
||||
<img src="/image/logo/KBZ-Pay.webp" alt="KBZ Pay" class="partner-logo">
|
||||
<img src="/image/logo/OK-Dollor.webp" alt="OK Dollar" class="partner-logo">
|
||||
<img src="/image/logo/Wave.webp" alt="Wave Money" class="partner-logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="supported-partners-container mt-auto pt-3 pb-3">
|
||||
<h6 class="supported-partners-title">Supported Partners</h6>
|
||||
<div class="partner-logos">
|
||||
<img src="/image/logo/AYA-Pay.webp" alt="AYA Pay" class="partner-logo">
|
||||
<img src="/image/logo/KBZ-Pay.webp" alt="KBZ Pay" class="partner-logo">
|
||||
<img src="/image/logo/OK-Dollor.webp" alt="OK Dollar" class="partner-logo">
|
||||
<img src="/image/logo/Wave.webp" alt="Wave Money" class="partner-logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -178,7 +189,6 @@
|
||||
background-color: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
max-width: 300px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
.payment-instructions ol {
|
||||
@@ -286,6 +296,17 @@
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
@media(min-width: 600px){
|
||||
#second_display_order_items{
|
||||
margin-top: -3rem;
|
||||
}
|
||||
#mmqr_payment{
|
||||
margin-top: -3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.card-header h4 { font-size: 1.1rem; }
|
||||
|
||||
@@ -1,135 +1,143 @@
|
||||
<style>
|
||||
* {box-sizing: border-box;}
|
||||
body {
|
||||
font-family: Verdana, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
</head>
|
||||
<style>
|
||||
* {box-sizing: border-box;}
|
||||
body {
|
||||
font-family: Verdana, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mySlides {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
.mySlides {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mySlides img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.mySlides img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Slideshow container */
|
||||
.slideshow-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
/* Slideshow container */
|
||||
.slideshow-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Caption text */
|
||||
.text {
|
||||
color: #f2f2f2;
|
||||
font-size: 15px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
/* Caption text */
|
||||
.text {
|
||||
color: #f2f2f2;
|
||||
font-size: 15px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Number text (1/3 etc) */
|
||||
.numbertext {
|
||||
color: #f2f2f2;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
/* Number text (1/3 etc) */
|
||||
.numbertext {
|
||||
color: #f2f2f2;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Fading animation */
|
||||
.slide-in {
|
||||
animation-name: slide-in;
|
||||
animation-duration: 2s; /* Adjust the duration as per your preference */
|
||||
animation-fill-mode: forwards;
|
||||
display: block;
|
||||
}
|
||||
/* Fading animation */
|
||||
.slide-in {
|
||||
animation-name: slide-in;
|
||||
animation-duration: 2s; /* Adjust the duration as per your preference */
|
||||
animation-fill-mode: forwards;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slide-out {
|
||||
animation-name: slide-out;
|
||||
animation-duration: 2s; /* Adjust the duration as per your preference */
|
||||
animation-fill-mode: forwards;
|
||||
display: block;
|
||||
}
|
||||
.slide-out {
|
||||
animation-name: slide-out;
|
||||
animation-duration: 2s; /* Adjust the duration as per your preference */
|
||||
animation-fill-mode: forwards;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-out {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-out {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* On smaller screens, decrease text size */
|
||||
@media only screen and (max-width: 300px) {
|
||||
.text {font-size: 11px}
|
||||
}
|
||||
</style>
|
||||
/* On smaller screens, decrease text size */
|
||||
@media only screen and (max-width: 300px) {
|
||||
.text {font-size: 11px}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid h-100">
|
||||
<button type="button" class="hidden" id="s_reload">Reload</button>
|
||||
<div class="slider" id="second_display_slider">
|
||||
<%= render 'slider' %>
|
||||
</div>
|
||||
<body>
|
||||
<div class="container-fluid h-100">
|
||||
<button type="button" class="hidden" id="s_reload">Reload</button>
|
||||
<div class="slider" id="second_display_slider">
|
||||
<%= render 'slider' %>
|
||||
</div>
|
||||
|
||||
<div class="item hidden" id="second_display_items" style="min-height: 80%;">
|
||||
<%= render 'second_display' %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
<div class="item hidden" id="second_display_items" style="min-height: 80%;">
|
||||
<%= render 'second_display' %>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
//html font-size for second display till 35px!
|
||||
// document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
|
||||
//html font-size for second display till 35px!
|
||||
// document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
|
||||
|
||||
$('#s_reload').on('click', function () {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
$('#s_reload').on('click', function () {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
|
||||
showSlides("second_display_slider");
|
||||
showSlides("second_display_slider");
|
||||
|
||||
function showSlides(sliderId) {
|
||||
let slider = document.getElementById(sliderId);
|
||||
let slides = slider.getElementsByClassName("mySlides");
|
||||
function showSlides(sliderId) {
|
||||
let slider = document.getElementById(sliderId);
|
||||
let slides = slider.getElementsByClassName("mySlides");
|
||||
|
||||
let slideIndex = slider.dataset.slideIndex;
|
||||
let slideIndex = slider.dataset.slideIndex;
|
||||
|
||||
slideIndex++;
|
||||
if (!slideIndex || slideIndex >= slides.length) {
|
||||
slideIndex = 0;
|
||||
}
|
||||
slideIndex++;
|
||||
if (!slideIndex || slideIndex >= slides.length) {
|
||||
slideIndex = 0;
|
||||
}
|
||||
|
||||
for (let i = 0; i < slides.length; i++) {
|
||||
slides[i].className = slides[i].className.replace("slide-in", "slide-out");
|
||||
}
|
||||
for (let i = 0; i < slides.length; i++) {
|
||||
slides[i].className = slides[i].className.replace("slide-in", "slide-out");
|
||||
}
|
||||
|
||||
slides[slideIndex].classList.remove("slide-out");
|
||||
slides[slideIndex].classList.add("slide-in");
|
||||
slides[slideIndex].classList.remove("slide-out");
|
||||
slides[slideIndex].classList.add("slide-in");
|
||||
|
||||
slider.dataset.slideIndex = slideIndex;
|
||||
setTimeout(showSlides, 5000, sliderId); // Change image every 5 seconds
|
||||
}
|
||||
</script>
|
||||
slider.dataset.slideIndex = slideIndex;
|
||||
setTimeout(showSlides, 5000, sliderId);
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user