added get device and update the values live

src/routes/(app)/settings/+page.server.js

@@ -1,5 +1,6 @@
 import { db } from "$lib/server/db";
 import * as table from "$lib/server/db/schema";
+import { getCurrentDevices } from "$lib/server/mqtt-devices.js";
 import { fail } from "@sveltejs/kit";
 import { eq } from "drizzle-orm";
 
@@ -10,13 +11,20 @@ export const load = async (event) => {
     .from(table.floors)
     .orderBy(table.floors.floor);
 
-  // Provide mock ESP8266 devices for now
-  const devices = [
-    { id: "esp8266-001", name: "ESP8266 #001", type: "esp8266", status: "online" },
-    { id: "esp8266-002", name: "ESP8266 #002", type: "esp8266", status: "online" },
-    { id: "esp8266-003", name: "ESP8266 #003", type: "esp8266", status: "offline" },
-    { id: "esp8266-004", name: "ESP8266 #004", type: "esp8266", status: "online" },
-  ];
+  // Get real connected devices from MQTT
+  let devices = getCurrentDevices();
+
+  // If no real devices, provide fallback mock devices
+  if (devices.length === 0) {
+    devices = [
+      {
+        id: "no-devices",
+        name: "No ESP8266 devices connected",
+        type: "esp8266",
+        status: "offline",
+      },
+    ];
+  }
 
   return {
     floors: floors.map((f) => f.floor),

src/routes/(app)/settings/+page.svelte

@@ -1,5 +1,6 @@
 <script>
   import { enhance } from "$app/forms";
+  import { onMount, onDestroy } from "svelte";
   import Button from "$lib/components/ui/button/button.svelte";
   import Input from "$lib/components/ui/input/input.svelte";
   import Label from "$lib/components/ui/label/label.svelte";
@@ -14,6 +15,8 @@
 
   let floorPlanImage = $state(null);
   let availableDevices = $state(data.devices || []);
+  let deviceSensorData = $state(new Map());
+  let eventSource;
 
   let placedDevices = $state([]);
   let draggedDevice = $state(null);
@@ -34,6 +37,58 @@
     }
   });
 
+  // Set up real-time updates via SSE
+  onMount(() => {
+    console.log("Settings: Attempting to connect to MQTT SSE...");
+    eventSource = new EventSource("/mqtt");
+
+    eventSource.onopen = () => {
+      console.log("Settings: SSE connection opened successfully!");
+    };
+
+    eventSource.onmessage = (event) => {
+      if (eventSource.readyState !== EventSource.OPEN) {
+        console.log("Settings: Received message but connection is not open, ignoring");
+        return;
+      }
+
+      try {
+        const messageData = JSON.parse(event.data);
+        console.log("Settings page received SSE data:", messageData);
+
+        // Update device sensor data and device list from real-time updates
+        if (messageData.devices) {
+          console.log("Updating available devices with:", messageData.devices);
+          // Update available devices with latest data
+          availableDevices = messageData.devices;
+
+          // Update sensor data map
+          const newData = new Map();
+          messageData.devices.forEach((device) => {
+            if (device.sensorData) {
+              newData.set(device.id, device.sensorData);
+            }
+          });
+          deviceSensorData = newData;
+          console.log("Updated deviceSensorData:", deviceSensorData);
+        }
+      } catch (e) {
+        console.error("Settings: Error parsing SSE message:", e);
+      }
+    };
+
+    eventSource.onerror = (error) => {
+      console.error("SSE Error:", error);
+    };
+  });
+
+  onDestroy(() => {
+    if (eventSource && eventSource.readyState !== EventSource.CLOSED) {
+      console.log("Settings: Closing SSE connection");
+      eventSource.close();
+    }
+  });
+
   function handleFileUpload(event) {
     const file = event.target.files?.[0];
     if (file && file.type.startsWith("image/")) {
@@ -269,19 +324,43 @@
                 <div class="grid grid-cols-2 gap-1">
                   <div class="flex items-center gap-1 text-xs">
                     <Thermometer class="h-3 w-3 text-orange-500" />
-                    <span>Temperature</span>
+                    <span>
+                      {#if device.sensorData}
+                        {device.sensorData.temperature.toFixed(1)}°C
+                      {:else}
+                        --°C
+                      {/if}
+                    </span>
                   </div>
                   <div class="flex items-center gap-1 text-xs">
                     <Droplets class="h-3 w-3 text-blue-500" />
-                    <span>Humidity</span>
+                    <span>
+                      {#if device.sensorData}
+                        {device.sensorData.humidity.toFixed(1)}%
+                      {:else}
+                        --%
+                      {/if}
+                    </span>
                   </div>
                   <div class="flex items-center gap-1 text-xs">
                     <Gauge class="h-3 w-3 text-green-500" />
-                    <span>Pressure</span>
+                    <span>
+                      {#if device.sensorData}
+                        {Math.round(device.sensorData.pressure)}Pa
+                      {:else}
+                        --Pa
+                      {/if}
+                    </span>
                   </div>
                   <div class="flex items-center gap-1 text-xs">
                     <Mountain class="h-3 w-3 text-purple-500" />
-                    <span>Altitude</span>
+                    <span>
+                      {#if device.sensorData}
+                        {device.sensorData.altitude.toFixed(1)}m
+                      {:else}
+                        --m
+                      {/if}
+                    </span>
                   </div>
                 </div>
               </div>