refactor detail-foto view to remove commented code and improve readability
This commit is contained in:
parent
dfe2eda9e7
commit
3ffa8ee33a
|
|
@ -128,31 +128,23 @@ class="detailfoto-thumb rounded-4">
|
|||
</section>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script>
|
||||
// ============================================================
|
||||
// 1. VARIABLE GLOBAL & UTILITIES
|
||||
// ============================================================
|
||||
let countdown; // Variabel untuk menyimpan timer
|
||||
let countdown;
|
||||
let isTimeUp = false;
|
||||
const durasiPaket = parseInt(document.getElementById('data-paket')?.dataset.durasi || 15);
|
||||
|
||||
// Fungsi Update Counter (+/-) untuk Additional
|
||||
function updateCounter(btn, change) {
|
||||
const input = btn.parentElement.querySelector('input');
|
||||
let currentValue = parseInt(input.value) || 0;
|
||||
let newValue = currentValue + change;
|
||||
|
||||
if (newValue < 0) newValue = 0; // Cegah minus
|
||||
if (newValue < 0) newValue = 0;
|
||||
input.value = newValue;
|
||||
}
|
||||
|
||||
// Fungsi Tampilkan Kalender (Step 1 -> Step 2)
|
||||
function showCalendar() {
|
||||
document.getElementById('btn-booking-wrapper').style.display = 'none';
|
||||
|
||||
// DISABLE KOLOM KIRI
|
||||
const leftColumn = document.getElementById('left-column');
|
||||
if (leftColumn) leftColumn.classList.add('disabled-section');
|
||||
|
||||
const calendarCol = document.getElementById('calendar-column');
|
||||
if (calendarCol) {
|
||||
calendarCol.classList.remove('d-none');
|
||||
|
|
@ -164,57 +156,39 @@ function showCalendar() {
|
|||
}
|
||||
}
|
||||
|
||||
// Fungsi Sembunyikan Kalender (Tombol Batalkan)
|
||||
function hideCalendar() {
|
||||
if (countdown) clearInterval(countdown);
|
||||
|
||||
document.getElementById('calendar-column').classList.add('d-none');
|
||||
document.getElementById('btn-booking-wrapper').style.display = 'block';
|
||||
|
||||
// ENABLE KEMBALI KOLOM KIRI
|
||||
const leftColumn = document.getElementById('left-column');
|
||||
if (leftColumn) leftColumn.classList.remove('disabled-section');
|
||||
|
||||
// Scroll kembali ke atas (opsional, agar user sadar kolom kiri aktif lagi)
|
||||
leftColumn.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// Reset pilihan tanggal & jam di input hidden
|
||||
document.getElementById('input_tgl_booking').value = "";
|
||||
document.getElementById('input_jam_mulai').value = "";
|
||||
}
|
||||
|
||||
// Fungsi Timer Mundur
|
||||
function startTimer(duration) {
|
||||
let timer = duration,
|
||||
minutes, seconds;
|
||||
const display = document.querySelector('#booking-timer');
|
||||
const submitBtn = document.querySelector('.btn-action-submit'); // Pastikan class tombol benar
|
||||
|
||||
isTimeUp = false; // Reset status setiap timer mulai
|
||||
const submitBtn = document.querySelector('.btn-action-submit');
|
||||
isTimeUp = false;
|
||||
if (countdown) clearInterval(countdown);
|
||||
|
||||
countdown = setInterval(function() {
|
||||
minutes = parseInt(timer / 60, 10);
|
||||
seconds = parseInt(timer % 60, 10);
|
||||
|
||||
minutes = minutes < 10 ? "0" + minutes : minutes;
|
||||
seconds = seconds < 10 ? "0" + seconds : seconds;
|
||||
|
||||
if (display) display.textContent = minutes + ":" + seconds;
|
||||
|
||||
if (--timer < 0) {
|
||||
clearInterval(countdown);
|
||||
isTimeUp = true; // Kunci status
|
||||
|
||||
// Matikan tombol submit secara visual
|
||||
isTimeUp = true;
|
||||
if (submitBtn) {
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.classList.add('disabled');
|
||||
}
|
||||
|
||||
// Tampilkan alert
|
||||
Swal.fire({
|
||||
title: 'Waktu Habis!',
|
||||
text: 'Sesi booking Anda telah berakhir. Silakan pilih ulang jadwal.',
|
||||
|
|
@ -223,13 +197,12 @@ function startTimer(duration) {
|
|||
confirmButtonColor: '#3B8181',
|
||||
allowOutsideClick: false
|
||||
}).then(() => {
|
||||
location.reload(); // Refresh halaman
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Helper: Hitung Jam Selesai
|
||||
function calculateEndTime(startTime, duration) {
|
||||
let [hours, minutes] = startTime.split(':').map(Number);
|
||||
minutes += duration;
|
||||
|
|
@ -241,27 +214,14 @@ function calculateEndTime(startTime, duration) {
|
|||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// 2. LOGIC AJAX & INTERAKSI KALENDER
|
||||
// ============================================================
|
||||
|
||||
// A. Fungsi Ganti Bulan (Tanpa Refresh)
|
||||
function changeMonth(month, year) {
|
||||
const wrapper = document.getElementById('calendar-grid-wrapper');
|
||||
|
||||
// Efek loading
|
||||
wrapper.style.opacity = '0.5';
|
||||
|
||||
// Panggil Controller via AJAX
|
||||
fetch(`/load-calendar?month=${month}&year=${year}`)
|
||||
.then(response => response.json()) // Pastikan controller return JSON { html: "..." }
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Ganti isi wrapper dengan HTML baru dari server
|
||||
wrapper.innerHTML = data.html;
|
||||
wrapper.style.opacity = '1';
|
||||
|
||||
// PENTING: Pasang ulang listener karena elemen HTML-nya baru
|
||||
reinitDateListeners();
|
||||
})
|
||||
.catch(err => {
|
||||
|
|
@ -270,54 +230,37 @@ function changeMonth(month, year) {
|
|||
});
|
||||
}
|
||||
|
||||
// B. Pasang Event Listener ke Tanggal (Re-usable)
|
||||
function reinitDateListeners() {
|
||||
const dateItems = document.querySelectorAll('.date-item:not(.disabled):not(.empty)');
|
||||
|
||||
dateItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
// UI: Reset warna selected lama
|
||||
document.querySelectorAll('.date-item').forEach(el => el.classList.remove('selected'));
|
||||
this.classList.add('selected');
|
||||
|
||||
// Logic: Simpan tanggal ke input hidden
|
||||
const tgl = this.dataset.date;
|
||||
const tglInput = document.getElementById('input_tgl_booking');
|
||||
if (tglInput) tglInput.value = tgl;
|
||||
|
||||
// Logic: Cek Slot ke Database
|
||||
checkSlotAvailability(tgl);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// C. Cek Slot Penuh via AJAX
|
||||
function checkSlotAvailability(tgl) {
|
||||
// 1. Reset semua tombol jam jadi aktif dulu
|
||||
const allTimeBtns = document.querySelectorAll('.btn-time');
|
||||
allTimeBtns.forEach(btn => {
|
||||
btn.classList.remove('disabled', 'full', 'active');
|
||||
btn.disabled = false;
|
||||
btn.title = "";
|
||||
});
|
||||
|
||||
// 2. Kosongkan input jam (karena user ganti tanggal)
|
||||
document.getElementById('input_jam_mulai').value = "";
|
||||
const sekarang = new Date();
|
||||
const jamSekarang = sekarang.getHours();
|
||||
const menitSekarang = sekarang.getMinutes();
|
||||
const totalMenitSekarang = (jamSekarang * 60) + menitSekarang;
|
||||
|
||||
// Format tanggal hari ini (YYYY-MM-DD) untuk perbandingan
|
||||
const hariIni = sekarang.toISOString().split('T')[0];
|
||||
|
||||
// 3. LOGIKA JAM LEWAT: Jika tanggal yang diklik adalah hari ini
|
||||
if (tgl === hariIni) {
|
||||
allTimeBtns.forEach(btn => {
|
||||
const [jamBtn, menitBtn] = btn.dataset.time.split(':').map(Number);
|
||||
const totalMenitBtn = (jamBtn * 60) + menitBtn;
|
||||
|
||||
// Jika waktu pada tombol sudah lewat dari waktu sekarang
|
||||
if (totalMenitBtn <= totalMenitSekarang) {
|
||||
btn.classList.add('disabled', 'full');
|
||||
btn.disabled = true;
|
||||
|
|
@ -325,75 +268,47 @@ function checkSlotAvailability(tgl) {
|
|||
}
|
||||
});
|
||||
}
|
||||
// 3. Panggil Server
|
||||
fetch(`/cek-slot-foto?tanggal=${tgl}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.forEach(booking => {
|
||||
// Ambil jam depan saja (09:00:00 -> 09:00)
|
||||
const jamPenuh = booking.jam_mulai.substring(0, 5);
|
||||
|
||||
// Cari tombol yg punya data-time sama
|
||||
const btnPenuh = document.querySelector(`.btn-time[data-time="${jamPenuh}"]`);
|
||||
|
||||
if (btnPenuh) {
|
||||
btnPenuh.classList.add('disabled', 'full'); // Tambah class styling
|
||||
btnPenuh.disabled = true; // Matikan klik
|
||||
btnPenuh.classList.add('disabled', 'full');
|
||||
btnPenuh.disabled = true;
|
||||
btnPenuh.title = "Slot Sudah Terisi";
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(err => console.error("Gagal cek slot:", err));
|
||||
}
|
||||
|
||||
|
||||
// ============================================================
|
||||
// 3. INISIALISASI SAAT HALAMAN DIMUAT (DOM READY)
|
||||
// ============================================================
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// 1. Jalankan Listener Tanggal (Untuk kalender mulai)
|
||||
reinitDateListeners();
|
||||
|
||||
// 2. Pasang Listener Tombol Jam (Cukup sekali)
|
||||
const timeButtons = document.querySelectorAll('.btn-time');
|
||||
timeButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Cek jika tombol disabled (safety)
|
||||
if (this.disabled || this.classList.contains('disabled')) return;
|
||||
|
||||
// UI: Reset active
|
||||
timeButtons.forEach(el => el.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
// Logic: Simpan Jam
|
||||
const startTime = this.dataset.time;
|
||||
document.getElementById('input_jam_mulai').value = startTime;
|
||||
|
||||
// Logic: Hitung Jam Selesai
|
||||
const endTime = calculateEndTime(startTime, durasiPaket);
|
||||
document.getElementById('input_jam_selesai').value = endTime;
|
||||
});
|
||||
});
|
||||
|
||||
// 3. Validasi Submit Form
|
||||
// 3. Validasi Submit Form
|
||||
const bookingForm = document.getElementById('form-booking');
|
||||
if (bookingForm) {
|
||||
bookingForm.addEventListener('submit', function(e) {
|
||||
const tgl = document.getElementById('input_tgl_booking').value;
|
||||
const jam = document.getElementById('input_jam_mulai').value;
|
||||
|
||||
// CEK APAKAH WAKTU HABIS
|
||||
if (isTimeUp) {
|
||||
e.preventDefault();
|
||||
Swal.fire('Maaf!', 'Waktu booking sudah habis, halaman akan dimuat ulang.', 'error')
|
||||
.then(() => location.reload());
|
||||
return;
|
||||
}
|
||||
|
||||
if (!tgl || !jam) {
|
||||
e.preventDefault();
|
||||
Swal.fire({
|
||||
|
|
|
|||
Loading…
Reference in New Issue