71 lines
2 KiB
HTML
71 lines
2 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Simugaz WebUI</title>
|
|
<link rel="stylesheet" href="/assets/css/main.css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="filters">
|
|
<fieldset>
|
|
<legend>Période</legend>
|
|
<div>
|
|
<label for="date-start">Du</label>
|
|
<input type="date" id="date-start" name="date-start" />
|
|
</div>
|
|
<div>
|
|
<label for="date-end">Au</label>
|
|
<input type="date" id="date-end" name="date-end" />
|
|
</div>
|
|
<div>
|
|
<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>
|
|
<button class="btn-primary" id="btn-refresh">Actualiser</button>
|
|
</section>
|
|
|
|
<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>
|
|
|
|
<section class="chart-section">
|
|
<div>
|
|
<canvas id="consumption-chart"></canvas>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/assets/js/api.js"></script>
|
|
<script src="/assets/js/chart.js"></script>
|
|
<script src="/assets/js/main.js"></script>
|
|
</body>
|
|
</html>
|