INTERLIS leicht gemacht #51 - INTERLIS im Browser

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ilivalidator service</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <script src="https://cjrtnc.leaningtech.com/4.2/loader.js"></script>
  <style>
    ...
  </style>
</head>

<body>
  <script>
    (async function () {
      await cheerpjInit({ version: 17, status: "none" });
    })();
  </script>

  <div id="overlay">
    <div class="spinner"></div>
  </div>

  <main class="container">
    <h2>ilivalidator service</h2>

    <form onsubmit="handleFile(event)">
      <input
        type="file"
        id="fileInput"
        accept=".xml,.xtf,.itf"
        required
      />
      <button type="submit">Validate</button>
    </form>

    <p id="status"></p>

    <section id="logContainer">
      <h3>Validation Log</h3>
      <pre id="logOutput">Loading...</pre>
    </section>
  </main>

  <script>
    function handleFile(event) {
      event.preventDefault(); // prevent form from submitting

      const input = document.getElementById('fileInput');
      const file = input.files[0];
      const status = document.getElementById('status');
      const overlay = document.getElementById('overlay');
      const logContainer = document.getElementById('logContainer');
      const logOutput = document.getElementById('logOutput');

      if (!file) {
        status.textContent = "Please select a file first.";
        return;
      }

      const reader = new FileReader();
      reader.onload = async function(e) {
        const content = e.target.result;
        const filename = file.name;
        const path = "/str/" + filename;
        const logPath = "/files/" + filename + ".log";

        // Ensure cheerpOSAddStringFile exists
        if (typeof cheerpOSAddStringFile === 'function') {
          cheerpOSAddStringFile(path, content);
          status.textContent = `File "${filename}" loaded. Starting validation...`;
          overlay.style.display = "flex";

          try {
            const exitCode = await cheerpjRunJar("/app/ilivalidator-1.14.8-SNAPSHOT-all.jar", "--modeldir", "https://geo.so.ch/models;https://geo.so.ch/models/mirror/interlis.ch/;https://geo.so.ch/models/mirror/geoadmin/", "--log", logPath, path);
            status.textContent = `Validation finished with exit code ${exitCode}.`;

            const logBlob = await cjFileBlob(logPath);
            const logText = await logBlob.text();
            logOutput.textContent = logText;
            logContainer.style.display = "block";
          } catch (err) {
            status.textContent = `Error during validation: ${err.message || err}`;
          } finally {
            overlay.style.display = "none";
          }
        } else {
          status.textContent = "Error: cheerpOSAddStringFile is not defined.";
        }
      };
      reader.readAsText(file);
    }
  </script>

</body>
</html>