From a44284b9b1b0b00f6b8f224fa30d42461652b2a2 Mon Sep 17 00:00:00 2001 From: Yan Zhou Date: Wed, 11 Jun 2025 19:59:33 +0200 Subject: [PATCH] setting design --- src/routes/(app)/settings/+page.svelte | 229 +++++++++++++++++++++++-- 1 file changed, 216 insertions(+), 13 deletions(-) diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte index de7ae8d..173578d 100644 --- a/src/routes/(app)/settings/+page.svelte +++ b/src/routes/(app)/settings/+page.svelte @@ -3,20 +3,223 @@ 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"; + import Card from "$lib/components/ui/card/card.svelte"; + import CardContent from "$lib/components/ui/card/card-content.svelte"; + import CardDescription from "$lib/components/ui/card/card-description.svelte"; + import CardHeader from "$lib/components/ui/card/card-header.svelte"; + import CardTitle from "$lib/components/ui/card/card-title.svelte"; + import { Thermometer, Droplets, Gauge, Mountain, Upload, Cpu } from "@lucide/svelte"; const { form } = $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 placedDevices = $state([]); + let draggedDevice = $state(null); + let floorPlanRef = $state(null); + + function handleFileUpload(event) { + const file = event.target.files?.[0]; + if (file && file.type.startsWith("image/")) { + const reader = new FileReader(); + reader.onload = (e) => { + floorPlanImage = e.target.result; + }; + reader.readAsDataURL(file); + } + } + + function handleDragStart(device) { + draggedDevice = device; + } + + function handleDragOver(event) { + event.preventDefault(); + } + + function handleDrop(event) { + event.preventDefault(); + if (!draggedDevice || !floorPlanRef) return; + + const rect = floorPlanRef.getBoundingClientRect(); + const x = ((event.clientX - rect.left) / rect.width) * 100; + const y = ((event.clientY - rect.top) / rect.height) * 100; + + // Check if device is already placed + const existingIndex = placedDevices.findIndex((d) => d.id === draggedDevice.id); + + if (existingIndex >= 0) { + // Update position + placedDevices[existingIndex] = { ...placedDevices[existingIndex], x, y }; + } else { + // Add new device + placedDevices = [...placedDevices, { ...draggedDevice, x, y }]; + } + + draggedDevice = null; + } + + function removeDevice(deviceId) { + placedDevices = placedDevices.filter((d) => d.id !== deviceId); + } -
-
- - -
-
- - -
-
-{#if form?.message} -

{form.message}

-{/if} +
+ + + Floor Management + Add or remove floors from your monitoring system + + +
+
+ + +
+
+ + +
+
+ {#if form?.message} +

{form.message}

+ {/if} + + + + + + Floor Plan & Devices + Upload a floor plan image and view available devices + + +
+
+ + +
+ + {#if floorPlanImage} +
+ Floor plan + + {#each placedDevices as device} +
handleDragStart(device)} + > +
+ + {device.name} + +
+
+
+ + Temp +
+
+ + Humid +
+
+ + Press +
+
+ + Alt +
+
+
+ {/each} +
+

+ Drag ESP8266 devices from below onto the floor plan to place them in specific rooms. +

+ {/if} + +
+

Available ESP8266 Devices

+
+ {#each availableDevices as device} +
handleDragStart(device)} + > +
+
+ + {device.name} +
+
+
+ {device.status} +
+
+
Sensors:
+
+
+ + Temperature +
+
+ + Humidity +
+
+ + Pressure +
+
+ + Altitude +
+
+
+ {/each} +
+
+
+ + +