feat: use device choice in API consumption request instead of hardcoded

server/frontend/public/assets/js/api.js

@@ -1,9 +1,9 @@
 const API_BASE = 'http://192.168.1.195:8000'
-const DEV_EUI = '0586fe41112d83d9';
 
-async function fetchConsumption({ start, end, granularity }) {
+
+async function fetchConsumption({device_eui, start, end, granularity }) {
   const params = new URLSearchParams({ start, end, granularity });
-  const url = `${API_BASE}/readings/${DEV_EUI}?${params}`;
+  const url = `${API_BASE}/readings/${device_eui}?${params}`;
 
   const result = await fetch(url);
   if (!result.ok) {
@@ -14,3 +14,16 @@ async function fetchConsumption({ start, end, granularity }) {
 
   return raw.points;
 }
+
+async function fetchDevices(){
+  const url = `${API_BASE}/devices`;
+  const result = await fetch(url);
+
+  if (!result.ok) {
+    const err = await result.json().catch(() => ({}));
+    throw new Error(err.detail || `Erreur HTTP ${result.status}`);
+  }
+  const devices = await result.json();
+
+  return devices;
+}

server/frontend/public/assets/js/main.js

@@ -10,15 +10,18 @@ async function init() {
   document.getElementById("date-end").valueAsDate = end;
   document.getElementById("btn-refresh").addEventListener("click", loadData);
 
-  loadData();
+  await loadDevices();
+  await loadData();
 }
 
 async function loadData() {
   const start = document.getElementById("date-start").value;
   const end = document.getElementById("date-end").value;
   const granularity = document.getElementById("granularity").value;
+  const device_eui = document.getElementById("device").value;
 
   const points = await fetchConsumption({
+    device_eui: device_eui,
     start: start,
     end: end,
     granularity: granularity,
@@ -50,3 +53,15 @@ function updateKPIs(points) {
   avgDisplay.textContent = avgValue.toFixed(3);
   countDisplay.textContent = points.length;
 }
+
+async function loadDevices() {
+  const selectDeviceElmt = document.getElementById("device");
+
+  const devices = await fetchDevices();
+
+  devices.forEach((device) => {
+    selectDeviceElmt.add(new Option(device.device_eui))
+  });
+
+  selectDeviceElmt.value = devices[0]?.device_eui ?? "";
+}

server/frontend/public/index.html

@@ -17,6 +17,11 @@
         <button class="btn-primary" id="btn-refresh">Actualiser</button>
         <fieldset>
           <legend>Paramètres</legend>
+          <div class="filter-field">
+            <label for="device">Appareil</label>
+            <select id="device" name="device">
+            </select>
+          </div>
           <div class="filter-field">
             <label for="date-start">Du</label>
             <input type="date" id="date-start" name="date-start" />