From d966e1b7495aed98b8970de8d98c2e0a9e58f7c0 Mon Sep 17 00:00:00 2001
From: louispaulb <louis.targo@gmail.com>
Date: Fri, 3 Jul 2026 18:06:16 -0400
Subject: [PATCH] =?UTF-8?q?feat(planif):=20positions=20GPS=20live=20des=20?=
 =?UTF-8?q?techs=20(Traccar)=20sur=20la=20carte=20des=20tourn=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Onglet Tournées : marqueurs « live » de chaque tech (appareil Traccar associé),
rafraîchis ~25 s tant que l'onglet est ouvert. Marqueur = pastille ronde à initiales,
couleur = celle de la tournée du tech, halo pulsé si position fraîche (grisé sans halo
si > 10 min). Tooltip : nom · « il y a X min » · vitesse (km/h) ou « arrêté ».
Bouton « GPS live (N) » pour afficher/masquer. Respecte les chips techs masqués.

- hub roster.js : GET /roster/tech-positions → {positions:[{techId,techName,lat,lon,time,speed}]}
  (batch getPositions par appareil). Vérifié prod : 14 positions.
- api/roster.js : techPositions().
- RouteMap.vue : prop `live` + marqueurs .rm-live (halo pulsé, staleness), watch dédié.
- PlanificationPage : polling 25 s (démarré sur l'onglet Tournées, arrêté sinon +
  onUnmounted), couleur mappée depuis dayRoutes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/ops/src/api/roster.js                  |  2 ++
 apps/ops/src/components/shared/RouteMap.vue | 37 +++++++++++++++++++--
 apps/ops/src/pages/PlanificationPage.vue    | 21 ++++++++++--
 services/targo-hub/lib/roster.js            | 17 ++++++++++
 4 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/apps/ops/src/api/roster.js b/apps/ops/src/api/roster.js
index 4ba4392..da0b709 100644
--- a/apps/ops/src/api/roster.js
+++ b/apps/ops/src/api/roster.js
@@ -182,6 +182,8 @@ export const jobServiceStatus = (job) => jget('/roster/job-service-status?job='
 export const onsiteCross = (days = 30) => jget('/traccar/onsite?days=' + days)
 // Position GPS LIVE (dernière connue) d'un tech → { ok, lat, lon, time, speed } ; pour fixer son point de départ (domicile).
 export const techLivePosition = (tech) => jget('/traccar/live?tech=' + encodeURIComponent(tech))
+// Positions GPS LIVE de TOUS les techs (appareil Traccar associé) → { positions:[{techId,techName,lat,lon,time,speed}] }.
+export const techPositions = () => jget('/roster/tech-positions')
 // Liste des appareils Traccar (pour associer un tech à son GPS) — { id, name, uniqueId, status, lastUpdate }.
 export const listTraccarDevices = () => jget('/traccar/devices')
 // Associer / changer (device_id) ou dissocier ('') l'appareil Traccar d'un tech — INLINE depuis Planif.
diff --git a/apps/ops/src/components/shared/RouteMap.vue b/apps/ops/src/components/shared/RouteMap.vue
index efcaf3d..921d94b 100644
--- a/apps/ops/src/components/shared/RouteMap.vue
+++ b/apps/ops/src/components/shared/RouteMap.vue
@@ -15,12 +15,13 @@ import * as roster from 'src/api/roster'
 
 const props = defineProps({
   routes: { type: Array, default: () => [] },
+  live: { type: Array, default: () => [] }, // positions GPS LIVE : [{ techId, name|techName, color, lat, lon, time, speed(nœuds) }]
   height: { type: String, default: '440px' },
 })
 const emit = defineEmits(['metrics', 'stop-click'])
 
 let el = null; let map = null; let ro = null; let ready = false; let drawSeq = 0
-let stopMk = []; let homeMk = [] // marqueurs HTML (arrêts + domiciles)
+let stopMk = []; let homeMk = []; let liveMk = [] // marqueurs HTML (arrêts + domiciles + positions live)
 const _rmCache = RouteMapCache() // cache module (partagé entre instances) : signature → { geometry, km, mins }
 function RouteMapCache () { const g = globalThis; if (!g.__opsRouteMapCache) g.__opsRouteMapCache = new Map(); return g.__opsRouteMapCache }
 function setEl (node) { el = node }
@@ -68,6 +69,29 @@ async function realLine (r) { // géométrie routière réelle d'une tournée (O
 
 // ── Marqueurs HTML : le numéro est DANS la pastille (même élément, même niveau) ──
 function clearMarkers () { for (const m of stopMk) m.mk.remove(); for (const m of homeMk) m.mk.remove(); stopMk = []; homeMk = [] }
+
+// ── Positions GPS LIVE des techs (marqueur distinct des arrêts : pastille ronde à initiales + halo pulsé) ──
+function initials (n) { return String(n || '?').trim().split(/\s+/).map(w => w[0]).filter(Boolean).slice(0, 2).join('').toUpperCase() }
+function clearLive () { for (const m of liveMk) m.mk.remove(); liveMk = [] }
+function renderLive (list) {
+  if (!map || !ready) return
+  clearLive()
+  const mapboxgl = window.mapboxgl; const now = Date.now()
+  for (const p of (list || [])) {
+    if (!okLL(p.lon, p.lat)) continue
+    const ageMin = p.time ? Math.round((now - Date.parse(p.time)) / 60000) : null
+    const stale = ageMin != null && ageMin > 10 // > 10 min sans fix = position vieillie (pas de halo, grisée)
+    const color = p.color || '#1e88e5'
+    const wrap = document.createElement('div'); wrap.className = 'rm-live' + (stale ? ' stale' : '')
+    wrap.innerHTML = '<span class="rm-live-pulse" style="background:' + color + '"></span>' +
+      '<span class="rm-live-dot" style="background:' + color + '">' + initials(p.name || p.techName) + '</span>'
+    const spd = (p.speed != null && p.speed > 1) ? Math.round(p.speed * 1.852) + ' km/h' : 'arrêté' // Traccar speed = nœuds → km/h
+    const when = ageMin == null ? 'position' : (ageMin <= 1 ? "à l'instant" : 'il y a ' + ageMin + ' min')
+    wrap.title = (p.name || p.techName || '') + ' — ' + when + ' · ' + spd
+    const mk = new mapboxgl.Marker({ element: wrap, anchor: 'center' }).setLngLat([+p.lon, +p.lat]).addTo(map)
+    liveMk.push({ mk, el: wrap })
+  }
+}
 function renderMarkers (routes) {
   clearMarkers()
   const mapboxgl = window.mapboxgl
@@ -149,6 +173,7 @@ async function draw () {
   const ls = map.getSource('rm-line'); if (!ls) return
   ls.setData({ type: 'FeatureCollection', features: lineFeatures(routes) })
   renderMarkers(routes)
+  renderLive(props.live)
   const sig = routes.map(r => r.id + ':' + (r.stops || []).length).join('|')
   if (sig !== _lastSig) { _lastSig = sig; try { const b = boundsOf(routes); if (!b.isEmpty()) map.fitBounds(b, { padding: 60, maxZoom: 13, duration: 400 }) } catch (e) {} }
   // Routes RÉELLES en asynchrone : remplace les segments droits + émet km/min réels. Ignoré si un draw plus récent est parti.
@@ -199,8 +224,9 @@ onMounted(async () => {
     draw()
   })
 })
-onBeforeUnmount(() => { clearMarkers(); if (ro) { try { ro.disconnect() } catch (e) {} ro = null } if (map) { try { map.remove() } catch (e) {} map = null } ready = false })
+onBeforeUnmount(() => { clearMarkers(); clearLive(); if (ro) { try { ro.disconnect() } catch (e) {} ro = null } if (map) { try { map.remove() } catch (e) {} map = null } ready = false })
 watch(() => props.routes, () => { draw() }, { deep: true })
+watch(() => props.live, () => { renderLive(props.live) }, { deep: true }) // rafraîchit les positions live sans redessiner les tournées
 </script>
 
 <template>
@@ -228,4 +254,11 @@ watch(() => props.routes, () => { draw() }, { deep: true })
 .rm-mk.route-hot { z-index: 5; }
 .rm-mk.fanned { z-index: 6; }
 .rm-mk.fanned .rm-pill { box-shadow: 0 3px 10px rgba(0,0,0,.55); }
+/* Position GPS LIVE d'un tech : pastille ronde à initiales + halo pulsé (distincte des pastilles d'arrêt). */
+.rm-live { position: relative; width: 0; height: 0; z-index: 8; pointer-events: auto; }
+.rm-live .rm-live-dot { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 2; cursor: default; }
+.rm-live .rm-live-pulse { position: absolute; width: 28px; height: 28px; border-radius: 50%; opacity: .45; z-index: 1; animation: rm-live-pulse 1.8s ease-out infinite; }
+@keyframes rm-live-pulse { 0% { transform: translate(-50%,-50%) scale(1); opacity: .45; } 100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; } }
+.rm-live.stale .rm-live-pulse { display: none; }
+.rm-live.stale .rm-live-dot { opacity: .55; filter: grayscale(.5); }
 </style>
diff --git a/apps/ops/src/pages/PlanificationPage.vue b/apps/ops/src/pages/PlanificationPage.vue
index a1dae57..d29f148 100644
--- a/apps/ops/src/pages/PlanificationPage.vue
+++ b/apps/ops/src/pages/PlanificationPage.vue
@@ -485,6 +485,7 @@
         <span class="text-caption text-grey-7">Journée :</span>
         <q-btn-toggle v-model="routesDay" dense no-caps unelevated toggle-color="indigo" color="grey-3" text-color="grey-8" :options="dayList.slice(0, 7).map(d => ({ label: d.dow + ' ' + d.dnum, value: d.iso }))" />
         <q-space />
+        <q-btn dense unelevated no-caps size="sm" :color="showLivePos ? 'teal-6' : 'grey-4'" :text-color="showLivePos ? 'white' : 'grey-8'" icon="my_location" :label="'GPS live' + (dayLivePositions.length ? ' (' + dayLivePositions.length + ')' : '')" @click="showLivePos = !showLivePos"><q-tooltip>Positions GPS des techs (Traccar), rafraîchies ~25 s. Cliquer pour {{ showLivePos ? 'masquer' : 'afficher' }}.</q-tooltip></q-btn>
         <span class="text-caption text-grey-6">{{ dayRoutes.length }} tournée(s) · clic tech = zoom · clic arrêt = détail</span>
       </div>
       <!-- Chips techs : enlever/ajouter une tournée de la carte d'un clic — pastille = nb de jobs, dans la couleur du tech -->
@@ -495,7 +496,7 @@
           <q-tooltip>{{ hiddenRouteTechs.has(r.id) ? 'Cliquer pour RÉAFFICHER cette tournée' : 'Cliquer pour retirer cette tournée de la carte' }}</q-tooltip>
         </span>
       </div>
-      <RouteMap ref="routesMapRef" :routes="dayRoutes" height="62vh" @metrics="m => Object.assign(dayRouteMetrics, m)" @stop-click="onRoutesStopClick" />
+      <RouteMap ref="routesMapRef" :routes="dayRoutes" :live="showLivePos ? dayLivePositions : []" height="62vh" @metrics="m => Object.assign(dayRouteMetrics, m)" @stop-click="onRoutesStopClick" />
       <div class="suggest-legend q-mt-xs">
         <span v-for="r in dayRoutes" :key="r.id" class="suggest-leg" style="cursor:pointer" @click="routesMapRef && routesMapRef.fitTo(r.id)" @mouseenter="routesMapRef && routesMapRef.setActive(r.id)" @mouseleave="routesMapRef && routesMapRef.setActive(null)">
           <span class="suggest-leg-dot" :style="{ background: r.color }"></span>{{ r.name }}
@@ -4673,6 +4674,22 @@ const allDayRoutes = computed(() => { // TOUTES les tournées du jour (couleurs
   return out
 })
 const dayRoutes = computed(() => allDayRoutes.value.filter(r => !hiddenRouteTechs.value.has(r.id))) // ce que la carte affiche
+
+// ── Positions GPS LIVE des techs (onglet Tournées) : polling doux (25 s) tant que l'onglet est ouvert ; couleur = celle de la tournée du tech ──
+const livePosRaw = ref([]) // [{ techId, techName, lat, lon, time, speed }]
+const showLivePos = ref(true) // afficher/masquer les positions GPS live sur la carte des tournées
+let _livePosTimer = null
+async function refreshLivePositions () { try { const r = await roster.techPositions(); livePosRaw.value = (r && r.positions) || [] } catch (e) { /* non bloquant */ } }
+function startLivePositions () { if (_livePosTimer) return; refreshLivePositions(); _livePosTimer = setInterval(refreshLivePositions, 25000) }
+function stopLivePositions () { if (_livePosTimer) { clearInterval(_livePosTimer); _livePosTimer = null } }
+// Positions pour la carte : masque les techs cachés (chips), colore selon leur tournée du jour (sinon gris neutre).
+const dayLivePositions = computed(() => {
+  const colorByTech = {}; for (const r of (allDayRoutes.value || [])) colorByTech[r.id] = r.color
+  return (livePosRaw.value || [])
+    .filter(p => !hiddenRouteTechs.value.has(p.techId))
+    .map(p => ({ techId: p.techId, name: p.techName, lat: p.lat, lon: p.lon, time: p.time, speed: p.speed, color: colorByTech[p.techId] || '#455a64' }))
+})
+watch(boardView, (v) => { if (v === 'routes') startLivePositions(); else stopLivePositions() }, { immediate: true })
 watch(routesDay, () => { for (const k in dayRouteMetrics) delete dayRouteMetrics[k]; hiddenRouteTechs.value = new Set() })
 watch(boardView, (v) => { if (v === 'routes' && (!routesDay.value || !dayList.value.some(d => d.iso === routesDay.value))) { const t = todayISO(); routesDay.value = ((dayList.value || []).find(d => d.iso >= t) || (dayList.value || [])[0] || {}).iso || t } }, { immediate: true })
 // Un tech « couvre » une file s'il possède TOUTES les compétences requises par ses jobs (compétences vides ignorées).
@@ -5444,7 +5461,7 @@ function onLegacyUpdate (data) {
 const dispatchSSE = useSSE({ listeners: { 'legacy-update': onLegacyUpdate } })
 
 onMounted(async () => { loadLS(); document.addEventListener('keydown', onKey); document.addEventListener('mouseup', onUp); window.addEventListener('beforeunload', onUnload); try { await loadBase() } catch (e) { err(e) } await loadWeek(); loadDispatchPolicy(); try { const _h = await roster.holidays(todayISO(), addDaysISO(todayISO(), 400)); statHolidays.value = _h.holidays || [] } catch (e) { /* fériés best-effort */ } try { const _p = await roster.holidayNotice(40); holNoticePreview.value = _p.holidays || [] } catch (e) { /* préavis best-effort */ } /* dépôt + domiciles techs (origine de tournée) */ try { const m = await roster.bookMeta(); jobTypes.value = m.service_types || []; skillByType.value = m.skill_by_type || {} } catch (e) { /* catégories de job pour suggestions */ } if ($q.screen.lt.md) { try { await reloadPool() } catch (e) { /* */ } } else openAssignPanel(); /* mobile : charge le pool pour la liste « À assigner » (assignation au toucher), pas de panneau flottant ; desktop : panneau ouvert */ dispatchSSE.connect(['dispatch']); /* veille Legacy temps-réel */ _nowTimer = setInterval(() => { nowTick.value++ }, 60000) /* ligne « maintenant » du board */ })
-onUnmounted(() => { document.removeEventListener('keydown', onKey); document.removeEventListener('mouseup', onUp); window.removeEventListener('beforeunload', onUnload); if (_nowTimer) clearInterval(_nowTimer); if (_kbRO) _kbRO.disconnect() })
+onUnmounted(() => { document.removeEventListener('keydown', onKey); document.removeEventListener('mouseup', onUp); window.removeEventListener('beforeunload', onUnload); if (_nowTimer) clearInterval(_nowTimer); stopLivePositions(); if (_kbRO) _kbRO.disconnect() })
 onBeforeRouteLeave(() => { if (dirty.value && !window.confirm(DIRTY_MSG)) return false })
 </script>
 
diff --git a/services/targo-hub/lib/roster.js b/services/targo-hub/lib/roster.js
index 82ddf61..b787405 100644
--- a/services/targo-hub/lib/roster.js
+++ b/services/targo-hub/lib/roster.js
@@ -1811,6 +1811,23 @@ async function handle (req, res, method, path, url) {
     const r = await retryWrite(() => erp.update('Dispatch Technician', techName, patch))
     return json(res, r.ok ? 200 : 500, { ...r, technician: techId, status: patch.status })
   }
+  // Positions GPS LIVE de TOUS les techs ayant un appareil Traccar → marqueurs « live » sur la carte des tournées
+  // (rafraîchi périodiquement côté client). Léger : une requête position par appareil (getPositions parallèle).
+  if (path === '/roster/tech-positions' && method === 'GET') {
+    const techs = (await fetchTechnicians()).filter(t => t.traccar_device_id)
+    if (!techs.length) return json(res, 200, { positions: [] })
+    const { getPositions } = require('./traccar')
+    const ids = [...new Set(techs.map(t => parseInt(t.traccar_device_id)).filter(Boolean))]
+    let positions = []
+    try { positions = await getPositions(ids) } catch (e) { return json(res, 200, { positions: [], error: e.message }) }
+    const byDev = {}; for (const p of positions) if (p && p.deviceId != null) byDev[p.deviceId] = p
+    const out = []
+    for (const t of techs) {
+      const p = byDev[parseInt(t.traccar_device_id)]
+      if (p && p.latitude != null) out.push({ techId: t.id, techName: t.name, lat: p.latitude, lon: p.longitude, time: p.fixTime || p.deviceTime || p.serverTime || null, speed: p.speed || 0 })
+    }
+    return json(res, 200, { positions: out })
+  }
   // Associer / changer (ou retirer) l'appareil Traccar d'un tech (GPS live + tracé) — éditable INLINE depuis Planif.
   // device_id = id numérique Traccar (ou '' pour dissocier).
   const mTrk = path.match(/^\/roster\/technician\/(.+)\/traccar-device$/)