2026-05-11 22:08:32 +02:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="fr">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
2026-05-11 21:47:57 +02:00
|
|
|
<title>Simugaz WebUI</title>
|
2026-05-11 22:08:32 +02:00
|
|
|
<link rel="stylesheet" href="/assets/css/main.css" />
|
2026-05-12 19:33:50 +02:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
|
2026-05-11 22:08:32 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2026-05-12 17:20:49 +02:00
|
|
|
<header>
|
|
|
|
|
<h1>SimuGaz</h1>
|
|
|
|
|
</header>
|
|
|
|
|
|
2026-05-11 23:17:43 +02:00
|
|
|
<main>
|
2026-05-12 16:40:39 +02:00
|
|
|
<section class="filters">
|
2026-05-12 19:05:02 +02:00
|
|
|
<button class="btn-primary" id="btn-refresh">Actualiser</button>
|
2026-05-12 16:40:39 +02:00
|
|
|
<fieldset>
|
2026-05-12 19:05:02 +02:00
|
|
|
<legend>Paramètres</legend>
|
2026-05-12 22:30:21 +02:00
|
|
|
<div class="filter-field">
|
|
|
|
|
<label for="device">Appareil</label>
|
|
|
|
|
<select id="device" name="device">
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
2026-05-12 19:05:02 +02:00
|
|
|
<div class="filter-field">
|
2026-05-12 16:40:39 +02:00
|
|
|
<label for="date-start">Du</label>
|
|
|
|
|
<input type="date" id="date-start" name="date-start" />
|
|
|
|
|
</div>
|
2026-05-12 19:05:02 +02:00
|
|
|
<div class="filter-field">
|
2026-05-12 16:40:39 +02:00
|
|
|
<label for="date-end">Au</label>
|
|
|
|
|
<input type="date" id="date-end" name="date-end" />
|
|
|
|
|
</div>
|
2026-05-12 19:05:02 +02:00
|
|
|
<div class="filter-field">
|
2026-05-12 16:40:39 +02:00
|
|
|
<label for="granularity">Granularité</label>
|
|
|
|
|
<select id="granularity" name="granularity">
|
|
|
|
|
<option value="hour">Heure</option>
|
|
|
|
|
<option value="day" selected>Jour</option>
|
|
|
|
|
<option value="week">Semaine</option>
|
|
|
|
|
<option value="month">Mois</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</fieldset>
|
|
|
|
|
</section>
|
2026-05-12 17:15:42 +02:00
|
|
|
|
|
|
|
|
<section class="kpis">
|
|
|
|
|
<dl>
|
|
|
|
|
<dt>Consommation totale</dt>
|
|
|
|
|
<dd>
|
|
|
|
|
<span id="kpi-total">-</span>
|
|
|
|
|
<span>m³</span>
|
|
|
|
|
</dd>
|
|
|
|
|
</dl>
|
|
|
|
|
<dl>
|
|
|
|
|
<dt>Moyenne par période</dt>
|
|
|
|
|
<dd>
|
|
|
|
|
<span id="kpi-avg">-</span>
|
|
|
|
|
<span>m³</span>
|
|
|
|
|
</dd>
|
|
|
|
|
</dl>
|
|
|
|
|
<dl>
|
|
|
|
|
<dt>Relevés</dt>
|
|
|
|
|
<dd>
|
|
|
|
|
<span id="kpi-count">-</span>
|
|
|
|
|
<span>points</span>
|
|
|
|
|
</dd>
|
|
|
|
|
</dl>
|
|
|
|
|
</section>
|
|
|
|
|
|
2026-05-11 23:17:43 +02:00
|
|
|
<section class="chart-section">
|
|
|
|
|
<div>
|
|
|
|
|
<canvas id="consumption-chart"></canvas>
|
2026-05-12 23:24:31 +02:00
|
|
|
<p id="chart-message" hidden></p>
|
2026-05-11 23:17:43 +02:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<script src="/assets/js/api.js"></script>
|
|
|
|
|
<script src="/assets/js/chart.js"></script>
|
|
|
|
|
<script src="/assets/js/main.js"></script>
|
2026-05-11 22:08:32 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
