Improve vehicles management

config.yaml

@@ -146,7 +146,7 @@ icons:
   svg:
     coopgo:parcoursmob/monogram: <svg xmlns="http://www.w3.org/2000/svg" class="%s" viewBox="0 0 61.85 33.58"><defs><style>.cls-1{fill:#ff1300;}.cls-2{fill:#243887;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M44.978,0C31.337,0,28.1,6.824,27.875,15.505H39.536V9.434a.727.727,0,0,1,1.123-.607L52.6,16.453,40.659,24.08a.729.729,0,0,1-1.123-.608v-6.1H27.865c.075,8.427,1.527,16.213,17.113,16.213,14.867,0,16.872-7.764,16.872-17.032C61.85,7.91,59.894,0,44.978,0Z"/><polygon class="cls-1" points="41.412 21.385 49.133 16.453 41.412 11.521 41.412 21.385"/><path class="cls-2" d="M14.175,11.4l-.019,4.151H26.311a14.781,14.781,0,0,0,.819-5.141C27.046,3.767,22.545,0,14.764,0H1.052A1.147,1.147,0,0,0,0,1.24V31.87a1.149,1.149,0,0,0,1.094,1.239H11.525a1.145,1.145,0,0,0,1.051-1.239V10.41h.758C13.88,10.41,14.175,10.756,14.175,11.4Z"/><path class="cls-2" d="M14.148,17.3l-.015,3.514H18.97A7.521,7.521,0,0,0,25.458,17.3Z"/></g></g></svg>
     hero:outline/briefcase: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
-    hero:outline/support: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" /></svg>
+    hero:outline/support: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" /></svg>
     hero:outline/calendar: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
     hero:outline/chevron-right: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
     hero:outline/cog: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
@@ -154,6 +154,7 @@ icons:
     hero:outline/document-text: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
     hero:outline/folder-plus: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" /></svg>
     hero:outline/home: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
+    hero:outline/information-circle: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
     hero:outline/map: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" /></svg>
     hero:outline/office-building: <svg xmlns="http://www.w3.org/2000/svg" class="%s" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
     hero:outline/paper-clip: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="%s"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" /></svg>
@@ -199,6 +200,13 @@ emails:
       files: 
         - emails/layout.html
         - emails/auth/retrieve-password.html
+  fleets:
+    bookings:
+      creation_admin_alert:
+        subject: PARCOURSMOB - Nouvelle réservation de véhicule
+        files:
+          - emails/layout.html
+          - emails/fleets/bookings/creation-admin-alert.html
   support:
     request:
       subject: PARCOURMOB - Demande de support

emails/fleets/bookings/creation-admin-alert.html

@@ -0,0 +1,4 @@
+{{define "content"}}
+<p>Vous avez une nouvelle réservation e véhicule sur PARCOURSMOB.</p>
+<p>Connectez vous sur <a href="http://localhost:9000/app/vehicles-management/bookings/{{.bookingid}}">http://localhost:9000/app/vehicles-management/bookings/{{.bookingid}}</a> pour y accéder</p>
+{{end}}

web/layouts/agenda/home.html

@@ -27,14 +27,11 @@
                         <thead class="bg-gray-50">
                             <tr>
                                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:pl-6">
-                                    Type de dispositif
+                                    Dispositif
                                 </th>
                                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:pl-6">
                                     Structure
                                 </th>
-                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:pl-6">
-                                    Nom
-                                </th>
                                 <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:pl-6">
                                     Lieu
                                 </th>
@@ -56,7 +53,9 @@
                                 <a href="/app/agenda/{{.ID}}">
                                 <tr>
                                     <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-                                        <div class="text-gray-900" >{{.Type}}</div>
+
+                                        <div class="font-medium text-gray-900">{{.Name}}</div>
+                                        <div class="text-gray-500">{{.Type}}</div>
                                     </td>
                                     <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                 
@@ -68,9 +67,6 @@
                                             {{end}}
                                         </div>
                                     </td>
-                                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-                                        <div class="text-gray-900" >{{.Name}}</div>
-                                    </td>
                                     <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                                         <div class="text-gray-900" >{{if .Data.address}}{{.Data.address.properties.label}}{{end}}</div>
                                     </td>

web/layouts/support/support.html

@@ -4,7 +4,7 @@
     <h1 class="text-2xl font-semibold text-gray-900">Demande de support technique</h1>
     <div class="bg-white py-2 px-4 shadow sm:rounded-lg sm:px-10">
         <p class="text-sm text-gray-600 p-4">
-            Le support technique PARCOURSMOB est ouvert les jours ouvrés de 9h à 18h. Vous pouvez également nous joindre par email à <b class="text-co-blue"><a href="mailto:support@parcoursmob.fr">support@parcoursmob.fr</a></b>, par exemple pour nous envoyez des copies d'écran du problème que vous rencontrez.
+            Le support technique PARCOURSMOB est ouvert les jours ouvrés de 9h à 18h. Vous pouvez également nous joindre par email à <b class="text-co-blue"><a href="mailto:support@parcoursmob.fr">support@parcoursmob.fr</a></b>, par exemple pour nous envoyer des copies d'écran du problème que vous rencontrez.
         </p>
         <form action="" method="POST">
 

web/layouts/vehicles/search.html

@@ -37,11 +37,10 @@
                             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">
                         <label for="combobox" class="block text-sm font-medium text-gray-700">Bénéficiaire</label>
@@ -105,7 +104,37 @@
                             </div>
                             
                         </div>
-                        {{template "vehicle_type_select" .}}
+                        <div class="py-4"
+                          x-data="{
+                            type: {{if .ViewState.searched}}'{{.ViewState.search.selected_type}}'{{else}}null{{end}},
+
+                            displayAutomatic(type) {
+                              return type == 'Voiture'
+                            }
+                          }">
+                          <label for="type" class="block text-sm font-medium text-gray-700">Type de véhicule</label>
+                            <select id="type" name="type" 
+                                x-model="type"
+                                class="max-w-lg mt-1 block focus:ring-co-blue focus:border-co-blue w-full shadow-sm sm:max-w-xs sm:text-sm rounded-2xl border-gray-300">
+                                <option value=""></option>
+                                {{range .ViewState.vehicles_types}}
+                                <option value="{{.}}"{{ if eq $.ViewState.search.selected_type . }} selected{{end}}>{{.}}</option>
+                                {{end}}
+                            </select>
+                            <div class="m-4" x-show="displayAutomatic(type)">
+                                <legend class="sr-only">Automatique</legend>
+                                <div class="relative flex items-start">
+                                    <div class="flex h-5 items-center">
+                                    <input {{if .ViewState.search.automatic }} checked{{end}}
+                                      id="automatic" aria-describedby="automatic-description" name="automatic" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-co-blue focus:ring-co-blue">
+                                    </div>
+                                    <div class="ml-3 text-sm">
+                                    <label for="automatic" class="font-medium text-gray-700">Automatique</label>
+                                    <p id="automatic-description" class="text-gray-500">Rechercher uniquement un véhicule à boite automatique.</p>
+                                    </div>
+                                </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">
@@ -137,9 +166,17 @@
                           <tbody class="divide-y divide-gray-200">
                             {{range .ViewState.search.vehicles}}
                             <tr>
-                              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 md:pl-0">{{.Data.name}}</td>
+                              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 md:pl-0">
+                                <div class="font-medium text-gray-900">{{.Data.name}}</div>
+                                <div class="text-gray-500">
+                                  {{.Type}}
+                                  {{if eq .Type "Voiture"}}
+                                  {{ if .Data.automatic}} (boite auto){{ end }}
+                                  {{end}}
+                                </div>
+                              </td>
                               <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">{{.Data.licence_plate}}</td>
-                              <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">COOPGO</td>
+                              <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">{{(index $.ViewState.search.admingroups (index .Administrators 0)).Data.name}}</td>
                               <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">{{if .Data.address}}{{.Data.address.properties.label}}{{end}}</td>
                               <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 md:pr-0"
                                 x-data="{
@@ -149,38 +186,14 @@
                                 <a href="#" @click="documentsdialog = !documentsdialog" class="text-co-blue hover:text-co-blue">Réserver<span class="sr-only"> pour {{$.ViewState.search.beneficiary.Data.first_name}} {{$.ViewState.search.beneficiary.Data.last_name}}</span></a>
                                 <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true"
                                 x-show="documentsdialog">
-                                  <!--
-                                    Background backdrop, show/hide based on modal state.
-                                
-                                    Entering: "ease-out duration-300"
-                                      From: "opacity-0"
-                                      To: "opacity-100"
-                                    Leaving: "ease-in duration-200"
-                                      From: "opacity-100"
-                                      To: "opacity-0"
-                                  -->
                                   <div class="fixed inset-0 bg-gray-900 bg-opacity-30 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">
-                                      <!--
-                                        Modal panel, show/hide based on modal state.
-                                
-                                        Entering: "ease-out duration-300"
-                                          From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                                          To: "opacity-100 translate-y-0 sm:scale-100"
-                                        Leaving: "ease-in duration-200"
-                                          From: "opacity-100 translate-y-0 sm:scale-100"
-                                          To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                                      -->
                                       <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 sm:max-w-sm sm:p-6">
                                         <div>
                                           <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-co bg-co-blue">
-                                            <!-- Heroicon name: outline/check -->
                                             {{$.IconSet.Icon "hero:outline/folder-plus" "h-6 w-6 text-white"}}
-                                            <!-- <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-                                              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-                                            </svg> -->
                                           </div>
                                           <div class="mt-3 text-center sm:mt-5">
                                             <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Documents demandés</h3>

web/layouts/vehicles_management/_partials/bookings-list.html

@@ -23,6 +23,9 @@
                                 <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>
@@ -32,6 +35,11 @@
                             {{range .ViewState.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>
+                                    {{else}}
                                         {{if eq .Status 1 }}
                                         <span class="p-1 bg-co-blue text-white text-xs font-bold rounded-xl" >
                                             A venir
@@ -47,6 +55,7 @@
                                             Terminé
                                         </span>
                                         {{end}}
+                                    {{end}}
                                 </td>
                                 <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                                     <div class="text-gray-900" >{{ (index $.ViewState.vehicles_map .Vehicleid).Type }}</div>
@@ -55,11 +64,22 @@
                                     <div class="text-gray-900" >{{ (index $.ViewState.vehicles_map .Vehicleid).Data.licence_plate }}</div>
                                 </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" ><img class="h-6 w-6 rounded-co"
                                         src="/app/beneficiaries/{{.Driver}}/picture" alt=""></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}}"

web/layouts/vehicles_management/_partials/vehicles-list.html

@@ -32,7 +32,12 @@
                                     <div class="text-gray-900" >{{.Data.licence_plate}}</div>
                                 </td>
                                 <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
-                                    <div class="text-gray-900" >{{if eq .Type "electric_bike"}}Vélo électrique{{else}}Voiture{{end}}</div>
+                                    <div class="text-gray-900" >
+                                        {{.Type}}
+                                        {{if eq .Type "Voiture"}}
+                                        {{ if .Data.automatic}} (boite auto){{ end }}
+                                        {{end}}
+                                    </div>
                                 </td>
                                 <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                                     <div class="text-gray-900" >{{.Data.name}}</div>

web/layouts/vehicles_management/booking-display.html

@@ -81,10 +81,10 @@
                             <p class="mt-1 text-sm text-gray-500">Informations utiles sur la réservation.</p>
                         </div>
                         <div class="ml-4 mt-4 flex-shrink-0">
-                            <button type="button"
+                            <!-- <button type="button"
                                 class="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-xs font-medium rounded-2xl text-co-blue bg-gray-100 hover:bg-co-blue hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">SMS</button>
                             <button type="button"
-                                class="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-xs font-medium rounded-2xl text-co-blue bg-gray-100 hover:bg-co-blue hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Email</button>
+                                class="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-xs font-medium rounded-2xl text-co-blue bg-gray-100 hover:bg-co-blue hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Email</button> -->
                             <!-- <button type="button"
                                 class="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-xs font-medium rounded-2xl text-co-blue bg-gray-100 hover:bg-co-blue hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Imprimer</button> -->
                         </div>

web/layouts/vehicles_management/fleet-add.html

@@ -9,16 +9,19 @@
         fields: {
             licence_plate: null,
             name: null,
+            type: null,
         },
         rules: {
-            licence_plate: ['required', 'regexMatch:^[A-Z]{1,2}-[0-9]{1,3}-[A-Z]{1,2}$'],
+            licence_plate: ['required'], // 'regexMatch:^[A-Z]{1,2}-[0-9]{1,3}-[A-Z]{1,2}$'
             name: ['required'],
+            type: ['required'],
         },
         formValidation: {
             valid: false,
             fields: {
                 name: {valid: null},
                 licence_plate: {valid: null},
+                type: {valid: null},
             }
         },
         isFormValid: true,
@@ -35,6 +38,10 @@
                 event.preventDefault()
             }
             return this.formValidation.valid
+        },
+
+        displayAutomatic(type) {
+            return type == 'Voiture'
         }
     }">
     <form class="space-y-6" method="POST" @submit="submit">
@@ -47,19 +54,40 @@
                 <div class="mt-5 md:mt-0 md:col-span-2">
                     <div class="grid grid-cols-3 md:grid-cols-6 gap-6">
                         <div class="col-span-5">
-                            <label for="name" class="block text-sm font-medium text-gray-700">Modèle (ou nom donné au
+                            <label for="name" class="block text-sm font-medium text-gray-700">Modèle (ou nom donné au véhicule)</label>
-                                véhicule)</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-3">
-                            {{template "vehicle_type_select" .}}
+                            <label for="type" class="block text-sm font-medium text-gray-700">Type de véhicule</label>
+                            <select id="type" name="type" 
+                                x-model="fields.type" @blur="validateField('type')"
+                                class="max-w-lg mt-1 block focus:ring-co-blue focus:border-co-blue w-full shadow-sm sm:max-w-xs sm:text-sm rounded-2xl"
+                                :class="formValidation.fields.type.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
+                                <option value="" selected></option>
+                                {{range .ViewState.vehicle_types}}
+                                <option value="{{.}}">{{.}}</option>
+                                {{end}}
+                            </select>
+                            <div class="m-4" x-show="displayAutomatic(fields.type)">
+                                <legend class="sr-only">Automatique</legend>
+                                <div class="relative flex items-start">
+                                    <div class="flex h-5 items-center">
+                                    <input id="automatic" aria-describedby="automatic-description" name="automatic" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-co-blue focus:ring-co-blue">
                                     </div>
+                                    <div class="ml-3 text-sm">
+                                    <label for="automatic" class="font-medium text-gray-700">Automatique</label>
+                                    <p id="automatic-description" class="text-gray-500">Ce véhicule a une boite automatique.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
                         <div class="col-span-3">
                             <label for="licence_plate"
-                                class="block text-sm font-medium text-gray-700">Immatriculation</label>
+                                class="block text-sm font-medium text-gray-700">Numéro (Immat, Bicycode, ...)</label>
                             <input type="text" name="licence_plate" id="licence_plate" placeholder="XX-123-YY"
                                 class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm  rounded-2xl"
                                 x-model="fields.licence_plate"
@@ -81,7 +109,7 @@
                     {{ template "address_autocomplete" dict "FieldName" $fieldName }}
 
                     <div class="mt-5">
-                        <label for="informations" class="block text-sm font-medium text-gray-700">Informations pratiques pour le bénéficiaire</label>
+                        <label for="informations" class="block text-sm font-medium text-gray-700">Informations pratiques</label>
                         <div class="mt-1">
                             <textarea rows="4" name="informations" id="informations"
                                 class="shadow-sm focus:ring-co-blue focus:border-co-blue block w-full sm:text-sm border-gray-300 rounded-2xl"></textarea>

web/layouts/vehicles_management/fleet-display.html

@@ -1,5 +1,6 @@
 {{define "content"}}
-<main class="py-10">
+<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">
@@ -12,12 +13,11 @@
                     <h1 class="text-2xl font-bold text-gray-900">{{.ViewState.vehicle.Data.name}}</h1>
                 </div>
             </div>
-        <div
+            <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">
-            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">
+                <button type="button" @click="dialog = !dialog"
-            <button type="button"
                     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>
-            <a href="/app/vehicles-management/fleet/{{.ViewState.vehicle.ID}}/update" class="inline-flex"><button type="button"
+                <!-- <a href="/app/vehicles-management/fleet/{{.ViewState.vehicle.ID}}/update" class="inline-flex"><button type="button"
-                    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>
+                        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> -->
             </div>
         </div>
         <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">
@@ -30,17 +30,24 @@
                         </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.Data.type}}
+                                {{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">{{if eq .ViewState.vehicle.Data.type "electric_bike"}}Vélo électrique{{else}}Voiture{{end}}</dd>
+                                    <dd class="mt-1 text-sm text-gray-900">{{.ViewState.vehicle.Type}}</dd>
                                 </div>
-                            {{else}}
+                                {{if eq .ViewState.vehicle.Type "Voiture"}}
                                 <div class="sm:col-span-1">
-                                <dt class="text-sm font-medium text-gray-500">Type</dt>
+                                    <dt class="text-sm font-medium text-gray-500">Automatique</dt>
-                                <dd class="mt-1 text-sm text-gray-900">Voiture</dd>
+                                    <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>
@@ -63,6 +70,93 @@
                         </div>
                     </div>
                 </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>
+                                                    {{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>
+                            </div>
+                        </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">
@@ -82,9 +176,62 @@
                         </li>
                         {{end}}
                     </ul>
-                {{template "calendar" .}}
                 </div>
             </section>
         </div>
-</main>
+    </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>
+                            </div>
+                            <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>
+                            </div>
+                            
+                        </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>
+                            </div>
+                          </div>
+                    </div>
+                </div>
+                <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>
+            </div>
+        </form>
+    </div>
+</div>
 {{end}}

web/public/css/main.css

@@ -1149,10 +1149,6 @@ html {
   width: 0px;
 }
 
-.w-20 {
-  width: 5rem;
-}
-
 .min-w-full {
   min-width: 100%;
 }
@@ -1181,14 +1177,6 @@ html {
   max-width: 32rem;
 }
 
-.max-w-sm {
-  max-width: 24rem;
-}
-
-.max-w-full {
-  max-width: 100%;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1687,6 +1675,16 @@ html {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -2049,6 +2047,11 @@ html {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
 .placeholder-gray-500::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(107 114 128 / var(--tw-placeholder-opacity));
@@ -2303,6 +2306,11 @@ html {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-indigo-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-opacity-5:hover {
   --tw-bg-opacity: 0.05;
 }
@@ -2486,6 +2494,14 @@ html {
     grid-column: span 4 / span 4;
   }
 
+  .sm\:col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .sm\:col-start-1 {
+    grid-column-start: 1;
+  }
+
   .sm\:-mx-6 {
     margin-left: -1.5rem;
     margin-right: -1.5rem;
@@ -2557,6 +2573,10 @@ html {
     max-width: 24rem;
   }
 
+  .sm\:max-w-lg {
+    max-width: 32rem;
+  }
+
   .sm\:flex-auto {
     flex: 1 1 auto;
   }
@@ -2586,6 +2606,10 @@ html {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
+  .sm\:grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2622,6 +2646,10 @@ html {
     gap: 1rem;
   }
 
+  .sm\:gap-3 {
+    gap: 0.75rem;
+  }
+
   .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));