From fd417145694549fca28f9da45dcfab4f479b171e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vincent=20Lain=C3=A9?= Date: Tue, 19 Nov 2024 14:44:09 +0100 Subject: [PATCH] =?UTF-8?q?V1=20Ressources=20influenc=C3=A9es=20=E2=9C=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/carte/Map.vue | 12 ++-- client/components/situation/Status.vue | 89 ++++++++++++++++++-------- client/utils/index.ts | 17 +++-- 3 files changed, 81 insertions(+), 37 deletions(-) diff --git a/client/components/carte/Map.vue b/client/components/carte/Map.vue index fb493f8..3d63a03 100644 --- a/client/components/carte/Map.vue +++ b/client/components/carte/Map.vue @@ -30,7 +30,7 @@ const mapContainer = shallowRef(null); const map: Ref = shallowRef(null); const isMapSupported: boolean = utils.isWebglSupported(); const runtimeConfig = useRuntimeConfig(); -const zoneSelected = ref(0); +const zonesSelected = ref([]); const route = useRoute(); const departementCode = route.query.depCode; const showRestrictionsBtn = ref(true); @@ -120,8 +120,8 @@ onMounted(() => { loading.value = true; const features = map.value?.queryRenderedFeatures(e.point, { layers: ['zones-data'] }); const coordinates = e.lngLat; - const properties = features[0]?.properties; - zoneSelected.value = properties ? properties.id : 0; + const properties = features?.map((f: any) => f.properties); + zonesSelected.value = properties ? properties.map((p: any) => p.id) : []; const dataAddress = (await api.searchAddressByLatlon(coordinates.lng, coordinates.lat)).data; const dataGeo = (await api.searchGeoByLatlon(coordinates.lng, coordinates.lat)).data; @@ -228,7 +228,7 @@ const updateLayerFilter = () => { }; const updateContourFilter = () => { - map.value?.setFilter('zones-contour', ['all', ['==', 'type', selectedTypeEau.value], ['==', 'id', zoneSelected.value]]); + map.value?.setFilter('zones-contour', ['all', ['==', 'type', selectedTypeEau.value], ['in', 'id', ...zonesSelected.value]]); }; const updateDepartementsContourFilter = () => { @@ -330,7 +330,7 @@ const addSourceAndLayerZones = (pmtilesUrl: string) => { type: 'line', source: 'zones', 'source-layer': 'zones_arretes_en_vigueur', - filter: ['all', ['==', 'type', selectedTypeEau.value], ['==', 'id', zoneSelected.value]], + filter: ['all', ['==', 'type', selectedTypeEau.value], ['in', 'id', ...zonesSelected.value]], paint: { 'line-color': '#000091', 'line-width': 3, @@ -341,7 +341,7 @@ const addSourceAndLayerZones = (pmtilesUrl: string) => { }; const resetZoneSelected = () => { - zoneSelected.value = 0; + zonesSelected.value = []; updateContourFilter(); popup.remove(); }; diff --git a/client/components/situation/Status.vue b/client/components/situation/Status.vue index 2c7a088..352540f 100644 --- a/client/components/situation/Status.vue +++ b/client/components/situation/Status.vue @@ -12,6 +12,9 @@ const { zones } = storeToRefs(zoneStore); const { resetAddress, adressString, getCodeDepartement } = addressStore; const { resetZones } = zoneStore; const links: Ref = ref([{ to: '/', text: 'Accueil' }, { text: 'Votre situation' }]); +const zone = ref(); +const zoneModal = ref(); +const modalOpened: Ref = ref(false); const addressToUse: Ref = ref(adressString()); @@ -46,13 +49,18 @@ const profileOptions = [ text: 'exploitation agricole', }, ]; - -const zoneTypeEau = computed(() => { - return zones.value.find(z => z.type === typeEau.value); +const zonesOptions = computed(() => { + return zones.value.filter(z => z.type === typeEau.value) + .map(z => { + return { + value: z.id, + text: z.nom, + }; + }); }); const usagesByProfile = computed(() => { - return zoneTypeEau.value.usages.filter(u => { + return zone.value.usages.filter(u => { switch (profile.value) { case 'particulier': return u.concerneParticulier; @@ -66,18 +74,34 @@ const usagesByProfile = computed(() => { }); }); -const showPacaMessage = computed(() => { - return profile.value !== 'particulier' && ['04', '05', '06', '13', '83', '84'].includes(getCodeDepartement()); -}); - const situationLabel = computed(() => { - return utils.getShortSituationLabel(utils.getRestrictionRank(zoneTypeEau.value?.niveauGravite)); + return utils.getShortSituationLabel(utils.getRestrictionRank(zone.value?.niveauGravite)); }); +const selectZone = () => { + zone.value = zones.value.find(z => z.id == zoneModal.value); + zoneModal.value = null; + modalOpened.value = false; +}; + +const updateZone = ($event) => { + zone.value = zones.value.find(z => z.id == $event); +} + +const modalActions: Ref = ref([{ label: 'Valider', onClick: selectZone }]); + onBeforeUnmount(() => { resetAddress(); resetZones(); }); + +watch(() => typeEau.value, () => { + if (zonesOptions.value.length <= 1) { + zone.value = zones.value.find(z => z.type === typeEau.value); + } else { + modalOpened.value = true; + } +}, { immediate: true });