From ecf1be3f834c7187312f8eee71f77e448c995388 Mon Sep 17 00:00:00 2001 From: Rutger Broekhoff Date: Tue, 22 Sep 2026 22:28:10 +0200 Subject: Check period selection --- web/index.html | 55 ++++++++++++++++++++++++++++++--- web/index.js | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++-------- web/style.css | 21 +++++++++++++ 3 files changed, 156 insertions(+), 17 deletions(-) (limited to 'web') 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 @@
- - + +
+
+ Controleer werkzaamheden gepland in periode + + + + + + + + + + + +
+ + + + + +
+ + + + + +
+
- +
@@ -38,7 +84,7 @@

-
+
Meer informatie
@@ -46,6 +92,7 @@
+ 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; +} -- cgit v1.3