scroll climb into view when clicked

3 files changed, 34 insertions, 1 deletions

diff --git a/fietsboek/geo.py b/fietsboek/geo.py
index e747f4d..4daef06 100644
--- a/fietsboek/geo.py
+++ b/fietsboek/geo.py
@@ -204,6 +204,20 @@ class Path:
             movement_data.average_speed = 0.0
         return movement_data
 
+    def bounds(self) -> tuple[tuple[float, float], tuple[float, float]]:
+        min_lat = float("+inf")
+        max_lat = float("-inf")
+        min_lon = float("+inf")
+        max_lon = float("-inf")
+
+        for point in self.points:
+            min_lat = min(point.latitude, min_lat)
+            max_lat = max(point.latitude, max_lat)
+            min_lon = min(point.longitude, min_lon)
+            max_lon = max(point.longitude, max_lon)
+
+        return ((min_lat, min_lon), (max_lat, max_lon))
+
     def climbs(self) -> Iterator[tuple[int, int]]:
         """Returns an iterator over all climbs of this path.
 
diff --git a/fietsboek/models/climb.py b/fietsboek/models/climb.py
index 33ee0e2..2bdda9f 100644
--- a/fietsboek/models/climb.py
+++ b/fietsboek/models/climb.py
@@ -68,4 +68,7 @@ class Climb(Base):
             return self.given_name
         return self.automatic_name
 
+    def bounds(self) -> tuple[tuple[float, float], tuple[float, float]]:
+        return self.path().bounds()
+
 __all__ = ["Climb"]
diff --git a/fietsboek/templates/details.jinja2 b/fietsboek/templates/details.jinja2
index 6eb7835..9d29a7f 100644
--- a/fietsboek/templates/details.jinja2
+++ b/fietsboek/templates/details.jinja2
@@ -195,7 +195,7 @@
       {% endif %}
     </h5>
 
-    <img class="mb-2" src="{{ request.route_url('climb-preview', climb_id=climb.id) }}">
+    <img class="mb-2 climb-preview" data-bounds="{{ climb.bounds() | tojson }}" src="{{ request.route_url('climb-preview', climb_id=climb.id) }}">
     <img src="{{ request.route_url('climb-profile', climb_id=climb.id) }}">
 
     <table>
@@ -289,3 +289,19 @@
   {% endif %}
 </div>
 {% endblock %}
+
+{% block latescripts %}
+<script type="text/javascript">
+  (() => {
+    document.querySelectorAll(".climb-preview").forEach((img) => {
+      img.addEventListener("click", (e) => {
+        let mapDiv = document.getElementById("mainmap");
+        let bounds = JSON.parse(img.getAttribute("data-bounds"));
+        let map = mapDiv.makeMap.GetMap().map;
+        map.flyToBounds(bounds);
+        mapDiv.scrollIntoView();
+      });
+    });
+  })();
+</script>
+{% endblock %}