From e149b252b30c79f1503cd0d4063eec7431775e41 Mon Sep 17 00:00:00 2001 From: louispaulb Date: Sun, 5 Jul 2026 07:25:56 -0400 Subject: [PATCH] =?UTF-8?q?fix(ops):=20unify=20job=20icons=20=E2=80=94=20c?= =?UTF-8?q?ustom=20skillSym=20SVGs=20on=20map=20markers=20too?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Les jobs ASSIGNÉS (marqueurs carte, HTML brut) utilisaient markerIcon = ligatures material génériques (install→construction, monteur→camion générique), alors que les jobs NON assignés (carrousel, blocs, gouttes) utilisent skillSym = icônes SVG custom (échelle+outils, camion-nacelle, casque). Résultat : même compétence, icône différente selon jour passé (assigné) vs à venir (non assigné). Unifié sur les SVG custom : - RouteMap : les marqueurs (arrêts assignés ET gouttes non assignées) rendent l'icône via un VRAI (h+render) → gère les SVG custom skillSym comme le reste de l'app ; repli material-icons si échec ; démontage propre dans clearMarkers/clearPins (pas de fuite). - PlanificationPage : les arrêts (Tournées + revue Suggérer) passent skillSym(skill) au lieu de markerIcon ; markerIcon retiré (mort). ⚠️ Rendu carte NON vérifiable en préview (jeu dev sans coordonnées → 0 marqueur). Compile OK, carrousel (25 chips) inchangé, 0 nouvelle erreur. À confirmer à l'œil en prod (jobs géocodés). Reste : unifier la FORME des puces (chip/pill/carte) selon contexte — passe design dédiée. Co-Authored-By: Claude Opus 4.8 --- apps/ops/src/components/shared/RouteMap.vue | 30 ++++++++++++++------- apps/ops/src/pages/PlanificationPage.vue | 16 +++-------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/apps/ops/src/components/shared/RouteMap.vue b/apps/ops/src/components/shared/RouteMap.vue index bf43976..5dd3d69 100644 --- a/apps/ops/src/components/shared/RouteMap.vue +++ b/apps/ops/src/components/shared/RouteMap.vue @@ -9,11 +9,23 @@ * chevauchent, le groupe s'ÉCLATE en éventail pour les rendre toutes lisibles/cliquables. * - émet 'metrics' { id:{km,mins} } (routes réelles) ; expose fitTo(id) / fitAll() / setActive(id). */ -import { watch, onMounted, onBeforeUnmount } from 'vue' +import { watch, onMounted, onBeforeUnmount, h, render } from 'vue' +import { QIcon } from 'quasar' import { MAPBOX_TOKEN } from 'src/config/erpnext' import * as roster from 'src/api/roster' import { initials } from 'src/composables/useFormatters' // initiales (source unique, ex-locale dé-dupliquée) +// Rend l'icône d'un marqueur via un vrai q-icon (gère ligatures material ET SVG custom skillSym — +// pastille assignée et goutte non assignée ont ainsi le MÊME jeu d'icônes). Repli material-icons si échec. +function iconInto (parent, name) { + const nm = (name && String(name)) || 'place' + const holder = document.createElement('span'); holder.className = 'rm-ic-h' + try { render(h(QIcon, { name: nm, size: '14px' }), holder) } + catch (e) { holder.className = 'material-icons rm-ic'; holder.textContent = /^[a-z0-9_]+$/.test(nm) ? nm : 'place' } + parent.appendChild(holder) + return holder +} + const props = defineProps({ routes: { type: Array, default: () => [] }, live: { type: Array, default: () => [] }, // positions GPS LIVE : [{ techId, name|techName, color, lat, lon, time, speed(nœuds) }] @@ -70,12 +82,12 @@ 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 = [] } +function clearMarkers () { for (const m of stopMk) { if (m.ih) try { render(null, m.ih) } catch (e) {} 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é) ── // initials → composables/useFormatters (source unique) function clearLive () { for (const m of liveMk) m.mk.remove(); liveMk = [] } -function clearPins () { for (const m of pinMk) m.mk.remove(); pinMk = [] } +function clearPins () { for (const m of pinMk) { if (m.ih) try { render(null, m.ih) } catch (e) {} m.mk.remove() } pinMk = [] } function renderLive (list) { if (!map || !ready) return clearLive() @@ -107,12 +119,11 @@ function renderPins (list) { // participe au même éclatement en éventail au chevauchement (recluster/fan) que les arrêts. const wrap = document.createElement('div'); wrap.className = 'rm-mk rm-mk-un' const disc = document.createElement('div'); disc.className = 'rm-pill rm-pill-un'; disc.style.background = color - const ic = /^[a-z0-9_]+$/.test(String(p.icon || '')) ? p.icon : 'place' - disc.innerHTML = '' + ic + '' + const ih = iconInto(disc, p.icon) wrap.appendChild(disc) wrap.title = (p.subject || 'Job') + (p.city ? ' · ' + p.city : '') + ' — non assigné' const mk = new mapboxgl.Marker({ element: wrap, anchor: 'center' }).setLngLat([+p.lon, +p.lat]).addTo(map) - const rec = { mk, el: wrap, disc, rid: null, lngLat: [+p.lon, +p.lat], fan: null, members: null, pin: p } + const rec = { mk, el: wrap, disc, ih, rid: null, lngLat: [+p.lon, +p.lat], fan: null, members: null, pin: p } wrap.addEventListener('mouseenter', () => onEnter(rec)) wrap.addEventListener('mouseleave', () => onLeave(rec)) wrap.addEventListener('click', () => emit('pin-click', p)) @@ -135,11 +146,11 @@ function renderMarkers (routes) { // Pastille = ROUND-RECT (pill) : icône du type de job + numéro d'ordre (best practice quand 2 infos ; cf. outils de tournée). const wrap = document.createElement('div'); wrap.className = 'rm-mk'; wrap.dataset.rid = String(r.id) const disc = document.createElement('div'); disc.className = 'rm-pill'; disc.style.background = r.color - const ic = /^[a-z0-9_]+$/.test(String(s.icon || '')) ? s.icon : 'place' - disc.innerHTML = '' + ic + '' + s.seq + '' + const ih = iconInto(disc, s.icon) + const num = document.createElement('span'); num.className = 'rm-num'; num.textContent = s.seq; disc.appendChild(num) wrap.appendChild(disc) const mk = new mapboxgl.Marker({ element: wrap, anchor: 'center' }).setLngLat([+s.lon, +s.lat]).addTo(map) - const rec = { mk, el: wrap, disc, rid: r.id, lngLat: [+s.lon, +s.lat], seq: s.seq, tech: r.name, subject: s.subject || '', stop: s, fan: null, members: null } + const rec = { mk, el: wrap, disc, ih, rid: r.id, lngLat: [+s.lon, +s.lat], seq: s.seq, tech: r.name, subject: s.subject || '', stop: s, fan: null, members: null } wrap.addEventListener('mouseenter', () => onEnter(rec)) wrap.addEventListener('mouseleave', () => onLeave(rec)) wrap.addEventListener('click', () => emit('stop-click', rec.stop, rec.rid)) // → la page ouvre la fiche détail complète du ticket @@ -279,6 +290,7 @@ watch(() => props.pins, () => { renderPins(props.pins) }, { deep: true }) // job transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .15s; } .rm-mk .rm-pill .rm-ic { font-size: 14px; line-height: 1; opacity: .95; } +.rm-mk .rm-pill .rm-ic-h { display: inline-flex; align-items: center; line-height: 1; opacity: .95; } .rm-mk .rm-pill .rm-num { font-size: 12px; font-weight: 800; line-height: 1; } /* Non assigné : même pastille, bordure pointillée + halo pour se distinguer des arrêts planifiés. */ .rm-mk-un .rm-pill { border-style: dashed; box-shadow: 0 0 0 2px rgba(249,115,22,.25), 0 1px 3px rgba(0,0,0,.45); } diff --git a/apps/ops/src/pages/PlanificationPage.vue b/apps/ops/src/pages/PlanificationPage.vue index b716072..b9cc696 100644 --- a/apps/ops/src/pages/PlanificationPage.vue +++ b/apps/ops/src/pages/PlanificationPage.vue @@ -2510,16 +2510,8 @@ function skillIcon (sk) { if (/factur|paiement|compta/.test(s)) return 'receipt_long' return 'bolt' } -// Icône de compétence pour un MARQUEUR carte (DOM, police material-icons) : UNIQUEMENT des ligatures material (pas les SVG -// custom de skillSym) — sinon le glyphe ne s'affiche pas dans un hors q-icon. -function markerIcon (skill) { - const s = String(skill || '').toLowerCase() - if (/t[ée]l[ée]vis|\btv\b|iptv/.test(s)) return 'live_tv' - if (/install/.test(s)) return 'construction' - if (/monteur|poteau|hauteur|nacelle|a[ée]rien|grimp/.test(s)) return 'local_shipping' - const ic = skillIcon(skill) - return (typeof ic === 'string' && /^[a-z0-9_]+$/.test(ic)) ? ic : 'build' -} +// (markerIcon retiré : les marqueurs carte rendent désormais skillSym via un vrai q-icon dans RouteMap → +// MÊMES icônes custom que le carrousel/blocs, plus de divergence assigné/non-assigné.) function onTagsChange (t, items) { const newLabels = (items || []).map(x => typeof x === 'string' ? x : x.tag).filter(Boolean) const removed = (t.skills || []).filter(s => !newLabels.includes(s)) // compétences retirées → vérifier l'impact sur les jobs assignés @@ -4738,7 +4730,7 @@ const suggestRoutes = computed(() => { if (e.lat == null || e.lon == null || !isFinite(+e.lat) || !isFinite(+e.lon) || Math.abs(+e.lat) < 0.01) continue // 0,0 / invalides exclus (sinon la carte dézoome jusqu'au golfe de Guinée) const k = (+e.lat).toFixed(4) + ',' + (+e.lon).toFixed(4) const ex = seen.get(k) - if (ex) { ex.n++; ex.subject = ex.n + ' jobs — ' + ex.first } else { const s = { lat: +e.lat, lon: +e.lon, seq: stops.length + 1, subject: e.subject, first: e.subject, n: 1, name: e.jobName, entry: e, icon: markerIcon(e.skill) }; seen.set(k, s); stops.push(s) } + if (ex) { ex.n++; ex.subject = ex.n + ' jobs — ' + ex.first } else { const s = { lat: +e.lat, lon: +e.lon, seq: stops.length + 1, subject: e.subject, first: e.subject, n: 1, name: e.jobName, entry: e, icon: skillSym(e.skill) }; seen.set(k, s); stops.push(s) } } if (!stops.length) continue const home = techOrigin(g.techId) // domicile, sinon bureau TARGO @@ -4816,7 +4808,7 @@ const allDayRoutes = computed(() => { // TOUTES les tournées du jour (couleurs if (!jobs.length) continue jobs.sort((a, b) => (a.route_order || 9999) - (b.route_order || 9999) || ((a.start_h ?? 99) - (b.start_h ?? 99))) // ordre de tournée réel const h = techOrigin(t.id) // domicile, sinon bureau TARGO - out.push({ id: t.id, name: t.name, color: routeColor(ci++), home: h ? { lat: h.lat, lon: h.lon } : null, stops: jobs.map((j, i) => ({ lat: +j.lat, lon: +j.lon, seq: i + 1, subject: j.subject, name: j.name, job: j, icon: markerIcon(j.skill) })) }) + out.push({ id: t.id, name: t.name, color: routeColor(ci++), home: h ? { lat: h.lat, lon: h.lon } : null, stops: jobs.map((j, i) => ({ lat: +j.lat, lon: +j.lon, seq: i + 1, subject: j.subject, name: j.name, job: j, icon: skillSym(j.skill) })) }) } return out })