82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
// -------------------------------
|
|
// 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";
|
|
} |