From aad43687405413cdcefccda06a0f3540c5d31a98 Mon Sep 17 00:00:00 2001 From: Rizky Date: Mon, 9 Jun 2025 10:54:06 +0700 Subject: [PATCH] fix: real time refresh data --- .../views/admin/presensi/siswa.blade.php | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/resources/views/admin/presensi/siswa.blade.php b/resources/views/admin/presensi/siswa.blade.php index 82b342c..0c4c985 100644 --- a/resources/views/admin/presensi/siswa.blade.php +++ b/resources/views/admin/presensi/siswa.blade.php @@ -107,12 +107,14 @@ const cameraStatus = document.getElementById("cameraStatus"); const cameraTitle = document.getElementById("camera-title"); - let fetchInterval; // Variabel untuk menyimpan interval + let fetchInterval; function updateCameraFeed() { const selectedOption = deviceSelect.options[deviceSelect.selectedIndex]; const deviceIp = selectedOption.dataset.ip; const deviceName = selectedOption.text; + + console.log("Mencoba menghubungkan ke IP:", deviceIp); cameraFeed.classList.add('hidden'); cameraFeed.src = ''; @@ -125,10 +127,9 @@ function updateCameraFeed() { } cameraTitle.innerText = `Live: ${deviceName}`; - cameraStatus.innerHTML = `

Menghubungkan...

`; + cameraStatus.innerHTML = `

Menghubungkan ke ${deviceIp}...

`; cameraStatus.style.display = 'block'; - // PERBAIKAN: Gunakan variabel deviceIp yang dinamis cameraFeed.src = `http://${deviceIp}:5000/video_feed`; } @@ -150,10 +151,14 @@ function updateCameraFeed() { const tanggal = document.getElementById('tanggal').value; laporanTitle.innerText = `Laporan Kehadiran ${formatIndonesianDate(tanggal)}`; - const url = `/api/laporan-absensi?tanggal=${tanggal}&jurusan_id=${jurusanId}&kelas_id=${kelasId}&device_id=${deviceId}`; + + // === PERBAIKAN DI SINI === + // Menambahkan parameter acak (_=timestamp) untuk mencegah browser caching + const cacheBuster = `&_=${new Date().getTime()}`; + const url = `/api/laporan-absensi?tanggal=${tanggal}&jurusan_id=${jurusanId}&kelas_id=${kelasId}&device_id=${deviceId}${cacheBuster}`; try { - const response = await fetch(url); + const response = await fetch(url, { cache: 'no-store' }); // Menambahkan opsi untuk mencegah cache if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); renderTable(data); @@ -198,16 +203,12 @@ function formatIndonesianDate(dateString) { return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()} (${days[date.getDay()]})`; } - // Fungsi baru untuk memulai/mengatur ulang interval function startAutoRefresh() { - // Hapus interval lama jika ada, untuk mencegah duplikasi clearInterval(fetchInterval); - - // Panggil data segera saat filter diubah + tableBody.innerHTML = `Memuat data...`; fetchAttendanceData(); - - // Atur interval baru untuk memanggil data setiap 15 detik - fetchInterval = setInterval(fetchAttendanceData, 15000); // 15000 ms = 15 detik + // Mengubah interval menjadi lebih cepat untuk pengujian, misal 5 detik + fetchInterval = setInterval(fetchAttendanceData, 5000); // 5000 ms = 5 detik } filterInputs.forEach(input => { @@ -215,13 +216,10 @@ function startAutoRefresh() { }); deviceSelect.addEventListener('change', function() { - // startAutoRefresh() sudah dipanggil oleh event listener di atas updateCameraFeed(); }); - // === INISIALISASI === - // Panggil fungsi saat halaman pertama kali dimuat untuk memulai semuanya startAutoRefresh(); }); -@endsection +@endsection \ No newline at end of file