Add route-maps

templates/dashboard.html

@@ -1,5 +1,9 @@
 {% extends "base.html" %}
 {% block title %}Meine Fahrten – PBT{% endblock %}
+{% block head %}
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
+{% endblock %}
 {% block content %}
   <h2 style="font-size: 1.1rem; font-weight: 600;">Meine Fahrten</h2>
 
@@ -36,6 +40,18 @@
             <td class="stars">{{ "★" * f.rating }}{{ "☆" * (5 - f.rating) }}</td>
             <td>
               <div class="row-actions">
+                <button type="button" class="icon-btn map" title="Route auf Karte anzeigen"
+                        aria-label="Route auf Karte anzeigen" data-show-map
+                        data-origin-label="{{ f.origin }}" data-destination-label="{{ f.destination }}"
+                        {% if f.origin_stop %}data-origin-lat="{{ f.origin_stop.latitude }}" data-origin-lon="{{ f.origin_stop.longitude }}"{% endif %}
+                        {% if f.destination_stop %}data-destination-lat="{{ f.destination_stop.latitude }}" data-destination-lon="{{ f.destination_stop.longitude }}"{% endif %}
+                        {% if not f.origin_stop and not f.destination_stop %}disabled{% endif %}>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                       stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+                    <circle cx="12" cy="10" r="3"></circle>
+                  </svg>
+                </button>
                 <a class="icon-btn edit" href="{{ url_for('fahrt_bearbeiten', fahrt_id=f.id) }}"
                    title="Fahrt bearbeiten" aria-label="Fahrt bearbeiten">
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -66,4 +82,17 @@
       </tbody>
     </table>
   {% endif %}
+
+  <dialog id="route-map-dialog" class="map-dialog">
+    <div class="map-dialog-header">
+      <span id="route-map-dialog-title"></span>
+      <button type="button" class="icon-btn" data-close-map-dialog aria-label="Schließen">✕</button>
+    </div>
+    <div id="dialog-route-map" class="route-map"></div>
+  </dialog>
+{% endblock %}
+{% block scripts %}
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+          integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="" defer></script>
+  <script src="{{ url_for('static', filename='map.js') }}" defer></script>
 {% endblock %}