58 lines
2.4 KiB
HTML
58 lines
2.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Fahrt anlegen{% 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>
|
|
<h1>Fahrt anlegen</h1>
|
|
|
|
<form method="post" class="form card">{% csrf_token %}
|
|
{% if form.non_field_errors %}<div class="form-errors">{{ form.non_field_errors }}</div>{% endif %}
|
|
|
|
<label>Fahrgast {{ form.fahrgast }}{{ form.fahrgast.errors }}</label>
|
|
<label>Termin {{ form.scheduled_at }}{{ form.scheduled_at.errors }}</label>
|
|
|
|
<div class="two-col">
|
|
<label>Abholort {{ form.pickup_label }}{{ form.pickup_label.errors }}</label>
|
|
<label>Ziel {{ form.dest_label }}{{ form.dest_label.errors }}</label>
|
|
</div>
|
|
|
|
<label>Notiz {{ form.note }}</label>
|
|
|
|
{{ form.pickup_lat }}{{ form.pickup_lng }}{{ form.dest_lat }}{{ form.dest_lng }}
|
|
|
|
<p class="muted small">Marker auf der Karte ziehen: <span class="dot-inline" style="background:#2f8f5b"></span> Abholung,
|
|
<span class="dot-inline" style="background:#d14b4b"></span> Ziel.</p>
|
|
<div id="pickmap" class="form-map"></div>
|
|
|
|
<button class="btn btn-primary">Fahrt speichern</button>
|
|
</form>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script>
|
|
const $ = (id) => document.getElementById(id);
|
|
// Voreinstellung: Malstatt (Abholung) → Staden (Ziel)
|
|
const start = { lat: 49.2517, lng: 6.9590 };
|
|
const end = { lat: 49.2326, lng: 6.9974 };
|
|
|
|
const sync = (point, latId, lngId) => { $(latId).value = point.lat.toFixed(6); $(lngId).value = point.lng.toFixed(6); };
|
|
sync(start, "id_pickup_lat", "id_pickup_lng");
|
|
sync(end, "id_dest_lat", "id_dest_lng");
|
|
|
|
const map = L.map("pickmap").setView([49.240, 6.978], 13);
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 19, attribution: "© OpenStreetMap"
|
|
}).addTo(map);
|
|
|
|
const greenIcon = L.divIcon({ className: "pin pin-green", html: "", iconSize: [18, 18] });
|
|
const redIcon = L.divIcon({ className: "pin pin-red", html: "", iconSize: [18, 18] });
|
|
|
|
const a = L.marker([start.lat, start.lng], { draggable: true, icon: greenIcon }).addTo(map);
|
|
const b = L.marker([end.lat, end.lng], { draggable: true, icon: redIcon }).addTo(map);
|
|
a.on("dragend", () => sync(a.getLatLng(), "id_pickup_lat", "id_pickup_lng"));
|
|
b.on("dragend", () => sync(b.getLatLng(), "id_dest_lat", "id_dest_lng"));
|
|
</script>
|
|
{% endblock %}
|