summaryrefslogtreecommitdiffstats
path: root/web/script.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/script.js')
-rw-r--r--web/script.js149
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 @@
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();