summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
authorRutger Broekhoff2026-08-28 18:03:05 +0200
committerRutger Broekhoff2026-08-28 18:03:05 +0200
commit973aec43ea54bbf95b64fbcb636403401d1ca60e (patch)
tree41b7911c420766a9b463245b9296f44c5bf35258 /web
downloadroutemon-973aec43ea54bbf95b64fbcb636403401d1ca60e.tar.gz
routemon-973aec43ea54bbf95b64fbcb636403401d1ca60e.zip
Import from e4b104792206ee7ea64bf39c6b7d2c0c230f9d14
Diffstat (limited to 'web')
-rw-r--r--web/index.html52
-rw-r--r--web/script.js149
-rw-r--r--web/style.css62
3 files changed, 263 insertions, 0 deletions
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..f927d39
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,52 @@
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5
6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" integrity="sha512-Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
7 <link rel="stylesheet" href="style.css" />
8 </head>
9 <body>
10 <div id="map">
11 </div>
12
13 <form name="gpx-upload-form" class="box">
14 <div>
15 <label for="gpx-file">Upload een GPX-bestand:</label>
16 <input type="file" id="gpx-file-input" name="gpx-file" accept="application/gpx+xml,.gpx" autofocus />
17 </div>
18 <div>
19 <input type="submit" value="Opsturen" />
20 </div>
21 </form>
22
23 <div id="sysinfo" class="box">
24 <h3>Routemon</h3>
25 <a href="https://codeberg.org/rutgerbrf/routemon">Broncode</a>
26 <details>
27 <summary>
28 <span>Systeeminformatie</span>
29 </summary>
30 <table>
31 <tr>
32 <td class="help-cursor" title="Publicatietijdstip van ingeladen DATEX II-situatiepublicatie (van NDW)">Situatiepublicatie van</td>
33 <td id="situation-publication-of">&lt;onbekend&gt;</td>
34 </tr>
35 </table>
36 </details>
37 </div>
38
39 <dialog class="box">
40 <h3 id="dialog-title"></h3>
41 <p id="dialog-message"></p>
42 <details>
43 <summary>Meer informatie</summary>
44 <small id="dialog-more-info"></small>
45 </details>
46 <button autofocus>Sluiten</button>
47 </dialog>
48
49 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js" integrity="sha512-BwHfrr4c9kmRkLw6iXFdzcdWV/PGkVgiIyIWLLlTSXzWQzxuSg4DiQUCpauz/EWjgk5TYQqX/kvn9pG1NpYfqg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
50 <script src="script.js"></script>
51 </body>
52</html>
diff --git a/web/script.js b/web/script.js
new file mode 100644
index 0000000..b3179b3
--- /dev/null
+++ b/web/script.js
@@ -0,0 +1,149 @@
1const dialog = document.querySelector("dialog");
2const closeButton = document.querySelector("dialog button");
3closeButton.addEventListener("click", () => {
4 dialog.close();
5});
6
7let map = L.map("map");
8
9L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
10 attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
11}).addTo(map);
12
13let layerGroup = L.layerGroup().addTo(map);
14
15document.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
25function 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
34function txt(s) {
35 return document.createTextNode(s);
36}
37
38function 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
47async 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
75async 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
91async 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
149getSysinfo();
diff --git a/web/style.css b/web/style.css
new file mode 100644
index 0000000..a96354c
--- /dev/null
+++ b/web/style.css
@@ -0,0 +1,62 @@
1html, body {
2 margin: 0px;
3 height: 100%;
4 font-family: sans-serif;
5 font-size: 14px;
6}
7
8#map { height: 100%; }
9
10.box {
11 padding: 10px;
12 background-color: white;
13 border: 2px solid #b0b0b0;
14 border-radius: 4px;
15}
16
17dialog button {
18 float: right;
19}
20
21details summary {
22 user-select: none;
23 cursor: pointer;
24}
25
26table {
27 border-collapse: collapse;
28 border: 1px solid black;
29 margin: 5px 0px;
30}
31
32th, td {
33 border: 1px solid black;
34 padding: 5px 5px;
35}
36
37form[name="gpx-upload-form"] {
38 z-index: 1000;
39 display: flex;
40 gap: 16pt;
41 position: absolute;
42 top: 10px;
43 right: 10px;
44}
45
46#sysinfo {
47 z-index: 1000;
48 display: flex;
49 flex-direction: column;
50 gap: 5px;
51 position: absolute;
52 bottom: 10px;
53 left: 10px;
54}
55
56#sysinfo h3 {
57 margin: 0px 0px;
58}
59
60.help-cursor {
61 cursor: help;
62}
generated by cgit v1.3 (git 2.53.0) at 2026-09-10 12:23:14 +0000