Arnaud Delcasse
101 lines
4.0 KiB
HTML
101 lines
4.0 KiB
HTML
{{ define "main" }}
|
|
<!-- Placeholder pour les données hydratées par Parcoursmob -->
|
|
<script id="dynamic-data" type="application/json"></script>
|
|
|
|
{{ $iconSearch := resources.Get "images/picto/search_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
|
|
{{ $iconArrow := resources.Get "images/picto/arrow_right_alt_24dp_1F1F1F_FILL1_wght400_GRAD0_opsz24.svg" }}
|
|
|
|
<section class="page-recherche" x-data="rechercheApp()" :class="{ 'has-results': searched }">
|
|
<!-- Formulaire de recherche (caché en mobile si recherche effectuée) -->
|
|
<div class="search-form-container" :class="{ 'hide-on-mobile-searched': searched }">
|
|
{{ partial "search-block.html" (dict "showTitle" false "action" "/recherche/") }}
|
|
</div>
|
|
|
|
<!-- Résultats de recherche -->
|
|
<template x-if="searched">
|
|
<div class="search-results-wrapper">
|
|
<!-- Carte en premier sur mobile -->
|
|
<div class="mobile-map-container">
|
|
<div id="mobile-map"></div>
|
|
</div>
|
|
|
|
<!-- Résumé compact de recherche (mobile uniquement) -->
|
|
<div class="compact-search-summary">
|
|
<a href="/recherche/" class="compact-search-content">
|
|
<div class="compact-search-route">
|
|
<span class="compact-search-place" x-text="departureLabel"></span>
|
|
{{ if $iconArrow }}<img src="{{ $iconArrow.RelPermalink }}" alt="" class="compact-search-arrow" />{{ end }}
|
|
<span class="compact-search-place" x-text="destinationLabel"></span>
|
|
</div>
|
|
<div class="compact-search-date" x-text="formatSearchDate()"></div>
|
|
</a>
|
|
<a href="/recherche/" class="compact-search-icon">
|
|
{{ if $iconSearch }}<img src="{{ $iconSearch.RelPermalink }}" alt="Modifier la recherche" />{{ end }}
|
|
</a>
|
|
</div>
|
|
|
|
{{ partial "search-results.html" . }}
|
|
</div>
|
|
</template>
|
|
</section>
|
|
|
|
<script>
|
|
function rechercheApp() {
|
|
const data = window.__PARCOURSMOB_DATA__ || {};
|
|
|
|
return {
|
|
searched: data.searched || false,
|
|
results: data.results || {},
|
|
selectedJourney: null,
|
|
departure: data.departure || null,
|
|
destination: data.destination || null,
|
|
departureDate: data.departure_date || '',
|
|
departureTime: data.departure_time || '',
|
|
transitWholeDay: data.transit_whole_day || false,
|
|
|
|
toggleTransitWholeDay() {
|
|
const u = new URL(window.location.href);
|
|
if (u.searchParams.get('transit_whole_day') === '1') {
|
|
u.searchParams.delete('transit_whole_day');
|
|
} else {
|
|
u.searchParams.set('transit_whole_day', '1');
|
|
}
|
|
window.location.href = u.toString();
|
|
},
|
|
|
|
get departureLabel() {
|
|
return this.departure?.properties?.label || this.departure?.properties?.name || 'Départ';
|
|
},
|
|
|
|
get destinationLabel() {
|
|
return this.destination?.properties?.label || this.destination?.properties?.name || 'Destination';
|
|
},
|
|
|
|
formatSearchDate() {
|
|
if (!this.departureDate) return '';
|
|
const [year, month, day] = this.departureDate.split('-');
|
|
const date = new Date(year, month - 1, day);
|
|
const formatted = date.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' });
|
|
return this.departureTime ? formatted + ' à ' + this.departureTime : formatted;
|
|
},
|
|
|
|
get totalResults() {
|
|
const r = this.results;
|
|
return (r.solidarity_drivers?.number || 0) +
|
|
(r.organized_carpools?.number || 0) +
|
|
(r.public_transit?.number || 0) +
|
|
(r.vehicles?.number || 0) +
|
|
(r.local_solutions?.number || 0);
|
|
},
|
|
|
|
// showJourneyOnMap is intentionally a no-op: the real route
|
|
// rendering lives in window.showJourneyRoute (search-results.html),
|
|
// invoked by selectionManager.selectItem.
|
|
showJourneyOnMap(journey, index) {
|
|
this.selectedJourney = index;
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
{{ end }}
|