change sms

config.yaml

@@ -269,13 +269,26 @@ views:
         - web/layouts/solidarity_transport/driver_display.html
     driver_journey:
       files:
+        - web/layouts/solidarity_transport/_partials/journey_map.html
+        - sms/solidarity_transport/request_driver.tmpl
+        - web/layouts/_partials/submit_with_sms.html
         - web/layouts/solidarity_transport/_partials/journey_preview.html
         - web/layouts/solidarity_transport/driver_journey.html
     booking_display:
       files:
+        - web/layouts/solidarity_transport/_partials/journey_map.html
         - web/layouts/solidarity_transport/_partials/journey_preview.html
         - web/layouts/solidarity_transport/booking_display.html
 
+    ext:
+      booking_proposal:
+        files:
+          - sms/solidarity_transport/driver_accept.tmpl
+          - web/layouts/_partials/submit_with_sms.html
+          - web/layouts/solidarity_transport/_partials/journey_map.html
+          - web/layouts/solidarity_transport/_partials/journey_preview.html
+          - web/layouts/solidarity_transport/ext/booking_proposal.html
+
   organized_carpool:
     overview:
       files:
@@ -367,6 +380,7 @@ icons:
     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-airplane: <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="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" /></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>
     hero:outline/plus-circle: <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="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
     hero:outline/shield-check: <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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
@@ -381,6 +395,7 @@ icons:
     tabler-icons:car: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-car %s" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="7" cy="17" r="2"></circle><circle cx="17" cy="17" r="2"></circle><path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5"></path></svg>
     tabler-icons:walk: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-walk %s" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="13" cy="4" r="1" /><line x1="7" y1="21" x2="10" y2="17" /><path d="M16 21l-2 -4l-3 -3l1 -6" /><path d="M6 12l2 -3l4 -1l3 3l3 1" /></svg>
     tabler-icons:bus: <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bus %s" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="6" cy="17" r="2" /><circle cx="18" cy="17" r="2" /><path d="M4 17h-2v-11a1 1 0 0 1 1 -1h14a5 7 0 0 1 5 7v5h-2m-4 0h-8" /><polyline points="16 5 17.5 12 22 12" /><line x1="2" y1="10" x2="17" y2="10" /><line x1="7" y1="5" x2="7" y2="10" /><line x1="12" y1="5" x2="12" y2="10" /></svg>
+    tabler-icons:train: <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-train %s"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 13c0 -3.87 -3.37 -7 -10 -7h-8" /><path d="M3 15h16a2 2 0 0 0 2 -2" /><path d="M3 6v5h17.5" /><path d="M3 11v4" /><path d="M8 11v-5" /><path d="M13 11v-4.5" /><path d="M3 19h18" /></svg>
 
 emails:
   onboarding:
@@ -429,6 +444,17 @@ emails:
       files:
         - emails/layout.html
         - emails/onboarding/delete-subscriber.html
+  solidarity_transport:
+    boking_driver_accept:
+      subject: Trajet accepté par un conducteur
+      files:
+        - emails/layout.html
+        - emails/solidarity_transport/booking_driver_accept.html
+    boking_driver_decline:
+      subject: Trajet accepté par un conducteur
+      files:
+        - emails/layout.html
+        - emails/solidarity_transport/booking_driver_accept.html
 
 sms:
   solidarity_transport:

emails/auth/retrieve-password.html

@@ -1,5 +1,5 @@
 {{define "content"}}
 <p>Bonjour,</p>
 <p>Vous avez demandé à réinitialiser votre mot de passe pour <b>{{.username}}</b></p>
-<p>Pour créer votre nouveau mot de passe, cliquez sur le lien suivant : <a href="http://localhost:9000/auth/lost-password/recover?key={{.key}}">http://localhost:9000/auth/lost-password/recover?key={{.key}}</a></p>
+<p>Pour créer votre nouveau mot de passe, cliquez sur le lien suivant : <a href="{{ .baseUrl }}/auth/lost-password/recover?key={{.key}}">{{ .baseUrl }}/auth/lost-password/recover?key={{.key}}</a></p>
-{{end}}
+{{end}}

emails/solidarity_transport/booking_driver_accept.html

@@ -0,0 +1,5 @@
+{{define "content"}}
+<p>Bonjour,</p>
+<p>Trajet accepté par un conducteur.</p>
+<p>Voir le trajet : <a href="{{ .baseUrl }}/solidarity-transport/bookings/{{.bookingid}}">{{ .baseUrl }}/solidarity-transport/bookings/{{.bookingid}}</a></p>
+{{end}}

emails/solidarity_transport/booking_driver_decline.html

@@ -0,0 +1,5 @@
+{{define "content"}}
+<p>Bonjour,</p>
+<p>Trajet refusé par un conducteur.</p>
+<p>Voir le trajet : <a href="{{ .baseUrl }}/solidarity-transport/bookings/{{.bookingid}}">{{ .baseUrl }}/solidarity-transport/bookings/{{.bookingid}}</a></p>
+{{end}}

sms/solidarity_transport/driver_accept.tmpl

@@ -0,0 +1 @@
+{{ define "sms_template" }}[{{ .name }}] Un conducteur solidaire vient d'accepter votre trajet vers {{.address}} le {{.date}}. Son numéro : {{.phone_number}}.{{ end }}

sms/solidarity_transport/request_driver.tmpl

@@ -0,0 +1,2 @@
+{{ define "sms_template" }}[{{ .name }}] Nouvelle demande de trajet solidaire{{ .datetime }}. 
+Acceptez ou refusez sur {{ .baseUrl }}/ext/st/bp/{booking_id}{{ end }}

web/layouts/_partials/submit_with_sms.html

@@ -0,0 +1,45 @@
+{{ define "submit_with_sms" }}
+{{ $dialog := (or .ComponentState.dialogVar "dialog") }}
+{{ $fieldName := (or .ComponentState.fieldName "message") }}
+{{ $submitText := (or .ComponentState.submitText "Valider") }}
+{{ $headerText := (or .ComponentState.headerText "Envoyer un message") }}
+{{ $cancelText := (or .ComponentState.cancelText "Annuler" )}}
+{{ $validateText := (or .ComponentState.validateText "Envoyer" )}}
+{{ $infoText := (or .ComponentState.infoText "Le message suivant sera envoyé. Vous pouvez le personnaliser." )}}
+<div  x-data="{ {{ $dialog }}: false}" class="text-center">
+  <button @click="{{ $dialog }} = !{{ $dialog }}" type="button" class="bg-co-blue  border-gray-300 border px-4 py-2 text-white items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
+    {{ .ComponentState.submitText }}
+  </button>
+  <div x-show="{{$dialog}}" class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+     <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/paper-airplane" "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">{{ $headerText }}</h3>
+               <div class="mt-2">
+                 <p class="text-sm text-gray-500"></p>
+               </div>
+               <div>
+                 <label for="message" class="block text-sm font-medium text-gray-700">{{$infoText}}</label>
+                 <div class="mt-1">
+                   <textarea rows="4" name="message" id="message" class="block w-full rounded-2xl border-gray-300 shadow-sm focus:border-co-blue focus:ring-co-blue sm:text-sm">{{template "sms_template" .SMSState }}</textarea>
+                 </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">{{ $cancelText }}</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">{{ $validateText }}</button>
+             </div>
+           </div>
+         </div>
+       </div>
+     </div>
+</div>
+{{ end }}

web/layouts/agenda/_partials/address.html

@@ -22,7 +22,7 @@
             this.responselength = 0
             this.address = this.def
             this.input = `{{ .Default.properties.label}}`
-            result = await fetch('https://geocode.ridygo.fr/v1/autocomplete/\?text=' + this.input)
+            result = await fetch('https://api-adresse.data.gouv.fr/search/?q=' + this.input)
             json = await result.json()
 
             bb = json['features'][0]
@@ -33,7 +33,7 @@
                 return [bb]
         }
         
-            result = await fetch('https://geocode.ridygo.fr/v1/autocomplete/\?text=' + this.input)
+            result = await fetch('https://api-adresse.data.gouv.fr/search/?q=' + this.input)
             json = await result.json()
 
         this.responselength = json['features'].length
@@ -64,4 +64,4 @@
         </template>
     </ul>
 </div>
-{{ end }}
+{{ end }}

web/layouts/beneficiaries/update.html

@@ -15,6 +15,13 @@
             file_number: '{{ .ViewState.Data.file_number }}',
             gender: {{.ViewState.Data.gender}}
         },
+        other_properties: {
+          situation: '{{.ViewState.Data.other_properties.situation}}',
+          subscription_reason: '{{.ViewState.Data.other_properties.subscription_reason}}',
+          status: '{{.ViewState.Data.other_properties.status}}',
+          comment: '{{.ViewState.Data.other_properties.comment}}'
+        },
+        other_properties_serialized: null,
         rules: {
             first_name: ['required'],
             last_name: ['required'],
@@ -151,7 +158,7 @@
                         <div class="col-span-6 sm:col-span-3">
                             <label for="situation" class="block text-sm font-medium text-gray-700">Motif d'inscription</label>
                             <div class="sm:mt-0 sm:col-span-2">
-                                <select id="situation" name="situation" autocomplete="situation" x-model="other_properties.subscription_reason"
+                                <select id="subscription_reason" name="subscription_reason" autocomplete="subscription_reason" x-model="other_properties.subscription_reason"
                                     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 border-gray-300 rounded-2xl">
                                     <option value="Autre">Inconnu</option>
                                     <option value="Pas de permis">Pas de permis</option>

web/layouts/journeys/_partials/journeys-all.html

@@ -21,18 +21,18 @@
     <div class="px-4 pt-4 flex text-sm text-grey-900 font-bold">
         <div class="flex-1">
             {{.IconSet.Icon "tabler-icons:bus" "h-6 w-6 inline-flex mr-4"}}
-            {{( timeFrom $itinerary.StartTime).Format "15:04"}} - {{(timeFrom $itinerary.EndTime).Format "15:04"}}
+            {{$itinerary.StartTime.Format "15:04"}} - {{$itinerary.EndTime.Format "15:04"}}
             ({{divideInt $itinerary.Duration 60}} Minutes)
         </div>
         <div></div>
     </div>
     <div class="p-4 pb-8 flex">
         {{range $itinerary.Legs }}
-        {{if eq .Mode "BUS"}}
+        {{if or (or (eq .Mode "BUS") (eq .Mode "REGIONAL_FAST_RAIL")) (eq .Mode "REGIONAL_RAIL") }}
-        <span class="ml-2 px-2 py-1 text-sm text-gray-500 whitespace-nowrap">
+        <!--<span class="ml-2 px-2 py-1 text-sm text-gray-500 whitespace-nowrap">
         {{.AgencyName}} 
-        </span>
+        </span>-->
-        <span class="ml-2 rounded-xl px-2 py-1 flex items-center justify-center ring-8 ring-white text-sm whitespace-nowrap" style="background-color: #{{.RouteColor}}">
+    <span class="ml-2 rounded-xl px-2 py-1 flex items-center justify-center ring-8 ring-white text-sm whitespace-nowrap" style="background-color: #{{.RouteColor}}; color: #{{.RouteTextColor}}">
             {{.RouteShortName}}
         </span>
         {{end}}

web/layouts/journeys/_partials/journeys-public-transit-motis.html

@@ -2,15 +2,15 @@
 {{ range .ViewState.journeys }}
 <div class="p-4 pb-8">
     <div class="flex text-md text-grey-900 font-bold">
-        <div class="flex-1">{{ (timeFrom .StartTime).Format "15:04" }} - {{ (timeFrom .EndTime).Format "15:04" }}</div>
+        <div class="flex-1">{{ .StartTime.Format "15:04" }} - {{ .EndTime.Format "15:04" }}</div>
         <div>{{ divideInt .Duration 60 }} Minutes</div>
     </div>
     <div class="flow-root">
-
         <ul role="list" class="-mb-8">
             {{$firstwalk := true}}
             {{range .Legs}}
             {{if eq .Mode "WALK" }}
+            {{if .Distance}}
             <li>
                 <div class="relative py-4">
                     {{if $firstwalk}}
@@ -24,21 +24,28 @@
                           </span>
                         </div>
                         <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                          {{if .Distance}}
                           <div>
                             <p class="text-xs text-gray-500">Marcher  <a href="#" class="font-medium text-gray-900">{{ .Distance }}m</a></p>
                           </div>
+                          {{ else }}
+                          <div>
+                            <p class="text-xs text-gray-500">Attendre  <a href="#" class="font-medium text-gray-900">{{ divideInt .Duration 60 }} minutes</a></p>
+                          </div>
+                          {{ end }}
                         </div>
                       </div>
                 </div>
             </li>
             {{end}}
+            {{end}}
             {{if eq .Mode "BUS"}}
             <li>
                 <div class="relative py-4">
                     <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                     <div class="relative flex space-x-3">
                         <div>
-              <span class="h-8 w-8 rounded-co bg-co-blue flex items-center justify-center ring-8 ring-white" style="background-color: #{{.RouteColor}}">
+              <span class="h-8 w-8 rounded-co bg-co-blue flex items-center justify-center ring-8 ring-white" style="background-color: #{{.RouteColor}}; color: #{{.RouteTextColor}}">
                             {{$.IconSet.Icon "tabler-icons:bus" "h-5 w-5 stroke-white"}}
                           </span>
                         </div>
@@ -62,6 +69,36 @@
                 </div>
             </li>
             {{end}}
+            {{if or (eq .Mode "REGIONAL_FAST_RAIL") (eq .Mode "REGIONAL_RAIL") }}
+            <li>
+                <div class="relative py-4">
+                    <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
+                    <div class="relative flex space-x-3">
+                        <div>
+              <span class="h-8 w-8 rounded-co bg-co-blue flex items-center justify-center ring-8 ring-white" style="background-color: #{{.RouteColor}}; color: #{{.RouteTextColor}}">
+                            {{$.IconSet.Icon "tabler-icons:train" "h-5 w-5 stroke-white"}}
+                          </span>
+                        </div>
+                        <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
+                            <div>
+                              <p class="text-md text-gray-500">{{.AgencyName}} <a href="#" class="font-medium text-gray-900">TER {{.RouteShortName}}</a></p>
+                            </div>
+                        </div>
+                      </div>
+                      <div class="ml-16 pt-2">
+                        <div>
+                            <p class="text-sm text-gray-500">Départ <a href="#" class="font-medium text-gray-900">{{.StartTime.Format "15:04"}}</a> - Arrivée <a href="#" class="font-medium text-gray-900">{{.EndTime.Format "15:04"}}</a></p>
+                          </div>
+                          <div>
+                            <p class="text-sm text-gray-500">De <a href="#" class="font-medium text-gray-900">{{.From.Name}}</a> à <a href="#" class="font-medium text-gray-900">{{.To.Name}}</a></p>
+                          </div>
+                          <div>
+                            <p class="text-sm text-gray-500">Direction <a href="#" class="font-medium text-gray-900">{{.Headsign}}</a></p>
+                          </div>
+                      </div>
+                </div>
+            </li>
+            {{end}}
             {{end}}
         </ul>
     </div>

web/layouts/solidarity_transport/_partials/journey_map.html

@@ -0,0 +1,89 @@
+{{ define "journey_map" }}
+<div id="map" class="w-full h-full"></div>
+<script>
+  let protocol = new pmtiles.Protocol();
+  maplibregl.addProtocol("pmtiles",protocol.tile);
+  var map = new maplibregl.Map({
+    container: 'map', // container id
+    style: "/public/maps/protomaps-light/style.json",
+  });
+
+  const geojsonPoints = {
+    "type": "FeatureCollection",
+    "features": [
+      {{ json .driver_journey.DriverDeparture }},
+      {{ json .driver_journey.PassengerPickup }},
+      {{ json .driver_journey.PassengerDrop }},
+      {{ json .driver_journey.DriverArrival }}
+    ]
+  }
+  const driverGeojsonPoints = {
+    "type": "FeatureCollection",
+    "features": [
+      {{ json .driver_journey.DriverDeparture }},
+      {{ json .driver_journey.DriverArrival }}
+    ]
+  }
+  const passengerGeojsonPoints = {
+    "type": "FeatureCollection",
+    "features": [
+      {{ json .driver_journey.PassengerPickup }},
+      {{ json .driver_journey.PassengerDrop }},
+    ]
+  }
+
+
+  map.on('load', async () => {
+    {{if .driver_journey.JourneyPolyline}}
+    var linestring = polyline.toGeoJSON('{{.driver_journey.JourneyPolyline}}');
+    map.addSource('trip', {
+      type: "geojson",
+      data: linestring
+    })
+    map.addLayer({
+      'id': 'trip',
+      'type': 'line',
+      'source': 'trip',
+      'layout': {
+        'line-join': 'round',
+        'line-cap': 'round',
+      },
+      'paint': {
+        'line-color': '#243887',
+        'line-width': 3
+      },
+    });
+    {{end}}
+
+    map.addSource('driver_points', {
+      type: "geojson",
+      data: driverGeojsonPoints
+    })
+    map.addLayer({
+      'id': 'driver_points',
+      'type': 'circle',
+      'source': 'driver_points',
+      'paint': {
+        'circle-color': '#000'
+      },
+    });
+    map.addSource('passenger_points', {
+      type: "geojson",
+      data: passengerGeojsonPoints
+    })
+    map.addLayer({
+      'id': 'passenger_points',
+      'type': 'circle',
+      'source': 'passenger_points',
+      'paint': {
+        'circle-color': '#243887',
+        'circle-radius': 8
+      },
+    });
+    var bbox=turf.bbox(geojsonPoints)
+
+    map.fitBounds(bbox, { padding: 50 })
+  })
+</script>
+ 
+{{ end }}

web/layouts/solidarity_transport/_partials/journey_preview.html

@@ -52,92 +52,9 @@
                         </dl>
                     </div>
   <div>
-        <div id="map" class="w-full h-full"></div>
+      {{ template "journey_map" . }}
-<script>
-  let protocol = new pmtiles.Protocol();
-  maplibregl.addProtocol("pmtiles",protocol.tile);
-  var map = new maplibregl.Map({
-    container: 'map', // container id
-    style: "/public/maps/protomaps-light/style.json",
-  });
 
-  const geojsonPoints = {
+  </div>
-    "type": "FeatureCollection",
-    "features": [
-      {{ json .driver_journey.DriverDeparture }},
-      {{ json .driver_journey.PassengerPickup }},
-      {{ json .driver_journey.PassengerDrop }},
-      {{ json .driver_journey.DriverArrival }}
-    ]
-  }
-  const driverGeojsonPoints = {
-    "type": "FeatureCollection",
-    "features": [
-      {{ json .driver_journey.DriverDeparture }},
-      {{ json .driver_journey.DriverArrival }}
-    ]
-  }
-  const passengerGeojsonPoints = {
-    "type": "FeatureCollection",
-    "features": [
-      {{ json .driver_journey.PassengerPickup }},
-      {{ json .driver_journey.PassengerDrop }},
-    ]
-  }
-
-
-  map.on('load', async () => {
-    {{if .driver_journey.JourneyPolyline}}
-    var linestring = polyline.toGeoJSON('{{.driver_journey.JourneyPolyline}}');
-    map.addSource('trip', {
-      type: "geojson",
-      data: linestring
-    })
-    map.addLayer({
-      'id': 'trip',
-      'type': 'line',
-      'source': 'trip',
-      'layout': {
-        'line-join': 'round',
-        'line-cap': 'round',
-      },
-      'paint': {
-        'line-color': '#243887',
-        'line-width': 3
-      },
-    });
-    {{end}}
-
-    map.addSource('driver_points', {
-      type: "geojson",
-      data: driverGeojsonPoints
-    })
-    map.addLayer({
-      'id': 'driver_points',
-      'type': 'circle',
-      'source': 'driver_points',
-      'paint': {
-        'circle-color': '#000'
-      },
-    });
-    map.addSource('passenger_points', {
-      type: "geojson",
-      data: passengerGeojsonPoints
-    })
-    map.addLayer({
-      'id': 'passenger_points',
-      'type': 'circle',
-      'source': 'passenger_points',
-      'paint': {
-        'circle-color': '#243887',
-        'circle-radius': 8
-      },
-    });
-    var bbox=turf.bbox(geojsonPoints)
-    map.fitBounds(bbox, { padding: 100 })
-  })
-</script>
-                    </div>
       </div>
     </div>
   <div class="py-4 grid grid-cols-1 gap-6 sm:grid-cols-2">

web/layouts/solidarity_transport/driver_journey.html

@@ -6,12 +6,22 @@
 <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 md:px-8">
   {{template "journey_preview" (dict "driver_journey" .ViewState.driver_journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries)}}
           {{if ne .ViewState.passenger.ID ""}}
-<div class="max-w-7xl m-auto px-4 sm:px-6 md:px-8 flex justify-items-center">
+<div class="max-w-7xl m-auto px-4 sm:px-6 md:px-8 flex flex-col justify-items-center">
+  {{if .ViewState.passenger}}
+  {{$wallet := (or .ViewState.passenger.Data.wallet 0.0)}}
+  {{if lt $wallet .ViewState.driver_journey.Price.Amount}}
+    <p class="text-xl text-co-red text-center p-4">Le solde du compte mobilité est insuffisant.</p>
+    {{end}}
   <form method="POST">
-    <button class="w-100 bg-co-blue  border-gray-300 border px-4 py-2 text-white items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">
+    {{template "submit_with_sms" 
-      Envoyer la mise en relation
+      dict  "IconSet" .IconSet 
-    </button>
+            "Viewstate" .ViewState 
+            "ComponentState" (dict "submitText" 
+                                   "Envoyer la mise en relation") 
+            "SMSState" (dict "name" (.ViewState.config.GetString "service_name") 
+                             "baseUrl" (.ViewState.config.GetString "base_url") )}}
   </form>
+    {{end}}
 </div>
 {{end}}
 

web/layouts/solidarity_transport/ext/booking_proposal.html

@@ -0,0 +1,94 @@
+
+{{define "main"}}
+<html class="h-full bg-gray-50">
+    <head>
+        <title>PARCOURSMOB</title>
+        <link rel="stylesheet" href="/public/css/main.css" />
+  <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/maplibre-gl@^5.2.0/dist/maplibre-gl.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/@kingshott/iodine@8.1.0/dist/iodine.min.umd.js" defer></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@^5.2.0/dist/maplibre-gl.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/pmtiles@^4.3.0/dist/pmtiles.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@protomaps/basemaps@5/dist/basemaps.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/polyline@0.2.0/src/polyline.js"></script>
+  <!--<script defer type="text/javascript" src="/public/js/main.js" defer></script>-->
+    </head>
+    <body class="h-full">
+      <div class="flex flex-col justify-center py-12">
+            <div class="">
+              <h2 class="m-4 mt-6 text-center text-3xl font-extrabold text-gray-900">Demande de trajet solidaire</h2>
+              <p class="m-4 text-center">
+              {{if eq .ViewState.booking.Status "WAITING_CONFIRMATION"}}
+                Vous avez une nouvelle demande de trajet
+              {{else if eq .ViewState.booking.Status "VALIDATED"}}
+                Demande déjà validée 
+              {{else if eq .ViewState.booking.Status "CANCELLED"}}
+                Trajet annulé
+              {{end}}
+              </p>
+      </div>
+      <div class="h-50 w-full">
+  {{template "journey_map" (dict "driver_journey" .ViewState.booking.Journey "driver" .ViewState.driver "passenger" .ViewState.passenger "beneficiaries" .ViewState.beneficiaries)}}
+      </div>
+       <div class="grid grid-cols-1">
+                    <div class="p-4 py-5 sm:px-6">
+                        <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
+                            <div class="sm:col-span-1">
+                                <dt class="font-medium text-gray-500">Départ passager</dt>
+                                <dd class="mt-1 text-gray-900">{{.ViewState.booking.Journey.PassengerPickup.Properties.label}}</dd>
+                            </div>
+                            <div class="sm:col-span-1">
+                                <dt class="font-medium text-gray-500">Destination passager</dt>
+                                <dd class="mt-1 text-gray-900">{{.ViewState.booking.Journey.PassengerDrop.Properties.label}}</dd>
+                            </div>
+                            <div class="sm:col-span-1">
+                                <dt class="font-medium text-gray-500">Kilomètres passager</dt>
+                                <dd class="mt-1 text-gray-900">{{.ViewState.booking.Journey.PassengerDistance}} km</dd>
+                            </div>
+                            <div class="sm:col-span-1">
+                                <dt class="font-medium text-gray-500">Kilomètres conducteur</dt>
+                                <dd class="mt-1 text-gray-900">{{.ViewState.booking.Journey.DriverDistance}} km</dd>
+                            </div>
+                            <div class="sm:col-span-1">
+                                <dt class="font-medium text-gray-500">Horaire rendez vous passager</dt>
+                                <dd class="mt-1 text-gray-900">{{ .ViewState.booking.Journey.PassengerPickupDate.Format "02/01/2006 15:04"}}</dd>
+                            </div>
+                            <div class="sm:col-span-1">
+                                <dt class="font-medium text-gray-500">Temps de trajet</dt>
+                                <dd class="mt-1 text-gray-900">{{ printf "%.0f" .ViewState.booking.Journey.Duration.Minutes }} min</dd>
+                            </div>
+                        </dl>
+                    </div>
+  <div>
+          </div>
+          <div class="flex flex-col justify-center m-4 sm:flex-row">
+              {{if eq .ViewState.booking.Status "WAITING_CONFIRMATION"}}
+          <form method="POST">
+              <input type="hidden" name="action" value="confirm" />
+    {{template "submit_with_sms" 
+      dict  "IconSet" .IconSet 
+            "Viewstate" .ViewState 
+            "ComponentState" (dict "submitText" "Valider"
+                                   "headerText" "Validez le trajet" 
+                                   "infoText" "Le message suivant sera envoyé à votre passager. Vous pouvez le personnaliser.") 
+            "SMSState" (dict "name" (.ViewState.config.GetString "service_name") 
+                             "address" .ViewState.booking.Journey.PassengerDrop.Properties.label
+                             "date" (.ViewState.booking.Journey.PassengerPickupDate.Format "02/01/2006 15:04")
+                             "phone_number" .ViewState.driver.Data.phone_number)}}
+            </form>
+          <form method="POST">
+              <input type="hidden" name="action" value="cancel" />
+            <button type="submit"
+              class="m-4 inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-red px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-red focus:ring-offset-2 sm:w-auto">
+              Refuser
+                          </button>
+            </form>
+              {{end}}
+            </div>
+      </div>
+    </body>
+</html>
+{{end}}

web/public/css/main.css

@@ -1,11 +1,11 @@
-/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.8 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    'Noto Color Emoji';
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-      "Courier New", monospace;
+    monospace;
     --color-red-500: oklch(0.637 0.237 25.331);
     --color-green-100: oklch(0.962 0.044 156.743);
     --color-green-800: oklch(0.448 0.119 151.328);
@@ -55,7 +55,6 @@
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
-    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -68,16 +67,10 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-font-feature-settings: var(--font-sans--font-feature-settings);
-    --default-font-variation-settings: var(
+    --default-font-variation-settings: var(--font-sans--font-variation-settings);
-      --font-sans--font-variation-settings
-    );
     --default-mono-font-family: var(--font-mono);
-    --default-mono-font-feature-settings: var(
+    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
-      --font-mono--font-feature-settings
+    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
-    );
-    --default-mono-font-variation-settings: var(
-      --font-mono--font-variation-settings
-    );
     --color-co-blue: #243887;
     --color-co-red: #ff1300;
     --color-co-green: #6cc11f;
@@ -96,9 +89,9 @@
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
-    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
+    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );
     font-feature-settings: var(--default-font-feature-settings, normal);
-    font-variation-settings: var( --default-font-variation-settings, normal );
+    font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
   }
   body {
@@ -126,9 +119,9 @@
     font-weight: bolder;
   }
   code, kbd, samp, pre {
-    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
+    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );
-    font-feature-settings: var( --default-mono-font-feature-settings, normal );
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
-    font-variation-settings: var( --default-mono-font-variation-settings, normal );
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
     font-size: 1em;
   }
   small {
@@ -216,13 +209,13 @@
   :-moz-ui-invalid {
     box-shadow: none;
   }
-  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
     appearance: button;
   }
   ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
     height: auto;
   }
-  [hidden]:where(:not([hidden="until-found"])) {
+  [hidden]:where(:not([hidden='until-found'])) {
     display: none !important;
   }
 }
@@ -461,6 +454,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .-my-1 {
+    margin-block: calc(var(--spacing) * -1);
+  }
   .-my-1\.5 {
     margin-block: calc(var(--spacing) * -1.5);
   }
@@ -509,6 +505,9 @@
   .mt-10 {
     margin-top: calc(var(--spacing) * 10);
   }
+  .-mr-1 {
+    margin-right: calc(var(--spacing) * -1);
+  }
   .-mr-1\.5 {
     margin-right: calc(var(--spacing) * -1.5);
   }
@@ -686,6 +685,9 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-50 {
+    height: calc(var(--spacing) * 50);
+  }
   .h-full {
     height: 100%;
   }
@@ -701,15 +703,27 @@
   .max-h-screen {
     max-height: 100vh;
   }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+  .min-h-50 {
+    min-height: calc(var(--spacing) * 50);
+  }
   .min-h-full {
     min-height: 100%;
   }
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-0 {
+    width: calc(var(--spacing) * 0);
+  }
   .w-0\.5 {
     width: calc(var(--spacing) * 0.5);
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -746,6 +760,9 @@
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
+  .w-50 {
+    width: calc(var(--spacing) * 50);
+  }
   .w-100 {
     width: calc(var(--spacing) * 100);
   }
@@ -1452,9 +1469,6 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
-  .rounded-sm {
-    border-radius: var(--radius-sm);
-  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -1947,6 +1961,9 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -3153,6 +3170,11 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
+  .sm\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
   .sm\:flex-row-reverse {
     @media (width >= 40rem) {
       flex-direction: row-reverse;