parcoursmob-default-theme/web/layouts/journeys/create_groups.html

318 lines
17 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">Groups > Créer un group</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 mt-8" x-data="{
fields: {
name: null,
number: null,
ponctuelle: false,
recurrent: false,
},
rules: {
name: ['required'],
number: ['required'],
},
formValidation: {
valid: false,
fields: {
name: {valid: null},
number: {valid: null},
ponctuelle: {valid: null},
recurrent: {valid: null},
}
},
isFormValid: true,
validate() {
this.formValidation = Iodine.assert(this.fields, this.rules)
},
validateField(field) {
this.formValidation.fields[field] = Iodine.assert(this.fields[field], this.rules[field])
},
submit(event) {
this.validate()
if(!this.formValidation.valid) {
this.isFormValid = false
event.preventDefault()
}
return this.formValidation.valid
}
}">
<form class="space-y-6" method="POST" @submit="submit">
<div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="md:col-span-1">
<h3 class="text-lg font-medium leading-6 text-gray-900">Nouveau groupe</h3>
<p class="mt-1 text-sm text-gray-500">Informations de base sur le groupe à créer</p>
</div>
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-5">
<label for="name" class="block text-sm font-medium text-gray-700">Nom de groupe</label>
<input type="text" name="name" id="name"
class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
x-model="fields.name" @blur="validateField('name')"
:class="formValidation.fields.name.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
</div>
<div class="col-span-5">
<label for="name" class="block text-sm font-medium text-gray-700">Nombre maximum de personne</label>
<input type="text" name="number" id="number"
class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
x-model="fields.number" @blur="validateField('number')"
:class="formValidation.fields.number.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
</div>
<div class="col-span-5">
<div x-data="{
text: '{{if .ViewState.search}}{{.ViewState.search.beneficiary.Data.first_name}} {{.ViewState.search.beneficiary.Data.last_name}}{{end}}',
beneficiariesListOpen: false,
beneficiaries: {{json .ViewState.beneficiaries}},
filteredBeneficiaries: (text) => {
if(text=='') return beneficiaries
return this.beneficiaries.filter(b => b['data']['first_name'].includes(text) || b['data']['last_name'].includes(text))
},
fields: {
beneficiaryid: {{if .ViewState.search}}'{{.ViewState.search.beneficiary.ID}}'{{else}}null{{end}},
},
selectbeneficiary(beneficiary) {
console.log(beneficiary)
this.fields.beneficiaryid = beneficiary.id
this.text = beneficiary.data.first_name + ' ' + beneficiary.data.last_name
this.beneficiariesListOpen = false
}
}">
<input type="hidden" name="beneficiaryid" x-model="fields.beneficiaryid" class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm rounded-2xl"
>
<label for="combobox" class="block text-sm font-medium text-gray-700">Conducteur</label>
<div class="relative mt-1 mb-4">
<input @focus="beneficiariesListOpen = true" x-model="text" id="combobox" type="text" class="w-full rounded-2xl border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-co-blue focus:outline-none focus:ring-1 focus:ring-co-blue sm:text-sm" role="combobox" aria-controls="options" aria-expanded="false">
<button @click="beneficiariesListOpen = ! beneficiariesListOpen" type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-2xl px-2 focus:outline-none">
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<ul x-show="beneficiariesListOpen" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-xl bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" id="options" role="listbox">
<template x-for="beneficiary in beneficiaries">
<li @click="selectbeneficiary(beneficiary)" class="relative cursor-default hover:bg-gray-100 select-none py-2 pl-3 pr-9 text-gray-900" id="option-0" role="option" tabindex="-1">
<span class="truncate" x-text="beneficiary.data.first_name"></span> <span class="truncate" x-text="beneficiary.data.last_name"></span>
<span class="absolute inset-y-0 right-0 flex items-center pr-4 text-co-blue">
</span>
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="md:col-span-1">
<h3 class="text-lg font-medium leading-6 text-gray-900">Paramètres</h3>
<p class="mt-1 text-sm text-gray-500">Paramètres liés au groupe, utiles pour exploiter les fonctionnalités de PARCOURSMOB</p>
</div>
<div class="mt-5 space-y-6 md:mt-0 md:col-span-2">
{{ $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 }}
<!-- will dolater : tags, groups, ... -->
</div>
</div>
</div>
<div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
<div class="md:grid md:grid-cols-3 md:gap-6">
<div class="md:col-span-1">
<h3 class="text-lg font-medium leading-6 text-gray-900">Planification</h3>
<p class="mt-1 text-sm text-gray-500">Informations liés a la planification de groupe, veuillez cocher la solution qui vous convient </p>
</div>
<div class="mt-5 md:mt-0 md:col-span-2">
<!-- <div class="flex items-start">
<div class="flex items-center h-5">
<input id="ponctuelleuelle" name="ponctuelleuelle" type="checkbox"
class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="ponctuelleuelle" class=" text-lg font-medium leading-6 text-gray-900">ponctuelleuelle</label>
</div>
</div> -->
<!-- $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ -->
<div x-data="{selectedListID: ''}" x-init="$watch('selectedListID', value => console.log(value))">
<input type="radio" value="recurrent" x-model="selectedListID">&nbsp Recurrent &nbsp&nbsp
<input type="radio" value="ponctuelle" x-model="selectedListID">&nbsp Ponctuelle
<!-- <p>value: <span x-text="selectedListID" name="selectedListID"></span></p> -->
<!-- <div x-data="{lists: [{id: 'ponctuelle', name: 'ponctuelle'}, {id: 'recurrent', name: 'recurrent'}], selectedListID: ''}">
<template x-for="list in lists" :key="list.id">
<div>
<input x-model="selectedListID" type="radio" :value="list.id.toString()" :id="list.name" >
<label :for="list.name" x-text="list.name"></label>
</div>
</template> -->
<input id="t" :name="selectedListID" type="hidden" :value="selectedListID">
<!-- <p name="selectedListID">Selected value: <code x-text="selectedListID" ></code></p> -->
<!-- ******************************* -->
<div class="sm:col-span-6" x-show="selectedListID == 'ponctuelle'" >
<div class="py-4 grid grid-cols-2">
<div class="lg:col-span-1">
<label for="departdate" class="block text-sm font-medium text-gray-700">le</label>
<div class="mt-1">
<input type="date" id="departdate" name="departdate"
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" class="sr-only">
</div>
</div>
<div class="lg:col-span-1">
<label for="departtime" class="block text-sm font-medium text-gray-700">A</label>
<div class="mt-1">
<input type="time" id="departtime" name="departtime"
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>
</div>
<!-- $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ -->
<div x-show="selectedListID == 'recurrent'">
<div class="flex items-start mt-6">
<div class="flex items-center h-5">
<input id="lundi" name="lundi" type="checkbox"
class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="lundi" class="font-medium text-gray-700">Lundi &nbsp</label>
</div>
<div class="flex items-center h-5">
<input id="mardi" name="mardi" type="checkbox"
class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="mardi" class="font-medium text-gray-700">Mardi &nbsp</label>
</div>
<div class="flex items-center h-5">
<input id="mercredi" name="mercredi" type="checkbox"
class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="mercredi" class="font-medium text-gray-700">Mercredi &nbsp</label>
</div>
<div class="flex items-center h-5">
<input id="jeudi" name="jeudi" type="checkbox"
class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="jeudi" class="font-medium text-gray-700">Jeudi &nbsp</label>
</div>
<div class="flex items-center h-5">
<input id="vendredi" name="vendredi" type="checkbox"
class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="vendredi" class="font-medium text-gray-700">Vendredi &nbsp</label>
</div>
<div class="flex items-center h-5">
<input id="samedi" name="samedi" type="checkbox"
class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="samedi" class="font-medium text-gray-700">Samedi &nbsp</label>
</div>
<div class="flex items-center h-5">
<input id="dimanche" name="dimanche" type="checkbox"
class="focus:ring-co-blue h-4 w-4 text-co-blue border-gray-300 rounded">
</div>
<div class="ml-3 text-sm">
<label for="dimanche" class="font-medium text-gray-700">Dimanche &nbsp</label>
</div>
</div>
<div class="py-4 grid grid-cols-2" >
<div class="lg:col-span-1">
<label for="date" class="block text-sm font-medium text-gray-700">Du</label>
<div class="mt-1">
<input type="date" id="date" name="date"
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="enddate" class="block text-sm font-medium text-gray-700">Au</label>
<div class="mt-1">
<input type="date" id="enddate" name="enddate"
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>
<div class="py-4 grid grid-cols-2" >
<div class="lg:col-span-1">
<label for="time" class="block text-sm font-medium text-gray-700">A</label>
<div class="mt-1">
<input type="time" id="time" name="time"
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>
</div>
</div>
<!-- ************************************ -->
</div>
</div>
</div>
<div class="flex justify-end">
<a href="/app/journeys">
<button type="button"
class="bg-white py-2 px-4 border border-gray-300 rounded-2xl shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Annuler</button>
</a>
<button type="submit"
class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-2xl text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Créer le groupe</button>
</div>
</form>
</div>
{{end}}