191 lines
8.8 KiB
HTML
191 lines
8.8 KiB
HTML
{{define "drivers_map_widget"}}
|
|
<div class="bg-white overflow-hidden shadow rounded-2xl">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
Carte des conducteurs
|
|
</h3>
|
|
{{if .geography_filters_enabled}}
|
|
<form>
|
|
<div class="grid grid-cols-1">
|
|
<select id="driver_address_geo" name="driver_address_geo" class="col-start-1 row-start-1 w-48 appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus-visible:outline-co-blue" onchange="this.form.submit()">
|
|
<option value="">Toutes les zones</option>
|
|
{{range .geography_filters_list}}
|
|
{{$geoValue := printf "%s:%s" .layer .code}}
|
|
<option value="{{$geoValue}}"{{if eq $.filters.driver_address_geo $geoValue}} selected{{end}}>{{.name}}</option>
|
|
{{end}}
|
|
</select>
|
|
<svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4 dark:text-gray-400">
|
|
<path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
</form>
|
|
{{end}}
|
|
</div>
|
|
|
|
<div id="drivers-map" class="w-full rounded-lg overflow-hidden border border-gray-200" style="height: 500px;"></div>
|
|
|
|
<div class="mt-4 flex items-center justify-center gap-6 text-sm">
|
|
{{if moduleAvailable "solidarity_transport"}}
|
|
<div class="flex items-center">
|
|
<div class="w-6 h-6 rounded-co bg-co-blue border border-white shadow-md mr-2"></div>
|
|
<span class="text-gray-700">Transport solidaire ({{len .solidarity_drivers}})</span>
|
|
</div>
|
|
{{end}}
|
|
{{if moduleAvailable "organized_carpool"}}
|
|
<div class="flex items-center">
|
|
<div class="w-6 h-6 rounded-co bg-co-green border border-white shadow-md mr-2"></div>
|
|
<span class="text-gray-700">Covoiturage solidaire ({{len .organized_carpool_drivers}})</span>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check if map libraries are available
|
|
if (typeof maplibregl === 'undefined' || typeof pmtiles === 'undefined') {
|
|
console.warn('Map libraries not available');
|
|
return;
|
|
}
|
|
|
|
// Initialize PMTiles protocol
|
|
let protocol = new pmtiles.Protocol();
|
|
maplibregl.addProtocol("pmtiles", protocol.tile);
|
|
|
|
// Initialize map centered on France with protomaps style
|
|
const map = new maplibregl.Map({
|
|
container: 'drivers-map',
|
|
style: '/public/maps/protomaps-light/style.json',
|
|
center: [2.3522, 48.8566], // Paris
|
|
zoom: 5
|
|
});
|
|
|
|
map.addControl(new maplibregl.NavigationControl(), 'top-right');
|
|
|
|
const bounds = new maplibregl.LngLatBounds();
|
|
let hasMarkers = false;
|
|
|
|
map.on('load', function() {
|
|
// Add solidarity transport drivers
|
|
{{if moduleAvailable "solidarity_transport"}}
|
|
const solidarityDrivers = [
|
|
{{range .solidarity_drivers}}
|
|
{{if .Data.address}}
|
|
{
|
|
name: '{{.Data.first_name}} {{.Data.last_name}}',
|
|
coordinates: {{if and .Data.address.geometry .Data.address.geometry.coordinates}}[{{index .Data.address.geometry.coordinates 0}}, {{index .Data.address.geometry.coordinates 1}}]{{else}}null{{end}},
|
|
address: {{if .Data.address.properties}}'{{.Data.address.properties.label}}'{{else}}''{{end}},
|
|
type: 'solidarity-transport',
|
|
driverId: '{{.ID}}'
|
|
},
|
|
{{end}}
|
|
{{end}}
|
|
].filter(d => d.coordinates !== null);
|
|
|
|
solidarityDrivers.forEach(function(driver) {
|
|
// Create custom marker element matching compact search style
|
|
const el = document.createElement('div');
|
|
el.className = 'w-8 h-8 rounded-co bg-co-blue border border-white shadow-md flex items-center justify-center cursor-pointer';
|
|
|
|
// User icon matching compact search
|
|
el.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
`;
|
|
|
|
const marker = new maplibregl.Marker({element: el})
|
|
.setLngLat(driver.coordinates)
|
|
.setPopup(new maplibregl.Popup({offset: 25, className: 'rounded-lg'})
|
|
.setHTML(`
|
|
<div class="p-3">
|
|
<a href="/app/solidarity-transport/drivers/${driver.driverId}" class="font-semibold text-sm text-gray-900 hover:text-co-blue">${driver.name}</a>
|
|
<p class="text-xs text-gray-600 mt-1">${driver.address}</p>
|
|
<p class="text-xs text-co-blue font-medium mt-2">Transport solidaire</p>
|
|
</div>
|
|
`))
|
|
.addTo(map);
|
|
|
|
bounds.extend(driver.coordinates);
|
|
hasMarkers = true;
|
|
});
|
|
{{end}}
|
|
|
|
// Add organized carpool drivers
|
|
{{if moduleAvailable "organized_carpool"}}
|
|
const organizedCarpoolDrivers = [
|
|
{{range .organized_carpool_drivers}}
|
|
{{if .Data.address}}
|
|
{
|
|
name: '{{.Data.first_name}} {{.Data.last_name}}',
|
|
coordinates: {{if and .Data.address.geometry .Data.address.geometry.coordinates}}[{{index .Data.address.geometry.coordinates 0}}, {{index .Data.address.geometry.coordinates 1}}]{{else}}null{{end}},
|
|
address: {{if .Data.address.properties}}'{{.Data.address.properties.label}}'{{else}}''{{end}},
|
|
type: 'organized-carpool',
|
|
driverId: '{{.ID}}'
|
|
},
|
|
{{end}}
|
|
{{end}}
|
|
].filter(d => d.coordinates !== null);
|
|
|
|
organizedCarpoolDrivers.forEach(function(driver) {
|
|
// Create custom marker element matching compact search style
|
|
const el = document.createElement('div');
|
|
el.className = 'w-8 h-8 rounded-co bg-co-green border border-white shadow-md flex items-center justify-center cursor-pointer';
|
|
|
|
// User icon matching compact search
|
|
el.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
`;
|
|
|
|
const marker = new maplibregl.Marker({element: el})
|
|
.setLngLat(driver.coordinates)
|
|
.setPopup(new maplibregl.Popup({offset: 25, className: 'rounded-lg'})
|
|
.setHTML(`
|
|
<div class="p-3">
|
|
<a href="/app/organized-carpool/drivers/${driver.driverId}" class="font-semibold text-sm text-gray-900 hover:text-co-green">${driver.name}</a>
|
|
<p class="text-xs text-gray-600 mt-1">${driver.address}</p>
|
|
<p class="text-xs text-co-green font-medium mt-2">Covoiturage solidaire</p>
|
|
</div>
|
|
`))
|
|
.addTo(map);
|
|
|
|
bounds.extend(driver.coordinates);
|
|
hasMarkers = true;
|
|
});
|
|
{{end}}
|
|
|
|
// Fit map to markers bounds with padding
|
|
if (hasMarkers) {
|
|
map.fitBounds(bounds, {
|
|
padding: 50,
|
|
maxZoom: 12
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.maplibregl-popup-content {
|
|
padding: 0;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.maplibregl-popup-close-button {
|
|
font-size: 20px;
|
|
padding: 4px;
|
|
color: #6B7280;
|
|
}
|
|
.maplibregl-popup-close-button:hover {
|
|
background-color: #F3F4F6;
|
|
color: #111827;
|
|
}
|
|
</style>
|
|
{{end}}
|