diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3750af63..1418c649 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).
+## [0.5.1] — 2024-06-01
+
+### Added
+
+### Changed
+
+- Change minutes to days and hours on route popup
+
+---
+
## [0.5.0] — 2024-05-31
### Added
@@ -19,6 +29,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- Removed "Your data" page as its function was replaced by "Download JSON" button on the points page
- Hovering over a route now also shows time and distance to next route as well as time and distance to previous route. This allows user to understand why routes might not be connected on the map.
+---
## [0.4.3] — 2024-05-30
diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index b336b264..676534d2 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/app/javascript/controllers/maps_controller.js
@@ -38,6 +38,27 @@ export default class extends Controller {
return new URLSearchParams(window.location.search).get(name);
}
+ function minutesToDaysHoursMinutes(minutes) {
+ var days = Math.floor(minutes / (24 * 60));
+ var hours = Math.floor((minutes % (24 * 60)) / 60);
+ var minutes = minutes % 60;
+ var result = '';
+
+ if (days > 0) {
+ result += days + 'd ';
+ }
+
+ if (hours > 0) {
+ result += hours + 'h ';
+ }
+
+ if (minutes > 0) {
+ result += minutes + 'min';
+ }
+
+ return result;
+ }
+
function addHighlightOnHover(polyline, map, startPoint, endPoint, prevPoint, nextPoint, timezone) {
// Define the original and highlight styles
const originalStyle = { color: 'blue', opacity: 0.6, weight: 3 };
@@ -49,7 +70,10 @@ export default class extends Controller {
// Create the popup content for the route
var firstTimestamp = new Date(startPoint[4] * 1000).toLocaleString('en-GB', { timeZone: timezone });
var lastTimestamp = new Date(endPoint[4] * 1000).toLocaleString('en-GB', { timeZone: timezone });
- var timeOnRoute = Math.round((endPoint[4] - startPoint[4]) / 60); // Time in minutes
+ // Make timeOnRoute look nice with split to days, hours and minutes
+
+ var minutes = Math.round((endPoint[4] - startPoint[4]) / 60);
+ var timeOnRoute = minutesToDaysHoursMinutes(minutes);
// Calculate distances to previous and next points
var distanceToPrev = prevPoint ? haversineDistance(prevPoint[0], prevPoint[1], startPoint[0], startPoint[1]) : 'N/A';
@@ -68,9 +92,9 @@ export default class extends Controller {
const endMarker = L.marker([endPoint[0], endPoint[1]], { icon: finishIcon }).bindPopup(`
Start: ${firstTimestamp}
End: ${lastTimestamp}
- Duration: ${timeOnRoute} min
- Prev Route: ${Math.round(distanceToPrev)} m, ${timeBetweenPrev} min away
- Next Route: ${Math.round(distanceToNext)} m, ${timeBetweenNext} min away
+ Duration: ${timeOnRoute}
+ Prev Route: ${Math.round(distanceToPrev)} m, ${minutesToDaysHoursMinutes(timeBetweenPrev)} away
+ Next Route: ${Math.round(distanceToNext)} m, ${minutesToDaysHoursMinutes(timeBetweenNext)} away
`);
// Add mouseover event to highlight the polyline and show the start and end markers