progress penambahan cara bayar, select user karyawan & field nip karyawan

This commit is contained in:
JokoPrasetio 2025-08-20 15:41:40 +07:00
parent 0e4759682e
commit b2e4899f87
2 changed files with 60 additions and 73 deletions

View File

@ -258,7 +258,7 @@
<!-- di dalam .position-relative (gambar) --> <!-- di dalam .position-relative (gambar) -->
<!-- Nama + kalori di dalam gambar (bawah) --> <!-- Nama + kalori di dalam gambar (bawah) -->
<div class="position-absolute bottom-0 start-0 p-2 w-100"> <div class="position-absolute bottom-0 start-0 p-2 w-100">
<h6 class="fw-bold text-white mb-0" style="font-size:.75rem; max-width: 85%;">${menu.nama.substring(0, 39) + '...' }</h6> <h6 class="fw-bold text-white mb-0" style="font-size:.75rem; max-width: 85%;">${menu.nama.length > 15 ? menu.nama.substring(0, 17) + '...' : menu.nama}</h6>
${menu?.kalori.length > 0 ? ` ${menu?.kalori.length > 0 ? `
<small class="text-white badge bg-success">${(menu.kalori || []).slice(0,1).map(k=>k.nilai_kalori||0).join('')} kkal</small>`: ''} <small class="text-white badge bg-success">${(menu.kalori || []).slice(0,1).map(k=>k.nilai_kalori||0).join('')} kkal</small>`: ''}
${(menu.klasifikasiMenu || []) ${(menu.klasifikasiMenu || [])
@ -290,25 +290,26 @@
<!-- Harga 1 baris --> <!-- Harga 1 baris -->
<div class="d-flex justify-content-between align-items-center text-muted small mt-1 px-1"> <!-- <div class="d-flex justify-content-between align-items-center text-muted small mt-1 px-1"> -->
<small>Karyawan</small> <!--<small>Karyawan</small> -->
<strong class="text-success">Rp ${parseInt(menu.harga_karyawan).toLocaleString('id-ID')}</strong> <!-- <strong class="text-success">Rp ${parseInt(menu.harga_karyawan).toLocaleString('id-ID')}</strong> -->
</div> <!-- </div> -->
<div class="d-flex justify-content-between align-items-center text-muted small px-1"> <div class="d-flex justify-content-between align-items-center text-muted small mb-1">
<small>Public</small> <strong>Harga</strong>
<strong class="text-success">Rp ${parseInt(menu.harga_public).toLocaleString('id-ID')}</strong> <strong class="text-success">Rp ${parseInt(menu.harga_public).toLocaleString('id-ID')}</strong>
</div> </div>
<div class="d-flex align-items-center gap-1 mt-2 px-1">
<small class="text-muted fw-semibold">Tersedia:</small> <div class="d-flex align-items-center gap-1">
<div class="d-flex gap-1 overflow-auto" style="font-size:.65rem; scrollbar-width:none;"> <small class="text-muted">Tersedia:</small>
${menu.apakah_menu_siang && menu.apakah_menu_sore ${menu.apakah_menu_siang && menu.apakah_menu_sore
? '<div class="badge bg-success text-dark d-flex align-items-center px-1 text-white" style="font-size:.65rem;">Makan Siang<br/> & Sore</div>' ? '<span class="badge bg-success text-white px-1" style="font-size:.6rem;">Siang & Sore</span>'
: menu.apakah_menu_siang : menu.apakah_menu_siang
? '<div class="badge bg-warning text-dark d-flex align-items-center px-1" style="font-size:.65rem;">Makan Siang</div>' ? '<span class="badge bg-warning text-dark px-1" style="font-size:.6rem;">Siang</span>'
: menu.apakah_menu_sore : menu.apakah_menu_sore
? '<div class="badge text-white d-flex align-items-center px-1" style="font-size:.65rem; background-color:#3A86FF;" >Makan Sore</div>' ? '<span class="badge text-white px-1" style="font-size:.6rem; background:#3A86FF;">Sore</span>'
: '<div class="badge bg-danger d-flex align-items-center px-1" style="font-size:.5rem;"><i class="fa fa-times-circle" style="font-size:.5rem"></i>Tutup</div>'} : '<span class="badge bg-danger text-white px-1" style="font-size:.6rem;">Tutup</span>'
</div> }
</div> </div>
@ -596,6 +597,7 @@
} }
sessionStorage.setItem('cart', JSON.stringify(cart)) sessionStorage.setItem('cart', JSON.stringify(cart))
updateCartCount(cart.length) updateCartCount(cart.length)
} }
function checkout(){ function checkout(){

View File

@ -4,82 +4,67 @@
<section class="section py-5 bg-light"> <section class="section py-5 bg-light">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
<ul class="nav nav-tabs mb-3" id="tabJenisMenu"> <ul class="nav nav-tabs" id="tabJenisMenu">
<li class="nav-item"><a class="nav-link active text-success" href="#" data-filter="makanan">Makanan</a></li> <li class="nav-item"><a class="nav-link active text-success" href="#" data-filter="makanan">Makanan</a></li>
<li class="nav-item "><a class="nav-link text-black" href="#" data-filter="minuman">Minuman</a></li> <li class="nav-item "><a class="nav-link text-black" href="#" data-filter="minuman">Minuman</a></li>
<li class="nav-item"><a class="nav-link text-black" href="#" data-filter="snack">Snack</a></li> <li class="nav-item"><a class="nav-link text-black" href="#" data-filter="snack">Snack</a></li>
<li class="nav-item"><a class="nav-link text-black" href="#" data-filter="paket">Paket</a></li> <li class="nav-item"><a class="nav-link text-black" href="#" data-filter="paket">Paket</a></li>
<li class="nav-item"><a class="nav-link text-black" href="#" data-filter="konsultasi">Jadwal Konsultasi Gizi</a></li> <li class="nav-item"><a class="nav-link text-black" href="#" data-filter="konsultasi">Jadwal Konsultasi Gizi</a></li>
<li class="nav-item"><a class="nav-link text-black" href="#" data-filter="cara_pesan">Cara Pesan</a></li>
</ul> </ul>
</div> </div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="mb-3">
<input type="text" class="form-control" id="searchMenu" placeholder="Pencarian...">
</div>
</div>
</div>
<div class="row ms-1" id="tanggal-filter">
<div class="col-12 mb-2">
<h6 class="fw-bold text-muted mb-1">
Pilih Tanggal Makanan
<a tabindex="0" class="text-decoration-none" role="button" data-bs-toggle="popover" data-bs-trigger="focus"
title="Panduan"
data-bs-content="Pilih rentang tanggal untuk melihat daftar menu yang tersedia pada tanggal tersebut.">
<i class="fa fa-info-circle text-secondary"></i>
</a>
</h6>
<div class="input-group input-group-sm mb-2" style="max-width: 450px;"> </div>
<span class="input-group-text bg-white px-1"> <!-- Filter Pencarian + Tanggal -->
<div class="row gx-2 gy-1 mb-2" id="tanggal-filter">
<!-- Kolom Cari -->
<div class="col-6">
<label class="fw-bold small text-muted mb-1">Cari Makanan</label>
<input type="text" class="form-control form-control-sm"
id="searchMenu" placeholder="Pencarian...">
</div>
<!-- Kolom Tanggal -->
<div class="col-6">
<label class="fw-bold small text-muted mb-1">
Tanggal
<a tabindex="0" role="button" data-bs-toggle="popover"
data-bs-trigger="focus" title="Panduan"
data-bs-content="Pilih rentang tanggal untuk melihat menu tersedia.">
<i class="fa fa-info-circle text-secondary ms-1"></i>
</a>
</label>
<div class="input-group input-group-sm">
<span class="input-group-text bg-white px-2">
<i class="fa fa-calendar-alt text-primary"></i> <i class="fa fa-calendar-alt text-primary"></i>
</span> </span>
<input type="text" id="tanggal" class="form-control form-control-sm tanggal-input"
<input type="text" readonly placeholder="7-10 Agt 2025">
id="tanggal"
class="form-control form-control-sm tanggal-input"
readonly
placeholder="Contoh: 7 - 10 Agustus 2025"
title="Klik untuk membuka kalender"
style="font-size: 0.85rem; padding: 0.3rem 0.5rem;">
<!-- Tombol X di sebelah input -->
<button type="button" id="resetTanggal" <button type="button" id="resetTanggal"
class="btn btn-sm btn-light border d-none" class="btn btn-sm btn-light border d-none" title="Reset">
title="Reset Tanggal">
<i class="fa fa-times text-muted"></i> <i class="fa fa-times text-muted"></i>
</button> </button>
</div> </div>
<div id="tanggalTerpilihLabel" <div id="tanggalTerpilihLabel"
class="bg-light border text-dark mt-1 d-none rounded px-2 py-1" class="bg-light border text-dark small mt-1 d-none rounded px-2 py-1">
style="font-size: 0.75rem; word-wrap: break-word; overflow-wrap: break-word;">
<i class="fa fa-calendar-check text-success me-1"></i> <i class="fa fa-calendar-check text-success me-1"></i>
<span id="labelTanggalText">Menampilkan menu...</span> <span id="labelTanggalText">Menampilkan menu...</span>
</div> </div>
</div> </div>
<div class="alert alert-info mb-3 shadow-sm rounded-3" role="alert"> </div>
<div class="d-flex align-items-center overflow-hidden">
<div class="flex-grow-1"> <!-- Marquee Info -->
<marquee <div class="alert alert-info mb-3 shadow-sm rounded-3 small p-2" role="alert">
behavior="scroll" <marquee behavior="scroll" direction="left" scrollamount="3"
direction="left" onmouseover="this.stop()" onmouseout="this.start()">
scrollamount="4" <i class="fa fa-user-md text-primary me-1"></i>
onmouseover="this.stop()" <strong>Konsultasi Gizi!</strong>
onmouseout="this.start()" Butuh rekomendasi menu? <a href="#" class="alert-link">Daftar sekarang</a>.
> Hubungi <a href="https://wa.me/08815611382" target="_blank">08815611382</a>
<i class="fa fa-user-md fa-lg me-2 text-primary flex-shrink-0"></i> <span class="text-muted">(08:00-15:00 WIB)</span>
<strong>Konsultasi Gizi!</strong>&nbsp;
Butuh rekomendasi menu sesuai kondisi Anda?
&nbsp;<a href="#" class="alert-link">Lihat jadwal konsultasi & daftar sekarang</a>.
Butuh bantuan? Hubungi WhatsApp <strong>Instalasi Gizi</strong>&nbsp;
<a href="https://wa.me/08815611382 " target="_blank">08815611382 </a>&nbsp;
<small class="text-muted">Jam kerja: 08.00 15.00 WIB</small>
</marquee> </marquee>
</div> </div>
</div>
</div>
</div>