243 lines
12 KiB
HTML
243 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr" data-bs-theme="dark">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>EcoCharge | Dashboard</title>
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<nav class="navbar shadow-sm mb-4 py-3">
|
||
<div class="container-fluid px-4">
|
||
<span class="navbar-brand mb-0 h1 fw-bold text-light d-flex align-items-center">
|
||
<i class="bi bi-lightning-charge-fill text-warning me-2 fs-3"></i>
|
||
Station Solaire Autonome
|
||
</span>
|
||
<div
|
||
class="d-flex align-items-center bg-dark bg-opacity-50 px-3 py-2 rounded-pill border border-secondary border-opacity-25">
|
||
<span id="status-text" class="me-3 fw-semibold small text-uppercase tracking-wide">Vérification…</span>
|
||
<div id="system-status" class="status-dot rounded-circle"></div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container-fluid px-4">
|
||
<div class="row g-4">
|
||
|
||
<!-- ── BLOC 1 : Météo & Env. (DHT11) ── -->
|
||
<div class="col-12 col-md-6 col-lg-3">
|
||
<div class="card card-meteo rounded-3 h-100">
|
||
<div class="card-body d-flex flex-column p-4">
|
||
<h5 class="card-title fw-bold mb-4" style="color: #38bdf8;">
|
||
<i class="bi bi-cloud-sun me-2"></i>Météo & Env.
|
||
</h5>
|
||
|
||
<div class="mb-3 pb-3 border-bottom border-secondary border-opacity-50 text-center">
|
||
<span class="badge bg-dark border border-secondary text-secondary mb-2">Via API Web
|
||
(Serveur)</span>
|
||
<div class="d-flex justify-content-center align-items-center mt-2">
|
||
<i id="api-icon" class="bi bi-brightness-high text-warning display-4 me-3"></i>
|
||
<div class="text-start">
|
||
<h3 class="mb-0 fw-bold data-value" id="api-temp">--°C</h3>
|
||
<small class="text-secondary text-uppercase fw-bold" id="api-desc">En attente...</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-auto mb-3">
|
||
<span class="badge bg-dark border border-secondary text-secondary mb-3">Capteur Local
|
||
(DHT11)</span>
|
||
<div class="row">
|
||
<div class="col-6 border-end border-secondary border-opacity-25">
|
||
<h3 class="fw-bold data-value mb-0" id="temp-val">--</h3>
|
||
<p class="text-secondary small text-uppercase mt-1 fw-bold"><i
|
||
class="bi bi-thermometer-half"></i> Temp</p>
|
||
</div>
|
||
<div class="col-6">
|
||
<h3 class="fw-bold data-value mb-0" id="hum-val">--</h3>
|
||
<p class="text-secondary small text-uppercase mt-1 fw-bold"><i
|
||
class="bi bi-droplet"></i> Hum</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── BLOC 2 : Mesures Électriques (INA219) ── -->
|
||
<div class="col-12 col-md-6 col-lg-3">
|
||
<div class="card card-solaire rounded-3 h-100">
|
||
<div class="card-body p-4 d-flex flex-column">
|
||
<h5 class="card-title fw-bold mb-4" style="color: #fbbf24;">
|
||
<i class="bi bi-activity me-2"></i>Mesures Électriques
|
||
</h5>
|
||
|
||
<div class="gauge-container mx-auto">
|
||
<svg class="gauge-bg" viewBox="0 0 200 200">
|
||
<circle cx="100" cy="100" r="90" />
|
||
</svg>
|
||
<svg class="gauge-fill" viewBox="0 0 200 200">
|
||
<defs>
|
||
<linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#f59e0b" />
|
||
<stop offset="100%" stop-color="#facc15" />
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="100" cy="100" r="90" />
|
||
</svg>
|
||
<div class="gauge-value">
|
||
<span class="number" id="powerValue">0</span>
|
||
<span class="unit">W</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats mt-auto">
|
||
<div class="stat-card">
|
||
<div class="stat-label">Tension mesurée</div>
|
||
<div class="stat-value" id="voltage">0 <span class="stat-unit">V</span></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-label">Courant mesuré</div>
|
||
<div class="stat-value" id="current">0 <span class="stat-unit">A</span></div>
|
||
</div>
|
||
<div class="stat-card" style="grid-column: span 2;">
|
||
<div class="stat-label">Puissance calculée (P = U × I)</div>
|
||
<div class="stat-value" id="efficiency">0 <span class="stat-unit">W</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sol-status-bar mt-3">
|
||
<div class="sol-status-dot"></div>
|
||
<span class="sol-status-text">INA219 actif — mesure en cours</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── BLOC 3 : État du Système ── -->
|
||
<div class="col-12 col-md-6 col-lg-3">
|
||
<div class="card card-batterie rounded-3 h-100">
|
||
<div class="card-body p-4 d-flex flex-column">
|
||
<h5 class="card-title fw-bold mb-4" style="color: #34d399;">
|
||
<i class="bi bi-cpu me-2"></i>État du Système
|
||
</h5>
|
||
|
||
<div class="d-flex flex-column gap-3 flex-grow-1 justify-content-center">
|
||
|
||
<div class="system-status-item" id="sys-item-global">
|
||
<div class="d-flex align-items-center gap-2">
|
||
<span class="sys-dot bg-success"></span>
|
||
<span class="sys-label">Système actif</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="system-status-item" id="sys-item-esp">
|
||
<div class="d-flex align-items-center gap-2">
|
||
<span class="sys-dot" id="dot-esp"></span>
|
||
<span class="sys-label">ESP32</span>
|
||
<span class="ms-auto sys-badge" id="badge-esp">En attente</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="system-status-item">
|
||
<div class="d-flex align-items-center gap-2">
|
||
<span class="sys-dot bg-success"></span>
|
||
<span class="sys-label">DHT11</span>
|
||
<span class="ms-auto sys-badge sys-badge-ok">Actif</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="system-status-item">
|
||
<div class="d-flex align-items-center gap-2">
|
||
<span class="sys-dot bg-success"></span>
|
||
<span class="sys-label">INA219</span>
|
||
<span class="ms-auto sys-badge sys-badge-ok">Actif</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="system-status-item">
|
||
<div class="d-flex align-items-center gap-2">
|
||
<span class="sys-dot bg-info"></span>
|
||
<span class="sys-label">Raspberry Pi</span>
|
||
<span class="ms-auto sys-badge sys-badge-ok">Hébergement</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="mt-4 text-center">
|
||
<div class="badge bg-dark border border-secondary text-secondary w-100 py-2"
|
||
id="bat-alert-badge">
|
||
<i class="bi bi-check-circle text-success" id="bat-alert-icon"></i>
|
||
<span id="bat-alert">Système Normal</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── BLOC 4 : Administration ── -->
|
||
<div class="col-12 col-md-6 col-lg-3">
|
||
<div class="card card-admin rounded-3 h-100">
|
||
<div class="card-body p-4 d-flex flex-column">
|
||
<h5 class="card-title fw-bold mb-4" style="color: #f87171;">
|
||
<i class="bi bi-sliders me-2"></i>Administration
|
||
</h5>
|
||
|
||
<div class="d-flex flex-column h-100 justify-content-center mt-auto gap-3">
|
||
<a href="/admin/dashboard"
|
||
class="btn btn-outline-danger w-100 py-3 fw-bold rounded-3 d-flex flex-column align-items-center shadow-sm">
|
||
<i class="bi bi-gear-fill display-4 mb-2"></i>
|
||
Paramètres Système
|
||
</a>
|
||
|
||
<a href="/admin/logout" class="btn btn-dark border-secondary w-100 text-secondary mt-2">
|
||
<i class="bi bi-box-arrow-right me-2"></i>Déconnexion
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Historique environnement ── -->
|
||
<div class="col-12 col-lg-6">
|
||
<div class="card rounded-3 shadow-sm border border-secondary border-opacity-25 h-100">
|
||
<div class="card-body p-4">
|
||
<h5 class="fw-bold mb-4 text-white">
|
||
<i class="bi bi-graph-up-arrow me-2 text-white"></i>Historique environnement
|
||
</h5>
|
||
<div style="height: 340px;">
|
||
<canvas id="envChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Historique mesures électriques ── -->
|
||
<div class="col-12 col-lg-6">
|
||
<div class="card rounded-3 shadow-sm border border-secondary border-opacity-25 h-100">
|
||
<div class="card-body p-4">
|
||
<h5 class="fw-bold mb-4 text-white">
|
||
<i class="bi bi-lightning-charge me-2 text-white"></i>Historique mesures électriques
|
||
</h5>
|
||
<div style="height: 340px;">
|
||
<canvas id="energyChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
||
</body>
|
||
|
||
</html> |