IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

CAD

Browse Source
This commit is contained in:
Jens Cornelsen
2024-12-09 22:11:34 +01:00
parent 8d9ee48855
commit e595b5d4c4
4 changed files with 154 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/components/CAD.svelte Normal file
View File

@@ -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>

59
src/layouts/layoutCAD.astro
View File

@@ -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>

4
src/pages/energieausweis-erstellen/index.astro
View File

@@ -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>

201
src/pages/faq/erstellung-energieausweise/index.astro
View File

@@ -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>
<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>