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>
51 lines
1.9 KiB
Vue
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>
|