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

<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"/><title>Vergleich – Test</title><link rel="stylesheet" href="/styles.css"/></head>
<body>
  <h1>Vergleich – Testseite</h1>
  
  <div class="row" style="margin-bottom: 1rem;">
    <label>Schema auswählen: 
      <select id="schemaSelect" onchange="updateSchema()">
        <option value="haushalt-einkommen">Haushalt/Einkommen</option>
        <option value="miete">Miete</option>
      </select>
    </label>
    <button type="button" onclick="loadExamples()">📄 Beispiel-JSONs laden</button>
    <button type="button" onclick="clearTextareas()">🗑️ Leeren</button>
  </div>
  
  <div th:if="${schemaErrors != null}" class="error-box">
    <strong>Schema-Fehler</strong>
    <ul><li th:each="e : ${schemaErrors}" th:text="${e}"></li></ul>
  </div>

  <form method="post" id="mainForm" action="/hhm-einkommen" class="grid-2">
    <div><label>Left JSON (Basis/Alt)</label><textarea id="leftJson" name="leftJson" th:text="${leftJson}" rows="20"></textarea></div>
    <div><label>Right JSON (Neu/Wahrheit)</label><textarea id="rightJson" name="rightJson" th:text="${rightJson}" rows="20"></textarea></div>
    <div class="full row">
      <label><input type="checkbox" name="validate" th:checked="${validate ?: true}"> Gegen Schema validieren</label>
      <label>Schema-Name: <input type="text" id="schemaNameInput" name="schemaName" th:value="${schemaName ?: 'haushalt-einkommen'}"></label>
      <label>Kunde/Bundesland: 
        <select name="kunde">
          <option value="">-- Kein Logo --</option>
          <option value="Berlin">Berlin</option>
        </select>
      </label>
      <button type="submit">Vergleichen & anzeigen</button>
    </div>
  </form>

  <!-- Nach erstem Submit: Vorgang/Zeitraum-Auswahl -->
  <div class="full" th:if="${leftCandidates != null}">
    <h2>Baseline-Auswahl (links)</h2>
    <form method="post" action="/vergleich" class="row">
      <input type="hidden" name="leftJson" th:value="${leftJson}"/>
      <input type="hidden" name="rightJson" th:value="${rightJson}"/>
      <input type="hidden" name="validate" th:value="${validate}"/>
      <input type="hidden" name="schemaName" th:value="${schemaName}"/>
      <input type="hidden" name="kunde" th:value="${activeKunde}"/>

      <label>Vorgang (links):
        <select name="leftVorgangId">
          <option th:each="v : ${leftCandidates}" th:value="${v.id}"
                  th:text="${v.aktenzeichen != null ? v.aktenzeichen : v.id}"
                  th:selected="${v.id == leftVorgangId}"></option>
        </select>
      </label>
      <label>Zeitraum (links):
        <select name="leftZeitraumId">
          <option th:each="z : ${leftZeitraeumeOfSelected}" th:value="${z.id}"
                  th:text="${z.beginn} + ' – ' + ${z.ende}"
                  th:selected="${z.id == leftZeitraumId}"></option>
        </select>
      </label>
      <label>Zeitraum (rechts):
        <select name="rightZeitraumId">
          <option th:each="z : ${zeitraeumeRight}" th:value="${z.id}"
                  th:text="${z.beginn} + ' – ' + ${z.ende}"
                  th:selected="${z.id == rightZeitraumId}"></option>
        </select>
      </label>
      <button type="submit">Ansicht aktualisieren</button>
    </form>
  </div>

  <script>
    function updateSchema() {
      const schemaSelect = document.getElementById('schemaSelect');
      const schemaNameInput = document.getElementById('schemaNameInput');
      const mainForm = document.getElementById('mainForm');
      
      const selectedSchema = schemaSelect.value;
      schemaNameInput.value = selectedSchema;
      
      // Form-Action je nach Schema anpassen
      if (selectedSchema === 'miete') {
        mainForm.action = '/miete';
      } else {
        mainForm.action = '/hhm-einkommen';
      }
      
      // Automatisch Beispieldaten laden
      loadExamples();
    }
    
    async function loadExamples() {
      try {
        const schemaSelect = document.getElementById('schemaSelect');
        const selectedSchema = schemaSelect.value;
        
        let altFile, neuFile;
        
        if (selectedSchema === 'miete') {
          altFile = '/example-miete-alt.json';
          neuFile = '/example-miete-neu.json';
        } else {
          altFile = '/example-alt.json';
          neuFile = '/example-neu.json';
        }
        
        // Lade Alt-Beispiel
        const altResponse = await fetch(altFile);
        const altJson = await altResponse.json();
        
        // Lade Neu-Beispiel
        const neuResponse = await fetch(neuFile);
        const neuJson = await neuResponse.json();
        
        // Fülle Textareas mit formatierten JSONs
        document.getElementById('leftJson').value = JSON.stringify(altJson, null, 2);
        document.getElementById('rightJson').value = JSON.stringify(neuJson, null, 2);
        
        console.log('Beispiel-JSONs für Schema "' + selectedSchema + '" erfolgreich geladen');
      } catch (error) {
        console.error('Fehler beim Laden der Beispiel-JSONs:', error);
        alert('Fehler beim Laden der Beispiel-JSONs: ' + error.message);
      }
    }
    
    function clearTextareas() {
      document.getElementById('leftJson').value = '';
      document.getElementById('rightJson').value = '';
    }
    
    // Automatisches Laden beim Seitenaufruf, falls Textareas leer sind
    window.addEventListener('load', function() {
      const leftJson = document.getElementById('leftJson');
      const rightJson = document.getElementById('rightJson');
      
      // Schema-Wert aus Input übernehmen falls vorhanden
      const schemaNameInput = document.getElementById('schemaNameInput');
      const schemaSelect = document.getElementById('schemaSelect');
      
      if (schemaNameInput.value) {
        schemaSelect.value = schemaNameInput.value;
        updateSchema();
      }
      
      if (!leftJson.value.trim() && !rightJson.value.trim()) {
        loadExamples();
      }
    });
  </script>
</body></html>