296 lines
16 KiB
HTML
296 lines
16 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="number" 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 x-data="{selectedListID: ''}" x-init="$watch('selectedListID', value => console.log(value))">
|
|
<input type="radio" value="recurrent" x-model="selectedListID">  Recurrent   
|
|
<input type="radio" value="ponctuelle" x-model="selectedListID">  Ponctuelle
|
|
|
|
<input id="t" :name="selectedListID" type="hidden" :value="selectedListID">
|
|
|
|
<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  </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  </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  </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  </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  </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  </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  </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}} |