From 3f6ac523f84baa308fde0c3414b35450718211a9 Mon Sep 17 00:00:00 2001
From: David Senoner <seda18@rolmail.net>
Date: Mon, 19 May 2025 14:52:01 +0200
Subject: [PATCH] draw floorplan from json

---
 src/lib/server/db/schema.js          |  7 +++-
 src/routes/(app)/+layout.svelte      |  1 -
 src/routes/(app)/[slug]/+page.svelte | 56 +++++++++++++++++++++++++++-
 src/routes/(app)/[slug]/+page.ts     |  5 ---
 4 files changed, 61 insertions(+), 8 deletions(-)
 delete mode 100644 src/routes/(app)/[slug]/+page.ts

diff --git a/src/lib/server/db/schema.js b/src/lib/server/db/schema.js
index 25fa50b..7da6a0a 100644
--- a/src/lib/server/db/schema.js
+++ b/src/lib/server/db/schema.js
@@ -1,4 +1,4 @@
-import { integer, pgTable, text, timestamp } from "drizzle-orm/pg-core";
+import { integer, json, pgTable, text, timestamp } from "drizzle-orm/pg-core";
 
 export const users = pgTable("users", {
   id: text().primaryKey(),
@@ -19,3 +19,8 @@ export const floors = pgTable("floors", {
   floor: integer().primaryKey(),
   url: text().notNull(),
 });
+
+export const plans = pgTable("plans", {
+  floor: integer().primaryKey(),
+  plan: json().notNull(),
+});
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 0dac17d..dfe1436 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -29,7 +29,6 @@
   <Sidebar.Root collapsible="icon">
     <Sidebar.Content>
       <Sidebar.Group>
-        <Sidebar.GroupLabel>Floors</Sidebar.GroupLabel>
         <Sidebar.GroupContent>
           <Sidebar.Menu>
             {#each data.floors as item (item.floor)}
diff --git a/src/routes/(app)/[slug]/+page.svelte b/src/routes/(app)/[slug]/+page.svelte
index eb499ba..7681a39 100644
--- a/src/routes/(app)/[slug]/+page.svelte
+++ b/src/routes/(app)/[slug]/+page.svelte
@@ -1,5 +1,59 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+
   const { data } = $props();
+
+  let canvasEl: HTMLCanvasElement;
+  let ctx;
+
+  function drawFloorplan(data) {
+    if (!data) {
+      console.error("No data available to draw");
+      return;
+    }
+
+    // Draw walls, doors, and furniture (simplified example)
+    drawRegions(data.regions);
+    drawDoors(data.doors);
+    drawFurniture(data.furnitures);
+  }
+
+  function drawRegions(regions) {
+    regions.forEach((region) => {
+      ctx.beginPath();
+      ctx.moveTo(region.start.x, region.start.y);
+      ctx.lineTo(region.end.x, region.end.y);
+      ctx.stroke();
+    });
+  }
+
+  function drawDoors(doors) {
+    doors.forEach((door) => {
+      ctx.beginPath();
+      ctx.rect(door.location.x, door.location.y, door.width, 5); // Simplified door drawing
+      ctx.stroke();
+    });
+  }
+
+  function drawFurniture(furnitures) {
+    furnitures.forEach((furniture) => {
+      ctx.beginPath();
+      ctx.rect(
+        furniture.xPlacement,
+        furniture.yPlacement,
+        furniture.maxBound.x - furniture.minBound.x,
+        furniture.maxBound.y - furniture.minBound.y,
+      );
+      ctx.stroke();
+    });
+  }
+  onMount(() => {
+    ctx = canvasEl.getContext("2d");
+    drawFloorplan(data.floor[0].json);
+  });
 </script>
 
-<h1>Hello Floor {data.slug}</h1>
+<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+  <h1 class="text-center text-4xl font-bold">Floor {data.slug}</h1>
+  <canvas bind:this={canvasEl} class="obj-contain" width="800%" height="600%"></canvas>
+</div>
diff --git a/src/routes/(app)/[slug]/+page.ts b/src/routes/(app)/[slug]/+page.ts
deleted file mode 100644
index cbfa88f..0000000
--- a/src/routes/(app)/[slug]/+page.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PageLoad } from "./$types";
-
-export const load: PageLoad = ({ params }) => {
-  return { slug: params.slug };
-};