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

fix : qr code generation to be dynamic

Browse Source
This commit is contained in:
aungthetkhaing
2025-05-22 15:19:54 +06:30
parent 138d62a9f5
commit eec8b3c600
4 changed files with 136 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
app/views/foodcourt/second_display/_second_display.html.erb
View File

@@ -1,57 +1,125 @@
<div class="row clearfix h-100">
<div class="col-lg-6 col-md-6 col-sm-6 h-100">
<div class="card h-100" style="opacity: 0.75;">
<div class="card h-100" style="opacity: 0.85; background-color: #f8f9fa;">
<div class="card-header bg-primary text-white">
<h4 class="mb-0">Invoice Details</h4>
</div>
<div class="card-block h-100">
<div class="card-text">
<div id="order-detail-slimscroll" data-height="190">
<div id="order-detail-slimscroll" style="max-height: 60vh; overflow-y: auto;">
<table class="table table-striped second_display_items" id="order-items-table">
<thead>
<thead class="thead-light">
<tr>
<th>#</th>
<th class="item-name">Items</th>
<th class="item-">QTY</th>
<th class="item-">Price</th>
<th class="item-qty">QTY</th>
<th class="item-price">Price</th>
</tr>
</thead>
<tbody>
<!-- Items will be populated here -->
</tbody>
</table>
</div>
</div>
</div>
<div class="card-footer">
<table class="table" border="0">
<div class="card-footer bg-light">
<table class="table table-borderless">
<tr>
<td class="charges-name"><strong>Sub Total:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_sub_total">0.00</strong></td>
<td class="text-right item-attr"><strong id="s_sub_total">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Discount Amount:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_total_discount">0.00</strong></td>
<td class="charges-name"><strong>Discount:</strong></td>
<td class="text-right item-attr"><strong id="s_total_discount">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Tax Amount:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_tatal_tax">0.00</strong></td>
<td class="text-right item-attr"><strong id="s_tatal_tax">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Grand:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_grand_total">0.00</strong></td>
<tr class="table-active">
<td class="charges-name"><strong>Grand Total:</strong></td>
<td class="text-right item-attr"><strong id="s_grand_total">0.00</strong></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 h-100">
<div id="qrpay_svg" style="background-color: #ddd;">
<div class="col-lg-6 col-md-6 col-sm-6 h-100 d-flex flex-column">
<div class="card h-100" style="opacity: 0.85;">
<div class="card-header text-white" style="background-color: #ffc107;">
<h4 class="mb-0">Payment Options</h4>
</div>
<div class="card-body d-flex flex-column align-items-center justify-content-center">
<div class="text-center mb-4">
<h5>Scan to Pay</h5>
<p class="text-muted">Use your mobile wallet app</p>
</div>
<!-- QR Code Container -->
<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">
<!-- QR Code will be generated here -->
<div class="">
<div id="qrpay_svg">
</div>
</div>
</div>
<div class="payment-details">
<p class="mb-1"><strong>Amount:</strong> <span id="qr-amount"><%= number_to_currency(@total_amount) %></span></p>
<p class="mb-1"><strong>Invoice #:</strong> <span id="qr-invoice"><%= @invoice_id %></span></p>
<p class="text-muted small">Expires in 15 minutes</p>
</div>
</div>
<div class="payment-instructions mt-4 text-center">
<h6>How to Pay:</h6>
<ol class="text-left small pl-3">
<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>
</div>
</div>
</div>
</div>
<style>
/* Add these styles to your existing CSS */
.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border: none;
border-radius: 8px;
}
.card-header {
border-radius: 8px 8px 0 0 !important;
padding: 12px 20px;
}
.table thead th {
border-bottom: 2px solid #dee2e6;
}
#qr-payment-container {
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.payment-instructions {
background-color: #f8f9fa;
padding: 15px;
border-radius: 8px;
max-width: 300px;
}
.text-right {
text-align: right;
}
.table-active {
background-color: rgba(0,0,0,0.05);
}
</style>