diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php index fd06c6b..0bac187 100644 --- a/resources/views/welcome.blade.php +++ b/resources/views/welcome.blade.php @@ -126,7 +126,7 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
-
+
@@ -189,25 +189,45 @@ class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
- -
-
- -
-

Temperature & Humidity Overview

-
- + +
+ +
+ +
+
+ + + +
+
+

Door Status

+

Locked

- -
-

Revenue Growth

-
- +
+ +
+
+

Last Access

+

Dikenali

+
+
+

Device Status

+

Online

+
+ + +
+

Temperature & Humidity Overview

+
+ +
+
@@ -425,6 +445,39 @@ function toggleSecurity(checkbox) { initializeCharts(); }); + // Function to update chart data + function updateChart(timestamp, temperature, humidity) { + const MAX_DATA_POINTS = 10; + + // Check if there's any change in the latest data + const lastTempData = sensorChart.data.datasets[0].data[sensorChart.data.datasets[0].data.length - 1]; + const lastHumData = sensorChart.data.datasets[1].data[sensorChart.data.datasets[1].data.length - 1]; + + // Only update if data is different or we don't have enough data points + if (lastTempData !== temperature || + lastHumData !== humidity || + sensorChart.data.labels.length < MAX_DATA_POINTS) { + + // Add new data + sensorChart.data.labels.push(new Date(timestamp).toLocaleTimeString()); + sensorChart.data.datasets[0].data.push(temperature); + sensorChart.data.datasets[1].data.push(humidity); + + // Remove old data if we have more than MAX_DATA_POINTS + if (sensorChart.data.labels.length > MAX_DATA_POINTS) { + sensorChart.data.labels.shift(); + sensorChart.data.datasets[0].data.shift(); + sensorChart.data.datasets[1].data.shift(); + } + + // Update chart only if there's a change + sensorChart.update(); + console.log('Chart updated with new data - Temp:', temperature, 'Humidity:', humidity); + } else { + console.log('No change in sensor data, skipping chart update'); + } + } + // Initialize the chart with empty data const ctx = document.getElementById('sensorChart').getContext('2d'); const sensorChart = new Chart(ctx, { @@ -439,7 +492,8 @@ function toggleSecurity(checkbox) { data: [], pointStyle: 'circle', pointRadius: 6, - pointHoverRadius: 8 + pointHoverRadius: 8, + tension: 0.4 // Menambahkan smoothing pada garis }, { label: 'Humidity', @@ -448,13 +502,18 @@ function toggleSecurity(checkbox) { data: [], pointStyle: 'circle', pointRadius: 6, - pointHoverRadius: 8 + pointHoverRadius: 8, + tension: 0.4 // Menambahkan smoothing pada garis } ] }, options: { responsive: true, maintainAspectRatio: false, + animation: { + duration: 750, // Durasi animasi dalam milidetik + easing: 'easeInOutQuart' // Tipe animasi + }, scales: { y: { beginAtZero: true, @@ -484,25 +543,6 @@ function toggleSecurity(checkbox) { } }); - // Function to update chart data - function updateChart(timestamp, temperature, humidity) { - const MAX_DATA_POINTS = 10; - - // Add new data - sensorChart.data.labels.push(new Date(timestamp).toLocaleTimeString()); - sensorChart.data.datasets[0].data.push(temperature); - sensorChart.data.datasets[1].data.push(humidity); - - // Remove old data if we have more than MAX_DATA_POINTS - if (sensorChart.data.labels.length > MAX_DATA_POINTS) { - sensorChart.data.labels.shift(); - sensorChart.data.datasets[0].data.shift(); - sensorChart.data.datasets[1].data.shift(); - } - - sensorChart.update(); - } - // Mobile Menu Toggle const mobileMenuBtn = document.getElementById('mobileMenuBtn'); const mobileMenu = document.getElementById('mobileMenu'); @@ -671,6 +711,61 @@ function toggleModal() { }); } } + + // Add these functions for door lock functionality + let isDoorLocked = true; // Initial state + + function toggleDoorLock() { + isDoorLocked = !isDoorLocked; + updateDoorStatus(); + + // Simulate last access update + const now = new Date(); + document.getElementById('last-access').textContent = now.toLocaleTimeString(); + + // Here you would typically update Firebase + // Uncomment when ready to connect to Firebase + /* + const doorRef = database.ref('door'); + doorRef.update({ + status: isDoorLocked ? 'locked' : 'unlocked', + lastAccess: now.toISOString(), + deviceStatus: 'online' + }).catch(error => { + console.error('Error updating door status:', error); + isDoorLocked = !isDoorLocked; // Revert state if update fails + updateDoorStatus(); + }); + */ + } + + function updateDoorStatus() { + const doorStatus = document.getElementById('door-status'); + if (doorStatus) { + doorStatus.textContent = isDoorLocked ? 'Locked' : 'Unlocked'; + doorStatus.className = isDoorLocked + ? 'text-lg font-semibold text-green-600 dark:text-green-400' + : 'text-lg font-semibold text-red-600 dark:text-red-400'; + } + } + + // Add to your document ready function + document.addEventListener('DOMContentLoaded', () => { + // ... existing initialization code ... + + // Initialize door status + updateDoorStatus(); + + // Update device status periodically + setInterval(() => { + const deviceStatus = document.getElementById('device-status'); + if (deviceStatus) { + // Here you would typically check actual device connection + deviceStatus.textContent = 'Online'; + deviceStatus.className = 'text-lg font-semibold text-green-600 dark:text-green-400'; + } + }, 5000); + });