From 1561d0a2c123683314f136e7cbeaaf1e0ef0a96c Mon Sep 17 00:00:00 2001
From: Jens Cornelsen <79703163+IB-Cornelsen@users.noreply.github.com>
Date: Mon, 9 Dec 2024 23:11:25 +0100
Subject: [PATCH] CAD

---
 src/components/CAD.svelte                     | 19 +------
 .../erstellung-energieausweise/index.astro    | 55 +++++++++++++------
 2 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
index 8d6bc22a..64d2f399 100644
--- a/src/components/CAD.svelte
+++ b/src/components/CAD.svelte
@@ -1,19 +1,2 @@
  
-  <div class="controls">
-    <button onclick="clearCanvas()">Clear</button>
-  </div>
-  <canvas id="cadCanvas" width="800" height="600"></canvas>
-  <div class="log">
-    <strong>Captured Lines:</strong>
-    <ul id="line-log"></ul>
-  </div>
-
-  <div class="controls">
-    <button onclick="clearCanvas()">Clear</button>
-  </div>
-  <canvas id="cadCanvas" width="800" height="600"></canvas>
-  <div class="log">
-    <strong>Captured Lines:</strong>
-    <ul id="line-log"></ul>
-  </div>
-
+  
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index b86ad8e2..799db7ac 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -1,9 +1,24 @@
 ---
 
-import Layout from "#layouts/Layout.astro";
-import CAD from "#components/CAD.svelte";
+import Layout from "#layouts/cadLayout.astro";
 
-<script>
+---
+
+
+<Layout title="CAD">
+
+<h1 class="text-3xl">CAD</h1>
+
+<div class="controls">
+    <button onclick="clearCanvas()">Clear</button>
+  </div>
+  <canvas id="cadCanvas" width="800" height="600"></canvas>
+  <div class="log">
+    <strong>Captured Lines:</strong>
+    <ul id="line-log"></ul>
+  </div>
+
+  <script>
     const canvas = document.getElementById('cadCanvas');
     const ctx = canvas.getContext('2d');
     const lineLog = document.getElementById('line-log');
@@ -39,6 +54,26 @@ import CAD from "#components/CAD.svelte";
       ctx.stroke();
     }
 
+    // Clear the canvas and reset logs
+    function clearCanvas() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines = [];
+      startX = null;
+      startY = null;
+      drawGrid(); // Redraw the grid after clearing
+      updateLineLog();
+    }
+
+    // Update the captured lines log
+    function updateLineLog() {
+      lineLog.innerHTML = capturedLines
+        .map((line, index) => {
+          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
+          return <li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>;
+        })
+        .join('');
+    }
+
     // Calculate the length of a line in meters
     function calculateLineLengthInMeters(x1, y1, x2, y2) {
       const dx = x2 - x1;
@@ -80,19 +115,5 @@ import CAD from "#components/CAD.svelte";
     drawGrid(); // Draw the grid when the page loads
   </script>
 
-
----
-
-
-<Layout title="CAD">
-
-<h1 class="text-3xl">CAD</h1>
-
-<div class="mt-12 m-auto w-[95%] relative">
-<CAD client:load />
-</div>
-
-
-
 </Layout>