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:32:58 +01:00
parent 88fdd8e444
commit b8d0c10c76
1 changed files with 106 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,73 @@
---
const gridSize = 10; // Rastergröße in Pixeln
---
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple CAD Program - Grid Size 10</title>
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>
<style>
body {
font-family: Arial, sans-serif;
@@ -36,10 +97,10 @@ const gridSize = 10; // Rastergröße in Pixeln
background: #f9f9f9;
}
</style>
</head>
<body>
<div class="controls">
<button id="clearButton">Clear</button>
<button onclick="clearCanvas()">Clear</button>
</div>
<canvas id="cadCanvas" width="800" height="600"></canvas>
<div class="log">
@@ -51,29 +112,30 @@ const gridSize = 10; // Rastergröße in Pixeln
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; // Startpunkt der ersten Linie
let lastEndPoint = null; // Endpunkt der letzten Linie
let firstStartPoint = null; // Tracks the start point of the first line
let lastEndPoint = null; // Tracks the end point of the last line
// Koordinate an Raster ausrichten
// Snap a coordinate to the nearest grid point
function snapToGrid(value) {
return Math.round(value / ${gridSize}) * ${gridSize};
return Math.round(value / gridSize) * gridSize;
}
// Raster zeichnen
// Draw the grid
function drawGrid() {
ctx.beginPath();
ctx.strokeStyle = "#e0e0e0"; // Rasterlinienfarbe
ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
ctx.lineWidth = 0.5;
// Vertikale Linien
for (let x = 0; x <= canvas.width; x += ${gridSize}) {
// Draw vertical lines
for (let x = 0; x <= canvas.width; x += gridSize) {
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
}
// Horizontale Linien
for (let y = 0; y <= canvas.height; y += ${gridSize}) {
// Draw horizontal lines
for (let y = 0; y <= canvas.height; y += gridSize) {
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
}
@@ -81,7 +143,7 @@ const gridSize = 10; // Rastergröße in Pixeln
ctx.stroke();
}
// Canvas zurücksetzen und Raster neu zeichnen
// Clear the canvas and reset everything
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
capturedLines = [];
@@ -91,7 +153,7 @@ const gridSize = 10; // Rastergröße in Pixeln
updateLineLog();
}
// Log der Linien aktualisieren
// Update the captured points and lines log
function updateLineLog() {
lineLog.innerHTML = capturedLines
.map((line, index) => {
@@ -105,78 +167,75 @@ const gridSize = 10; // Rastergröße in Pixeln
.join('');
}
// Länge einer Linie berechnen
// 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);
}
// Ereignis: Linie oder Punkt zeichnen
// Mouse event for drawing lines and points
canvas.addEventListener('mousedown', (e) => {
const clickX = snapToGrid(e.offsetX);
const clickY = snapToGrid(e.offsetY);
// Startpunkt bestimmen
// Determine starting point for the line or point
let startX, startY;
if (!lastEndPoint) {
// Erster Punkt kann beliebig sein
// For the first line or point, set the start point anywhere
startX = clickX;
startY = clickY;
firstStartPoint = { x: startX, y: startY };
firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line
} else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
// Folgende Punkte müssen an den letzten Endpunkt anschließen
// For subsequent lines, start at the last endpoint
startX = lastEndPoint.x;
startY = lastEndPoint.y;
} else {
return; // Ungültiger Punkt
// Invalid starting point for a line
return;
}
// Endpunkt bestimmen
// Determine the endpoint
const endX = snapToGrid(e.offsetX);
const endY = snapToGrid(e.offsetY);
// Punkt oder Linie zeichnen
// 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);
}
// Endpunkt aktualisieren
// Update the last endpoint
lastEndPoint = { x: endX, y: endY };
// Linie oder Punkt im Log erfassen
// Capture the line or point details
capturedLines.push({ startX, startY, endX, endY });
updateLineLog();
});
// Linie zeichnen
// Function to draw a line
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.strokeStyle = "#000000"; // Schwarze Linien
ctx.strokeStyle = "#000000"; // Black lines
ctx.lineWidth = 2;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
// Punkt zeichnen
// Function to draw a point
function drawPoint(x, y) {
ctx.beginPath();
ctx.fillStyle = "#000000"; // Schwarze Punkte
ctx.arc(x, y, 3, 0, 2 * Math.PI);
ctx.fillStyle = "#000000"; // Black point
ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point
ctx.fill();
}
// Event: Canvas initialisieren
window.addEventListener('load', () => {
drawGrid();
});
// Event: Canvas leeren
document.getElementById('clearButton').addEventListener('click', clearCanvas);
// Initialize the canvas
drawGrid();
</script>
</body>
</html>
</Layout>