radeln/rides/templates/rides/ride_detail.html
steffen1971 5d967c68b5 Add Radeln ohne Alter ride-coordination demo (Django + HTMX + Leaflet)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-20 21:20:17 +02:00

64 lines
2.4 KiB
HTML

{% extends "base.html" %}
{% block title %}{{ ride.fahrgast.name }} · Fahrt{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
{% endblock %}
{% block content %}
<a class="back" href="{% url 'dashboard' %}">← Übersicht</a>
<div class="detail-grid">
<div class="card">
<span class="badge" style="--c: {{ ride.status_color }}">{{ ride.get_status_display }}</span>
<h1>{{ ride.fahrgast.name }}</h1>
<dl class="meta">
<dt>Wann</dt><dd>{{ ride.scheduled_at|date:"l, d. F Y, H:i" }} Uhr</dd>
<dt>Abholung</dt><dd>{{ ride.pickup_label }}</dd>
<dt>Ziel</dt><dd>{{ ride.dest_label }}</dd>
{% if ride.assigned_pilot %}<dt>Pilot</dt><dd>{{ ride.assigned_pilot.get_full_name|default:ride.assigned_pilot.username }}</dd>{% endif %}
{% if ride.fahrgast.einrichtung %}<dt>Einrichtung</dt><dd>{{ ride.fahrgast.einrichtung.name }}</dd>{% endif %}
</dl>
{% if show_notes %}
{% if ride.fahrgast.mobility_notes %}
<div class="notes"><h3>Hinweise zum Fahrgast</h3><p>{{ ride.fahrgast.mobility_notes }}</p></div>
{% endif %}
{% if ride.note %}
<div class="notes"><h3>Notiz zur Fahrt</h3><p>{{ ride.note }}</p></div>
{% endif %}
{% else %}
<p class="muted small notes-locked">🔒 Pflege-Hinweise sind nur für die zugeteilte Pilot:in und die Koordination sichtbar.</p>
{% endif %}
</div>
<div class="card map-card">
<div id="map" class="detail-map"></div>
</div>
</div>
{{ ride.route_geojson|json_script:"route-data" }}
{% endblock %}
{% block scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const pickup = [{{ ride.pickup_lat }}, {{ ride.pickup_lng }}];
const dest = [{{ ride.dest_lat }}, {{ ride.dest_lng }}];
const route = JSON.parse(document.getElementById("route-data").textContent);
const map = L.map("map");
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19, attribution: "© OpenStreetMap"
}).addTo(map);
L.marker(pickup).addTo(map).bindPopup("Abholung");
L.marker(dest).addTo(map).bindPopup("Ziel");
let line;
if (route) {
line = L.geoJSON(route, { style: { color: "#2f7d57", weight: 5 } }).addTo(map);
} else {
line = L.polyline([pickup, dest], { color: "#2f7d57", weight: 4, dashArray: "6 8" }).addTo(map);
}
map.fitBounds(line.getBounds().pad(0.3));
</script>
{% endblock %}