120 lines
7.3 KiB
HTML
120 lines
7.3 KiB
HTML
{{define "content"}}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
|
|
<h1 class="text-2xl font-semibold text-gray-900">Déplacements</h1>
|
|
|
|
|
|
<div class="mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3">
|
|
<div class="space-y-6 lg:col-start-1 lg:col-span-1">
|
|
<div class="bg-white shadow sm:rounded-2xl">
|
|
<h2 id="timeline-title" class="text-lg font-medium text-gray-900 p-4 sm:px-6">Chercher une solution</h2>
|
|
<div class="border-t border-gray-200 px-4 py-5 sm:px-6">
|
|
<form method="GET">
|
|
|
|
{{ $departureField := "departure" }}
|
|
{{ $departureLabel := "Départ" }}
|
|
{{ $departure := .ViewState.departure }}
|
|
{{ template "address_autocomplete" dict "FieldName" $departureField "FieldLabel" $departureLabel "Address" $departure }}
|
|
|
|
{{ $destinationField := "destination" }}
|
|
{{ $destinationLabel := "Destination" }}
|
|
{{ $destination := .ViewState.destination }}
|
|
{{ template "address_autocomplete" dict "FieldName" $destinationField "FieldLabel" $destinationLabel "Address" $destination }}
|
|
|
|
|
|
<div class="py-4 grid grid-cols-2">
|
|
<div class="lg:col-span-1">
|
|
<label for="departuredate" class="block text-sm font-medium text-gray-700">Le</label>
|
|
<div class="mt-1">
|
|
<input type="date" id="departuredate" name="departuredate" value="{{.ViewState.departuredate}}"
|
|
class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-l-2xl border-r-1">
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-span-1">
|
|
<label for="departuretime" class="block text-sm font-medium text-gray-700">A</label>
|
|
<div class="mt-1">
|
|
<input type="time" id="departuretime" name="departuretime" value="{{.ViewState.departuretime}}"
|
|
class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-r-2xl border-l-0">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 mt-8 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
|
|
Chercher
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-start-2 lg:col-span-2">
|
|
{{if .ViewState.searched}}
|
|
<section aria-labelledby="results-title" x-data="{
|
|
tab: 'all',
|
|
to(event) {
|
|
this.tab = event.target.value
|
|
}
|
|
}">
|
|
<div class="bg-white shadow sm:rounded-lg sm:overflow-hidden">
|
|
<div class="divide-y divide-gray-200">
|
|
<div>
|
|
<div class="sm:hidden">
|
|
<label for="tabs" class="sr-only">Select a tab</label>
|
|
<select id="tabs" name="tabs" @change="to"
|
|
class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
|
|
<option value="all">Tous modes</option>
|
|
|
|
<option value="carpool">Covoiturage</option>
|
|
|
|
<option value="public-transit">Transports</option>
|
|
|
|
<!-- <option value="active-modes">Modes actifs</option> -->
|
|
|
|
<option value="others">Autres</option>
|
|
</select>
|
|
</div>
|
|
<div class="hidden sm:block">
|
|
<div class="border-b border-gray-200 pl-4">
|
|
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
|
|
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
|
|
<a href="#" @click="tab = 'all'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
|
|
:class="tab == 'all' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
|
|
Tous modes </a>
|
|
|
|
<a href="#" @click="tab = 'carpool'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
|
|
:class="tab == 'carpool' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
|
|
Covoiturage </a>
|
|
|
|
<a href="#" @click="tab = 'public-transit'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
|
|
:class="tab == 'public-transit' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
|
|
Transports </a>
|
|
|
|
<!-- <a href="#" @click="tab = 'active-modes'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
|
|
:class="tab == 'active-modes' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
|
|
Modes actifs </a> -->
|
|
|
|
<a href="#" @click="tab = 'others'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
|
|
:class="tab == 'others' ? 'border-co-blue text-co-blue' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'">
|
|
Autres </a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-show="tab == 'all'">{{template "journeys_all" .}}</div>
|
|
<div x-show="tab == 'carpool'">{{template "journeys_carpool" .}}</div>
|
|
<div x-show="tab == 'public-transit'">{{template "journeys_public_transit" .}}</div>
|
|
<div x-show="tab == 'others'">{{template "journeys_others" .}}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}} |