Ajouter dashboard.js

dashboard.js

@@ -0,0 +1,82 @@
+// -------------------------------
+// 1 - Sélection des widgets
+// -------------------------------
+const climat = document.querySelector('.widget.climat');
+const securite = document.querySelector('.widget.securite');
+const energie = document.querySelector('.widget.energie');
+const lumiere = document.querySelector('.widget.lumiere');
+const graphiques = document.querySelector('.widget.graphiques');
+const alertes = document.querySelector('.widget.alertes');
+
+// -------------------------------
+// 2 - Hover dynamique sur les widgets
+// -------------------------------
+function setupHover(widget, colorNormal, colorHover) {
+    widget.addEventListener('mouseenter', () => {
+        widget.style.backgroundColor = colorHover;
+    });
+    widget.addEventListener('mouseleave', () => {
+        widget.style.backgroundColor = colorNormal;
+    });
+}
+
+// Appliquer le hover sur chaque widget
+setupHover(climat, '#ADD8E6', '#87CEEB');
+setupHover(securite, '#D3D3D3', '#C0C0C0');
+setupHover(energie, '#FFFACD', '#FAFAD2');
+setupHover(lumiere, '#F5F5DC', '#FFF8DC');
+
+// -------------------------------
+// 3 - Simulation d'alerte visuelle
+// -------------------------------
+function showAlert(widget) {
+    widget.classList.add('alert'); // contour rouge
+}
+
+function hideAlert(widget) {
+    widget.classList.remove('alert'); // retire le contour rouge
+}
+
+// Exemple : activer l'alerte sur climat
+showAlert(climat);
+
+// Le bloc Alertes reste visible
+alertes.style.display = 'block';
+
+// -------------------------------
+// 4 - Préparer la zone graphique vide
+// -------------------------------
+const canvasTemp = document.getElementById('graph-temp');
+if (canvasTemp) {
+    const ctx = canvasTemp.getContext('2d');
+    const myChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: [],   // vide pour l'instant
+            datasets: [{
+                label: 'Température',
+                data: [],   // vide pour l'instant
+                borderColor: 'blue',
+                tension: 0.4
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: { display: false }
+            },
+            scales: {
+                x: { display: false },
+                y: { display: false }
+            }
+        }
+    });
+}
+
+// -------------------------------
+// 5 - Fonction de mise à jour future
+// -------------------------------
+function majWidget(widget, valeur) {
+    // futur code pour mettre à jour le widget avec de vraies données
+    // exemple : climat.querySelector('p').innerText = "Température : " + valeur + "°C";
+}