Jens Cornelsen
@@ -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";
|
<html lang="en">
|
||||||
|
<head>
|
||||||
---
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<Layout title="Erstellung und Bearbeitung von Energieausweisen">
|
<title>CAD Program with Astro</title>
|
||||||
|
<style>
|
||||||
<h1>Erstellung und Bearbeitung von Energieausweisen</h1>
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
<div class="mt-12 m-auto w-[90%] relative">
|
display: flex;
|
||||||
<div class="flex-row">
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
<!-- Frage 1 -->
|
margin: 0;
|
||||||
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
padding: 0;
|
||||||
<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">
|
canvas {
|
||||||
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.
|
border: 1px solid #ccc;
|
||||||
</p>
|
cursor: none;
|
||||||
</div>
|
}
|
||||||
|
.controls {
|
||||||
<!-- Frage 2 -->
|
margin: 10px;
|
||||||
<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>
|
.controls button {
|
||||||
<p class="text-gray-600 text-xl mt-2">
|
margin-right: 5px;
|
||||||
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>
|
.log {
|
||||||
</div>
|
margin: 10px;
|
||||||
|
width: 800px;
|
||||||
<!-- Frage 3 -->
|
max-height: 150px;
|
||||||
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
overflow-y: auto;
|
||||||
<h2 class="text-lg font-semibold text-gray-700 text-xl">Wie lange dauert die Überprüfung und Freigabe meines Energieausweises nach Datenkorrektur?</h2>
|
border: 1px solid #ccc;
|
||||||
<p class="text-gray-600 text-xl mt-2">
|
padding: 10px;
|
||||||
Nach Absenden der vollständigen Daten inklusive Fotos wird Ihr Antrag in der Regel innerhalb weniger Werktage bearbeitet.
|
background: #f9f9f9;
|
||||||
</p>
|
}
|
||||||
</div>
|
</style>
|
||||||
|
</head>
|
||||||
<!-- Frage 4 -->
|
<body>
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button onclick="clearCanvas()">Clear</button>
|
<button id="clearButton">Clear</button>
|
||||||
</div>
|
</div>
|
||||||
<canvas id="cadCanvas" width="800" height="600"></canvas>
|
<canvas id="cadCanvas" width="800" height="600"></canvas>
|
||||||
<div class="log">
|
<div class="log">
|
||||||
<strong>Captured Points and Lines:</strong>
|
<strong>Captured Points and Lines:</strong>
|
||||||
<ul id="line-log"></ul>
|
<ul id="lineLog"></ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
const canvas = document.getElementById('cadCanvas');
|
const canvas = document.getElementById("cadCanvas") as HTMLCanvasElement;
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
|
||||||
const lineLog = document.getElementById('line-log');
|
const lineLog = document.getElementById("lineLog") as HTMLUListElement;
|
||||||
const gridSize = 10; // Size of each grid cell in pixels
|
const clearButton = document.getElementById("clearButton") as HTMLButtonElement;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw the grid
|
// Draw the grid
|
||||||
function drawGrid() {
|
function drawGrid() {
|
||||||
@@ -112,59 +92,12 @@ import Layout from "#layouts/layoutCAD.astro";
|
|||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear the canvas and reset everything
|
// Redraw the grid, lines, and cursor marker
|
||||||
function clearCanvas() {
|
function redrawAll() {
|
||||||
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
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
drawGrid();
|
drawGrid();
|
||||||
|
|
||||||
// Redraw all existing lines and points
|
|
||||||
redrawLinesAndPoints();
|
redrawLinesAndPoints();
|
||||||
|
drawCursorMarker(snappedCursor.x, snappedCursor.y);
|
||||||
// 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();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Redraw all existing lines and points
|
// 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
|
// Mouse event for drawing lines and points
|
||||||
canvas.addEventListener('mousedown', (e) => {
|
canvas.addEventListener("mousedown", (e: MouseEvent) => {
|
||||||
const clickX = snapToGrid(e.offsetX);
|
const clickX = snapToGrid(e.offsetX);
|
||||||
const clickY = snapToGrid(e.offsetY);
|
const clickY = snapToGrid(e.offsetY);
|
||||||
|
|
||||||
// Determine starting point for the line or point
|
// Determine starting point for the line or point
|
||||||
let startX, startY;
|
let startX: number, startY: number;
|
||||||
|
|
||||||
if (!lastEndPoint) {
|
if (!lastEndPoint) {
|
||||||
// For the first line or point, set the start point anywhere
|
// 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 endX = snapToGrid(e.offsetX);
|
||||||
const endY = snapToGrid(e.offsetY);
|
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
|
// Update the last endpoint
|
||||||
lastEndPoint = { x: endX, y: endY };
|
lastEndPoint = { x: endX, y: endY };
|
||||||
|
|
||||||
@@ -212,48 +192,19 @@ import Layout from "#layouts/layoutCAD.astro";
|
|||||||
updateLineLog();
|
updateLineLog();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Function to draw a line
|
// Clear the canvas and reset everything
|
||||||
function drawLine(x1, y1, x2, y2) {
|
clearButton.addEventListener("click", () => {
|
||||||
ctx.beginPath();
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
ctx.strokeStyle = "#000000"; // Black lines
|
capturedLines = [];
|
||||||
ctx.lineWidth = 2;
|
firstStartPoint = null;
|
||||||
ctx.moveTo(x1, y1);
|
lastEndPoint = null;
|
||||||
ctx.lineTo(x2, y2);
|
snappedCursor = { x: null, y: null };
|
||||||
ctx.stroke();
|
drawGrid();
|
||||||
}
|
lineLog.innerHTML = ""; // Clear log
|
||||||
|
});
|
||||||
|
|
||||||
// Initialize the canvas
|
// Initialize
|
||||||
drawGrid();
|
drawGrid();
|
||||||
</script>
|
</script>
|
||||||
|
</body>
|
||||||
<style>
|
</html>
|
||||||
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>
|
|
||||||
Reference in New Issue
Block a user