draw floorplan from json

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(),
+});

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)}

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>

src/routes/(app)/[slug]/+page.ts

@@ -1,5 +0,0 @@
-import { PageLoad } from "./$types";
-
-export const load: PageLoad = ({ params }) => {
-  return { slug: params.slug };
-};