online-energieausweis/src/pages/faq/erstellung-energieausweise/index.astro

---

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>


<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 = 10; // Size of each grid cell in pixels
    let capturedLines = [];
    let lastEndPoint = null; // Tracks the end point of the last line
    let firstStartPoint = null; // Tracks the start point of the first line

    // 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 = [];
      lastEndPoint = null;
      firstStartPoint = 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 clickX = snapToGrid(e.offsetX);
      const clickY = snapToGrid(e.offsetY);

      // Determine the starting point for the new line
      let startX, startY;

      if (!lastEndPoint) {
        // For the first line, set the start point anywhere
        startX = clickX;
        startY = clickY;
        firstStartPoint = { x: startX, y: startY }; // Save the first start point
      } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
        // For subsequent lines, start at the last endpoint
        startX = lastEndPoint.x;
        startY = lastEndPoint.y;
      } else {
        // If not a valid start point, do nothing
        return;
      }

      // Determine the endpoint
      const endX = snapToGrid(e.offsetX);
      const endY = snapToGrid(e.offsetY);

      // The endpoint must be either:
      // - A valid grid point (different from the start point)
      // - The start point of the first line
      const isValidEndPoint =
        (endX !== startX || endY !== startY) &&
        (endX === firstStartPoint?.x && endY === firstStartPoint?.y);

      if (!isValidEndPoint) {
        return;
      }

      // Draw the line
      drawLine(startX, startY, endX, endY);

      // Update the last endpoint
      lastEndPoint = { x: endX, y: endY };

      // Capture the line details
      capturedLines.push({ startX, startY, endX, endY });
      updateLineLog();
    });

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