116 lines
4.7 KiB
HTML
116 lines
4.7 KiB
HTML
{% load i18n %}
|
|
<div class="p-3">
|
|
<h5>{% translate "Éditer le Poteau" %} #{{ pole.id }}</h5>
|
|
<form id="edit-pole-form" method="post" action="{% url 'sign:sign_pole_edit' pole_id=pole_id %}">
|
|
{% csrf_token %}
|
|
{{ form.lat }}
|
|
{{ form.lon }}
|
|
{{ form.orientation }}
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">{% translate "Latitude" %}</label>
|
|
<input type="text" class="form-control" id="edit-lat-display" value="{{ form.lat.value|default:'' }}" disabled>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">{% translate "Longitude" %}</label>
|
|
<input type="text" class="form-control" id="edit-lon-display" value="{{ form.lon.value|default:'' }}" disabled>
|
|
</div>
|
|
|
|
<!-- Orientation display (controlled via map marker) -->
|
|
<div class="mb-3">
|
|
<label class="form-label">{% translate "Orientation" %}</label>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span id="orientation-display" class="fs-5 fw-bold text-primary">{{ form.orientation.value|default:'90' }}°</span>
|
|
<span class="text-muted small">
|
|
<i class="bi bi-arrow-repeat"></i> {% translate "Faites tourner la flèche sur la carte ou déplacez le marqueur" %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.category.id_for_label }}" class="form-label">{{ form.category.label }}</label>
|
|
{{ form.category }}
|
|
{% if form.category.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.category.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.model.id_for_label }}" class="form-label">{{ form.model.label }}</label>
|
|
{{ form.model }}
|
|
{% if form.model.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.model.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="{{ form.organization.id_for_label }}" class="form-label">{{ form.organization.label }}</label>
|
|
{{ form.organization }}
|
|
{% if form.organization.errors %}
|
|
<div class="invalid-feedback d-block">{{ form.organization.errors }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary">{% translate "Enregistrer" %}</button>
|
|
<button type="button" class="btn btn-outline-secondary" onclick="cancelEdit()">{% translate "Annuler" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
// Sync orientation display with hidden input changes (from map interaction)
|
|
const hiddenInput = document.getElementById('id_orientation');
|
|
const display = document.getElementById('orientation-display');
|
|
|
|
if (!hiddenInput || !display) return;
|
|
|
|
// Use MutationObserver to watch for value changes from JavaScript
|
|
const observer = new MutationObserver(function() {
|
|
display.textContent = (hiddenInput.value || 90) + '°';
|
|
});
|
|
|
|
observer.observe(hiddenInput, { attributes: true, attributeFilter: ['value'] });
|
|
|
|
// Also check periodically in case MutationObserver doesn't catch all changes
|
|
setInterval(function() {
|
|
const currentValue = hiddenInput.value || 90;
|
|
if (display.textContent !== currentValue + '°') {
|
|
display.textContent = currentValue + '°';
|
|
}
|
|
}, 200);
|
|
|
|
// Update lat/lon display when values change
|
|
const latInput = document.getElementById('id_lat');
|
|
const lonInput = document.getElementById('id_lon');
|
|
const latDisplay = document.getElementById('edit-lat-display');
|
|
const lonDisplay = document.getElementById('edit-lon-display');
|
|
|
|
if (latInput && latDisplay) {
|
|
const latObserver = new MutationObserver(function() {
|
|
latDisplay.value = latInput.value;
|
|
});
|
|
latObserver.observe(latInput, { attributes: true, attributeFilter: ['value'] });
|
|
|
|
setInterval(function() {
|
|
if (latDisplay.value !== latInput.value) {
|
|
latDisplay.value = latInput.value;
|
|
}
|
|
}, 200);
|
|
}
|
|
|
|
if (lonInput && lonDisplay) {
|
|
const lonObserver = new MutationObserver(function() {
|
|
lonDisplay.value = lonInput.value;
|
|
});
|
|
lonObserver.observe(lonInput, { attributes: true, attributeFilter: ['value'] });
|
|
|
|
setInterval(function() {
|
|
if (lonDisplay.value !== lonInput.value) {
|
|
lonDisplay.value = lonInput.value;
|
|
}
|
|
}, 200);
|
|
}
|
|
})();
|
|
</script>
|