conect data door loack and atribute to realtime firebase

This commit is contained in:
Vckynando12 2025-02-19 06:10:05 +07:00
parent 4a2e57d538
commit beb8a3d7c7
2 changed files with 61 additions and 8 deletions

View File

@ -19,19 +19,26 @@ public function index()
// Ambil data dari Firebase
$dht11 = $this->database->getReference('dht11')->getValue() ?? [];
$security = $this->database->getReference('security')->getValue() ?? [];
$smartcab = $this->database->getReference('smartcab')->getValue() ?? [];
// Ambil nilai spesifik
$humidity = $dht11['humidity'] ?? 'N/A';
$temperature = $dht11['temperature'] ?? 'N/A';
$motion = $security['motion'] ?? 'N/A';
$status = $security['status'] ?? 'N/A';
$last_access = $smartcab['last_access'] ?? 'N/A';
$status_device = $smartcab['status_device'] ?? 'N/A';
$servo_status = $smartcab['servo_status'] ?? 'N/A';
// Kirim data ke tampilan
return view('welcome', compact(
'humidity',
'temperature',
'motion',
'status'
'status',
'last_access',
'status_device',
'servo_status'
));
}
}

View File

@ -191,8 +191,8 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
<!-- Charts and Door Status Section -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Door Lock Status Card - Changed order for mobile -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 order-1 md:order-2">
<!-- Door Lock Status Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<!-- Door Status -->
<div class="flex items-center mb-6">
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
@ -202,7 +202,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Door Status</p>
<p class="text-lg font-semibold text-green-600 dark:text-green-400" id="door-status">Locked</p>
<p class="text-lg font-semibold text-green-600 dark:text-green-400" id="servo-status">{{ $servo_status }}</p>
</div>
</div>
@ -211,11 +211,11 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Last Access</p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" id="last-access">Dikenali</p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" id="last-access">{{ $last_access }}</p>
</div>
<div>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">Device Status</p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" id="device-status">Online</p>
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" id="device-status">{{ $status_device }}</p>
</div>
</div>
</div>
@ -378,6 +378,9 @@ function updateUI(data) {
toggle.checked = data.security.status === 'on';
}
}
// Add door status updates
updateDoorStatus(data);
}
// Function to fetch and update data
@ -447,7 +450,7 @@ function toggleSecurity(checkbox) {
// Function to update chart data
function updateChart(timestamp, temperature, humidity) {
const MAX_DATA_POINTS = 10;
const MAX_DATA_POINTS = 5;
// Check if there's any change in the latest data
const lastTempData = sensorChart.data.datasets[0].data[sensorChart.data.datasets[0].data.length - 1];
@ -740,7 +743,7 @@ function toggleDoorLock() {
}
function updateDoorStatus() {
const doorStatus = document.getElementById('door-status');
const doorStatus = document.getElementById('servo-status');
if (doorStatus) {
doorStatus.textContent = isDoorLocked ? 'Locked' : 'Unlocked';
doorStatus.className = isDoorLocked
@ -766,6 +769,49 @@ function updateDoorStatus() {
}
}, 5000);
});
// Function to update door status UI
function updateDoorStatus(data) {
if (data.smartcab) {
// Update servo status
const servoStatus = document.getElementById('servo-status');
if (servoStatus) {
servoStatus.textContent = data.smartcab.servo_status;
// Update color based on status
if (data.smartcab.servo_status === 'Locked') {
servoStatus.className = 'text-lg font-semibold text-green-600 dark:text-green-400';
} else {
servoStatus.className = 'text-lg font-semibold text-red-600 dark:text-red-400';
}
}
// Update last access
const lastAccess = document.getElementById('last-access');
if (lastAccess) {
lastAccess.textContent = data.smartcab.last_access;
}
// Update device status
const deviceStatus = document.getElementById('device-status');
if (deviceStatus) {
deviceStatus.textContent = data.smartcab.status_device;
// Update color based on status
if (data.smartcab.status_device === 'Online') {
deviceStatus.className = 'text-lg font-semibold text-green-600 dark:text-green-400';
} else {
deviceStatus.className = 'text-lg font-semibold text-green-600 dark:text-green-400';
}
}
}
}
// Listen for smartcab changes
database.ref('smartcab').on('value', (snapshot) => {
const data = snapshot.val();
if (data) {
updateDoorStatus(data);
}
});
</script>
</body>
</html>