Compare commits
2 Commits
0a784beb41
...
92f18ce7f0
| Author | SHA1 | Date | |
|---|---|---|---|
|
92f18ce7f0 | ||
|
|
e2d742d9ae |
@ -5,7 +5,7 @@
|
|||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container py-5">
|
<div class="container py-5">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-8">
|
<div class="col-lg-10">
|
||||||
<!-- Back to Dashboard -->
|
<!-- Back to Dashboard -->
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<a href="{% url 'dashboard' %}" class="btn btn-link text-decoration-none text-muted ps-0">
|
<a href="{% url 'dashboard' %}" class="btn btn-link text-decoration-none text-muted ps-0">
|
||||||
@ -14,7 +14,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card border-0 shadow-sm p-4" style="border-radius: 20px;">
|
<div class="card border-0 shadow-sm p-4" style="border-radius: 20px;">
|
||||||
<h2 class="mb-4">{% trans "Request a Shipment" %}</h2>
|
<h2 class="mb-4 text-center">{% trans "Request a Shipment" %}</h2>
|
||||||
|
|
||||||
{% if not google_maps_api_key %}
|
{% if not google_maps_api_key %}
|
||||||
<div class="alert alert-warning">
|
<div class="alert alert-warning">
|
||||||
@ -35,112 +35,141 @@
|
|||||||
{{ form.driver_amount }}
|
{{ form.driver_amount }}
|
||||||
{{ form.platform_fee_percentage }}
|
{{ form.platform_fee_percentage }}
|
||||||
|
|
||||||
<div class="row g-3">
|
<!-- General Info Section -->
|
||||||
<!-- General Info -->
|
<div class="card bg-light border-0 mb-4">
|
||||||
<div class="col-12">
|
<div class="card-body">
|
||||||
<label class="form-label" for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
|
<h5 class="card-title text-secondary mb-3">{% trans "Shipment Information" %}</h5>
|
||||||
{{ form.description }}
|
<div class="row g-3">
|
||||||
{% if form.description.errors %}
|
<div class="col-12">
|
||||||
<div class="text-danger small">{{ form.description.errors }}</div>
|
<label class="form-label fw-bold" for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
|
||||||
{% endif %}
|
{{ form.description }}
|
||||||
</div>
|
{% if form.description.errors %}
|
||||||
<div class="col-md-6">
|
<div class="text-danger small">{{ form.description.errors }}</div>
|
||||||
<label class="form-label" for="{{ form.weight.id_for_label }}">{{ form.weight.label }}</label>
|
{% endif %}
|
||||||
{{ form.weight }}
|
|
||||||
{% if form.weight.errors %}
|
|
||||||
<div class="text-danger small">{{ form.weight.errors }}</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.price.id_for_label }}">{{ form.price.label }}</label>
|
|
||||||
{{ form.price }}
|
|
||||||
<small class="text-muted">{% trans "Calculated automatically based on distance and weight." %}</small>
|
|
||||||
{% if form.price.errors %}
|
|
||||||
<div class="text-danger small">{{ form.price.errors }}</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pickup Details -->
|
|
||||||
<div class="col-12 mt-4">
|
|
||||||
<h4 class="mb-3 text-secondary border-bottom pb-2 d-flex justify-content-between align-items-center">
|
|
||||||
{% trans "Pickup Details" %}
|
|
||||||
{% if google_maps_api_key %}
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-primary" onclick="openMap('pickup')">
|
|
||||||
<i class="bi bi-geo-alt-fill"></i> {% trans "Select on Map" %}
|
|
||||||
</button>
|
|
||||||
{% endif %}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.pickup_country.id_for_label }}">{{ form.pickup_country.label }}</label>
|
|
||||||
{{ form.pickup_country }}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.pickup_governate.id_for_label }}">{{ form.pickup_governate.label }}</label>
|
|
||||||
{{ form.pickup_governate }}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.pickup_city.id_for_label }}">{{ form.pickup_city.label }}</label>
|
|
||||||
{{ form.pickup_city }}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.pickup_address.id_for_label }}">{{ form.pickup_address.label }}</label>
|
|
||||||
{{ form.pickup_address }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Delivery Details -->
|
|
||||||
<div class="col-12 mt-4">
|
|
||||||
<h4 class="mb-3 text-secondary border-bottom pb-2 d-flex justify-content-between align-items-center">
|
|
||||||
{% trans "Delivery Details" %}
|
|
||||||
{% if google_maps_api_key %}
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-primary" onclick="openMap('delivery')">
|
|
||||||
<i class="bi bi-geo-alt-fill"></i> {% trans "Select on Map" %}
|
|
||||||
</button>
|
|
||||||
{% endif %}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.delivery_country.id_for_label }}">{{ form.delivery_country.label }}</label>
|
|
||||||
{{ form.delivery_country }}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.delivery_governate.id_for_label }}">{{ form.delivery_governate.label }}</label>
|
|
||||||
{{ form.delivery_governate }}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.delivery_city.id_for_label }}">{{ form.delivery_city.label }}</label>
|
|
||||||
{{ form.delivery_city }}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.delivery_address.id_for_label }}">{{ form.delivery_address.label }}</label>
|
|
||||||
{{ form.delivery_address }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Receiver Details -->
|
|
||||||
<div class="col-12 mt-4">
|
|
||||||
<h4 class="mb-3 text-secondary border-bottom pb-2">{% trans "Receiver Details" %}</h4>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.receiver_name.id_for_label }}">{{ form.receiver_name.label }}</label>
|
|
||||||
{{ form.receiver_name }}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<label class="form-label" for="{{ form.receiver_phone.id_for_label }}">{{ form.receiver_phone.label }}</label>
|
|
||||||
<div class="d-flex gap-2">
|
|
||||||
<div class="flex-shrink-0" style="width: 140px;">
|
|
||||||
{{ form.receiver_phone_code }}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-grow-1">
|
<div class="col-md-6">
|
||||||
{{ form.receiver_phone }}
|
<label class="form-label fw-bold" for="{{ form.weight.id_for_label }}">{{ form.weight.label }}</label>
|
||||||
|
{{ form.weight }}
|
||||||
|
{% if form.weight.errors %}
|
||||||
|
<div class="text-danger small">{{ form.weight.errors }}</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label class="form-label fw-bold" for="{{ form.price.id_for_label }}">{{ form.price.label }}</label>
|
||||||
|
{{ form.price }}
|
||||||
|
<small class="text-muted">{% trans "Calculated automatically based on distance and weight." %}</small>
|
||||||
|
{% if form.price.errors %}
|
||||||
|
<div class="text-danger small">{{ form.price.errors }}</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<!-- Pickup Container -->
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<div class="card h-100 border shadow-sm">
|
||||||
|
<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
|
||||||
|
<h5 class="mb-0 text-primary">
|
||||||
|
<i class="bi bi-box-seam me-2"></i>{% trans "Pickup Details" %}
|
||||||
|
</h5>
|
||||||
|
{% if google_maps_api_key %}
|
||||||
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="openMap('pickup')">
|
||||||
|
<i class="bi bi-geo-alt-fill"></i> {% trans "Map" %}
|
||||||
|
</button>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row g-3">
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="{{ form.pickup_country.id_for_label }}">{{ form.pickup_country.label }}</label>
|
||||||
|
{{ form.pickup_country }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="{{ form.pickup_governate.id_for_label }}">{{ form.pickup_governate.label }}</label>
|
||||||
|
{{ form.pickup_governate }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="{{ form.pickup_city.id_for_label }}">{{ form.pickup_city.label }}</label>
|
||||||
|
{{ form.pickup_city }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="{{ form.pickup_address.id_for_label }}">{{ form.pickup_address.label }}</label>
|
||||||
|
{{ form.pickup_address }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-12 mt-4 d-flex gap-2">
|
<!-- Delivery Container -->
|
||||||
<a href="{% url 'dashboard' %}" class="btn btn-outline-secondary w-50 py-3">{% trans "Cancel" %}</a>
|
<div class="col-md-6 mb-4">
|
||||||
<button type="submit" class="btn btn-masarx-primary w-50 py-3">{% trans "Submit Request" %}</button>
|
<div class="card h-100 border shadow-sm">
|
||||||
|
<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
|
||||||
|
<h5 class="mb-0 text-success">
|
||||||
|
<i class="bi bi-geo-alt me-2"></i>{% trans "Delivery Details" %}
|
||||||
|
</h5>
|
||||||
|
{% if google_maps_api_key %}
|
||||||
|
<button type="button" class="btn btn-sm btn-outline-success" onclick="openMap('delivery')">
|
||||||
|
<i class="bi bi-geo-alt-fill"></i> {% trans "Map" %}
|
||||||
|
</button>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row g-3">
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="{{ form.delivery_country.id_for_label }}">{{ form.delivery_country.label }}</label>
|
||||||
|
{{ form.delivery_country }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="{{ form.delivery_governate.id_for_label }}">{{ form.delivery_governate.label }}</label>
|
||||||
|
{{ form.delivery_governate }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="{{ form.delivery_city.id_for_label }}">{{ form.delivery_city.label }}</label>
|
||||||
|
{{ form.delivery_city }}
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<label class="form-label" for="{{ form.delivery_address.id_for_label }}">{{ form.delivery_address.label }}</label>
|
||||||
|
{{ form.delivery_address }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Receiver Details -->
|
||||||
|
<div class="card border mb-4">
|
||||||
|
<div class="card-header bg-white py-3">
|
||||||
|
<h5 class="mb-0 text-secondary">{% trans "Receiver Details" %}</h5>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row g-3">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label class="form-label" for="{{ form.receiver_name.id_for_label }}">{{ form.receiver_name.label }}</label>
|
||||||
|
{{ form.receiver_name }}
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label class="form-label" for="{{ form.receiver_phone.id_for_label }}">{{ form.receiver_phone.label }}</label>
|
||||||
|
<div class="d-flex gap-2">
|
||||||
|
<div class="flex-shrink-0" style="width: 140px;">
|
||||||
|
{{ form.receiver_phone_code }}
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1">
|
||||||
|
{{ form.receiver_phone }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex gap-3 justify-content-end">
|
||||||
|
<a href="{% url 'dashboard' %}" class="btn btn-outline-secondary px-5 py-2">{% trans "Cancel" %}</a>
|
||||||
|
<button type="submit" class="btn btn-masarx-primary px-5 py-2">{% trans "Submit Request" %}</button>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -155,7 +184,8 @@
|
|||||||
<h5 class="modal-title">{% trans "Choose Location" %}</h5>
|
<h5 class="modal-title">{% trans "Choose Location" %}</h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body p-0">
|
<div class="modal-body p-0 position-relative">
|
||||||
|
<div id="mapError" class="alert alert-danger m-3 d-none"></div>
|
||||||
<div id="map" style="height: 450px; width: 100%;"></div>
|
<div id="map" style="height: 450px; width: 100%;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
@ -167,30 +197,70 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if google_maps_api_key %}
|
{% if google_maps_api_key %}
|
||||||
<script src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&libraries=places"></script>
|
|
||||||
<script>
|
<script>
|
||||||
|
// Global Auth Failure Handler (must be defined before script load)
|
||||||
|
window.gm_authFailure = function() {
|
||||||
|
const errorDiv = document.getElementById('mapError');
|
||||||
|
if (errorDiv) {
|
||||||
|
errorDiv.innerHTML = `
|
||||||
|
<strong>Google Maps Error:</strong> Authentication failed.
|
||||||
|
<br>Please check your API Key and enable <strong>Billing</strong> in Google Cloud Console.
|
||||||
|
<br>Also ensure <strong>Maps JavaScript API</strong> and <strong>Geocoding API</strong> are enabled.
|
||||||
|
`;
|
||||||
|
errorDiv.classList.remove('d-none');
|
||||||
|
}
|
||||||
|
console.error("Google Maps Auth Failure");
|
||||||
|
}
|
||||||
|
|
||||||
let map;
|
let map;
|
||||||
let marker;
|
let marker;
|
||||||
let currentMode = 'pickup'; // 'pickup' or 'delivery'
|
let currentMode = 'pickup'; // 'pickup' or 'delivery'
|
||||||
let mapModal;
|
let mapModal;
|
||||||
|
let mapInitialized = false;
|
||||||
|
|
||||||
|
// This function is called by the Google Maps script when loaded
|
||||||
function initMap() {
|
function initMap() {
|
||||||
|
console.log("Google Maps API loaded.");
|
||||||
|
}
|
||||||
|
|
||||||
|
function initializeMapInstance() {
|
||||||
|
if (mapInitialized && map) return;
|
||||||
|
|
||||||
|
console.log("Initializing Map Instance...");
|
||||||
|
|
||||||
const defaultLocation = { lat: 23.5880, lng: 58.3829 }; // Muscat, Oman
|
const defaultLocation = { lat: 23.5880, lng: 58.3829 }; // Muscat, Oman
|
||||||
|
|
||||||
map = new google.maps.Map(document.getElementById("map"), {
|
const mapElement = document.getElementById("map");
|
||||||
zoom: 12,
|
if (!mapElement) {
|
||||||
center: defaultLocation,
|
console.error("Map element not found!");
|
||||||
});
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
marker = new google.maps.Marker({
|
try {
|
||||||
map: map,
|
map = new google.maps.Map(mapElement, {
|
||||||
draggable: true,
|
zoom: 12,
|
||||||
animation: google.maps.Animation.DROP,
|
center: defaultLocation,
|
||||||
});
|
});
|
||||||
|
|
||||||
map.addListener("click", (e) => {
|
marker = new google.maps.Marker({
|
||||||
placeMarkerAndPanTo(e.latLng, map);
|
map: map,
|
||||||
});
|
draggable: true,
|
||||||
|
animation: google.maps.Animation.DROP,
|
||||||
|
});
|
||||||
|
|
||||||
|
map.addListener("click", (e) => {
|
||||||
|
placeMarkerAndPanTo(e.latLng, map);
|
||||||
|
});
|
||||||
|
|
||||||
|
mapInitialized = true;
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Error creating map:", e);
|
||||||
|
const errorDiv = document.getElementById('mapError');
|
||||||
|
if (errorDiv) {
|
||||||
|
errorDiv.innerText = "Error initializing map: " + e.message;
|
||||||
|
errorDiv.classList.remove('d-none');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function placeMarkerAndPanTo(latLng, map) {
|
function placeMarkerAndPanTo(latLng, map) {
|
||||||
@ -198,32 +268,74 @@
|
|||||||
map.panTo(latLng);
|
map.panTo(latLng);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getSelectedText(elementId) {
|
||||||
|
const el = document.getElementById(elementId);
|
||||||
|
if (el && el.selectedIndex !== -1 && el.options[el.selectedIndex].value) {
|
||||||
|
return el.options[el.selectedIndex].text;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
function openMap(mode) {
|
function openMap(mode) {
|
||||||
currentMode = mode;
|
currentMode = mode;
|
||||||
mapModal = new bootstrap.Modal(document.getElementById('mapModal'));
|
const modalEl = document.getElementById('mapModal');
|
||||||
|
|
||||||
|
// Hide previous errors
|
||||||
|
const errorDiv = document.getElementById('mapError');
|
||||||
|
if (errorDiv) errorDiv.classList.add('d-none');
|
||||||
|
|
||||||
|
mapModal = new bootstrap.Modal(modalEl);
|
||||||
mapModal.show();
|
mapModal.show();
|
||||||
|
|
||||||
// Resize map when modal opens
|
// Ensure map is initialized and resized when modal is fully shown
|
||||||
document.getElementById('mapModal').addEventListener('shown.bs.modal', function () {
|
modalEl.addEventListener('shown.bs.modal', function () {
|
||||||
google.maps.event.trigger(map, "resize");
|
initializeMapInstance();
|
||||||
|
|
||||||
// Set marker if existing value
|
if (map) {
|
||||||
let latField = document.getElementById(`id_${mode}_lat`);
|
google.maps.event.trigger(map, "resize");
|
||||||
let lngField = document.getElementById(`id_${mode}_lng`);
|
|
||||||
|
|
||||||
if (latField.value && lngField.value) {
|
// 1. Check if lat/lng are already set (editing existing parcel or re-opening map)
|
||||||
let loc = { lat: parseFloat(latField.value), lng: parseFloat(lngField.value) };
|
let latField = document.getElementById(`id_${mode}_lat`);
|
||||||
marker.setPosition(loc);
|
let lngField = document.getElementById(`id_${mode}_lng`);
|
||||||
map.setCenter(loc);
|
|
||||||
} else {
|
if (latField.value && lngField.value) {
|
||||||
// Default to Muscat if no value
|
let loc = { lat: parseFloat(latField.value), lng: parseFloat(lngField.value) };
|
||||||
map.setCenter({ lat: 23.5880, lng: 58.3829 });
|
marker.setPosition(loc);
|
||||||
|
map.setCenter(loc);
|
||||||
|
map.setZoom(15);
|
||||||
|
} else {
|
||||||
|
// 2. If no lat/lng, try to find the selected City/Governate/Country
|
||||||
|
const city = getSelectedText(`id_${mode}_city`);
|
||||||
|
const governate = getSelectedText(`id_${mode}_governate`);
|
||||||
|
const country = getSelectedText(`id_${mode}_country`);
|
||||||
|
|
||||||
|
if (city) {
|
||||||
|
let addressQuery = city;
|
||||||
|
if (governate) addressQuery += `, ${governate}`;
|
||||||
|
if (country) addressQuery += `, ${country}`;
|
||||||
|
|
||||||
|
console.log(`Geocoding selected location: ${addressQuery}`);
|
||||||
|
|
||||||
|
const geocoder = new google.maps.Geocoder();
|
||||||
|
geocoder.geocode({ address: addressQuery }, (results, status) => {
|
||||||
|
if (status === "OK" && results[0]) {
|
||||||
|
const location = results[0].geometry.location;
|
||||||
|
map.setCenter(location);
|
||||||
|
map.setZoom(14);
|
||||||
|
// Optional: place marker at city center
|
||||||
|
marker.setPosition(location);
|
||||||
|
} else {
|
||||||
|
console.warn("Could not geocode city: " + status);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
}, { once: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
function confirmLocation() {
|
function confirmLocation() {
|
||||||
if (!marker.getPosition()) return;
|
if (!marker || !marker.getPosition()) return;
|
||||||
|
|
||||||
const lat = marker.getPosition().lat();
|
const lat = marker.getPosition().lat();
|
||||||
const lng = marker.getPosition().lng();
|
const lng = marker.getPosition().lng();
|
||||||
@ -231,15 +343,16 @@
|
|||||||
document.getElementById(`id_${currentMode}_lat`).value = lat;
|
document.getElementById(`id_${currentMode}_lat`).value = lat;
|
||||||
document.getElementById(`id_${currentMode}_lng`).value = lng;
|
document.getElementById(`id_${currentMode}_lng`).value = lng;
|
||||||
|
|
||||||
// Try reverse geocoding to fill address (optional but nice)
|
// Try reverse geocoding to fill address
|
||||||
const geocoder = new google.maps.Geocoder();
|
const geocoder = new google.maps.Geocoder();
|
||||||
geocoder.geocode({ location: { lat: lat, lng: lng } }, (results, status) => {
|
geocoder.geocode({ location: { lat: lat, lng: lng } }, (results, status) => {
|
||||||
if (status === "OK" && results[0]) {
|
if (status === "OK" && results[0]) {
|
||||||
// Simple fill of address field if empty
|
|
||||||
const addrField = document.getElementById(`id_${currentMode}_address`);
|
const addrField = document.getElementById(`id_${currentMode}_address`);
|
||||||
if (!addrField.value) {
|
// Only overwrite address if it's empty or user confirms?
|
||||||
addrField.value = results[0].formatted_address;
|
// Currently existing behavior is to overwrite.
|
||||||
}
|
addrField.value = results[0].formatted_address;
|
||||||
|
} else {
|
||||||
|
console.warn("Geocoder failed due to: " + status);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -277,9 +390,7 @@
|
|||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data.error) {
|
if (data.error) {
|
||||||
// console.error(data.error);
|
console.error(data.error);
|
||||||
// Maybe show error to user?
|
|
||||||
// alert(data.error);
|
|
||||||
} else {
|
} else {
|
||||||
document.getElementById('id_price').value = data.price;
|
document.getElementById('id_price').value = data.price;
|
||||||
document.getElementById('id_distance_km').value = data.distance_km;
|
document.getElementById('id_distance_km').value = data.distance_km;
|
||||||
@ -293,11 +404,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Attach listener to weight
|
// Attach listener to weight
|
||||||
document.getElementById('id_weight').addEventListener('change', calculatePrice);
|
const weightInput = document.getElementById('id_weight');
|
||||||
document.getElementById('id_weight').addEventListener('keyup', calculatePrice);
|
if (weightInput) {
|
||||||
|
weightInput.addEventListener('change', calculatePrice);
|
||||||
|
weightInput.addEventListener('keyup', calculatePrice);
|
||||||
|
}
|
||||||
|
|
||||||
window.initMap = initMap;
|
window.initMap = initMap;
|
||||||
</script>
|
</script>
|
||||||
|
<script src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&loading=async&callback=initMap" async defer></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user