change sms

This commit is contained in:
2025-05-23 09:57:36 +02:00
parent 931783650f
commit 4bb249ef2a
16 changed files with 388 additions and 128 deletions

View File

@@ -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 }}

View File

@@ -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 }}

View File

@@ -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>

View File

@@ -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"}}
<span class="ml-2 px-2 py-1 text-sm text-gray-500 whitespace-nowrap">
{{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">
{{.AgencyName}}
</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>-->
<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}}

View File

@@ -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>

View File

@@ -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 }}

View File

@@ -52,92 +52,9 @@
</dl>
</div>
<div>
<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",
});
{{ template "journey_map" . }}
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: 100 })
})
</script>
</div>
</div>
</div>
</div>
<div class="py-4 grid grid-cols-1 gap-6 sm:grid-cols-2">

View File

@@ -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">
Envoyer la mise en relation
</button>
{{template "submit_with_sms"
dict "IconSet" .IconSet
"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}}

View File

@@ -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}}