gigafibre-fsm/apps/ops/src/modules/dispatch/components/MapPanel.vue
louispaulb 13dcd4bf77 feat: add ops app + CONTEXT.md, simplify URL to /ops/
Ops app (Vue/Quasar PWA) with dispatch V2 integration, tag system,
customer 360, tickets, and dashboard. Served via standalone nginx
container at erp.gigafibre.ca/ops/ with Traefik StripPrefix + Authentik SSO.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 22:41:58 -04:00

51 lines
1.9 KiB
Vue

<script setup>
import { inject } from 'vue'
import { SVC_COLORS } from 'src/composables/useHelpers'
const props = defineProps({
visible: Boolean,
panelW: Number,
selectedTechId: String,
geoFixJob: Object,
mapContainer: Object, // template ref
})
const emit = defineEmits([
'close', 'resize-start', 'cancel-geofix',
])
const store = inject('store')
const TECH_COLORS = inject('TECH_COLORS')
</script>
<template>
<template v-if="visible">
<div class="sb-map-backdrop" @click="emit('close')"></div>
<div class="sb-map-panel" @click.stop="()=>{}" :style="`width:${panelW}px;min-width:${panelW}px`">
<div class="sb-map-resize-handle" @mousedown.prevent="emit('resize-start', $event)"></div>
<div class="sb-map-bar" :class="{ 'sb-map-bar-geofix': geoFixJob }">
<span class="sb-map-title">Carte</span>
<template v-if="geoFixJob">
<span class="sb-geofix-hint">📍 Cliquer sur la carte pour placer <strong>{{ geoFixJob.subject }}</strong></span>
<button class="sb-geofix-cancel" @click="emit('cancel-geofix')"> Annuler</button>
</template>
<template v-else>
<span v-if="selectedTechId" class="sb-map-tech"
:style="'color:'+TECH_COLORS[store.technicians.find(t=>t.id===selectedTechId)?.colorIdx||0]">
● {{ store.technicians.find(t=>t.id===selectedTechId)?.fullName }}
<span class="sb-map-route-hint">· Glisser une job sur le trajet</span>
</span>
<span v-else class="sb-map-hint">Cliquer un technicien pour voir son trajet</span>
<button class="sb-map-close" @click="emit('close')">✕</button>
</template>
</div>
<div class="sb-map-legend">
<div v-for="(col, lbl) in SVC_COLORS" :key="lbl" class="sb-legend-item">
<span class="sb-legend-dot" :style="'background:'+col"></span>{{ lbl }}
</div>
</div>
<div ref="mapContainer" class="sb-map"></div>
</div>
</template>
</template>