Check period selection

3 files changed, 156 insertions, 17 deletions

diff --git a/web/index.html b/web/index.html
index 877da14..42a61ff 100644
--- a/web/index.html
+++ b/web/index.html
@@ -14,11 +14,57 @@
 
     <form name="gpx-upload-form" class="box">
       <div>
-        <label for="gpx-file">Upload een GPX-bestand:</label>
-        <input type="file" id="gpx-file-input" name="gpx-file" accept="application/gpx+xml,.gpx" autofocus />
+        <label for="gpx-file">GPX-bestand:</label>
+        <input type="file" id="gpx-file-input" name="gpx-file" accept="application/gpx+xml,.gpx" required autofocus />
       </div>
+      <fieldset>
+        <legend>Controleer werkzaamheden gepland in periode</legend>
+        <table class="borderless">
+          <tr>
+            <td>
+              <label for="check-period-begin-preset">Vanaf (incl.):</label>
+            </td>
+            <td>
+              <select name="check-period-begin-preset" id="check-period-begin-preset-select">
+                <option value="-1m">1 maand geleden</option>
+                <option value="-2w">2 weken geleden</option>
+                <option value="-1w" selected>1 week geleden</option>
+                <option value="0">nu</option>
+                <option value="+1w">over 1 week</option>
+                <option value="+2w">over 2 weken</option>
+                <option value="+1m">over 1 maand</option>
+                <option value="custom">een ander moment</option>
+              </select>
+            </td>
+            <td>
+              <input type="datetime-local" id="check-period-begin-input" name="check-period-begin" class="hidden" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="check-period-end-preset">Tot (excl.):</label>
+            </td>
+            <td>
+              <select name="check-period-end-preset" id="check-period-end-preset-select">
+                <option value="">aanpassen naar…</option>
+                <option value="-1m">1 maand geleden</option>
+                <option value="+2w">2 weken geleden</option>
+                <option value="-1w">1 week geleden</option>
+                <option value="0">nu</option>
+                <option value="+1w" selected>over 1 week</option>
+                <option value="+2w">over 2 weken</option>
+                <option value="+1m">over 1 maand</option>
+                <option value="custom">een ander moment</option>
+              </select>
+            </td>
+            <td>
+              <input type="datetime-local" id="check-period-end-input" name="check-period-end" class="hidden" />
+            </td>
+          </tr>
+        </table>
+      </fieldset>
       <div>
-        <input type="submit" value="Opsturen" />
+        <input type="submit" value="Aanvraag versturen" />
       </div>
     </form>
 
@@ -38,7 +84,7 @@
     <dialog class="box">
       <h3 id="dialog-title"></h3>
       <p id="dialog-message"></p>
-      <details>
+      <details id="dialog-more-info-container">
         <summary>Meer informatie</summary>
         <small id="dialog-more-info"></small>
       </details>
@@ -46,6 +92,7 @@
     </dialog>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/global.min.js"></script>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/web/index.js b/web/index.js
index e8accf0..63292aa 100644
--- a/web/index.js
+++ b/web/index.js
@@ -7,6 +7,50 @@ closeButton.addEventListener("click", () => {
     dialog.close();
 });
 
+function handlePeriodLimitPresetSelInput(selEl, inputEl) {
+    selEl.addEventListener("input", (event) => {
+        if (selEl.value === "custom") {
+            inputEl.classList.remove("hidden");
+        } else {
+            inputEl.classList.add("hidden");
+        }
+    });
+}
+
+function getPeriodLimitPresetSelInput(selEl, inputEl) {
+    const relativeDateTime = (durationArgs) => Temporal.Now.plainDateTimeISO().add(durationArgs);
+
+    let durationArgs = {};
+    switch (selEl.value) {
+    case "-1m":    return relativeDateTime({ months: -1 });
+    case "-2w":    return relativeDateTime({ weeks:  -2 });
+    case "-1w":    return relativeDateTime({ weeks:  -1 });
+    case "0":      return relativeDateTime({ seconds: 0 });
+    case "+1w":    return relativeDateTime({ weeks:   1 });
+    case "+2w":    return relativeDateTime({ weeks:   2 });
+    case "+1m":    return relativeDateTime({ months:  1 });
+    case "custom": return Temporal.PlainDateTime.from(inputEl.value);
+    }
+}
+
+handlePeriodLimitPresetSelInput(
+    document.getElementById("check-period-begin-preset-select"),
+    document.getElementById("check-period-begin-input"));
+handlePeriodLimitPresetSelInput(
+    document.getElementById("check-period-end-preset-select"),
+    document.getElementById("check-period-end-input"));
+
+window.addEventListener("load", (event) => {
+    const oneWeek = Temporal.Duration.from({ weeks: 1 });
+    const now = Temporal.Now.plainDateTimeISO();
+    document.getElementById("check-period-begin-input").value = now.subtract(oneWeek).toString({
+        smallestUnit: "minute",
+    });
+    document.getElementById("check-period-end-input").value = now.add(oneWeek).toString({
+        smallestUnit: "minute",
+    });
+});
+
 let map = L.map("map");
 
 L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
@@ -19,10 +63,27 @@ document.forms["gpx-upload-form"].addEventListener("submit", (event) => {
     event.preventDefault();
     const gpxFileInput = document.getElementById("gpx-file-input");
     if (gpxFileInput.files.length !== 1) {
-        alert("Voor de upload moet er exact één GPX-bestand zijn geselecteerd");
+        showDialog({
+            title: "Geen bestand geselecteerd",
+            detail: "Voor de upload moet er exact één GPX-bestand zijn geselecteerd",
+            moreInfoEl: null,
+        });
         return;
     }
-    load(gpxFileInput.files[0]);
+
+    const tzidHere = Temporal.Now.timeZoneId();
+    const cpBegin = getPeriodLimitPresetSelInput(document.getElementById("check-period-begin-preset-select"),
+                                                 document.getElementById("check-period-begin-input")).toZonedDateTime(tzidHere).toInstant();
+    const cpEnd = getPeriodLimitPresetSelInput(document.getElementById("check-period-end-preset-select"),
+                                               document.getElementById("check-period-end-input")).toZonedDateTime(tzidHere).toInstant();
+
+    load({
+        gpxFile: gpxFileInput.files[0],
+        checkPeriod: {
+            begin: cpBegin,
+            end: cpEnd,
+        },
+    });
 });
 
 function el(name, attrs, ...children) {
@@ -47,15 +108,22 @@ function tbl(rowcols) {
                        ))));
 }
 
-async function showProblem(rsp) {
-    const problem = await rsp.json();
+function showDialog({ title, detail, moreInfoEl }) {
+    document.getElementById("dialog-title").innerText = title;
+    document.getElementById("dialog-message").innerText = detail !== null ? detail : "";
+    if (moreInfoEl !== null) {
+        document.getElementById("dialog-more-info").replaceChildren(moreInfoEl);
+        document.getElementById("dialog-more-info-container").classList.remove("hidden");
+    } else {
+        document.getElementById("dialog-more-info").replaceChildren();
+        document.getElementById("dialog-more-info-container").classList.add("hidden");
+    }
 
-    document.getElementById("dialog-title").innerText = problem.title;
-    if (problem.detail)
-        document.getElementById("dialog-message").innerText = problem.detail;
-    else
-        document.getElementById("dialog-message").innerText = "";
     dialog.showModal();
+}
+
+async function showProblem(rsp) {
+    const problem = await rsp.json();
 
     let rows = [
         [txt("HTTP-statuscode"),
@@ -70,9 +138,12 @@ async function showProblem(rsp) {
         rows.push([txt("Instantie"),
                    el("code", {}, txt(problem.instance))]);
     }
-    document.getElementById("dialog-more-info").replaceChildren(tbl(rows));
 
-    return;
+    showDialog({
+        title: problem.title,
+        detail: problem.detail ? problem.detail : null,
+        moreInfoEl: tbl(rows),
+    });
 }
 
 async function getSysinfo() {
@@ -101,7 +172,7 @@ async function getSysinfo() {
     document.getElementById("sysinfo-details").replaceChildren(tbl(rows));
 }
 
-async function load(gpxFile) {
+async function load({ gpxFile, checkPeriod }) {
     let compressedParts = [];
     const compressedReader = gpxFile.stream().pipeThrough(new CompressionStream("deflate-raw")).getReader();
     while (true) {
@@ -113,7 +184,7 @@ async function load(gpxFile) {
         }
     }
 
-    const rsp = await fetch(apiBaseUrl + "/gpx", {
+    const rsp = await fetch(apiBaseUrl + `/gpx?cpbegin=${encodeURI(checkPeriod.begin.toString({ smallestUnit: "minute" }))}&cpend=${encodeURI(checkPeriod.end.toString({ smallestUnit: "minute" }))}`, {
         method: "POST",
         headers: {
             "Accept-Language": "nl-NL",
diff --git a/web/style.css b/web/style.css
index a96354c..49cc502 100644
--- a/web/style.css
+++ b/web/style.css
@@ -34,15 +34,32 @@ th, td {
     padding: 5px 5px;
 }
 
+table.borderless,
+table.borderless th,
+table.borderless td {
+    border: none;
+}
+
 form[name="gpx-upload-form"] {
     z-index: 1000;
     display: flex;
+    flex-direction: column;
     gap: 16pt;
     position: absolute;
     top: 10px;
     right: 10px;
 }
 
+form fieldset {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+form[name="gpx-upload-form"] input[type="submit"] {
+    float: right;
+}
+
 #sysinfo {
     z-index: 1000;
     display: flex;
@@ -60,3 +77,7 @@ form[name="gpx-upload-form"] {
 .help-cursor {
     cursor: help;
 }
+
+.hidden {
+    display: none;
+}