2022-11-06 17:19:13 +00:00
{{define "content"}}
2023-05-05 08:22:08 +00:00
2022-11-07 00:26:09 +00:00
< div x-data = "{dialog: false}" >
< main class = "py-10" >
< div class = "max-w-3xl mx-auto px-4 sm:px-6 md:flex md:items-center md:justify-between md:space-x-5 lg:max-w-7xl lg:px-8" >
< div class = "flex items-center space-x-5" >
<!-- <div class="flex - shrink - 0">
< div class = "relative" >
< img class = "h-16 w-16 rounded-co" src = "/app/beneficiaries/{{.ViewState.ID}}/picture" alt = "" >
< span class = "absolute inset-0 shadow-inner rounded-full" aria-hidden = "true" > < / span >
< / div >
< / div > -->
< div >
< h1 class = "text-2xl font-bold text-gray-900" > {{.ViewState.vehicle.Data.name}}< / h1 >
2022-11-06 17:19:13 +00:00
< / div >
2022-11-07 00:26:09 +00:00
< / div >
2023-05-05 08:22:08 +00:00
{{ if eq (index .ViewState.vehicle.Administrators 0) .Group.ID }}
2022-11-07 00:26:09 +00:00
< div class = "mt-6 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end sm:space-x-reverse sm:space-y-0 sm:space-x-3 md:mt-0 md:flex-row md:space-x-3" >
2023-05-05 07:15:32 +00:00
< a href = "/app/vehicles-management/fleet/{{.ViewState.vehicle.ID}}/update" class = "inline-flex" > < button type = "button"
2023-05-05 08:22:08 +00:00
class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-blue hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Modifier< / button > < / a > {{end}}
2022-11-07 00:26:09 +00:00
< button type = "button" @ click = "dialog = !dialog"
class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-2xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-blue">Retirer de la flotte< / button >
2022-11-06 17:19:13 +00:00
< / div >
< / div >
2022-11-07 00:26:09 +00:00
< div class = "mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 sm:px-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-2" >
< section aria-labelledby = "vehicle-information-title" >
< div class = "bg-white shadow sm:rounded-lg" >
< div class = "px-4 py-5 sm:px-6" >
< h2 id = "vehicle-information-title" class = "text-lg leading-6 font-medium text-gray-900" > Informations< / h2 >
< p class = "mt-1 max-w-2xl text-sm text-gray-500" > Informations sur le véhicule< / p >
< / div >
< div class = "border-t border-gray-200 px-4 py-5 sm:px-6" >
< dl class = "grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2" >
{{if .ViewState.vehicle.Type}}
< div class = "sm:col-span-1" >
< dt class = "text-sm font-medium text-gray-500" > Type< / dt >
< dd class = "mt-1 text-sm text-gray-900" > {{.ViewState.vehicle.Type}}< / dd >
< / div >
{{if eq .ViewState.vehicle.Type "Voiture"}}
< div class = "sm:col-span-1" >
< dt class = "text-sm font-medium text-gray-500" > Automatique< / dt >
< dd class = "mt-1 text-sm text-gray-900" >
{{ if .ViewState.vehicle.Data.automatic}}
Oui
{{ else }}
Non
{{ end }}
< / dd >
< / div >
{{end}}
{{end}}
{{if .ViewState.vehicle.Data.licence_plate}}
< div class = "sm:col-span-1" >
< dt class = "text-sm font-medium text-gray-500" > Numéro (Immatriculation, bicycode, ...)< / dt >
< dd class = "mt-1 text-sm text-gray-900" > {{.ViewState.vehicle.Data.licence_plate}}< / dd >
< / div >
{{end}}
{{if .ViewState.vehicle.Data.address}}
< div class = "sm:col-span-1" >
< dt class = "text-sm font-medium text-gray-500" > Lieu< / dt >
< dd class = "mt-1 text-sm text-gray-900" > {{.ViewState.vehicle.Data.address.properties.label}}< / dd >
< / div >
{{end}}
{{if .ViewState.vehicle.Data.informations}}
< div class = "sm:col-span-2" >
< dt class = "text-sm font-medium text-gray-500" > Informations pratiques pour le bénéficiaire< / dt >
< dd class = "mt-1 text-sm text-gray-900" > {{.ViewState.vehicle.Data.informations}}< / dd >
< / div >
{{end}}
< / div >
2022-11-06 17:19:13 +00:00
< / div >
2022-11-07 00:26:09 +00:00
< / section >
< div class = "max-w-7xl mx-auto" >
< div class = "mt-8 flex flex-col" >
< div class = "-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8" >
< div class = "inline-block min-w-full py-2 align-middle md:px-6 lg:px-8" >
< div class = "overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg" >
< table class = "min-w-full divide-y divide-gray-300" >
< thead class = "bg-gray-50" >
< tr >
< th scope = "col"
class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 text-center">
Statut
< / th >
< th scope = "col" class = "px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:pl-6" >
Beneficiaire
< / th >
< th scope = "col" class = "px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:pl-6" >
Dates
< / th >
< th scope = "col" class = "px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:pl-6" >
Commentaire
< / th >
< th scope = "col" class = "relative py-3.5 pl-3 pr-4 sm:pr-6" >
< span class = "sr-only" > Actions< / span >
< / th >
< / tr >
< / thead >
< tbody class = "divide-y divide-gray-200 bg-white" >
{{range .ViewState.vehicle.Bookings}}
< tr >
< td class = "whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6 text-center" >
{{if .Data.administrator_unavailability}}
< span class = "p-1 bg-black text-white text-xs font-bold rounded-xl" >
Retiré
< / span >
2023-05-17 10:50:59 +00:00
{{else if .Data.Deleted}}
2023-05-10 10:04:17 +00:00
< span class = "p-1 bg-co-red text-white text-xs font-bold rounded-xl" >
Annulé
< / span >
2022-11-07 00:26:09 +00:00
{{else}}
{{if eq .Status 1 }}
< span class = "p-1 bg-co-blue text-white text-xs font-bold rounded-xl" >
A venir
< / span >
{{end}}
{{if eq .Status 0 }}
< span class = "p-1 bg-co-green text-white text-xs font-bold rounded-xl" >
En cours
< / span >
{{end}}
{{if eq .Status -1 }}
< span class = "p-1 bg-co-red text-white text-xs font-bold rounded-xl" >
Terminé
< / span >
{{end}}
{{end}}
< / td >
< td class = "whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6" >
{{if .Data.administrator_unavailability}}
< div class = "text-gray-900" > < / div >
{{else}}
< div class = "text-gray-900" >
< a href = "/app/beneficiaries/{{.Driver}}" >
< img class = "h-6 w-6 rounded-co"
src="/app/beneficiaries/{{.Driver}}/picture" alt="">
< / a >
< / div >
{{end}}
< / td >
< td class = "whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6" >
{{if .Data.administrator_unavailability}}
< div class = "text-gray-900" > Retiré du {{(timeFrom .Unavailablefrom).Format "02/01/2006"}} au {{(timeFrom .Unavailableto).Format "02/01/2006"}}< / div >
{{else}}
< div class = "text-gray-900" > Du {{(timeFrom .Startdate).Format "02/01/2006"}} au {{(timeFrom .Enddate).Format "02/01/2006"}}< / div >
{{end}}
< / td >
< td class = "whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6" >
< div class = "text-gray-900" > {{ .Data.comment }}< / div >
< / td >
< td class = "whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6" >
< a href = "/app/vehicles-management/bookings/{{.ID}}"
class="text-co-blue hover:text-co-blue">Voir< / a >
< / td >
< / tr >
{{end}}
< / tbody >
< / table >
< / div >
2022-11-06 17:19:13 +00:00
< / div >
2022-11-07 00:26:09 +00:00
< / div >
< / div >
< / div >
< / div >
< section aria-labelledby = "timeline-title" class = "lg:col-start-3 lg:col-span-1" >
< div class = "bg-white px-4 py-5 shadow sm:rounded-lg sm:px-6" >
< h2 id = "timeline-title" class = "text-lg font-medium text-gray-900" > Réservations à venir< / h2 >
{{if eq (len .ViewState.vehicle.Bookings) 0}}
< p class = "p-12 text-gray-500 text-center text-md" > Aucune réservation à venir< / p >
{{end}}
< ul role = "list" class = "divide-y divide-gray-200" >
2023-05-10 10:04:17 +00:00
{{$noReservation := true}}
2022-11-07 00:26:09 +00:00
{{range .ViewState.vehicle.Bookings}}
< li class = "py-4 flex" >
< div class = "ml-3" >
2023-05-10 10:04:17 +00:00
{{if eq .Status 1 }}
2022-11-07 00:26:09 +00:00
< a href = "/app/vehicles-management/bookings/{{.ID}}" class = "hover:bg-gray-200" >
< p class = "text-sm font-medium text-gray-900" > Du {{(timeFrom .Startdate).Format "02/01/2006"}} au {{(timeFrom .Enddate).Format "02/01/2006"}}< / p >
< p class = "text-sm text-gray-500" > < / p >
< / a >
2023-05-10 10:04:17 +00:00
{{else if $noReservation}}
{{$noReservation = false}}
< p class = "p-12 text-gray-500 text-center text-md" > Aucune réservation à venir< / p >
{{end}}
2022-11-07 00:26:09 +00:00
< / div >
< / li >
{{end}}
< / ul >
< / div >
< / section >
< / div >
< / main >
< div x-show = "dialog" class = "relative z-10" aria-labelledby = "modal-title" role = "dialog" aria-modal = "true" >
< form method = "POST" action = "/app/vehicles-management/fleet/{{.ViewState.vehicle.ID}}/unavailability" >
< div class = "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" > < / div >
< div class = "fixed inset-0 z-10 overflow-y-auto" >
< div class = "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" >
< div class = "relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full max-w-lg sm:p-6" >
< div >
< div class = "mx-auto flex h-12 w-12 items-center justify-center rounded-co bg-co-blue text-white" >
{{.IconSet.Icon "hero:outline/information-circle" "h-6 w-6"}}
< / div >
< div class = "mt-3 text-center sm:mt-5" >
< h3 class = "text-lg font-medium leading-6 text-gray-900" id = "modal-title" > Informations requises< / h3 >
< div class = "mt-2" >
< p class = "text-sm text-gray-500" > Pour retirer votre véhicule de manière définitive, vous pouvez mettre une date de fin d'indisponibilité au 31/12/9999< / p >
< / div >
< div class = "py-4 grid grid-cols-2" >
< div class = "lg:col-span-1" >
< label for = "unavailablefrom" class = "block text-sm font-medium text-gray-700" > Indisponible à partir du< / label >
< div class = "mt-1" >
< input type = "date" id = "unavailablefrom" name = "unavailablefrom" value = ""
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 >
2022-11-06 17:19:13 +00:00
< / div >
2022-11-07 00:26:09 +00:00
< div class = "lg:col-span-1" >
< label for = "unavailableto" class = "block text-sm font-medium text-gray-700" > De nouveau disponible le< / label >
< div class = "mt-1" >
< input type = "date" id = "unavailableto" name = "unavailableto" value = "9999-12-31"
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 >
2022-11-06 17:19:13 +00:00
< / div >
2022-11-07 00:26:09 +00:00
< / div >
< div >
< label for = "comment" class = "block text-sm font-medium text-gray-700" > Raison du retrait< / label >
< div class = "mt-1" >
< textarea rows = "4" name = "comment" id = "comment" class = "block w-full rounded-2xl border-gray-300 shadow-sm focus:border-co-blue focus:ring-co-blue sm:text-sm" > < / textarea >
2022-11-06 17:19:13 +00:00
< / div >
2022-11-07 00:26:09 +00:00
< / div >
2022-11-06 17:19:13 +00:00
< / div >
< / div >
2022-11-07 00:26:09 +00:00
< div class = "mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2" >
< button @ click = "dialog = !dialog" type = "button" class = "mt-3 inline-flex w-full justify-center rounded-l-2xl border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:col-start-1 sm:mt-0 sm:text-sm" > Annuler< / button >
< button type = "submit" class = "inline-flex w-full justify-center rounded-r-2xl border border-transparent bg-co-blue px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:col-start-2 sm:text-sm" > Retirer de la flotte< / button >
< / div >
< / div >
< / div >
2022-11-06 17:19:13 +00:00
< / div >
2022-11-07 00:26:09 +00:00
< / form >
2022-11-06 17:19:13 +00:00
< / div >
2022-11-07 00:26:09 +00:00
< / div >
2022-11-06 17:19:13 +00:00
{{end}}
