@@ -1,5 +1,9 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ "Fahrt bearbeiten" if fahrt else "Neue Fahrt" }} – 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 %}
|
||||
<div class="card">
|
||||
<h2>{{ "Fahrt bearbeiten" if fahrt else "Neue Fahrt erfassen" }}</h2>
|
||||
@@ -50,6 +54,13 @@
|
||||
if fahrt and fahrt.destination_stop else "" }}</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Kartenvorschau</label>
|
||||
<p class="field-hint" data-route-map-placeholder>Wähle bekannte Haltestellen bei Von/Nach für eine Kartenvorschau.</p>
|
||||
<div id="route-map" class="route-map" hidden></div>
|
||||
<p class="field-hint">Luftlinie zwischen den Halten – keine echte Streckenführung.</p>
|
||||
</div>
|
||||
|
||||
<div class="field combo">
|
||||
<label for="line">Linie</label>
|
||||
<input type="text" id="line" name="line" placeholder="z.B. S3, 693"
|
||||
@@ -104,5 +115,8 @@
|
||||
</div>
|
||||
{% 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>
|
||||
<script src="{{ url_for('static', filename='stops.js') }}" defer></script>
|
||||
{% endblock %}
|
||||
|
||||
+32
-1
@@ -161,9 +161,39 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-btn svg { width: 16px; height: 16px; }
|
||||
.icon-btn.edit:hover { color: var(--accent); border-color: var(--accent); background: rgba(74, 158, 255, 0.1); }
|
||||
.icon-btn.edit:hover, .icon-btn.map:hover { color: var(--accent); border-color: var(--accent); background: rgba(74, 158, 255, 0.1); }
|
||||
.icon-btn.delete { color: var(--danger); }
|
||||
.icon-btn.delete:hover { background: rgba(248, 81, 73, 0.12); border-color: var(--danger); }
|
||||
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
|
||||
.icon-btn:disabled:hover { color: var(--text-muted); border-color: var(--panel-border); background: transparent; }
|
||||
|
||||
.route-map {
|
||||
height: 220px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--panel-border);
|
||||
background: var(--field-bg);
|
||||
}
|
||||
/* Leaflet's own UI (zoom buttons, attribution) is deliberately left in its
|
||||
standard light styling - it sits on map tiles, not our page background. */
|
||||
|
||||
dialog.map-dialog {
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 10px;
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
padding: 1rem;
|
||||
width: min(560px, 92vw);
|
||||
}
|
||||
dialog.map-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
|
||||
.map-dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.combo { position: relative; display: flex; flex-direction: column; }
|
||||
.combo-list {
|
||||
@@ -194,6 +224,7 @@
|
||||
.field-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; min-height: 1em; }
|
||||
.field-hint.matched { color: var(--success); }
|
||||
</style>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user