From f6be8e37c039bd8872fdf8a8b19e275b1c4df782 Mon Sep 17 00:00:00 2001
From: Mathieu Mandret <mathieu.mandret119@gmail.com>
Date: Thu, 20 Mar 2025 16:55:14 +0100
Subject: [PATCH] ui: Get state on page load

When the page is loaded, call '/get-state' API to fetch all the existing
devices and render them in the map.

This fixes the bug where refreshing the page would clear all the devices
from the UI.
---
 static/index.html | 36 +++++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/static/index.html b/static/index.html
index 18ad8d8..774dcae 100644
--- a/static/index.html
+++ b/static/index.html
@@ -76,6 +76,30 @@
   const map = document.getElementById("map");
   const info = document.getElementById("info");
 
+  function parse_device(device) {
+    const {
+      mac_address, x, y, z, yaw, pitch, roll,
+    } = device;
+    return {
+      mac_address,
+      position: { x, y, z },
+      yaw,
+      pitch,
+      roll,
+      neighbors: []
+    }
+  }
+
+  async function update_state() {
+    const res = await fetch('/get-state');
+    const { devices } = await res.json();
+    map.devices = devices.map(device => parse_device(device));
+  }
+
+  window.addEventListener('load', async () => {
+    update_state();
+  });
+
   map.addEventListener(
     "select",
     (event) => (info.device = event.detail.device)
@@ -122,19 +146,9 @@
     const data = JSON.parse(event.data);
     console.log("Device Added", data);
 
-    const {
-      mac_address, x, y, z, yaw, pitch, roll,
-    } = data;
     map.devices = [
       ...map.devices,
-      {
-        mac_address,
-        position: { x, y, z },
-        yaw,
-        pitch,
-        roll,
-        neighbors: [],
-      },
+      parse_device(data)
     ];
   });