84 lines
3.4 KiB
HTML
84 lines
3.4 KiB
HTML
{% load i18n %}
|
|
<div class="p-3">
|
|
<h5>{% translate "Nouveau Poteau" %}</h5>
|
|
<form id="create-pole-form" method="post" action="{% url 'sign:sign_pole_create' %}">
|
|
{% 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" value="{{ form.lat.value|default:'' }}" disabled>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">{% translate "Longitude" %}</label>
|
|
<input type="text" class="form-control" 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" %}
|
|
</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 "Créer" %}</button>
|
|
<button type="button" class="btn btn-outline-secondary" onclick="cancelCreate()">{% 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);
|
|
})();
|
|
</script>
|