49 lines
1.4 KiB
PHP
49 lines
1.4 KiB
PHP
@extends('dashboard')
|
|
|
|
@section('title', 'Photos')
|
|
|
|
@section('content')
|
|
<div class="p-6 bg-white rounded-lg shadow">
|
|
<h2 class="mb-4 text-xl font-semibold">Foto Real-time</h2>
|
|
|
|
<div id="foto-container" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
|
<!-- Foto cards akan dimuat lewat JS -->
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script>
|
|
function fetchFotoData() {
|
|
axios.get('{{ route('api.foto.index') }}')
|
|
.then(function (response) {
|
|
const data = response.data;
|
|
const container = document.getElementById('foto-container');
|
|
container.innerHTML = '';
|
|
|
|
data.forEach((item) => {
|
|
const card = `
|
|
<div class="overflow-hidden transition duration-300 bg-white shadow-md rounded-xl hover:shadow-lg">
|
|
<img src="/storage/${item.foto}" alt="Foto" class="object-cover w-full h-48">
|
|
<div class="p-4">
|
|
<p class="text-sm text-gray-500">${new Date(item.created_at).toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.insertAdjacentHTML('beforeend', card);
|
|
});
|
|
})
|
|
.catch(function (error) {
|
|
console.error('Gagal memuat data:', error);
|
|
});
|
|
}
|
|
|
|
// Muat data pertama kali
|
|
fetchFotoData();
|
|
|
|
// Update setiap 5 detik
|
|
setInterval(fetchFotoData, 5000);
|
|
</script>
|
|
@endpush
|