-
Organiser le transport solidaire
@@ -971,11 +1115,31 @@ function compactJourneySearch() {
{{end}}
];
+ const vehicleOptionalFields = {{if .ViewState.vehicle_optional_fields}}{{json .ViewState.vehicle_optional_fields}}{{else}}[]{{end}};
+
+ const vehicles = [
+ {{range $index, $vehicle := .ViewState.vehicles}}
+ {
+ id: '{{$vehicle.ID}}',
+ name: {{if $vehicle.Data.name}}'{{$vehicle.Data.name}}'{{else}}'Véhicule'{{end}},
+ type: {{if $vehicle.Type}}'{{$vehicle.Type}}'{{else}}null{{end}},
+ automatic: {{if $vehicle.Data.automatic}}true{{else}}false{{end}},
+ licencePlate: {{if $vehicle.Data.licence_plate}}'{{$vehicle.Data.licence_plate}}'{{else}}null{{end}},
+ description: {{if $vehicle.Data.description}}'{{$vehicle.Data.description}}'{{else}}null{{end}},
+ address: {{if and $vehicle.Data.address $vehicle.Data.address.properties}}'{{$vehicle.Data.address.properties.label}}'{{else}}null{{end}},
+ location: {{if and $vehicle.Data.address $vehicle.Data.address.geometry $vehicle.Data.address.geometry.coordinates}}[{{index $vehicle.Data.address.geometry.coordinates 0}}, {{index $vehicle.Data.address.geometry.coordinates 1}}]{{else}}null{{end}},
+ distance: null,
+ data: {{json $vehicle.Data}}
+ },
+ {{end}}
+ ];
+
return {
selectedType: null,
selectedIndex: null,
selectedDriverIndex: null,
selectedOrganizedCarpoolIndex: null,
+ selectedVehicleIndex: null,
map: null,
startMarker: null,
endMarker: null,
@@ -985,13 +1149,18 @@ function compactJourneySearch() {
organizedCarpools: organizedCarpools,
carpools: carpools,
kbSolutions: kbSolutions,
+ vehicles: vehicles,
+ vehicleOptionalFields: vehicleOptionalFields,
+ passengerId: '{{.ViewState.passengerid}}',
+ departureDate: '{{.ViewState.departuredate}}',
filters: {
transit: true,
solidarity: true,
organizedCarpool: true,
carpool: true,
- kb: true
+ kb: true,
+ vehicles: true
},
init() {
@@ -1063,6 +1232,7 @@ function compactJourneySearch() {
this.selectedIndex = null;
this.selectedDriverIndex = null;
this.selectedOrganizedCarpoolIndex = null;
+ this.selectedVehicleIndex = null;
return;
}
@@ -1076,6 +1246,9 @@ function compactJourneySearch() {
if (type !== 'organized_carpool') {
this.selectedOrganizedCarpoolIndex = null;
}
+ if (type !== 'vehicles') {
+ this.selectedVehicleIndex = null;
+ }
// Update selection
this.selectedType = type;
@@ -1096,6 +1269,9 @@ function compactJourneySearch() {
this.displayCarpoolRoute(index);
} else if (type === 'kb') {
this.displayKBSolution(index);
+ } else if (type === 'vehicles') {
+ this.selectedVehicleIndex = null;
+ this.displayVehiclesMarkers();
}
}, 500);
},
@@ -1126,6 +1302,19 @@ function compactJourneySearch() {
}, 500);
},
+ selectVehicle(vehicleIndex) {
+ // Clear routes before selecting new vehicle
+ this.clearRoutes();
+
+ // Update vehicle selection
+ this.selectedVehicleIndex = vehicleIndex;
+
+ // Use setTimeout to ensure clearing completes before displaying new route
+ setTimeout(() => {
+ this.displayVehicleMarker(vehicleIndex);
+ }, 500);
+ },
+
clearRoutes() {
// Remove route markers
this.routeMarkers.forEach(marker => marker.remove());
@@ -1162,7 +1351,7 @@ function compactJourneySearch() {
const allCoords = [];
journey.legs.forEach((leg, legIndex) => {
- const lineColor = leg.mode === 'WALK' ? '#9ca3af' : '#' + leg.color;
+ const lineColor = leg.mode === 'WALK' ? '#9ca3af' : (leg.color && leg.color !== '' ? '#' + leg.color : '#243887');
const lineWidth = leg.mode === 'WALK' ? 2 : 4;
const lineDasharray = leg.mode === 'WALK' ? [2, 2] : undefined;
@@ -1758,6 +1947,111 @@ function compactJourneySearch() {
padding: 50
});
}
+ },
+
+ displayVehiclesMarkers() {
+ if (!this.map || !this.map.loaded()) return;
+
+ const bounds = new maplibregl.LngLatBounds();
+ let hasMarkers = false;
+
+ // Display all vehicles as markers
+ this.vehicles.forEach((vehicle, idx) => {
+ if (!vehicle.location) return;
+
+ const el = document.createElement('div');
+ el.className = 'w-10 h-10 rounded-co bg-co-orange border-2 border-white shadow-md flex items-center justify-center cursor-pointer hover:scale-110 transition-transform';
+ el.innerHTML = `
+
+ `;
+
+ const marker = new maplibregl.Marker({element: el})
+ .setLngLat(vehicle.location)
+ .setPopup(new maplibregl.Popup({offset: 25, className: 'rounded-lg'})
+ .setHTML(`
+
+
${vehicle.name}
+ ${vehicle.type ? `
${vehicle.type}
` : ''}
+ ${vehicle.address ? `
${vehicle.address}
` : ''}
+
+ `))
+ .addTo(this.map);
+
+ this.routeMarkers.push(marker);
+ bounds.extend(vehicle.location);
+ hasMarkers = true;
+ });
+
+ // Fit map to show all vehicle markers
+ if (hasMarkers) {
+ this.map.fitBounds(bounds, {
+ padding: 100,
+ maxZoom: 14
+ });
+ }
+ },
+
+ displayVehicleMarker(vehicleIndex) {
+ if (!this.map || !this.map.loaded() || !this.vehicles[vehicleIndex]) return;
+
+ const vehicle = this.vehicles[vehicleIndex];
+ if (!vehicle.location) return;
+
+ // Create a larger marker for the selected vehicle
+ const el = document.createElement('div');
+ el.className = 'w-12 h-12 rounded-co bg-co-orange border-2 border-white shadow-lg flex items-center justify-center';
+ el.innerHTML = `
+
+ `;
+
+ const marker = new maplibregl.Marker({element: el})
+ .setLngLat(vehicle.location)
+ .addTo(this.map);
+
+ this.routeMarkers.push(marker);
+
+ // Center map on the vehicle
+ this.map.flyTo({
+ center: vehicle.location,
+ zoom: 15,
+ duration: 1000
+ });
+ },
+
+ getVehicleBookingUrl() {
+ let url = '/app/vehicles/?';
+
+ if (this.passengerId) {
+ url += 'beneficiaryid=' + this.passengerId;
+ }
+
+ // Use the departure date from search as start date
+ if (this.departureDate) {
+ url += '&startdate=' + this.departureDate;
+
+ // Calculate end date as 7 days after start date
+ const startDate = new Date(this.departureDate);
+ startDate.setDate(startDate.getDate() + 7);
+ const endDate = startDate.toISOString().split('T')[0];
+ url += '&enddate=' + endDate;
+ }
+
+ return url;
+ },
+
+ getSelectLabel(field, value) {
+ if (!field.options || !value) return value;
+
+ const option = field.options.find(opt => opt.value === value);
+ return option ? option.label : value;
}
};
}
diff --git a/web/layouts/journeys/search.html b/web/layouts/journeys/search.html
index 69e73a0..c68df0a 100644
--- a/web/layouts/journeys/search.html
+++ b/web/layouts/journeys/search.html
@@ -21,7 +21,7 @@