mohamed-anis.mahi/projetecho
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalisation dashboard EcoCharge dynamique

Browse Source
This commit is contained in:
Safouane Bazzi
2026-05-05 03:46:22 +02:00
parent 9a1ec86d33
commit c60876e9a2
6 changed files with 447 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
templates/admin_dashboard.html
View File

@@ -185,6 +185,28 @@
background-color: #27ae60;
}
/* ── Bouton Retour au dashboard ── */
.retour {
display: block;
width: 100%;
text-align: center;
margin-top: 14px;
padding: 13px;
border-radius: 8px;
border: 1px solid #2c3e50;
color: var(--blanc);
background-color: transparent;
text-decoration: none;
font-size: 15px;
font-weight: 600;
transition: border-color 0.2s, color 0.2s;
}
.retour:hover {
border-color: var(--vert);
color: var(--vert);
}
/* ── Message de confirmation Flask/Jinja ── */
.succes {
background-color: rgba(46, 204, 113, 0.15);
@@ -219,22 +241,29 @@
<!-- ── Carte principale ── -->
<div class="carte">
<!-- Message affiché après une sauvegarde réussie -->
{% if saved %}
<div class="succes">
✅ Paramètres sauvegardés
</div>
{% endif %}
<h2>Seuils d'alerte</h2>
<p>Modifiez les valeurs puis cliquez sur "Sauvegarder".</p>
<!-- Formulaire — action vers la route Flask /admin/dashboard -->
<form method="POST" action="/admin/dashboard">
<!-- ── Champ 1 : batterie minimum ── -->
<!-- ── Champ 1 : tension mesurée minimum ── -->
<div class="champ">
<div class="champ-entete">
<label for="min_battery">🔋 Tension batterie minimum</label>
<label for="min_battery">🔋 Tension mesurée minimum</label>
</div>
<p class="champ-info">Alerte si la tension de la batterie descend sous ce seuil.</p>
<p class="champ-info">Alerte si la tension mesurée (INA219) descend sous ce seuil.</p>
<br>
<div class="input-ligne">
<input type="number" id="min_battery" name="min_battery" value="{{ settings.min_battery }}"
min="0" required>
min="0" step="any" inputmode="decimal" required>
<span class="unite">V</span>
</div>
</div>
@@ -246,33 +275,36 @@
<div class="champ-entete">
<label for="max_temp">🌡️ Température maximum</label>
</div>
<p class="champ-info">Alerte si la température dépasse cette valeur.</p>
<p class="champ-info">Alerte si la température (DHT11) dépasse cette valeur.</p>
<br>
<div class="input-ligne">
<input type="number" id="max_temp" name="max_temp" value="{{ settings.max_temp }}" min="0"
max="100" required>
max="100" step="any" inputmode="decimal" required>
<span class="unite">°C</span>
</div>
</div>
<hr class="separateur">
<!-- ── Champ 3 : puissance minimum ── -->
<!-- ── Champ 3 : puissance calculée minimum ── -->
<div class="champ">
<div class="champ-entete">
<label for="min_power">☀️ Puissance minimum</label>
<label for="min_power">⚡ Puissance calculée minimum</label>
</div>
<p class="champ-info">Alerte si la production solaire descend sous ce seuil.</p>
<p class="champ-info">Alerte si la puissance calculée (P = U × I) descend sous ce seuil.</p>
<br>
<div class="input-ligne">
<input type="number" id="min_power" name="min_power" value="{{ settings.min_power }}" min="0"
required>
step="any" inputmode="decimal" required>
<span class="unite">W</span>
</div>
</div>
<button class="bouton" type="submit">💾 Sauvegarder</button>
<!-- Retour propre vers le dashboard principal (route "/") -->
<a class="retour" href="/">← Retour au dashboard</a>
</form>
</div>

92
templates/index.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Station Solaire | Dashboard PRO</title>
<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">
@@ -21,8 +21,8 @@
</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">Système en ligne</span>
<div id="system-status" class="status-dot rounded-circle pulse-online"></div>
<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>
@@ -30,8 +30,9 @@
<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">
<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.
@@ -65,19 +66,16 @@
</div>
</div>
</div>
<button class="btn btn-outline-danger btn-sm mt-auto w-100" id="btn-test">
<i class="bi bi-wifi-off"></i> Simuler Coupure
</button>
</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">
<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-sun me-2"></i>Production Solaire
<i class="bi bi-activity me-2"></i>Mesures Électriques
</h5>
<div class="gauge-container mx-auto">
@@ -101,45 +99,76 @@
<div class="stats mt-auto">
<div class="stat-card">
<div class="stat-label">Tension (Upv)</div>
<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 (Ipv)</div>
<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">
<div class="stat-label">Luminosité</div>
<div class="stat-value" id="lux">0 <span class="stat-unit">Lux</span></div>
</div>
<div class="stat-card">
<div class="stat-label">Rendement</div>
<div class="stat-value" id="efficiency">0 <span class="stat-unit">%</span></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">Système connecté — MPPT actif</span>
<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">
<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-battery-charging me-2"></i>État Batterie
<i class="bi bi-cpu me-2"></i>État du Système
</h5>
<div class="d-flex flex-column align-items-center justify-content-center flex-grow-1">
<div class="battery-circle" id="bat-circle">
<div class="battery-inner">
<span class="bat-percent" id="bat-val">--%</span>
<small class="text-secondary text-uppercase fw-bold">SoC</small>
<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">
@@ -153,8 +182,9 @@
</div>
</div>
<!-- ── BLOC 4 : Administration ── -->
<div class="col-12 col-md-6 col-lg-3">
<div class="card card-admin rounded-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
@@ -164,7 +194,7 @@
<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>
<span>Paramètres Système</span>
Paramètres Système
</a>
<a href="/admin/logout" class="btn btn-dark border-secondary w-100 text-secondary mt-2">
@@ -175,6 +205,7 @@
</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">
@@ -188,11 +219,12 @@
</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 énergie
<i class="bi bi-lightning-charge me-2 text-white"></i>Historique mesures électriques
</h5>
<div style="height: 340px;">
<canvas id="energyChart"></canvas>