From 7ce58ff48ee42dd3116aa65d70cb340d49a65f29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antonia=20P=C3=A9rez-Cerezo?= <antonia@antonia.is>
Date: Sat, 3 May 2025 11:13:16 +0200
Subject: [PATCH] Display distance and number of warnings

---
 frontend/common/map.js     | 12 +++++++++++-
 frontend/common/styles.css |  5 +++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/common/map.js b/frontend/common/map.js
index 1ef83ec..5b822ce 100644
--- a/frontend/common/map.js
+++ b/frontend/common/map.js
@@ -172,10 +172,11 @@ function scalarProduct(a,b) {
 async function recompute_anglemarkers(g) {
 		purgeLayer(anglemarkers)
 		const limit = document.getElementById("angle").value
-		
+		let distance = 0
 		for (j=0; j< g.length; j++) {
 				const coords = g[j].geometry.coordinates;
 				for (let i=1; i < coords.length - 1; i++) {
+						distance += L.latLng(coords[i][1],coords[i][0]).distanceTo(L.latLng(coords[i-1][1],coords[i-1][0]))
 						const a = computeVector(coords,i);
 						const b = computeVector(coords,i+1);
 						let angle = Math.acos(scalarProduct(a,b)/Math.sqrt(scalarProduct(a,a)*scalarProduct(b,b)))
@@ -187,6 +188,14 @@ async function recompute_anglemarkers(g) {
 						}
 				}
 		}
+		document.querySelector("#distance").innerHTML = `${(distance / 1000).toFixed(2)} km`
+		const markSpan = document.querySelector("#anglemarkers")
+		markSpan.innerHTML = `${anglemarkers.length} warning${anglemarkers.length != 1 ? "s" : ""}`
+		if (anglemarkers.length > 0) {
+				markSpan.classList.add("warning")
+		} else {
+				markSpan.classList.remove("warning")
+		}
 }
 
 async function updateBrouter () {
@@ -416,6 +425,7 @@ if (edit) {
 						buttonDiv.innerHTML = `<button id="edit-mode" onClick="pickDirectory(event)" >Edit</button>
 <div class="edit-ui">
 <div id="layername" ></div>
+<span id="distance">0.0 km</span> - <span id="anglemarkers" >0 warnings</span><br>
 <label for="featurename">Filename</label><br><input type="text" id="featurename"><br>
 <label for="brouter-profile">Brouter Profile</label><br>
 <input type="text" id="brouter-profile" onchange="updateBrouter()" ><br>
diff --git a/frontend/common/styles.css b/frontend/common/styles.css
index 731b8bb..12343d5 100644
--- a/frontend/common/styles.css
+++ b/frontend/common/styles.css
@@ -27,3 +27,8 @@ img.warn { filter: hue-rotate(160deg); }
 div.edit-ui {
 	display: none;
 }
+
+span.warning {
+	color: red;
+	font-weight: bold;
+}