diff options
| author | Rutger Broekhoff | 2026-08-29 14:36:36 +0200 |
|---|---|---|
| committer | Rutger Broekhoff | 2026-08-29 14:36:36 +0200 |
| commit | 999d77a9bcfa90f002b0107ea5fc7e6abc51dd9c (patch) | |
| tree | 15f2154ba28139ab87602bcb53f1451e5b8bfd6b /web/script.js | |
| parent | 783ec01cbe2007c2ccf723635166c08f6d26abee (diff) | |
| download | routemon-999d77a9bcfa90f002b0107ea5fc7e6abc51dd9c.tar.gz routemon-999d77a9bcfa90f002b0107ea5fc7e6abc51dd9c.zip | |
Deployment preparations
Diffstat (limited to 'web/script.js')
| -rw-r--r-- | web/script.js | 149 |
1 files changed, 0 insertions, 149 deletions
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 @@ | |||
| 1 | const dialog = document.querySelector("dialog"); | ||
| 2 | const closeButton = document.querySelector("dialog button"); | ||
| 3 | closeButton.addEventListener("click", () => { | ||
| 4 | dialog.close(); | ||
| 5 | }); | ||
| 6 | |||
| 7 | let map = L.map("map"); | ||
| 8 | |||
| 9 | L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { | ||
| 10 | attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', | ||
| 11 | }).addTo(map); | ||
| 12 | |||
| 13 | let layerGroup = L.layerGroup().addTo(map); | ||
| 14 | |||
| 15 | document.forms["gpx-upload-form"].addEventListener("submit", (event) => { | ||
| 16 | event.preventDefault(); | ||
| 17 | const gpxFileInput = document.getElementById("gpx-file-input"); | ||
| 18 | if (gpxFileInput.files.length !== 1) { | ||
| 19 | alert("Voor de upload moet er exact één GPX-bestand zijn geselecteerd"); | ||
| 20 | return; | ||
| 21 | } | ||
| 22 | load(gpxFileInput.files[0]); | ||
| 23 | }); | ||
| 24 | |||
| 25 | function el(name, attrs, ...children) { | ||
| 26 | const node = document.createElement(name); | ||
| 27 | for (const [k, v] of Object.entries(attrs)) { | ||
| 28 | node.setAttribute(k, v); | ||
| 29 | } | ||
| 30 | node.replaceChildren(...children); | ||
| 31 | return node; | ||
| 32 | } | ||
| 33 | |||
| 34 | function txt(s) { | ||
| 35 | return document.createTextNode(s); | ||
| 36 | } | ||
| 37 | |||
| 38 | function tbl(rowcols) { | ||
| 39 | return el("table", {}, | ||
| 40 | el("tbody", {}, | ||
| 41 | ...rowcols.map((cols) => | ||
| 42 | el("tr", {}, | ||
| 43 | ...cols.map((col) => el("td", {}, col)), | ||
| 44 | )))); | ||
| 45 | } | ||
| 46 | |||
| 47 | async function showProblem(rsp) { | ||
| 48 | const problem = await rsp.json(); | ||
| 49 | |||
| 50 | document.getElementById("dialog-title").innerText = problem.title; | ||
| 51 | if (problem.detail) | ||
| 52 | document.getElementById("dialog-message").innerText = problem.detail; | ||
| 53 | else | ||
| 54 | document.getElementById("dialog-message").innerText = ""; | ||
| 55 | dialog.showModal(); | ||
| 56 | |||
| 57 | let rows = [ | ||
| 58 | [txt("HTTP-statuscode"), | ||
| 59 | el("a", { "href": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/" + rsp.status }, | ||
| 60 | txt(rsp.status + " (" + rsp.statusText + ")"))], | ||
| 61 | [txt("Probleemtype"), | ||
| 62 | el("code", {}, txt(problem.type))], | ||
| 63 | [txt("Trace-ID"), | ||
| 64 | el("code", {}, txt(rsp.headers.get("X-Routemon-Trace-Id")))], | ||
| 65 | ]; | ||
| 66 | if (problem.instance) { | ||
| 67 | rows.push([txt("Instantie"), | ||
| 68 | el("code", {}, txt(problem.instance))]); | ||
| 69 | } | ||
| 70 | document.getElementById("dialog-more-info").replaceChildren(tbl(rows)); | ||
| 71 | |||
| 72 | return; | ||
| 73 | } | ||
| 74 | |||
| 75 | async function getSysinfo() { | ||
| 76 | const rsp = await fetch("http://localhost:8284/sysinfo", { | ||
| 77 | method: "GET", | ||
| 78 | headers: { | ||
| 79 | "Accept-Language": "nl-NL", | ||
| 80 | }, | ||
| 81 | }); | ||
| 82 | if (!rsp.ok) { | ||
| 83 | await showProblem(rsp); | ||
| 84 | return; | ||
| 85 | } | ||
| 86 | |||
| 87 | const res = await rsp.json(); | ||
| 88 | document.getElementById("situation-publication-of").innerText = new Date(res.using_publication_of).toLocaleString(); | ||
| 89 | } | ||
| 90 | |||
| 91 | async function load(gpxFile) { | ||
| 92 | const rsp = await fetch("http://localhost:8284/gpx", { | ||
| 93 | method: "POST", | ||
| 94 | headers: { | ||
| 95 | "Accept-Language": "nl-NL", | ||
| 96 | }, | ||
| 97 | body: gpxFile, | ||
| 98 | }); | ||
| 99 | if (!rsp.ok) { | ||
| 100 | await showProblem(rsp); | ||
| 101 | return; | ||
| 102 | } | ||
| 103 | |||
| 104 | const res = await rsp.json(); | ||
| 105 | layerGroup.clearLayers(); | ||
| 106 | |||
| 107 | let bounds = null; | ||
| 108 | for (const track of res.tracks) { | ||
| 109 | for (const segment of track.segments) { | ||
| 110 | const polyline = L.polyline(segment.points, { color: "blue" }).addTo(layerGroup); | ||
| 111 | if (bounds === null) { | ||
| 112 | bounds = polyline.getBounds(); | ||
| 113 | } else { | ||
| 114 | bounds.extend(polyline.getBounds()); | ||
| 115 | } | ||
| 116 | } | ||
| 117 | } | ||
| 118 | if (bounds !== null) { | ||
| 119 | map.fitBounds(bounds); | ||
| 120 | } | ||
| 121 | |||
| 122 | res.relevant_situations.forEach((sit) => { | ||
| 123 | let firstComment = sit.comments[0] || ""; | ||
| 124 | const lfIndex = firstComment.indexOf("\n"); | ||
| 125 | if (lfIndex !== -1) { | ||
| 126 | firstComment = firstComment.substring(0, lfIndex); | ||
| 127 | } | ||
| 128 | const commentEl = | ||
| 129 | el("div", {}, | ||
| 130 | el("code", {}, txt(sit.id)), | ||
| 131 | txt(": " + firstComment)); | ||
| 132 | |||
| 133 | const markerLayer = L.marker(sit.location); | ||
| 134 | markerLayer.addTo(layerGroup).bindPopup(commentEl); | ||
| 135 | |||
| 136 | sit.relevant_road_closures.forEach((rc) => { | ||
| 137 | rc.relevant_lss.forEach((ls) => { | ||
| 138 | const lineLayer = L.polyline(ls, { | ||
| 139 | color: "purple", | ||
| 140 | dashArray: "5, 10", | ||
| 141 | dashOffset: "0", | ||
| 142 | }); | ||
| 143 | lineLayer.addTo(layerGroup); | ||
| 144 | }); | ||
| 145 | }); | ||
| 146 | }); | ||
| 147 | } | ||
| 148 | |||
| 149 | getSysinfo(); | ||