AntoineVe/tableau-de-bord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: motor vehicle selector in entry form and routes

Browse Source
This commit is contained in:
Antoine Van Elstraete
2026-03-11 17:52:13 +01:00
parent 9a37bc444d
commit ffbbf2da44
4 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/templates/entry_form.html
View File

@@ -37,11 +37,13 @@
<div id="journey-section"
class="{% if entry and entry.day_type in day_types_without_journey %}hidden{% endif %}">
<label class="block text-sm font-medium text-gray-700 mb-1">Trajet domicile-travail</label>
<select name="journey_profile_id"
<select name="journey_profile_id" id="journey_profile_id"
onchange="updateMotorVehicleVisibility(this.value)"
class="w-full border rounded-lg px-3 py-2 text-sm">
<option value="">— Pas de déplacement —</option>
{% for jid, jdata in journeys.items() %}
<option value="{{ jid }}"
data-has-motor="{{ 'true' if 'moteur' in jdata.distances else 'false' }}"
{% if entry and entry.journey_profile_id == jid %}selected{% endif %}>
{{ jdata.name }}
({% for v, d in jdata.distances.items() %}{{ d }} km {{ v }}{% if not loop.last %} + {% endif %}{% endfor %})
@@ -50,6 +52,24 @@
</select>
</div>
<div id="motor-vehicle-section" class="{% if not entry or not entry.motor_vehicle_id %}hidden{% endif %}">
<label class="block text-sm font-medium text-gray-700 mb-1">Véhicule à moteur utilisé</label>
<div class="grid grid-cols-2 gap-2">
{% for vid, vdata in motor_vehicles.items() %}
<label class="cursor-pointer">
<input type="radio" name="motor_vehicle_id" value="{{ vid }}"
{% if entry and entry.motor_vehicle_id == vid %}checked{% endif %}
class="sr-only peer">
<div class="text-center text-sm py-2 px-1 rounded-lg border-2 border-gray-200
peer-checked:border-orange-500 peer-checked:bg-orange-50 peer-checked:text-orange-700
hover:border-gray-300 transition">
{{ vdata.name }}
</div>
</label>
{% endfor %}
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Plages horaires</label>
<div id="time-slots" class="space-y-2">
@@ -101,8 +121,23 @@
const NO_JOURNEY_TYPES = {{ day_types_without_journey | list | tojson }};
function updateJourneyVisibility(dayType) {
const section = document.getElementById('journey-section');
section.classList.toggle('hidden', NO_JOURNEY_TYPES.includes(dayType));
const journeySection = document.getElementById('journey-section');
const hidden = NO_JOURNEY_TYPES.includes(dayType);
journeySection.classList.toggle('hidden', hidden);
if (hidden) {
updateMotorVehicleVisibility('');
} else {
const select = document.getElementById('journey_profile_id');
if (select) updateMotorVehicleVisibility(select.value);
}
}
function updateMotorVehicleVisibility(journeyId) {
const section = document.getElementById('motor-vehicle-section');
const select = document.getElementById('journey_profile_id');
const selectedOption = select ? select.querySelector(`option[value="${journeyId}"]`) : null;
const hasMotor = selectedOption && selectedOption.dataset.hasMotor === 'true';
section.classList.toggle('hidden', !hasMotor);
}
function addTimeSlot() {