Deployment preparations

1 files changed, 151 insertions, 0 deletions

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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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();