105 lines
5.0 KiB
JavaScript
105 lines
5.0 KiB
JavaScript
|
|
function fetchMenu(filter = {}) {
|
|
const containerGuest = $("#order_guest_id");
|
|
let params = new URLSearchParams({
|
|
page: filter.page || 1,
|
|
per_page: filter.per_page || 6,
|
|
search: filter.search || '',
|
|
jenis_menu: filter.jenis_menu || ''
|
|
}).toString();
|
|
|
|
containerGuest.html('<p class="text-muted">Memuat data....</p>');
|
|
|
|
fetch(`/datamenu?${params}`)
|
|
.then(res => res.json())
|
|
.then(res => {
|
|
if (!res.status)
|
|
return containerGuest.html('<p class="text-danger">Gagal Memuat Data...</p>');
|
|
|
|
const menus = res.data.data || [];
|
|
|
|
if (menus.length === 0)
|
|
return containerGuest.html('<p class="text-muted">Pencarian tidak ditemukan.</p>');
|
|
|
|
let html = '<div class="container"><div class="row row-cols-1 row-cols-md-2 g-4">';
|
|
if (res.data.last_page > 1) {
|
|
html += `<div class="col-md-12 d-flex justify-content-end mt-4 gap-2">`;
|
|
for (let i = 1; i <= res.data.last_page; i++) {
|
|
html += `
|
|
<button class="btn btn-outline-success btn-sm ${res.data.current_page === i ? 'active' : ''}"
|
|
onclick='fetchMenu(${JSON.stringify({...filter, page: i})})'>${i}</button>`;
|
|
}
|
|
html += `</div>`;
|
|
}
|
|
menus.forEach(menu => {
|
|
html += `
|
|
<div class="col-md-6">
|
|
<div class="card h-100 shadow-sm">
|
|
<div class="row g-0 h-100">
|
|
<!-- Bagian kiri (gambar) -->
|
|
<div class="col-md-5 d-flex align-items-center p-2">
|
|
<img src="gambar/${menu.foto || 'default.jpg'}" class="img-fluid rounded" alt="${menu.nama_menu}">
|
|
</div>
|
|
|
|
<!-- Bagian kanan (konten) -->
|
|
<div class="col-md-7 d-flex flex-column p-3">
|
|
<div class="flex-grow-1">
|
|
<h5 class="card-title mb-1">${menu.nama}</h5>
|
|
<p class="mb-1">Rp ${parseInt(menu.harga_public).toLocaleString('id-ID')}</p>
|
|
<p class="text-muted small">${menu.deskripsi || ''}</p>
|
|
<div class="mb-2">
|
|
${(menu.klasifikasiMenu || []).map(tag => `<span class="badge bg-secondary me-1 mb-1">${tag.nama_kategori_diet}</span>`).join('')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tombol selalu di bawah -->
|
|
<div class="col-md-12 mt-auto p-2">
|
|
<button class="btn btn-success w-100" onclick="orderMenu(this)"
|
|
data-id="${menu.master_menu_id}"
|
|
data-nama_menu="${menu.nama_menu}"
|
|
data-harga="${menu.harga_public}"
|
|
data-foto="${menu.foto}">Order</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
|
|
|
|
html += '</div></div>';
|
|
|
|
// Pagination buttons
|
|
if (res.data.last_page > 1) {
|
|
html += `<div class="col-md-12 d-flex justify-content-between align-items-center mt-3">
|
|
<div>
|
|
<label for="perPageSelect" class="me-2">Tampilkan:</label>
|
|
<select id="perPageSelect" class="form-select form-select-sm d-inline-block w-auto" onchange="changePerPage(this)">
|
|
<option value="6" ${filter.perPage == 6 ? 'selected' : ''}>6</option>
|
|
<option value="10" ${filter.perPage == 10 ? 'selected' : ''}>10</option>
|
|
<option value="20" ${filter.perPage == 20 ? 'selected' : ''}>20</option>
|
|
</select>
|
|
</div>
|
|
<div class="d-flex gap-2">`;
|
|
for (let i = 1; i <= res.data.last_page; i++) {
|
|
html += `
|
|
<button class="btn btn-outline-success btn-sm ${res.data.current_page === i ? 'active' : ''}"
|
|
onclick='fetchMenu(${JSON.stringify({...filter, page: i})})'>${i}</button>`;
|
|
}
|
|
html += `</div>`;
|
|
}
|
|
containerGuest.html(html);
|
|
})
|
|
.catch(err => {
|
|
containerGuest.html('<p class="text-danger">Terjadi kesalahan saat memuat data.</p>');
|
|
console.error(err);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
function orderMenu(data){
|
|
|
|
}
|