From 999d77a9bcfa90f002b0107ea5fc7e6abc51dd9c Mon Sep 17 00:00:00 2001 From: Rutger Broekhoff Date: Sat, 29 Aug 2026 14:36:36 +0200 Subject: Deployment preparations --- web/index.html | 2 +- web/index.js | 151 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ web/script.js | 149 -------------------------------------------------------- 3 files changed, 152 insertions(+), 150 deletions(-) create mode 100644 web/index.js delete mode 100644 web/script.js (limited to 'web') diff --git a/web/index.html b/web/index.html index f927d39..0fa0cea 100644 --- a/web/index.html +++ b/web/index.html @@ -47,6 +47,6 @@ - + diff --git a/web/index.js b/web/index.js new file mode 100644 index 0000000..316e73f --- /dev/null +++ b/web/index.js @@ -0,0 +1,151 @@ +const apiBaseUrl = "https://api.routemon.fautchen.eu"; + +const dialog = document.querySelector("dialog"); +const closeButton = document.querySelector("dialog button"); +closeButton.addEventListener("click", () => { + dialog.close(); +}); + +let map = L.map("map"); + +L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { + attribution: '© OpenStreetMap contributors', +}).addTo(map); + +let layerGroup = L.layerGroup().addTo(map); + +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"); + return; + } + load(gpxFileInput.files[0]); +}); + +function el(name, attrs, ...children) { + const node = document.createElement(name); + for (const [k, v] of Object.entries(attrs)) { + node.setAttribute(k, v); + } + node.replaceChildren(...children); + return node; +} + +function txt(s) { + return document.createTextNode(s); +} + +function tbl(rowcols) { + return el("table", {}, + el("tbody", {}, + ...rowcols.map((cols) => + el("tr", {}, + ...cols.map((col) => el("td", {}, col)), + )))); +} + +async function showProblem(rsp) { + const problem = await rsp.json(); + + 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(); + + let rows = [ + [txt("HTTP-statuscode"), + el("a", { "href": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/" + rsp.status }, + txt(rsp.status + " (" + rsp.statusText + ")"))], + [txt("Probleemtype"), + el("code", {}, txt(problem.type))], + [txt("Trace-ID"), + el("code", {}, txt(rsp.headers.get("X-Routemon-Trace-Id")))], + ]; + if (problem.instance) { + rows.push([txt("Instantie"), + el("code", {}, txt(problem.instance))]); + } + document.getElementById("dialog-more-info").replaceChildren(tbl(rows)); + + return; +} + +async function getSysinfo() { + const rsp = await fetch(apiBaseUrl + "/sysinfo", { + method: "GET", + headers: { + "Accept-Language": "nl-NL", + }, + }); + if (!rsp.ok) { + await showProblem(rsp); + return; + } + + const res = await rsp.json(); + document.getElementById("situation-publication-of").innerText = new Date(res.using_publication_of).toLocaleString(); +} + +async function load(gpxFile) { + const rsp = await fetch(apiBaseUrl + "/gpx", { + method: "POST", + headers: { + "Accept-Language": "nl-NL", + }, + body: gpxFile, + }); + if (!rsp.ok) { + await showProblem(rsp); + return; + } + + const res = await rsp.json(); + layerGroup.clearLayers(); + + let bounds = null; + for (const track of res.tracks) { + for (const segment of track.segments) { + const polyline = L.polyline(segment.points, { color: "blue" }).addTo(layerGroup); + if (bounds === null) { + bounds = polyline.getBounds(); + } else { + bounds.extend(polyline.getBounds()); + } + } + } + if (bounds !== null) { + map.fitBounds(bounds); + } + + res.relevant_situations.forEach((sit) => { + let firstComment = sit.comments[0] || ""; + const lfIndex = firstComment.indexOf("\n"); + if (lfIndex !== -1) { + firstComment = firstComment.substring(0, lfIndex); + } + const commentEl = + el("div", {}, + el("code", {}, txt(sit.id)), + txt(": " + firstComment)); + + const markerLayer = L.marker(sit.location); + markerLayer.addTo(layerGroup).bindPopup(commentEl); + + sit.relevant_road_closures.forEach((rc) => { + rc.relevant_lss.forEach((ls) => { + const lineLayer = L.polyline(ls, { + color: "purple", + dashArray: "5, 10", + dashOffset: "0", + }); + lineLayer.addTo(layerGroup); + }); + }); + }); +} + +getSysinfo(); diff --git a/web/script.js b/web/script.js deleted file mode 100644 index b3179b3..0000000 --- a/web/script.js +++ /dev/null @@ -1,149 +0,0 @@ -const dialog = document.querySelector("dialog"); -const closeButton = document.querySelector("dialog button"); -closeButton.addEventListener("click", () => { - dialog.close(); -}); - -let map = L.map("map"); - -L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { - attribution: '© OpenStreetMap contributors', -}).addTo(map); - -let layerGroup = L.layerGroup().addTo(map); - -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"); - return; - } - load(gpxFileInput.files[0]); -}); - -function el(name, attrs, ...children) { - const node = document.createElement(name); - for (const [k, v] of Object.entries(attrs)) { - node.setAttribute(k, v); - } - node.replaceChildren(...children); - return node; -} - -function txt(s) { - return document.createTextNode(s); -} - -function tbl(rowcols) { - return el("table", {}, - el("tbody", {}, - ...rowcols.map((cols) => - el("tr", {}, - ...cols.map((col) => el("td", {}, col)), - )))); -} - -async function showProblem(rsp) { - const problem = await rsp.json(); - - 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(); - - let rows = [ - [txt("HTTP-statuscode"), - el("a", { "href": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/" + rsp.status }, - txt(rsp.status + " (" + rsp.statusText + ")"))], - [txt("Probleemtype"), - el("code", {}, txt(problem.type))], - [txt("Trace-ID"), - el("code", {}, txt(rsp.headers.get("X-Routemon-Trace-Id")))], - ]; - if (problem.instance) { - rows.push([txt("Instantie"), - el("code", {}, txt(problem.instance))]); - } - document.getElementById("dialog-more-info").replaceChildren(tbl(rows)); - - return; -} - -async function getSysinfo() { - const rsp = await fetch("http://localhost:8284/sysinfo", { - method: "GET", - headers: { - "Accept-Language": "nl-NL", - }, - }); - if (!rsp.ok) { - await showProblem(rsp); - return; - } - - const res = await rsp.json(); - document.getElementById("situation-publication-of").innerText = new Date(res.using_publication_of).toLocaleString(); -} - -async function load(gpxFile) { - const rsp = await fetch("http://localhost:8284/gpx", { - method: "POST", - headers: { - "Accept-Language": "nl-NL", - }, - body: gpxFile, - }); - if (!rsp.ok) { - await showProblem(rsp); - return; - } - - const res = await rsp.json(); - layerGroup.clearLayers(); - - let bounds = null; - for (const track of res.tracks) { - for (const segment of track.segments) { - const polyline = L.polyline(segment.points, { color: "blue" }).addTo(layerGroup); - if (bounds === null) { - bounds = polyline.getBounds(); - } else { - bounds.extend(polyline.getBounds()); - } - } - } - if (bounds !== null) { - map.fitBounds(bounds); - } - - res.relevant_situations.forEach((sit) => { - let firstComment = sit.comments[0] || ""; - const lfIndex = firstComment.indexOf("\n"); - if (lfIndex !== -1) { - firstComment = firstComment.substring(0, lfIndex); - } - const commentEl = - el("div", {}, - el("code", {}, txt(sit.id)), - txt(": " + firstComment)); - - const markerLayer = L.marker(sit.location); - markerLayer.addTo(layerGroup).bindPopup(commentEl); - - sit.relevant_road_closures.forEach((rc) => { - rc.relevant_lss.forEach((ls) => { - const lineLayer = L.polyline(ls, { - color: "purple", - dashArray: "5, 10", - dashOffset: "0", - }); - lineLayer.addTo(layerGroup); - }); - }); - }); -} - -getSysinfo(); -- cgit v1.3