add floor plan

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

@@ -4,7 +4,24 @@ import { fail } from "@sveltejs/kit";
 import { eq } from "drizzle-orm";
 
 export const load = async (event) => {
-  return {};
+  // Fetch all available floors
+  const floors = await db
+    .select({ floor: table.floors.floor })
+    .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" },
+  ];
+
+  return {
+    floors: floors.map((f) => f.floor),
+    devices: devices,
+  };
 };
 
 export const actions = {
@@ -41,4 +58,49 @@ export const actions = {
 
     await db.delete(table.floors).where(eq(table.floors.floor, n));
   },
+  savefloor: async (event) => {
+    const formData = await event.request.formData();
+    const floorNumber = formData.get("floorNumber");
+    const floorPlanImage = formData.get("floorPlanImage");
+    const devices = formData.get("devices");
+
+    const n = Number(floorNumber);
+    if (isNaN(n)) return fail(400, { message: "Invalid floor number!" });
+
+    if (!floorPlanImage || !devices) {
+      return fail(400, { message: "Missing floor plan or device configuration!" });
+    }
+
+    try {
+      const deviceData = JSON.parse(devices);
+
+      // Check if floor exists
+      const exists = await db
+        .select({ floor: table.floors.floor })
+        .from(table.floors)
+        .where(eq(table.floors.floor, n));
+
+      if (exists.length === 0) {
+        return fail(400, { message: `Floor ${n} does not exist! Please create it first.` });
+      }
+
+      // Update floor with configuration
+      // Note: In a real implementation, you would store this data properly
+      // For now, we'll just update the url field as a JSON string
+      const floorConfig = {
+        image: floorPlanImage,
+        devices: deviceData,
+      };
+
+      await db
+        .update(table.floors)
+        .set({ url: JSON.stringify(floorConfig) })
+        .where(eq(table.floors.floor, n));
+
+      return { success: true, message: `Floor ${n} configuration saved successfully!` };
+    } catch (error) {
+      console.error("Error saving floor configuration:", error);
+      return fail(500, { message: "Failed to save floor configuration!" });
+    }
+  },
 };

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

@@ -10,19 +10,29 @@
   import CardTitle from "$lib/components/ui/card/card-title.svelte";
   import { Thermometer, Droplets, Gauge, Mountain, Upload, Cpu } from "@lucide/svelte";
 
-  const { form } = $props();
+  const { form, data } = $props();
 
   let floorPlanImage = $state(null);
-  let availableDevices = $state([
-    { id: "esp8266-1", name: "ESP8266 #1", type: "esp8266", status: "online" },
-    { id: "esp8266-2", name: "ESP8266 #2", type: "esp8266", status: "online" },
-    { id: "esp8266-3", name: "ESP8266 #3", type: "esp8266", status: "offline" },
-    { id: "esp8266-4", name: "ESP8266 #4", type: "esp8266", status: "online" },
-  ]);
+  let availableDevices = $state(data.devices || []);
 
   let placedDevices = $state([]);
   let draggedDevice = $state(null);
   let floorPlanRef = $state(null);
+  let selectedFloorNumber = $state("");
+  let saveMessage = $state(null);
+
+  $effect(() => {
+    if (data.floors && data.floors.length > 0 && !selectedFloorNumber) {
+      selectedFloorNumber = data.floors[0].toString();
+    }
+  });
+
+  $effect(() => {
+    // Update devices when data changes
+    if (data.devices) {
+      availableDevices = data.devices;
+    }
+  });
 
   function handleFileUpload(event) {
     const file = event.target.files?.[0];
@@ -168,6 +178,65 @@
           <p class="mt-2 text-sm text-gray-600">
             Drag ESP8266 devices from below onto the floor plan to place them in specific rooms.
           </p>
+
+          {#if floorPlanImage && placedDevices.length > 0}
+            <div class="mt-4 rounded-lg border bg-blue-50 p-4">
+              <h4 class="mb-3 font-semibold">Save Floor Configuration</h4>
+              <form
+                method="post"
+                action="?/savefloor"
+                use:enhance={() => {
+                  return async ({ result }) => {
+                    if (result.type === "success") {
+                      saveMessage = { type: "success", text: result.data.message };
+                      // Clear form after successful save
+                      selectedFloorNumber = "";
+                    } else if (result.type === "failure") {
+                      saveMessage = {
+                        type: "error",
+                        text: result.data?.message || "Failed to save configuration",
+                      };
+                    }
+                  };
+                }}
+              >
+                <input type="hidden" name="floorPlanImage" value={floorPlanImage} />
+                <input type="hidden" name="devices" value={JSON.stringify(placedDevices)} />
+                <div class="mb-3 flex items-end gap-4">
+                  <div class="flex-1">
+                    <Label for="floorNumber">Select Floor</Label>
+                    <select
+                      name="floorNumber"
+                      id="floorNumber"
+                      bind:value={selectedFloorNumber}
+                      class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+                      required
+                    >
+                      {#if data.floors && data.floors.length > 0}
+                        {#each data.floors as floor}
+                          <option value={floor.toString()}>
+                            Floor {floor}
+                          </option>
+                        {/each}
+                      {/if}
+                    </select>
+                  </div>
+                  <Button type="submit" variant="default" disabled={!selectedFloorNumber}>
+                    Save Floor Configuration
+                  </Button>
+                </div>
+              </form>
+              {#if saveMessage}
+                <p
+                  class="mt-2 text-sm {saveMessage.type === 'success'
+                    ? 'text-green-600'
+                    : 'text-red-600'}"
+                >
+                  {saveMessage.text}
+                </p>
+              {/if}
+            </div>
+          {/if}
         {/if}
 
         <div class="pt-4">