80 lines
4.2 KiB
PHP
80 lines
4.2 KiB
PHP
<div class="p-6">
|
|
<h1 class="text-2xl font-bold mb-6">Status Meja Real-time</h1>
|
|
|
|
{{-- Firebase Script (Pastikan sudah ada di layout utama atau tambahkan di sini) --}}
|
|
{{-- Jika Anda belum menyertakan Firebase SDK di halaman Anda, tambahkan ini di <head> atau di bagian bawah <body> layout utama --}}
|
|
{{-- <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script> --}}
|
|
{{-- <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-database-compat.js"></script> --}}
|
|
|
|
<div x-data="{
|
|
firebaseConfig: {!! json_encode(config('services.firebase_client_config')) !!}, // Pastikan Anda memiliki config ini (lihat catatan di bawah)
|
|
initFirebase() {
|
|
if (!firebase.apps.length) {
|
|
firebase.initializeApp(this.firebaseConfig);
|
|
}
|
|
const db = firebase.database();
|
|
const tablesRef = db.ref('tables'); // Ganti 'tables' jika path di Firebase berbeda
|
|
|
|
tablesRef.on('value', (snapshot) => {
|
|
const data = snapshot.val();
|
|
const processedData = [];
|
|
if (data) {
|
|
// Firebase mengembalikan objek, kita ubah jadi array untuk Livewire
|
|
for (const tableId in data) {
|
|
if (data.hasOwnProperty(tableId)) {
|
|
processedData.push({ id: tableId, ...data[tableId] });
|
|
}
|
|
}
|
|
}
|
|
// Urutkan berdasarkan ID meja (misal: 'A1', 'A2', 'B1')
|
|
processedData.sort((a, b) => {
|
|
const idA = a.id.toUpperCase();
|
|
const idB = b.id.toUpperCase();
|
|
if (idA < idB) return -1;
|
|
if (idA > idB) return 1;
|
|
return 0;
|
|
});
|
|
|
|
// Dispatch event ke Livewire component dengan data terbaru
|
|
Livewire.dispatch('firebaseTablesUpdated', { data: processedData });
|
|
// console.log('Firebase data dispatched:', processedData); // Debugging
|
|
}, (error) => {
|
|
console.error('Firebase read failed: ' + error.code);
|
|
});
|
|
}
|
|
}" x-init="initFirebase()">
|
|
|
|
@if($tablesData->isEmpty())
|
|
<p class="text-gray-500 text-center">Memuat status meja dari Firebase...</p>
|
|
@else
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
@foreach ($tablesData as $table)
|
|
<div @class([
|
|
'p-4 rounded-lg shadow-md text-center',
|
|
'bg-green-100 border border-green-400' => $table['status'] === 'available',
|
|
'bg-red-100 border border-red-400' => $table['status'] === 'occupied',
|
|
'bg-yellow-100 border border-yellow-400' => $table['status'] === 'reserved', // Contoh status lain
|
|
'bg-gray-100 border border-gray-400' => !isset($table['status']), // Default jika status tidak ada
|
|
])>
|
|
<h2 class="text-xl font-semibold mb-2">Meja {{ $table['id'] }}</h2>
|
|
<p class="text-lg font-medium">Status:
|
|
<span @class([
|
|
'font-bold',
|
|
'text-green-700' => $table['status'] === 'available',
|
|
'text-red-700' => $table['status'] === 'occupied',
|
|
'text-yellow-700' => $table['status'] === 'reserved',
|
|
])>
|
|
{{ ucfirst($table['status'] ?? 'Tidak Diketahui') }}
|
|
</span>
|
|
</p>
|
|
@if(isset($table['reserved_by']) && $table['status'] === 'occupied')
|
|
<p class="text-sm text-gray-700 mt-1">Dipesan oleh: {{ $table['reserved_by'] }}</p>
|
|
@endif
|
|
{{-- Anda bisa menambahkan tombol aksi di sini, misalnya untuk mengubah status meja (jika staf bisa) --}}
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|