82 lines
3.0 KiB
PHP
82 lines
3.0 KiB
PHP
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
|
|
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-database-compat.js"></script>
|
|
<script>
|
|
const firebaseConfig = {
|
|
apiKey: "ISI_API_KEY_MU",
|
|
authDomain: "PROJECT_ID.firebaseapp.com",
|
|
databaseURL: "https://PROJECT_ID.firebaseio.com",
|
|
projectId: "PROJECT_ID",
|
|
storageBucket: "PROJECT_ID.appspot.com",
|
|
messagingSenderId: "....",
|
|
appId: "...."
|
|
};
|
|
|
|
firebase.initializeApp(firebaseConfig);
|
|
const db = firebase.database();
|
|
|
|
// Ambil data dari root Firebase
|
|
db.ref('/').on('value', (snapshot) => {
|
|
const data = snapshot.val();
|
|
renderTables(data);
|
|
});
|
|
|
|
function renderTables(data) {
|
|
const tableBody = document.getElementById('firebase-table-body');
|
|
tableBody.innerHTML = ''; // kosongkan isi lama
|
|
|
|
for (const key in data) {
|
|
const table = data[key];
|
|
const row = document.createElement('tr');
|
|
|
|
row.innerHTML = `
|
|
<td class="p-2 border">${key}</td>
|
|
<td class="p-2 border">${table.reserved_by || 'N/A'}</td>
|
|
<td class="p-2 border">${table.table_occupied ? 'Terisi' : 'Kosong'}</td>
|
|
<td class="p-2 border">${table.sensors?.table_activation_sensor_active ? 'Aktif' : 'Tidak'}</td>
|
|
<td class="p-2 border">${table.time_remaining_minutes ?? 0} menit</td>
|
|
<td class="p-2 border">
|
|
<button class="bg-red-600 text-white px-2 py-1 text-xs rounded hover:bg-red-700"
|
|
onclick="clearTable('${key}')">
|
|
Kosongkan
|
|
</button>
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
}
|
|
}
|
|
|
|
function clearTable(tableId) {
|
|
db.ref(`/${tableId}`).update({
|
|
reserved_by: 'N/A',
|
|
table_occupied: 0,
|
|
sensors: {
|
|
table_activation_sensor_active: 0
|
|
}
|
|
}).then(() => {
|
|
alert(`Meja ${tableId} berhasil dikosongkan`);
|
|
}).catch((error) => {
|
|
alert('Gagal kosongkan meja: ' + error.message);
|
|
});
|
|
}
|
|
</script>
|
|
<div class="p-4">
|
|
<h2 class="text-xl font-bold mb-4">Status Meja dari Firebase (Realtime)</h2>
|
|
<table class="table-auto w-full border text-sm">
|
|
<thead class="bg-gray-200">
|
|
<tr>
|
|
<th class="p-2 border">ID Meja</th>
|
|
<th class="p-2 border">Nama Pemesan</th>
|
|
<th class="p-2 border">Status</th>
|
|
<th class="p-2 border">Sensor Aktif</th>
|
|
<th class="p-2 border">Sisa Waktu</th>
|
|
<th class="p-2 border">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="firebase-table-body">
|
|
<tr>
|
|
<td colspan="6" class="text-center text-gray-500 p-4">Memuat data meja...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|