111 lines
3.7 KiB
JavaScript
111 lines
3.7 KiB
JavaScript
/* global Chart */ // Permet à l'IDE de reconnaître Chart.js
|
||
|
||
// -------------------------------
|
||
// 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 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;
|
||
});
|
||
}
|
||
|
||
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');
|
||
}
|
||
|
||
// Exemple : activer l'alerte sur climat
|
||
showAlert(climat);
|
||
|
||
// Le bloc alertes reste visible
|
||
alertes.style.display = 'block';
|
||
|
||
// -------------------------------
|
||
// 4️⃣ Graphique Chart.js
|
||
// -------------------------------
|
||
const canvasTemp = document.getElementById('graph-temp');
|
||
if(canvasTemp) {
|
||
const ctx = canvasTemp.getContext('2d');
|
||
new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
|
||
datasets: [{
|
||
label: 'Température',
|
||
data: [20, 22, 19, 23, 21],
|
||
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: 'Mois' } },
|
||
y: { display: true, title: { display: true, text: '°C' } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// -------------------------------
|
||
// 5️⃣ Données réelles depuis l'API
|
||
// -------------------------------
|
||
const API_BASE = "http://172.16.60.12/smarthome-api";
|
||
|
||
async function init() {
|
||
const res = await fetch(${API_BASE}/auth.php, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ username: "admin", password: "admin123" })
|
||
});
|
||
const data = await res.json();
|
||
const token = data.token;
|
||
await chargerClimat(token);
|
||
await chargerSecurite(token);
|
||
}
|
||
|
||
async function chargerClimat(token) {
|
||
const res = await fetch(${API_BASE}/routes/climate.php, {
|
||
headers: { "Authorization": "Bearer " + token }
|
||
});
|
||
const data = await res.json();
|
||
const last = Array.isArray(data) ? data[data.length - 1] : data;
|
||
document.getElementById("temperature").textContent = last.temperature + " °C";
|
||
document.getElementById("humidity").textContent = last.humidity + " %";
|
||
document.getElementById("pressure").textContent = last.pressure + " hPa";
|
||
document.getElementById("luminosity").textContent = last.luminosity + " lux";
|
||
}
|
||
|
||
async function chargerSecurite(token) {
|
||
const res = await fetch(${API_BASE}/routes/security.php, {
|
||
headers: { "Authorization": "Bearer " + token }
|
||
});
|
||
const data = await res.json();
|
||
const last = Array.isArray(data) ? data[data.length - 1] : data;
|
||
document.getElementById("event_type").textContent = last.event_type;
|
||
document.getElementById("location").textContent = last.location;
|
||
}
|
||
|
||
init(); |