106 lines
3.5 KiB
JavaScript
106 lines
3.5 KiB
JavaScript
/* global Chart */
|
|
|
|
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 alertes = document.querySelector('.widget.alertes');
|
|
|
|
function setupHover(widget, colorNormal, colorHover) {
|
|
widget.addEventListener('mouseenter', () => {
|
|
widget.style.backgroundColor = colorHover;
|
|
});
|
|
widget.addEventListener('mouseleave', () => {
|
|
widget.style.backgroundColor = colorNormal;
|
|
});
|
|
}
|
|
|
|
setupHover(climat, '#ADD8E6', '#87CEEB');
|
|
setupHover(securite, '#D3D3D3', '#C0C0C0');
|
|
setupHover(energie, '#FFFACD', '#FAFAD2');
|
|
setupHover(lumiere, '#F5F5DC', '#FFF8DC');
|
|
|
|
function showAlert(widget) {
|
|
widget.classList.add('alert');
|
|
}
|
|
|
|
showAlert(climat);
|
|
alertes.style.display = 'block';
|
|
|
|
let monGraphique = null;
|
|
const canvasTemp = document.getElementById('graph-temp');
|
|
|
|
function creerGraphique(labels, valeurs) {
|
|
if (!canvasTemp) return;
|
|
const ctx = canvasTemp.getContext('2d');
|
|
|
|
monGraphique = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Température',
|
|
data: valeurs,
|
|
borderColor: 'blue',
|
|
backgroundColor: 'rgba(173,216,230,0.2)',
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: { display: true }
|
|
},
|
|
scales: {
|
|
x: { display: true, title: { display: true, text: 'Temps' } },
|
|
y: { display: true, title: { display: true, text: '°C' } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async function chargerDonnees() {
|
|
try {
|
|
const res = await fetch('api/get_data.php');
|
|
const data = await res.json();
|
|
|
|
if (data.status === 'success') {
|
|
if (data.climate) {
|
|
document.getElementById("temperature").textContent = data.climate.temperature + " °C";
|
|
document.getElementById("humidity").textContent = data.climate.humidity + " %";
|
|
document.getElementById("pressure").textContent = data.climate.pressure + " hPa";
|
|
document.getElementById("luminosity").textContent = data.climate.luminosity + " lux";
|
|
}
|
|
|
|
if (data.security) {
|
|
document.getElementById("event_type").textContent = data.security.event_type;
|
|
document.getElementById("location").textContent = data.security.location;
|
|
}
|
|
|
|
if (data.graph && data.graph.length > 0) {
|
|
const labels = data.graph.map(point => {
|
|
const date = new Date(point.timestamp);
|
|
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
});
|
|
const temperatures = data.graph.map(point => point.temperature);
|
|
|
|
if (monGraphique) {
|
|
monGraphique.data.labels = labels;
|
|
monGraphique.data.datasets[0].data = temperatures;
|
|
monGraphique.update();
|
|
} else {
|
|
creerGraphique(labels, temperatures);
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Erreur lors du chargement de l'API :", error);
|
|
}
|
|
}
|
|
|
|
async function init() {
|
|
await chargerDonnees();
|
|
setInterval(chargerDonnees, 5000);
|
|
}
|
|
|
|
init(); |