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) -->
<!-- Nama + kalori di dalam gambar (bawah) -->
<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 ? `
<small class="text-white badge bg-success">${(menu.kalori || []).slice(0,1).map(k=>k.nilai_kalori||0).join('')} kkal</small>`: ''}
${(menu.klasifikasiMenu || [])
@ -290,26 +290,27 @@
<!-- Harga 1 baris -->
<div class="d-flex justify-content-between align-items-center text-muted small mt-1 px-1">
<small>Karyawan</small>
<strong class="text-success">Rp ${parseInt(menu.harga_karyawan).toLocaleString('id-ID')}</strong>
<!-- <div class="d-flex justify-content-between align-items-center text-muted small mt-1 px-1"> -->
<!--<small>Karyawan</small> -->
<!-- <strong class="text-success">Rp ${parseInt(menu.harga_karyawan).toLocaleString('id-ID')}</strong> -->
<!-- </div> -->
<div class="d-flex justify-content-between align-items-center text-muted small mb-1">
<strong>Harga</strong>
<strong class="text-success">Rp ${parseInt(menu.harga_public).toLocaleString('id-ID')}</strong>
</div>
<div class="d-flex justify-content-between align-items-center text-muted small px-1">
<small>Public</small>
<strong class="text-success">Rp ${parseInt(menu.harga_public).toLocaleString('id-ID')}</strong>
</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 gap-1 overflow-auto" style="font-size:.65rem; scrollbar-width:none;">
<div class="d-flex align-items-center gap-1">
<small class="text-muted">Tersedia:</small>
${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
? '<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
? '<div class="badge text-white d-flex align-items-center px-1" style="font-size:.65rem; background-color:#3A86FF;" >Makan Sore</div>'
: '<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 text-white px-1" style="font-size:.6rem; background:#3A86FF;">Sore</span>'
: '<span class="badge bg-danger text-white px-1" style="font-size:.6rem;">Tutup</span>'
}
</div>
</div>
<!-- Tombol -->
@ -596,6 +597,7 @@
}
sessionStorage.setItem('cart', JSON.stringify(cart))
updateCartCount(cart.length)
}
function checkout(){

View File

@ -4,81 +4,66 @@
<section class="section py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<ul class="nav nav-tabs mb-3" id="tabJenisMenu">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
<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 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="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="cara_pesan">Cara Pesan</a></li>
</ul>
</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>
<!-- 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>
</h6>
<div class="input-group input-group-sm mb-2" style="max-width: 450px;">
<span class="input-group-text bg-white px-1">
<i class="fa fa-calendar-alt text-primary"></i>
</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>
</span>
<input type="text"
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 -->
<input type="text" id="tanggal" class="form-control form-control-sm tanggal-input"
readonly placeholder="7-10 Agt 2025">
<button type="button" id="resetTanggal"
class="btn btn-sm btn-light border d-none"
title="Reset Tanggal">
<i class="fa fa-times text-muted"></i>
class="btn btn-sm btn-light border d-none" title="Reset">
<i class="fa fa-times text-muted"></i>
</button>
</div>
<div id="tanggalTerpilihLabel"
class="bg-light border text-dark mt-1 d-none rounded px-2 py-1"
style="font-size: 0.75rem; word-wrap: break-word; overflow-wrap: break-word;">
class="bg-light border text-dark small mt-1 d-none rounded px-2 py-1">
<i class="fa fa-calendar-check text-success me-1"></i>
<span id="labelTanggalText">Menampilkan menu...</span>
</div>
</div>
<div class="alert alert-info mb-3 shadow-sm rounded-3" role="alert">
<div class="d-flex align-items-center overflow-hidden">
<div class="flex-grow-1">
<marquee
behavior="scroll"
direction="left"
scrollamount="4"
onmouseover="this.stop()"
onmouseout="this.start()"
>
<i class="fa fa-user-md fa-lg me-2 text-primary flex-shrink-0"></i>
<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>
</div>
</div>
</div>
</div>
<!-- Marquee Info -->
<div class="alert alert-info mb-3 shadow-sm rounded-3 small p-2" role="alert">
<marquee behavior="scroll" direction="left" scrollamount="3"
onmouseover="this.stop()" onmouseout="this.start()">
<i class="fa fa-user-md text-primary me-1"></i>
<strong>Konsultasi Gizi!</strong>
Butuh rekomendasi menu? <a href="#" class="alert-link">Daftar sekarang</a>.
Hubungi <a href="https://wa.me/08815611382" target="_blank">08815611382</a>
<span class="text-muted">(08:00-15:00 WIB)</span>
</marquee>
</div>