115 lines
4.1 KiB
Vue
115 lines
4.1 KiB
Vue
<script setup>
|
|
import AdminLayout from '@/Layouts/AdminLayout.vue';
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { onMounted, ref } from 'vue';
|
|
import L from 'leaflet';
|
|
import 'leaflet/dist/leaflet.css';
|
|
|
|
// Fix for Leaflet default icons
|
|
import icon from 'leaflet/dist/images/marker-icon.png';
|
|
const DefaultIcon = L.icon({
|
|
iconUrl: icon,
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowSize: [41, 41]
|
|
});
|
|
L.Marker.prototype.options.icon = DefaultIcon;
|
|
|
|
const props = defineProps({
|
|
candidates: Array
|
|
});
|
|
|
|
const mapContainer = ref(null);
|
|
const isLoading = ref(true);
|
|
const geocodedCount = ref(0);
|
|
|
|
onMounted(async () => {
|
|
const map = L.map(mapContainer.value).setView([46.603354, 1.888334], 6); // Centered on France
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
const markers = [];
|
|
|
|
for (const candidate of props.candidates) {
|
|
if (!candidate.city) continue;
|
|
|
|
try {
|
|
// Rate limited geocoding (Nominatim allows 1 request/sec ideally)
|
|
const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(candidate.city)}&limit=1`);
|
|
const data = await response.json();
|
|
|
|
if (data && data.length > 0) {
|
|
const { lat, lon } = data[0];
|
|
const marker = L.marker([lat, lon]).addTo(map);
|
|
marker.bindPopup(`
|
|
<div class="p-1">
|
|
<p class="font-bold text-primary">${candidate.name}</p>
|
|
<p class="text-xs text-slate-500">${candidate.city}</p>
|
|
<p class="text-xs font-semibold mt-1">${candidate.job || 'Pas de poste'}</p>
|
|
<p class="text-[10px] bg-indigo-50 text-indigo-600 px-1.5 py-0.5 rounded mt-1 inline-block">Score: ${candidate.score}/20</p>
|
|
</div>
|
|
`);
|
|
markers.push(marker);
|
|
geocodedCount.value++;
|
|
}
|
|
|
|
// Artificial delay to avoid being blocked by Nominatim
|
|
await new Promise(resolve => setTimeout(resolve, 800));
|
|
} catch (error) {
|
|
console.error(`Geocoding failed for ${candidate.city}:`, error);
|
|
}
|
|
}
|
|
|
|
if (markers.length > 0) {
|
|
const group = new L.featureGroup(markers);
|
|
map.fitBounds(group.getBounds().pad(0.1));
|
|
}
|
|
|
|
isLoading.value = false;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Provenance des Candidats" />
|
|
|
|
<AdminLayout>
|
|
<template #header>
|
|
Carte de Provenance
|
|
</template>
|
|
|
|
<div class="mb-6 flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-2xl font-bold">Localisation des Candidats</h3>
|
|
<p class="text-sm text-slate-500 mt-1">
|
|
Visualisez d'où viennent vos candidats sur la carte.
|
|
</p>
|
|
</div>
|
|
<div v-if="isLoading" class="flex items-center gap-2 text-indigo-600 font-bold text-sm bg-indigo-50 px-4 py-2 rounded-xl">
|
|
<svg class="animate-spin h-4 w-4" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Geocodage en cours ({{ geocodedCount }}/{{ candidates.length }})...
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
|
|
<div ref="mapContainer" class="w-full h-[600px] z-10"></div>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|
|
|
|
<style>
|
|
/* Leaflet popup customization */
|
|
.leaflet-popup-content-wrapper {
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
}
|
|
.leaflet-popup-tip {
|
|
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
}
|
|
</style>
|