WD - Dev
98 lines
3.6 KiB
PHP
98 lines
3.6 KiB
PHP
<nav class="navbar fixed-top">
|
|
<div id="specificCard" class="card col-12" style="border-radius: 20px; background: none; border: none; margin-top: 10px;">
|
|
<div class="row">
|
|
<div class="col-6 icon-container">
|
|
<a href="index.php" class="fa fa-arrow-left text-light"></a>
|
|
</div>
|
|
<div class="col-6 text-right">
|
|
<h6 class="text-light mt-2 mb-2">Voucher Sudah Terjual</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="card" style="border-radius: 0px; background: none; border: none; margin-top: 100px;">
|
|
<div class="card-body">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" id="2" style="border-top-right-radius: 40px; border-top-left-radius: 40px; min-height: 800px; border: none; z-index: 1;">
|
|
<div class="card-body">
|
|
<center>
|
|
<h6><b>Voucher Hotspot</b></h6>
|
|
</center>
|
|
<div class="card-body">
|
|
<input type="text" id="search" placeholder="Cari Voucher" class="form-control">
|
|
</div>
|
|
<div id="voucher-table-container">
|
|
<table class="table" style="zoom: 90%" id="voucher-table">
|
|
<tbody>
|
|
<!-- Data will be loaded here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="loading" style="display:none;">Loading...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let page = 1;
|
|
let searchQuery = '';
|
|
|
|
document.getElementById('search').addEventListener('input', function() {
|
|
searchQuery = this.value;
|
|
page = 1; // Reset to the first page
|
|
loadVouchers(true); // Clear existing data on search
|
|
});
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
|
|
page++;
|
|
loadVouchers(false); // Load more data without clearing
|
|
}
|
|
});
|
|
|
|
function loadVouchers(clearTable = false) {
|
|
document.getElementById('loading').style.display = 'block';
|
|
|
|
fetch(`list_data/list_sudah_terjual.php?page=${page}&search=${encodeURIComponent(searchQuery)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const tableBody = document.querySelector('#voucher-table tbody');
|
|
|
|
// Clear the table if clearTable is true
|
|
if (clearTable) {
|
|
tableBody.innerHTML = ''; // Clear existing rows
|
|
}
|
|
|
|
// Populate table with new data
|
|
data.vouchers.forEach(voucher => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td class="text-left">
|
|
<h5>Paket ${voucher.nama_paket}</h5>
|
|
<h5><b>${voucher.voucher}</b></h5>
|
|
<h6>Pembelian  : ${voucher.create_time}</h6>
|
|
<h6>Aktif  : ${voucher.active_time}</h6>
|
|
<h6>Expired  : ${voucher.expaired_time}</h6>
|
|
</td>
|
|
<td class="text-right">
|
|
<i class="fa fa-rss fa-2x"></i>
|
|
<h6>Rp. ${new Intl.NumberFormat().format(voucher.harga)}</h6>
|
|
<a class="text-info" href="?${btoa('voucher_detail_berhasil|' + voucher.id)}"><u>Detail</u></a>
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
});
|
|
|
|
document.getElementById('loading').style.display = 'none';
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading vouchers:', error);
|
|
document.getElementById('loading').style.display = 'none';
|
|
});
|
|
}
|
|
|
|
// Initial load
|
|
loadVouchers();
|
|
|
|
</script> |