rendy
/
TKK_E3220375
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: real time refresh data

This commit is contained in:
Rizky 2025-06-09 10:54:06 +07:00
parent a7e981f8c7
commit aad4368740
1 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
resources/views/admin/presensi/siswa.blade.php
View File

@ -107,13 +107,15 @@
const cameraStatus = document.getElementById("cameraStatus"); const cameraStatus = document.getElementById("cameraStatus");
const cameraTitle = document.getElementById("camera-title"); const cameraTitle = document.getElementById("camera-title");
let fetchInterval; // Variabel untuk menyimpan interval let fetchInterval;
function updateCameraFeed() { function updateCameraFeed() {
const selectedOption = deviceSelect.options[deviceSelect.selectedIndex]; const selectedOption = deviceSelect.options[deviceSelect.selectedIndex];
const deviceIp = selectedOption.dataset.ip; const deviceIp = selectedOption.dataset.ip;
const deviceName = selectedOption.text; const deviceName = selectedOption.text;
console.log("Mencoba menghubungkan ke IP:", deviceIp);
cameraFeed.classList.add('hidden'); cameraFeed.classList.add('hidden');
cameraFeed.src = ''; cameraFeed.src = '';
@ -125,10 +127,9 @@ function updateCameraFeed() {
} }
cameraTitle.innerText = `Live: ${deviceName}`; cameraTitle.innerText = `Live: ${deviceName}`;
cameraStatus.innerHTML = `<div class="flex flex-col items-center justify-center h-full"><svg class="animate-spin h-8 w-8 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg><p class="mt-2">Menghubungkan...</p></div>`; cameraStatus.innerHTML = `<div class="flex flex-col items-center justify-center h-full"><svg class="animate-spin h-8 w-8 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg><p class="mt-2">Menghubungkan ke ${deviceIp}...</p></div>`;
cameraStatus.style.display = 'block'; cameraStatus.style.display = 'block';
// PERBAIKAN: Gunakan variabel deviceIp yang dinamis
cameraFeed.src = `http://${deviceIp}:5000/video_feed`; cameraFeed.src = `http://${deviceIp}:5000/video_feed`;
} }
@ -150,10 +151,14 @@ function updateCameraFeed() {
const tanggal = document.getElementById('tanggal').value; const tanggal = document.getElementById('tanggal').value;
laporanTitle.innerText = `Laporan Kehadiran ${formatIndonesianDate(tanggal)}`; 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 { 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}`); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json(); const data = await response.json();
renderTable(data); renderTable(data);
@ -198,16 +203,12 @@ function formatIndonesianDate(dateString) {
return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()} (${days[date.getDay()]})`; return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()} (${days[date.getDay()]})`;
} }
// Fungsi baru untuk memulai/mengatur ulang interval
function startAutoRefresh() { function startAutoRefresh() {
// Hapus interval lama jika ada, untuk mencegah duplikasi
clearInterval(fetchInterval); clearInterval(fetchInterval);
tableBody.innerHTML = `<tr><td colspan="7" class="p-4 text-center text-gray-500">Memuat data...</td></tr>`;
// Panggil data segera saat filter diubah
fetchAttendanceData(); fetchAttendanceData();
// Mengubah interval menjadi lebih cepat untuk pengujian, misal 5 detik
// Atur interval baru untuk memanggil data setiap 15 detik fetchInterval = setInterval(fetchAttendanceData, 5000); // 5000 ms = 5 detik
fetchInterval = setInterval(fetchAttendanceData, 15000); // 15000 ms = 15 detik
} }
filterInputs.forEach(input => { filterInputs.forEach(input => {
@ -215,12 +216,9 @@ function startAutoRefresh() {
}); });
deviceSelect.addEventListener('change', function() { deviceSelect.addEventListener('change', function() {
// startAutoRefresh() sudah dipanggil oleh event listener di atas
updateCameraFeed(); updateCameraFeed();
}); });
// === INISIALISASI ===
// Panggil fungsi saat halaman pertama kali dimuat untuk memulai semuanya
startAutoRefresh(); startAutoRefresh();
}); });
</script> </script>