Skip to content

Commit

Permalink
V1 Ressources influencées ✨
Browse files Browse the repository at this point in the history
  • Loading branch information
@vincentlaine
vincentlaine committed Nov 19, 2024
1 parent e8f6a5d commit fd41714
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 37 deletions.
12 changes: 6 additions & 6 deletions client/components/carte/Map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const mapContainer = shallowRef(null);
const map: Ref<any> = 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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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,
Expand All @@ -341,7 +341,7 @@ const addSourceAndLayerZones = (pmtilesUrl: string) => {
};
const resetZoneSelected = () => {
zoneSelected.value = 0;
zonesSelected.value = [];
updateContourFilter();
popup.remove();
};
Expand Down
89 changes: 64 additions & 25 deletions client/components/situation/Status.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ const { zones } = storeToRefs(zoneStore);
const { resetAddress, adressString, getCodeDepartement } = addressStore;
const { resetZones } = zoneStore;
const links: Ref<any[]> = ref([{ to: '/', text: 'Accueil' }, { text: 'Votre situation' }]);
const zone = ref();
const zoneModal = ref();
const modalOpened: Ref<boolean> = ref(false);
const addressToUse: Ref<any> = ref(adressString());
Expand Down Expand Up @@ -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;
Expand All @@ -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<string>(() => {
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<any[]> = 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 });
</script>

<template>
Expand All @@ -94,28 +118,24 @@ onBeforeUnmount(() => {
titile="Choisissez le type d’eau que vous consommez"
v-model="typeEau"
:options="typesEauOptions" />
<template v-if="zonesOptions.length > 1">
<p class="fr-mx-1w fr-mb-0">issue de</p>
<DsfrSelect id="profile"
title="Choisissez la zone d'alerte"
:value="zone?.id"
:options="zonesOptions"
@update:modelValue="updateZone($event)" />
</template>
<p class="fr-mx-1w fr-mb-0">en tant que</p>
<DsfrSelect id="profile"
title="Choisissez votre profil de consommateur d’eau"
v-model="profile"
:options="profileOptions" />
</fieldset>
<!-- TMP PACA -->
<template v-if="showPacaMessage">
<div class="fr-container">
<DsfrAlert
description="Les ressources stockées ne sont pas représentées sur Vigieau. Si vous consommez de l’eau issue des systèmes Serre-Ponçon, Sainte-Croix/Castillon ou Saint-Cassien veuillez vous rapprocher de votre fournisseur d’eau pour connaître les restrictions en vigueur."
type="warning"
class="fr-my-2w"
:closeable="false"
/>
</div>
</template>

<SituationHeader :address="addressToUse"
:typeEau="typeEau"
:zone="zoneTypeEau" />
:zone="zone" />
<fieldset class="fr-col-12 fr-container fr-grid-row fr-grid-row--center fr-grid-row--middle fr-mt-1w show-sm">
<legend>
Expand All @@ -125,19 +145,27 @@ onBeforeUnmount(() => {
titile="Choisissez le type d’eau que vous consommez"
v-model="typeEau"
:options="typesEauOptions" />
<template v-if="zonesOptions.length > 1">
<p class="fr-mx-1w fr-mb-0">issue de</p>
<DsfrSelect id="profile"
title="Choisissez la zone d'alerte"
:value="zone?.id"
:options="zonesOptions"
@update:modelValue="updateZone($event)" />
</template>
<p class="fr-mx-1w fr-mb-0">en tant que</p>
<DsfrSelect id="profile"
title="Choisissez votre profil de consommateur d’eau"
v-model="profile"
:options="profileOptions" />
</fieldset>
<template v-if="utils.showRestrictions(zoneTypeEau)">
<template v-if="utils.showRestrictions(zone)">
<SituationRestrictions :profile="profile"
:zone="zoneTypeEau"
:zone="zone"
:usages="usagesByProfile" />
</template>
<template v-else-if="!zoneTypeEau || !zoneTypeEau.arreteMunicipalCheminFichier">
<template v-else-if="!zone || !zone.arreteMunicipalCheminFichier">
<div class="fr-col-12">
<div class="fr-grid-row fr-grid-row--center">
<DsfrHighlight class="fr-my-2w">
Expand All @@ -152,6 +180,17 @@ onBeforeUnmount(() => {
<MixinsShare :situationLabel="situationLabel" :address="addressToUse" />
</div>
</div>
<DsfrModal :opened="modalOpened"
title="Pour consulter les restrictions, veuillez sélectionner la ressource dans laquelle vous prélevez de l’eau."
:actions="modalActions">
<div>
<p class="fr-mx-1w fr-mb-0">Plusieurs cours d'eau sont référencés à cette adresse.</p>
<DsfrSelect id="profile"
title="Choisissez la zone d'alerte"
v-model="zoneModal"
:options="zonesOptions" />
</div>
</DsfrModal>
</template>
<style lang="scss">
Expand Down
17 changes: 11 additions & 6 deletions client/utils/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,8 +222,7 @@ const index = {
});
},

generatePopupHtml(pmtilesData: any, showRestrictionsBtn: boolean, address?: Address, geo?: Geo) {
const niveauGravite = niveauxGravite.find(n => n.niveauGravite === pmtilesData?.niveauGravite);
generatePopupHtml(pmtilesData: any[], showRestrictionsBtn: boolean, address?: Address, geo?: Geo) {

let addressName = '';
if (address?.properties?.label) {
Expand All @@ -233,11 +232,17 @@ const index = {
}
let popupHtml = '';

if(pmtilesData) {
popupHtml += `<div class="fr-mb-1w">
<p class="fr-badge situation-level-bg-${this.getRestrictionRank(pmtilesData.niveauGravite)}">${niveauGravite.text}</p>
if(pmtilesData && pmtilesData.length > 0) {
pmtilesData.forEach((p, index) => {
const niveauGravite = niveauxGravite.find(n => n.niveauGravite === p.niveauGravite);
if(index > 0) {
popupHtml += '<div class="divider fr-my-1w"></div>'
}
popupHtml += `<div class="fr-mb-1w">
<p class="fr-badge situation-level-bg-${this.getRestrictionRank(p.niveauGravite)}">${niveauGravite.text}</p>
</div>
<div class="map-popup-zone">Zone&nbsp;: ${pmtilesData.nom}</div>`
<div class="map-popup-zone">Zone&nbsp;: ${p.nom}</div>`
});
} else {
popupHtml += `<div class="fr-mb-1w">
<p class="fr-badge situation-level-bg-0">Pas de restrictions</p>
Expand Down

0 comments on commit fd41714

Please sign in to comment.