inwo_vgl/src/main/resources/templates/miete.html

<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>DIWO Vergleich – Miete</title>
    <link rel="stylesheet" href="/css/global.css"/>
    <link rel="stylesheet" href="/css/header.css"/>
    <link rel="stylesheet" href="/css/legend.css"/>
    <link rel="stylesheet" href="/css/miete.css"/>
    <link rel="stylesheet" href="/css/footer.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
    <!-- JavaScript Module -->
    <script src="/js/cookie-utils.js"></script>
    <script src="/js/ajax-handlers.js"></script>
    <script src="/js/ui-updater-miete.js"></script>
    <script src="/js/interactions.js"></script>
    <script src="/js/color-scheme.js"></script>
    <script src="/js/clipboard-utils.js"></script>
    <script src="/js/app.js"></script>
</head>
<body>

  <!-- Header-Fragment einbinden -->
  <div th:replace="~{fragments/header :: header}"></div>

  <!-- Vergleichslegende-Fragment einbinden -->
  <div th:replace="~{fragments/legend :: legend}"></div>

  <!-- Wohnung Header-Vergleich -->
  <main role="main">
    <div class="section-container">
      <div class="section-header" onclick="toggleSection('wohnung')" role="button" tabindex="0" 
           onkeypress="handleKeyPress(event, 'wohnung')" aria-expanded="true" aria-controls="wohnung-content">
        <span class="toggle-icon" id="wohnung-icon" aria-hidden="true">▼</span>
        <h3>Wohnung</h3>
      </div>
      <div class="section-content" id="wohnung-content">
        <div th:if="${wohnungZeile != null}" th:class="${wohnungZeile.rowClass}">
          <!-- Wohnung Grid als Tabelle -->
          <table class="wohnung-grid-table">
            <tr>
              <td class="label-cell">Mietverhältnis</td>
              <td class="value-cell" th:utext="${wohnungZeile.mietverhaeltnisHtml}"></td>
              <td class="label-cell">Fläche (m²)</td>
              <td class="value-cell" th:utext="${wohnungZeile.flaecheHtml}"></td>
              <td class="label-cell">Bad</td>
              <td class="value-cell" th:utext="${wohnungZeile.badHtml}"></td>
              <td class="label-cell">Name (Vermiet)</td>
              <td class="value-cell" th:utext="${wohnungZeile.nameEigHtml}"></td>
              <td class="label-cell">Telefon</td>
              <td class="value-cell" th:utext="${wohnungZeile.telefonEigHtml}"></td>
            </tr>
            <tr>
              <td class="label-cell">öffentl. geförd. Wohnungsbau</td>
              <td class="value-cell" th:utext="${wohnungZeile.sozBauJnHtml}"></td>
              <td class="label-cell">Bezugsfert</td>
              <td class="value-cell" th:utext="${wohnungZeile.fertigDatHtml}"></td>
              <td class="label-cell">Heizung</td>
              <td class="value-cell" th:utext="${wohnungZeile.heizungHtml}"></td>
              <td class="label-cell">Adresse</td>
              <td class="value-cell" th:utext="${wohnungZeile.adresseEigHtml}"></td>
              <td colspan="2"></td> <!-- Leere Zellen für das 5. Paar -->
            </tr>
          </table>
        </div>
      </div>
    </div>

    <!-- Miete -->
    <div class="section-container">
      <div class="section-header" onclick="toggleSection('miete')" role="button" tabindex="0" 
           onkeypress="handleKeyPress(event, 'miete')" aria-expanded="true" aria-controls="miete-content">
        <span class="toggle-icon" id="miete-icon" aria-hidden="true">▼</span>
        <h3>Miete</h3>
      </div>
      <div class="section-content" id="miete-content">
        <div th:if="${mieteZeile != null}" th:class="${mieteZeile.rowClass}">
          <!-- Miete Grid als echte Tabelle mit 7 Spalten -->
          <table class="miete-grid-table">
            <!-- Header-Zeile mit Spaltenüberschriften -->
            <thead>
              <tr>
                <th class="miete-header-cell" colspan="2">Allgemeine Daten</th>
                <th class="miete-header-cell" colspan="">Abzüge</th>
                <th class="miete-header-cell" colspan="">Werte</th>
                <th class="miete-header-cell" aria-label="Pauschale für Abzugsarten">Pauschale</th>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
              </tr>
            </thead>
            <tbody>
              <!-- Erste Zeile: Gesamtmiete -->
              <tr>
                <td class="label-cell">* Gesamtmiete</td>
                <td class="value-cell" th:utext="${mieteZeile.gesamtmieteHtml}"></td>
                <td class="label-cell">Heizung</td>
                <td class="value-cell" th:utext="${mieteZeile.heizungHtml}"></td>
                <td class="pauschale-cell" th:utext="${mieteZeile.heizungPauschaleHtml}"></td>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
              </tr>
              <!-- Zweite Zeile: Zuschläge -->
              <tr>
                <td class="label-cell">Zuschläge</td>
                <td class="value-cell" th:utext="${mieteZeile.zuschlägeHtml}"></td>
                <td class="label-cell">Warmwasser</td>
                <td class="value-cell" th:utext="${mieteZeile.warmwasserHtml}"></td>
                <td class="pauschale-cell" th:utext="${mieteZeile.warmwasserPauschaleHtml}"></td>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
              </tr>
              <!-- Dritte Zeile: Art des Zuschlages -->
              <tr>
                <td class="label-cell">Art des Zuschlages</td>
                <td class="value-cell" th:utext="${mieteZeile.artZuschlagHtml}"></td>
                <td class="label-cell">Kosten HH-Energie</td>
                <td class="value-cell" th:utext="${mieteZeile.kostenHhEnergieHtml}"></td>
                <td class="pauschale-cell" th:utext="${mieteZeile.energiePauschaleHtml}"></td>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
              </tr>
              <!-- Jährliche Kosten Überschrift -->
              <tr>
                <td class="section-header-cell" colspan="2">Jährliche Kosten</td>
                <td class="label-cell">Garage/Stellplatz</td>
                <td class="value-cell" th:utext="${mieteZeile.stellplatzHtml}"></td>
                <td class="pauschale-cell" th:utext="${mieteZeile.stellplatzPauschaleHtml}"></td>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
              </tr>
              <!-- Fernwärme -->
              <tr>
                <td class="label-cell">Fernwärme</td>
                <td class="value-cell" th:utext="${mieteZeile.jhrlFernwaermeHtml}"></td>
                <td class="label-cell">Möblierungszuschläge</td>
                <td class="value-cell" th:utext="${mieteZeile.moeblierungszuschlagHtml}"></td>
                <td class="pauschale-cell" th:utext="${mieteZeile.moeblierungPauschaleHtml}"></td>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
              </tr>
              <!-- Fernwarmwasser -->
              <tr>
                <td class="label-cell">Fernwarmwasser</td>
                <td class="value-cell" th:utext="${mieteZeile.jhrlFernwarmwasserHtml}"></td>
                <td class="label-cell">Gewerbezuschläge</td>
                <td class="value-cell" th:utext="${mieteZeile.gewerbezuschlagHtml}"></td>
                <td class="pauschale-cell" th:utext="${mieteZeile.gewerbePauschaleHtml}"></td>
                <td class="label-cell">Gewerbefläche in m²</td>
                <td class="value-cell gewerbefläche-cell" th:utext="${mieteZeile.gewerbeflaecheHtml}"></td>
              </tr>
              <!-- Fernwärme und -warmwasser -->
              <tr>
                <td class="label-cell">Fernwärme und -warmwasser</td>
                <td class="value-cell" th:utext="${mieteZeile.jhrlFernwUndWHtml}"></td>
                <td class="label-cell">Untermietzuschläge</td>
                <td class="value-cell" th:utext="${mieteZeile.untermietzuschlagHtml}"></td>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
              </tr>
              <!-- Sonstige Zuschläge -->
              <tr>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
                <td class="label-cell">sonstige Zuschläge</td>
                <td class="value-cell" th:utext="${mieteZeile.sonstZuschlagHtml}"></td>
                <td class="pauschale-cell" th:utext="${mieteZeile.sonstPauschaleHtml}"></td>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
              </tr>
              <!-- Leistungen Dritter -->
              <tr>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
                <td class="label-cell">Leistungen Dritter</td>
                <td class="value-cell" th:utext="${mieteZeile.leistungenDritterHtml}"></td>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
                <td class="empty-cell"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Untermieter -->
    <div class="section-container">
      <div class="section-header" onclick="toggleSection('untermieter')" role="button" tabindex="0" 
           onkeypress="handleKeyPress(event, 'untermieter')" aria-expanded="true" aria-controls="untermieter-content">
        <span class="toggle-icon" id="untermieter-icon" aria-hidden="true">▼</span>
        <h3>Untermieterin/Untermieter</h3>
      </div>
      <div class="section-content" id="untermieter-content">
        <table role="table" aria-labelledby="untermieter-caption" id="untermieter-table">
          <thead>
            <tr>
              <th scope="col">Änderung</th>
              <th scope="col">Name</th>
              <th scope="col">Vorname</th>
              <th scope="col">Miete</th>
              <th scope="col">Fläche</th>
              <th scope="col">sonst. Kosten</th>
              <th scope="col">Heizung</th>
              <th scope="col">Heizungspauschale</th>
              <th scope="col">Warmwasser</th>
              <th scope="col">Warmwasserpauschale</th>
              <th scope="col">Möblierung</th>
              <th scope="col">Möblierungspauschale</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="z : ${untermieterZeilen}" th:class="${z.rowClass}">
              <td th:class="'sym ' + ${z.symbolClass}" th:utext="${z.symbol}"
                  th:aria-label="${z.symbol.contains('fa-plus') ? 'Hinzugefügt' : (z.symbol.contains('fa-minus') ? 'Gelöscht' : (z.symbol.contains('fa-exclamation') ? 'Geändert' : 'Unverändert'))}"></td>
              <td th:utext="${z.nameHtml}"></td>
              <td th:utext="${z.vornameHtml}"></td>
              <td th:utext="${z.mieteHtml}"></td>
              <td th:utext="${z.flaecheHtml}"></td>
              <td th:utext="${z.sonstHtml}"></td>
              <td th:utext="${z.heizungHtml}"></td>
              <td th:utext="${z.heizungPHtml}"></td>
              <td th:utext="${z.warmwasserHtml}"></td>
              <td th:utext="${z.warmwasserPHtml}"></td>
              <td th:utext="${z.moeblierungHtml}"></td>
              <td th:utext="${z.moeblierungPHtml}"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Mitbewohner -->
    <div class="section-container">
      <div class="section-header" onclick="toggleSection('mitbewohner')" role="button" tabindex="0" 
           onkeypress="handleKeyPress(event, 'mitbewohner')" aria-expanded="true" aria-controls="mitbewohner-content">
        <span class="toggle-icon" id="mitbewohner-icon" aria-hidden="true">▼</span>
        <h3>mitbewohnende Person</h3>
      </div>
      <div class="section-content" id="mitbewohner-content">
        <table role="table" aria-labelledby="mitbewohner-caption" id="mitbewohner-table">
          <thead>
            <tr>
              <th scope="col">Änderung</th>
              <th scope="col">Name</th>
              <th scope="col">Vorname</th>
              <th scope="col">Miete</th>
              <th scope="col">sonst. Kosten</th>
              <th scope="col">Heizung</th>
              <th scope="col">Heizungspauschale</th>
              <th scope="col">Warmwasser</th>
              <th scope="col">Warmwasserpauschale</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="z : ${mitbewohnerZeilen}" th:class="${z.rowClass}">
              <td th:class="'sym ' + ${z.symbolClass}" th:utext="${z.symbol}"
                  th:aria-label="${z.symbol.contains('fa-plus') ? 'Hinzugefügt' : (z.symbol.contains('fa-minus') ? 'Gelöscht' : (z.symbol.contains('fa-exclamation') ? 'Geändert' : 'Unverändert'))}"></td>
              <td th:utext="${z.nameHtml}"></td>
              <td th:utext="${z.vornameHtml}"></td>
              <td th:utext="${z.entgeltHtml}"></td>
              <td th:utext="${z.sonstHtml}"></td>
              <td th:utext="${z.heizungHtml}"></td>
              <td th:utext="${z.heizungPHtml}"></td>
              <td th:utext="${z.warmwasserHtml}"></td>
              <td th:utext="${z.warmwasserPHtml}"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Hidden data for AJAX requests -->
    <div id="ajax-data" style="display: none;" aria-hidden="true">
      <input type="hidden" id="leftJson" th:value="${leftJson}"/>
      <input type="hidden" id="rightJson" th:value="${rightJson}"/>
      <input type="hidden" id="leftVorgangId" th:value="${leftVorgangId}"/>
      <input type="hidden" id="leftZeitraumId" th:value="${leftZeitraumId}"/>
      <input type="hidden" id="rightZeitraumId" th:value="${rightZeitraumId}"/>
    </div>
  </main>

  <!-- Footer-Fragment einbinden -->
  <div th:replace="~{fragments/footer :: footer}"></div>

</body>
</html>