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 21:15:17 +01:00
parent 4e49f21b91
commit bc395b249e
1 changed files with 128 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,95 +1,75 @@
---
import { useState, useEffect } from "react";
interface Line {
startX: number;
startY: number;
endX: number;
endY: number;
}
let gridSize: number = 10;
let capturedLines: Line[] = [];
let firstStartPoint: { x: number; y: number } | null = null;
let lastEndPoint: { x: number; y: number } | null = null;
let snappedCursor: { x: number | null; y: number | null } = { x: null, y: null };
// Utility: Snap a value to the grid
function snapToGrid(value: number): number {
return Math.round(value / gridSize) * gridSize;
}
---
import Layout from "#layouts/layoutCAD.astro";
---
<Layout title="Erstellung und Bearbeitung von Energieausweisen">
<h1>Erstellung und Bearbeitung von Energieausweisen</h1>
<div class="mt-12 m-auto w-[90%] relative">
<div class="flex-row">
<!-- 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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAD Program with Astro</title>
<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: none;
}
.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>
</head>
<body>
<div class="controls">
<button onclick="clearCanvas()">Clear</button>
<button id="clearButton">Clear</button>
</div>
<canvas id="cadCanvas" width="800" height="600"></canvas>
<div class="log">
<strong>Captured Points and Lines:</strong>
<ul id="line-log"></ul>
<ul id="lineLog"></ul>
</div>
<script>
const canvas = document.getElementById('cadCanvas');
const ctx = canvas.getContext('2d');
const lineLog = document.getElementById('line-log');
const gridSize = 10; // Size of each grid cell in pixels
let capturedLines = [];
let firstStartPoint = null; // Tracks the start point of the first line
let lastEndPoint = null; // Tracks the end point of the last line
// Snap a coordinate to the nearest grid point
function snapToGrid(value) {
return Math.round(value / gridSize) * gridSize;
}
<script lang="ts">
const canvas = document.getElementById("cadCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
const lineLog = document.getElementById("lineLog") as HTMLUListElement;
const clearButton = document.getElementById("clearButton") as HTMLButtonElement;
// Draw the grid
function drawGrid() {
@@ -112,59 +92,12 @@ import Layout from "#layouts/layoutCAD.astro";
ctx.stroke();
}
// Clear the canvas and reset everything
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
capturedLines = [];
firstStartPoint = null;
lastEndPoint = null;
drawGrid();
updateLineLog();
}
// Update the captured points and lines log
function updateLineLog() {
lineLog.innerHTML = capturedLines
.map((line, index) => {
const isPoint = line.startX === line.endX && line.startY === line.endY;
if (isPoint) {
return `<li>Point: (${line.startX}, ${line.startY})</li>`;
}
const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
})
.join('');
}
// Calculate the length of a line
function calculateLineLength(x1, y1, x2, y2) {
const dx = x2 - x1;
const dy = y2 - y1;
return Math.sqrt(dx * dx + dy * dy);
}
// Mouse move event for snapping the cursor to the grid
canvas.addEventListener('mousemove', (e) => {
const mouseX = snapToGrid(e.offsetX);
const mouseY = snapToGrid(e.offsetY);
// Clear the canvas and redraw the grid
// Redraw the grid, lines, and cursor marker
function redrawAll() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGrid();
// Redraw all existing lines and points
redrawLinesAndPoints();
// Draw a marker at the snapped position
drawCursorMarker(mouseX, mouseY);
});
// Draw a marker to represent the snapped cursor position
function drawCursorMarker(x, y) {
ctx.beginPath();
ctx.fillStyle = "#ff0000"; // Red marker for cursor
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fill();
drawCursorMarker(snappedCursor.x, snappedCursor.y);
}
// Redraw all existing lines and points
@@ -178,13 +111,52 @@ import Layout from "#layouts/layoutCAD.astro";
}
}
// Draw a line
function drawLine(x1: number, y1: number, x2: number, y2: number) {
ctx.beginPath();
ctx.strokeStyle = "#000000"; // Black lines
ctx.lineWidth = 2;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
// Draw a point
function drawPoint(x: number, y: number) {
ctx.beginPath();
ctx.fillStyle = "#000000"; // Black point
ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
ctx.fill();
}
// Draw a marker to represent the snapped cursor position
function drawCursorMarker(x: number | null, y: number | null) {
if (x === null || y === null) return; // Don't draw if no position is set
ctx.beginPath();
ctx.fillStyle = "#ff0000"; // Red marker for cursor
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fill();
}
// Mouse move event for snapping the cursor to the grid
canvas.addEventListener("mousemove", (e: MouseEvent) => {
const mouseX = snapToGrid(e.offsetX);
const mouseY = snapToGrid(e.offsetY);
// Update the snapped cursor position
snappedCursor = { x: mouseX, y: mouseY };
// Redraw everything to reflect the new cursor position
redrawAll();
});
// Mouse event for drawing lines and points
canvas.addEventListener('mousedown', (e) => {
canvas.addEventListener("mousedown", (e: MouseEvent) => {
const clickX = snapToGrid(e.offsetX);
const clickY = snapToGrid(e.offsetY);
// Determine starting point for the line or point
let startX, startY;
let startX: number, startY: number;
if (!lastEndPoint) {
// For the first line or point, set the start point anywhere
@@ -204,6 +176,14 @@ import Layout from "#layouts/layoutCAD.astro";
const endX = snapToGrid(e.offsetX);
const endY = snapToGrid(e.offsetY);
// If it's a point, draw a point
if (startX === endX && startY === endY) {
drawPoint(startX, startY);
} else {
// Otherwise, draw the line
drawLine(startX, startY, endX, endY);
}
// Update the last endpoint
lastEndPoint = { x: endX, y: endY };
@@ -212,48 +192,19 @@ import Layout from "#layouts/layoutCAD.astro";
updateLineLog();
});
// Function to draw a line
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.strokeStyle = "#000000"; // Black lines
ctx.lineWidth = 2;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
// Clear the canvas and reset everything
clearButton.addEventListener("click", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
capturedLines = [];
firstStartPoint = null;
lastEndPoint = null;
snappedCursor = { x: null, y: null };
drawGrid();
lineLog.innerHTML = ""; // Clear log
});
// Initialize the canvas
// Initialize
drawGrid();
</script>
<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>
</Layout>
</body>
</html>