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

---
 src/components/CAD.svelte                     | 145 +++++++++++++
 src/layouts/layoutCAD.astro                   |  59 -----
 .../energieausweis-erstellen/index.astro      |   4 +-
 .../erstellung-energieausweise/index.astro    | 201 +-----------------
 4 files changed, 154 insertions(+), 255 deletions(-)
 create mode 100644 src/components/CAD.svelte
 delete mode 100644 src/layouts/layoutCAD.astro

diff --git a/src/components/CAD.svelte b/src/components/CAD.svelte
new file mode 100644
index 00000000..66cd29e4
--- /dev/null
+++ b/src/components/CAD.svelte
@@ -0,0 +1,145 @@
+ <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+    }
+    canvas {
+      border: 1px solid #ccc;
+      cursor: crosshair;
+    }
+    .controls {
+      margin: 10px;
+    }
+    .controls button {
+      margin-right: 5px;
+    }
+    .log {
+      margin: 10px;
+      width: 800px;
+      max-height: 150px;
+      overflow-y: auto;
+      border: 1px solid #ccc;
+      padding: 10px;
+      background: #f9f9f9;
+    }
+  </style>
+
+  <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 type="ts">
+    
+    const canvas = document.getElementById('cadCanvas') as HTMLCanvasElement;
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    const lineLog = document.getElementById('line-log') as HTMLUListElement;
+    const pixelToMeter: number = 0.01; // Conversion factor: 1 pixel = 0.01 meter
+    const gridSize: number = 5; // Size of each grid cell in pixels
+    let startX: number | null = null;
+    let startY: number | null = null;
+
+    interface Line {
+      startX: number;
+      startY: number;
+      endX: number;
+      endY: number;
+    }
+
+    const capturedLines: Line[] = [];
+
+    // Snap a coordinate to the nearest grid point
+    function snapToGrid(value: number): number {
+      return Math.round(value / gridSize) * gridSize;
+    }
+
+    // Draw the grid
+    function drawGrid(): void {
+      ctx.beginPath();
+      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
+      ctx.lineWidth = 0.5;
+
+      // Draw vertical lines
+      for (let x = 0; x <= canvas.width; x += gridSize) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, canvas.height);
+      }
+
+      // Draw horizontal lines
+      for (let y = 0; y <= canvas.height; y += gridSize) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(canvas.width, y);
+      }
+
+      ctx.stroke();
+    }
+
+    // Clear the canvas and reset logs
+    function clearCanvas(): void {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines.length = 0;
+      startX = null;
+      startY = null;
+      drawGrid(); // Redraw the grid after clearing
+      updateLineLog();
+    }
+
+    // Update the captured lines log
+    function updateLineLog(): void {
+      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: number, y1: number, x2: number, y2: number): number {
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
+      return lengthInPixels * pixelToMeter;
+    }
+
+    // Mouse events
+    canvas.addEventListener('mousedown', (e: MouseEvent): void => {
+      const endX = snapToGrid(e.offsetX);
+      const endY = snapToGrid(e.offsetY);
+
+      if (startX !== null && startY !== null) {
+        // Draw the final line
+        drawLine(startX, startY, endX, endY);
+
+        // Capture the line details
+        capturedLines.push({ startX, startY, endX, endY });
+        updateLineLog();
+      }
+
+      // Update the start position for the next line
+      startX = endX;
+      startY = endY;
+    });
+
+    // Drawing functions
+    function drawLine(x1: number, y1: number, x2: number, y2: number): void {
+      ctx.beginPath();
+      ctx.strokeStyle = "#000000"; // Black color for lines
+      ctx.lineWidth = 2; // Thicker lines
+      ctx.moveTo(x1, y1);
+      ctx.lineTo(x2, y2);
+      ctx.stroke();
+    }
+
+    // Initialize canvas
+    drawGrid(); // Draw the grid when the page loads
+  </script>
+
diff --git a/src/layouts/layoutCAD.astro b/src/layouts/layoutCAD.astro
deleted file mode 100644
index 152a79e0..00000000
--- a/src/layouts/layoutCAD.astro
+++ /dev/null
@@ -1,59 +0,0 @@
----
-import "../style/global.css";
-import "../../svelte-dialogs.config"
-import Header from "#header/Header.astro";
-import Footer from "#footer/Footer.astro";
-import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
-import SidebarRight from "#sidebarRight/SidebarRight.astro";
-import { NotificationWrapper } from "@ibcornelsen/ui";
-
-export interface Props {
-	title: string;
-}
-
-const { title } = Astro.props;
-
----
-
-<!DOCTYPE html>
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>
-			{title || "Simple CAD Program - Connected Lines"}
-		</title>
-</head>
-
-	<body>
-		<container class="w-full max-w-[1920px]">
-		
-		<Header />
-
-		<main
-			class="w-full p-0 grid
-			sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0 
-			md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
-			lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
-			xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
-			2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
-		">
-
-		<SidebarLeft />
-		
-		<article class="box grow rounded-tl-none">
-		<slot />
-		</article>
-		
-		<SidebarRight />
-
-		</main>
-	
-		<Footer />
-		<NotificationWrapper client:load />
-	</container>
-	</body>
-</html>
-
-
diff --git a/src/pages/energieausweis-erstellen/index.astro b/src/pages/energieausweis-erstellen/index.astro
index 330ce7ed..e637bdd1 100644
--- a/src/pages/energieausweis-erstellen/index.astro
+++ b/src/pages/energieausweis-erstellen/index.astro
@@ -1,7 +1,7 @@
 ---
 
 import Layout from "#layouts/Layout.astro";
-import Widget2 from "#components/Widget.svelte";
+import Widget from "#components/Widget.svelte";
 
 ---
 
@@ -11,7 +11,7 @@ import Widget2 from "#components/Widget.svelte";
 <h1 class="text-3xl">Welcher Energieausweis?</h1>
 
 <div class="mt-12 m-auto w-[95%] relative">
-<Widget2 client:load />
+<Widget client:load />
 </div>
 
 
diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro
index ca6751f1..3c26193d 100644
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -1,207 +1,20 @@
 ---
 
-import Layout from "#layouts/layoutCAD.astro";
+import Layout from "#layouts/Layout.astro";
+import CAD from "#components/CAD.svelte";
 
 ---
 
-<Layout title="Erstellung und Bearbeitung von Energieausweisen">
 
-<h1>Erstellung und Bearbeitung von Energieausweisen</h1>
+<Layout title="Welcher Energieausweis">
 
-<div class="mt-12 m-auto w-[90%] relative">
- <div class="flex-row">
+<h1 class="text-3xl">Welcher Energieausweis?</h1>
 
-   <!-- Frage 1 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Warum dauert die Ausstellung meines Bedarfsausweises so lange?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Die Verzögerungen können durch die Umstellung auf die neue Berechnungsmethode nach DIN 18599 entstehen. Diese ist deutlich komplexer und erfordert zusätzliche Schritte, die momentan noch nicht vollständig automatisiert sind. Daher müssen die Berechnungen in einigen Fällen manuell im Büro durchgeführt werden.
-    </p>
-  </div>
-
-  <!-- Frage 2 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Erstellung eines Bedarfsausweises normalerweise?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Unter normalen Umständen wird ein Bedarfsausweis innerhalb weniger Werktage ausgestellt. Aktuell kann es jedoch aufgrund der neuen Berechnungsmethode zu längeren Bearbeitungszeiten kommen.
-    </p>
-  </div>
-
-  <!-- Frage 3 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Überprüfung und Freigabe meines Energieausweises nach Datenkorrektur?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Nach Absenden der vollständigen Daten inklusive Fotos wird Ihr Antrag in der Regel innerhalb weniger Werktage bearbeitet.
-    </p>
-  </div>
-
-  <!-- Frage 4 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Was kann ich tun, wenn ich den Energieausweis dringend benötige?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Falls der Energieausweis dringend benötigt wird, z. B. für einen Banktermin oder Kaufinteressenten, können Sie:
-    </p>
-    <ul class="list-disc list-inside text-gray-600 mt-2">
-      <li>Den Anbieter kontaktieren und die Dringlichkeit mitteilen.</li>
-      <li>Um eine bevorzugte Bearbeitung bitten.</li>
-      <li>Ein mögliches Vorabdatum erfragen.</li>
-    </ul>
-  </div>
-
-  <!-- Frage 5 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Kann ich den Energieausweis beschleunigen lassen?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      In Einzelfällen ist eine beschleunigte Bearbeitung möglich, z. B. bei einer drohenden Frist. Wenden Sie sich direkt an den Anbieter und klären Sie, ob dies realisierbar ist.
-    </p>
-  </div>
-
-  <!-- Frage 6 -->
-  <div class="mb-6 border-b-[1px] border-gray-200 pb-6">
-    <h2 class="text-lg font-semibold text-gray-700 text-xl">Wie werde ich über den Status meines Energieausweises informiert?</h2>
-    <p class="text-gray-600 text-xl mt-2">
-      Der Status kann über die Vorgangsnummer oder per E-Mail-Abfrage beim Anbieter geprüft werden. Die Vorgangsnummer finden Sie in der E-Mail-Bestätigung.
-    </p>
-  </div>
-   
-</div>
+<div class="mt-12 m-auto w-[95%] relative">
+<CAD client:load />
 </div>
 
 
-   <style>
-    body {
-      font-family: Arial, sans-serif;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-    }
-    canvas {
-      border: 1px solid #ccc;
-      cursor: crosshair;
-    }
-    .controls {
-      margin: 10px;
-    }
-    .controls button {
-      margin-right: 5px;
-    }
-    .log {
-      margin: 10px;
-      width: 800px;
-      max-height: 150px;
-      overflow-y: auto;
-      border: 1px solid #ccc;
-      padding: 10px;
-      background: #f9f9f9;
-    }
-  </style>
 
-  <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>
+</Layout>
 
-  <script>
-    const canvas = document.getElementById('cadCanvas');
-    const ctx = canvas.getContext('2d');
-    const lineLog = document.getElementById('line-log');
-    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
-    const gridSize = 5; // Size of each grid cell in pixels
-    let startX = null;
-    let startY = null;
-    let capturedLines = [];
-
-    // Snap a coordinate to the nearest grid point
-    function snapToGrid(value) {
-      return Math.round(value / gridSize) * gridSize;
-    }
-
-    // Draw the grid
-    function drawGrid() {
-      ctx.beginPath();
-      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
-      ctx.lineWidth = 0.5;
-
-      // Draw vertical lines
-      for (let x = 0; x <= canvas.width; x += gridSize) {
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, canvas.height);
-      }
-
-      // Draw horizontal lines
-      for (let y = 0; y <= canvas.height; y += gridSize) {
-        ctx.moveTo(0, y);
-        ctx.lineTo(canvas.width, y);
-      }
-
-      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;
-      const dy = y2 - y1;
-      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
-      return lengthInPixels * pixelToMeter;
-    }
-
-    // Mouse events
-    canvas.addEventListener('mousedown', (e) => {
-      const endX = snapToGrid(e.offsetX);
-      const endY = snapToGrid(e.offsetY);
-
-      if (startX !== null && startY !== null) {
-        // Draw the final line
-        drawLine(startX, startY, endX, endY);
-
-        // Capture the line details
-        capturedLines.push({ startX, startY, endX, endY });
-        updateLineLog();
-      }
-
-      // Update the start position for the next line
-      startX = endX;
-      startY = endY;
-    });
-
-    // Drawing functions
-    function drawLine(x1, y1, x2, y2) {
-      ctx.beginPath();
-      ctx.strokeStyle = "#000000"; // Black color for lines
-      ctx.lineWidth = 2; // Thicker lines
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
-      ctx.stroke();
-    }
-
-    // Initialize canvas
-    drawGrid(); // Draw the grid when the page loads
-  </script>
-
-</Layout>
\ No newline at end of file