1 files changed, 84 insertions, 13 deletions

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",