planif: liens Street View + Google Maps/satellite dans le volet détail job (géoloc)

Sous l'adresse, quand le job a des coordonnées : lien « Street View » (vue au sol, évaluer la difficulté)
+ « Carte / satellite » (Google Maps). Réutilise le format pano existant (openStreetView).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
louispaulb 2026-07-07 12:21:15 -04:00
parent 4ae2907172
commit 9f2fb0eaf9

View File

@ -1442,6 +1442,10 @@
<div v-if="jobDetail.time"><q-icon name="schedule" size="16px" /> {{ jobDetail.time }}</div> <div v-if="jobDetail.time"><q-icon name="schedule" size="16px" /> {{ jobDetail.time }}</div>
<div v-if="jobDetail.skill"><q-icon name="construction" size="16px" /> {{ jobDetail.skill }}</div> <div v-if="jobDetail.skill"><q-icon name="construction" size="16px" /> {{ jobDetail.skill }}</div>
<div v-if="jobDetail.address"><q-icon name="place" size="16px" /> {{ jobDetail.address }}</div> <div v-if="jobDetail.address"><q-icon name="place" size="16px" /> {{ jobDetail.address }}</div>
<div v-if="jdHasCoords" class="jd-geolinks">
<a :href="jdMapsUrl" target="_blank" rel="noopener" class="jd-geolink"><q-icon name="satellite_alt" size="14px" /> Carte / satellite</a>
<a :href="jdStreetViewUrl" target="_blank" rel="noopener" class="jd-geolink"><q-icon name="streetview" size="14px" /> Street View</a>
</div>
</div> </div>
<!-- Ajuster la durée estimée (comme « Suggérer ») persiste duration_h --> <!-- Ajuster la durée estimée (comme « Suggérer ») persiste duration_h -->
<div class="jd-dur row items-center q-gutter-sm q-my-sm"> <div class="jd-dur row items-center q-gutter-sm q-my-sm">
@ -3024,6 +3028,10 @@ function toggleSat () { satView.value = !satView.value; try { localStorage.setIt
// Clic DROIT sur une carte Google Street View à la position cliquée (nouvel onglet). Branché sur les 3 cartes. // Clic DROIT sur une carte Google Street View à la position cliquée (nouvel onglet). Branché sur les 3 cartes.
function openStreetView (lng, lat) { window.open(`https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${lat},${lng}`, '_blank', 'noopener') } function openStreetView (lng, lat) { window.open(`https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${lat},${lng}`, '_blank', 'noopener') }
// Liens géo externes du volet détail job (évaluer la difficulté avant d'y aller) : Street View (sol) + Google Maps (satellite).
const jdHasCoords = computed(() => { const la = +jobDetail.lat, lo = +jobDetail.lon; return isFinite(la) && isFinite(lo) && (la !== 0 || lo !== 0) })
const jdMapsUrl = computed(() => `https://www.google.com/maps/search/?api=1&query=${jobDetail.lat},${jobDetail.lon}`)
const jdStreetViewUrl = computed(() => `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${jobDetail.lat},${jobDetail.lon}`)
// SÉLECTEUR D'EMPLACEMENT (jobs « hors carte ») : carte Mapbox bornée au sud de Montréal (Valleyfield Lacolle // SÉLECTEUR D'EMPLACEMENT (jobs « hors carte ») : carte Mapbox bornée au sud de Montréal (Valleyfield Lacolle
// frontière US). Clic / glisser le repère OU recherche d'adresse RQA coords + adresse, écrits sur le Dispatch Job. // frontière US). Clic / glisser le repère OU recherche d'adresse RQA coords + adresse, écrits sur le Dispatch Job.
@ -6242,6 +6250,9 @@ tr.res-hidden .hide-eye { opacity: 1; }
.jd-body { flex: 1 1 auto; overflow: auto; } .jd-body { flex: 1 1 auto; overflow: auto; }
.jd-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #455; } .jd-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #455; }
.jd-meta > div { display: flex; align-items: center; gap: 6px; } .jd-meta > div { display: flex; align-items: center; gap: 6px; }
.jd-geolinks { padding-left: 22px; gap: 14px !important; }
.jd-geolink { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #2563eb; text-decoration: none; font-weight: 500; }
.jd-geolink:hover { text-decoration: underline; }
.jd-detail { margin-top: 10px; padding: 8px 10px; background: #f6f8fb; border-radius: 6px; white-space: pre-wrap; font-size: 12.5px; color: #333; } .jd-detail { margin-top: 10px; padding: 8px 10px; background: #f6f8fb; border-radius: 6px; white-space: pre-wrap; font-size: 12.5px; color: #333; }
.jd-team { margin-top: 12px; padding: 10px; border: 1px solid #e6e2f2; background: #faf9fe; border-radius: 8px; } .jd-team { margin-top: 12px; padding: 10px; border: 1px solid #e6e2f2; background: #faf9fe; border-radius: 8px; }
/* Suivi terrain (géofencing) : étapes horizontales façon suivi de colis. */ /* Suivi terrain (géofencing) : étapes horizontales façon suivi de colis. */