From 2a6bdd554c2904892a7fd317c175e91f46b0452b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Lain=C3=A9?= <vincent.laine.utc@gmail.com>
Date: Wed, 9 Oct 2024 15:22:34 +0200
Subject: [PATCH] =?UTF-8?q?V1=20Parcours=20pro=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/api/index.ts                           |   8 +
 client/components/accueil/Presentation.vue    |  61 +++++--
 client/components/carte/Map.vue               | 110 ++++++-----
 client/components/mixins/MapPoint.vue         |  11 +-
 client/components/mixins/Search.vue           |  79 ++++----
 client/components/mixins/SearchPro.vue        | 172 ++++++++++++++++++
 client/pages/donnees/carte-commune/index.vue  |   3 -
 .../pages/donnees/carte-historique/index.vue  |   4 -
 client/pages/donnees/departement/index.vue    |   3 -
 client/pages/donnees/index.vue                |  18 +-
 client/pages/donnees/surface/index.vue        |   3 -
 client/pages/index.vue                        |   1 -
 client/store/address.ts                       |   2 +-
 client/store/refData.ts                       |   2 +
 client/utils/index.ts                         |  16 +-
 15 files changed, 354 insertions(+), 139 deletions(-)
 create mode 100644 client/components/mixins/SearchPro.vue

diff --git a/client/api/index.ts b/client/api/index.ts
index cc14df0..26f4547 100644
--- a/client/api/index.ts
+++ b/client/api/index.ts
@@ -169,6 +169,14 @@ const index = {
       },
     });
   },
+
+  getZonesByDepartement(depCode: string): Promise<any> {
+    const runtimeConfig = useRuntimeConfig();
+    return useFetch(`zones/departement/${depCode}`, {
+      method: 'GET',
+      baseURL: runtimeConfig.public.apiSecheresseUrl,
+    });
+  },
 };
 
 const _formatAddresses = (response: string): Address[] => {
diff --git a/client/components/accueil/Presentation.vue b/client/components/accueil/Presentation.vue
index 48462ba..fb39b99 100644
--- a/client/components/accueil/Presentation.vue
+++ b/client/components/accueil/Presentation.vue
@@ -1,16 +1,52 @@
 <script setup lang="ts">
+const proParcours = ref(false);
+const typeEau = ref('AEP');
+const departementCode = ref(null);
+const pointSelected = ref(null);
+const profil = ref(null);
+
+const selectPointOnMap = (event: any) => {
+  pointSelected.value = event;
+};
+
+const updateFormData = (formData: any) => {
+  typeEau.value = formData.typeEau;
+  profil.value = formData.profil;
+}
 </script>
 
 <template>
   <div class="presentation fr-py-4w">
-    <div class="fr-container fr-grid-row fr-grid-row--middle">
-      <div class="fr-col-12 fr-col-lg-6">
-        <h1>Suis-je concerné par les restrictions ?</h1>
-      </div>
+    <div class="fr-container">
+      <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
+        <div class="fr-col-12 text-align-center">
+          <h1>Suis-je concerné par les restrictions ?</h1>
+        </div>
+        <div class="fr-col-lg-7 fr-hidden fr-unhidden-lg wrap-map">
+          <CarteMap :embedded="false"
+                    :light="true"
+                    :hideDownloadBtn="true"
+                    :hideTypeEau="true"
+                    :typeEau="typeEau"
+                    class="wrap-map"
+                    @selectPoint="selectPointOnMap($event)" />
+        </div>
+
+        <div class="search-card fr-col-12 fr-col-lg-5 fr-p-md-3w fr-p-1w">
+          <div class="search-card-wrapper">
+            <MixinsSearch @formData="updateFormData($event)"
+                          :pointSelected="pointSelected" />
+          </div>
+        </div>
 
-      <div class="search-card fr-col-12 fr-col-lg-6 fr-p-md-3w fr-p-1w">
-        <div class="search-card-wrapper">
-          <MixinsSearch />
+        <div class="fr-col-12 fr-hidden-lg wrap-map">
+          <CarteMap :embedded="false"
+                    :light="true"
+                    :hideDownloadBtn="true"
+                    :hideTypeEau="true"
+                    :typeEau="typeEau"
+                    class="wrap-map"
+                    @selectPoint="selectPointOnMap($event)" />
         </div>
       </div>
     </div>
@@ -20,7 +56,7 @@
 <style scoped lang="scss">
 .presentation {
   background: var(--yellow-tournesol-975-75);
-  background-image: url( '/accueil_background.svg' );
+  background-image: url('/accueil_background.svg');
   background-size: cover;
   background-position: bottom;
 }
@@ -28,6 +64,7 @@
 .search-card {
   background-color: var(--background-default-grey);
   border: 1px var(--blue-cumulus-main-526) solid;
+  border-radius: 15px;
 
   &-wrapper {
     max-width: 700px;
@@ -35,10 +72,8 @@
   }
 }
 
-.fr-notice {
-  width: 100vw;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
+.wrap-map {
+  position: relative;
+  width: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/client/components/carte/Map.vue b/client/components/carte/Map.vue
index d6ebf7d..ddb1c15 100644
--- a/client/components/carte/Map.vue
+++ b/client/components/carte/Map.vue
@@ -13,7 +13,9 @@ const props = defineProps<{
   date: string,
   area: string,
   loading: boolean,
-  light: boolean,
+  hideDownloadBtn: boolean,
+  hideTypeEau: boolean,
+  typeEau: string,
 }>();
 
 const emit = defineEmits<{
@@ -37,6 +39,7 @@ const showRestrictionsBtn = ref(true);
 const showError = ref(false);
 const refDataStore = useRefDataStore();
 const depsSelected = ref([]);
+const loading = ref(false);
 
 const initialState = [[-7.075195, 41.211722], [11.403809, 51.248163]];
 
@@ -112,10 +115,22 @@ onMounted(() => {
     addSourceAndLayerZones(PMTILES_URL);
   });
 
-  map.value?.on('click', 'zones-data', (e: any) => {
-    zoneSelected.value = e.features[0].properties.id;
+  map.value?.on('click', 'zones-data', async (e: any) => {
+    if (loading.value) {
+      return;
+    }
+    loading.value = true;
+    const coordinates = e.lngLat;
+    const properties = e.features[0].properties;
+    zoneSelected.value = properties.id;
+
+    const dataAddress = (await api.searchAddressByLatlon(coordinates.lng, coordinates.lat)).data;
+    const dataGeo = (await api.searchGeoByLatlon(coordinates.lng, coordinates.lat)).data;
+
+    const description = utils.generatePopupHtml(properties, showRestrictionsBtn.value, dataAddress.value?.features[0], dataGeo.value[0]);
+    loading.value = false;
+
     updateContourFilter();
-    const description = utils.generatePopupHtml(e.features[0].properties, showRestrictionsBtn.value);
 
     popup.setLngLat(e.lngLat).setHTML(description).addTo(map.value);
 
@@ -124,12 +139,6 @@ onMounted(() => {
       return;
     }
     btn.addEventListener('click', async () => {
-      let dataAddress;
-      let dataGeo;
-      dataAddress = (await api.searchAddressByLatlon(e.lngLat.lng, e.lngLat.lat)).data;
-      if (!dataAddress.value?.features[0]) {
-        dataGeo = (await api.searchGeoByLatlon(e.lngLat.lng, e.lngLat.lat)).data;
-      }
       utils.searchZones(!dataGeo?.value ? dataAddress.value.features[0] : null,
         dataGeo?.value ? dataGeo.value[0] : null,
         profile.value,
@@ -189,7 +198,7 @@ const typeEauTags: Ref<any[]> = ref([{
   label: 'Eau souterraine',
   value: 'SOU',
 }]);
-const selectedTypeEau: Ref<string> = ref('AEP');
+const selectedTypeEau: Ref<string> = ref(props.typeEau ? props.typeEau : 'AEP');
 const adressStore = useAddressStore();
 const { profile } = storeToRefs(adressStore);
 const router = useRouter();
@@ -313,6 +322,11 @@ async function downloadMap() {
   emit('downloadMap', selectedTypeEau.value);
 }
 
+watch(() => props.typeEau, () => {
+  selectedTypeEau.value = props.typeEau;
+  updateLayerFilter();
+});
+
 watch(() => selectedTypeEau.value, () => {
   resetZoneSelected();
 });
@@ -378,7 +392,7 @@ watch(() => props.area, () => {
 </script>
 
 <template>
-  <div v-if="isMapSupported">
+  <div class="full-width" v-if="isMapSupported">
     <div class="map-pre-actions" data-html2canvas-ignore="true">
       <div v-if="showError"
            class="map-pre-actions-card fr-p-1w fr-m-1w">
@@ -387,7 +401,8 @@ watch(() => props.area, () => {
                    :closeable="false"
         />
       </div>
-      <div class="map-pre-actions-card fr-p-1w fr-m-1w">
+      <div v-if="!hideTypeEau"
+           class="map-pre-actions-card fr-p-1w fr-m-1w">
         <h6 class="fr-mb-1w fr-mr-2w">Situation par ressource :</h6>
         <DsfrRadioButton v-for="option of typeEauTags"
                          :modelValue="selectedTypeEau"
@@ -407,37 +422,13 @@ watch(() => props.area, () => {
                  tag-name="button" />
       </div>
     </div>
-    <div class="fr-grid-row fr-grid-row--gutters">
-      <div :class="light ? 'fr-col-12' : 'fr-col-12 fr-col-lg-9'" style="position:relative;"
-           :style="embedded ? 'height: calc(100vh - 125px)' : 'height: 75vh'">
-        <div :class="{
-          'map-wrap__light': light,
-          'map-wrap-embedded': embedded
-        }" class="map-wrap">
-          <div class="map" ref="mapContainer"></div>
-        </div>
-      </div>
-      <div v-if="!light" class="map-legend fr-col-12 fr-col-lg-3">
-        <h3>Niveau de restriction affiché sur la carte</h3>
-        <DsfrAccordionsGroup>
-          <li v-for="legend in niveauxGravite">
-            <DsfrAccordion
-              :expanded-id="expandedId"
-              @expand="expandedId = $event">
-              <template v-slot:title>
-                <DsfrBadge small
-                           class="fr-mr-1w"
-                           :class="legend.class"
-                           type=""
-                           :label="legend.text" />
-              </template>
-              {{ legend.description }}
-            </DsfrAccordion>
-          </li>
-        </DsfrAccordionsGroup>
+    <div style="position:relative;"
+         :style="embedded ? 'height: calc(100vh - 125px)' : 'height: 75vh'">
+      <div class="map-wrap" :class="{'map-wrap--loading': loading}">
+        <div class="map" ref="mapContainer"></div>
       </div>
     </div>
-    <div v-if="light" class="fr-grid-row map-legend">
+    <div class="fr-grid-row map-legend fr-mt-1w">
       <DsfrBadge small
                  no-icon
                  class="situation-level-bg-0 fr-mr-1w"
@@ -460,7 +451,9 @@ watch(() => props.area, () => {
                  label="crise" />
     </div>
 
-    <div data-html2canvas-ignore="true" class="text-align-right">
+    <div v-if="!hideDownloadBtn"
+         data-html2canvas-ignore="true"
+         class="text-align-right">
       <DsfrButton @click="downloadMap()">
         Télécharger la carte en .png
       </DsfrButton>
@@ -483,28 +476,27 @@ watch(() => props.area, () => {
   </DsfrModal>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .map-wrap {
-  position: absolute;
-  width: calc(100vw + 32px);
-  max-width: calc(100% + 32px);
-  height: calc(75vh - 3rem);
-  left: -32px;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  left: 0;
 
   &-embedded {
+    width: calc(100vw + 32px);
+    left: -32px;
     height: calc(100vh - 125px - 12px);
   }
 
-  &.map-wrap__light {
-    position: relative;
-    width: 100%;
-    height: calc(75vh - 2rem);
-    left: 0;
-  }
-
   .map {
     width: 100%;
     height: 100%;
+    border-radius: 15px;
+  }
+
+  &--loading :deep(.maplibregl-canvas-container.maplibregl-interactive) {
+    cursor: wait;
   }
 }
 
@@ -530,11 +522,11 @@ h6 {
   font-size: 16px;
 }
 
-.maplibregl-map {
+:deep(.maplibregl-map) {
   font-family: inherit;
 }
 
-.maplibregl-popup-content {
+:deep(.maplibregl-popup-content) {
   border-radius: 4px;
   padding: 1rem;
   text-align: center;
@@ -547,7 +539,7 @@ h6 {
   }
 }
 
-.map-legend, .maplibregl-popup-content {
+.map-legend, :deep(.maplibregl-popup-content) {
   .situation-level-bg-1 {
     background-color: #FFEDA0;
     color: var(--grey-50-1000);
diff --git a/client/components/mixins/MapPoint.vue b/client/components/mixins/MapPoint.vue
index 4fd2e4e..b952b9a 100644
--- a/client/components/mixins/MapPoint.vue
+++ b/client/components/mixins/MapPoint.vue
@@ -79,6 +79,7 @@ onMounted(() => {
         lat: coordinates.lat,
         commune: dataAddress.value?.features[0]?.properties?.citycode ? dataAddress.value.features[0].properties.citycode :
           dataGeo.value[0]?.code ? dataGeo.value[0].code : null,
+        communeNom: dataGeo.value[0]?.nom,
       };
       emit('selectPoint', toReturn);
       marker.setLngLat(coordinates).addTo(map.value);
@@ -119,7 +120,7 @@ const flyToLocation = (bounds: any) => {
 
 <template>
 
-  <div v-if="isMapSupported">
+  <div class="full-width" v-if="isMapSupported">
     <div class="fr-grid-row fr-grid-row--gutters">
       <div class="fr-col-12 overall-wrapper">
         <div class="map-pre-actions">
@@ -148,7 +149,7 @@ const flyToLocation = (bounds: any) => {
   </template>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .overall-wrapper {
   height: 50vh;
   position: relative;
@@ -165,7 +166,7 @@ const flyToLocation = (bounds: any) => {
     height: 100%;
   }
 
-  &--loading .maplibregl-canvas-container.maplibregl-interactive {
+  &--loading :deep(.maplibregl-canvas-container.maplibregl-interactive) {
     cursor: wait;
   }
 }
@@ -192,11 +193,11 @@ h6 {
   font-size: 16px;
 }
 
-.maplibregl-map {
+:deep(.maplibregl-map) {
   font-family: inherit;
 }
 
-.maplibregl-popup-content {
+:deep(.maplibregl-popup-content) {
   border-radius: 4px;
   padding: 1rem;
   text-align: center;
diff --git a/client/components/mixins/Search.vue b/client/components/mixins/Search.vue
index d230b25..dca1d9c 100644
--- a/client/components/mixins/Search.vue
+++ b/client/components/mixins/Search.vue
@@ -1,34 +1,38 @@
 <script setup lang="ts">
-import { Ref } from "vue";
-import utils from "../../utils";
-import { Address } from "../../dto/address.dto";
-import { Geo } from "~/client/dto/geo.dto";
+import { Ref } from 'vue';
+import utils from '../../utils';
+import { Address } from '../../dto/address.dto';
+import { Geo } from '~/client/dto/geo.dto';
 import { storeToRefs } from 'pinia';
 import { useAddressStore } from '../../store/address';
 import { helpers, required, requiredIf } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';
 
+const emit = defineEmits<{
+  formData: any,
+}>();
+
 const addressStore = useAddressStore();
 const router = useRouter();
 const route = useRoute();
-const {profile, typeEau} = storeToRefs(addressStore);
+const { profile, typeEau } = storeToRefs(addressStore);
 const profileOptions = [
   {
     value: 'particulier',
-    text: 'Un particulier'
+    text: 'Un particulier',
   },
   {
     value: 'entreprise',
-    text: 'Un professionnel'
+    text: 'Un professionnel',
   },
   {
     value: 'collectivite',
-    text: 'Une collectivité'
+    text: 'Une collectivité',
   },
   {
     value: 'exploitation',
-    text: 'Une exploitation agricole'
-  }
+    text: 'Une exploitation agricole',
+  },
 ];
 const typeEauOptions = [
   {
@@ -60,38 +64,39 @@ const formData = reactive({
   profil: ref(profile.value),
   address: null,
   geo: null,
-  typeEau:  ref(typeEau.value),
+  typeEau: ref(typeEau.value),
 });
 const rules = computed(() => {
   return {
     profil: {
-      required: helpers.withMessage('Le profil est obligatoire.', required)
+      required: helpers.withMessage('Le profil est obligatoire.', required),
     },
     typeEau: {
-      required: helpers.withMessage('Le type d\'eau est obligatoire.', required)
+      required: helpers.withMessage('Le type d\'eau est obligatoire.', required),
     },
     address: {
-      requiredIf: requiredIf(!formData.geo)
+      requiredIf: requiredIf(!formData.geo),
     },
     geo: {
-      requiredIf: requiredIf(!formData.address)
+      requiredIf: requiredIf(!formData.address),
     },
-  }
+  };
 });
 
 const v$ = useVuelidate(rules, formData);
 
-const searchZone = () => {
-  if (!formData.address && !formData.geo) {
+const searchZone = async () => {
+  await v$.value.$validate();
+  if (v$.value.$error) {
     return;
   }
   utils.searchZones(formData.address, formData.geo, formData.profil, formData.typeEau, router, modalTitle, modalText, modalIcon, modalActions, modalOpened, loading.value);
-}
+};
 
 const setAddress = (address: Address | null, geo: Geo | null) => {
   formData.address = address;
   formData.geo = geo;
-}
+};
 
 const closeModal = (): void => {
   modalOpened.value = false;
@@ -99,36 +104,42 @@ const closeModal = (): void => {
 </script>
 
 <template>
-  <div class="search fr-grid-row fr-grid-row--gutters">
-    <div class="fr-col-12">
+  <div class="search">
+    <div>
       <DsfrInputGroup>
         <DsfrSelect
           label="Choisissez votre profil de consommateur d’eau"
           :options="profileOptions"
           v-model="formData.profil"
+          @update:modelValue="emit('formData', formData)"
           required
         />
       </DsfrInputGroup>
     </div>
-    <div class="fr-col-12">
-      <MixinsSearchAddress @search="setAddress($event.address, $event.geo)"
-                           :required="true"
-                           :query="query"
-                           :light="true"
-                           :showGeoloc="true"
-                           :loading="loading" />
-    </div>
-    <div class="fr-col-12">
+    <div>
       <DsfrInputGroup>
         <DsfrSelect
           label="Choisissez le type d’eau que vous consommez"
           :options="typeEauOptions"
           v-model="formData.typeEau"
+          @update:modelValue="emit('formData', formData)"
           required
         />
       </DsfrInputGroup>
     </div>
-    <div class="fr-col-12">
+    <div>
+      <p class="fr-mb-0">Cliquez sur la carte pour indiquer où se situe votre {{ formData.profil === 'particulier' ? 'adresse' : 'point de prélèvement'}}</p>
+    </div>
+    <div class="divider fr-my-1w">ou</div>
+    <div>
+      <MixinsSearchAddress @search="setAddress($event.address, $event.geo)"
+                           :required="true"
+                           :query="query"
+                           :light="true"
+                           :showGeoloc="true"
+                           :loading="loading" />
+    </div>
+    <div class="fr-mt-2w">
       <DsfrButton @click="searchZone()"
                   :disabled="loading || v$.$invalid">
         Je consulte les restrictions
@@ -145,9 +156,9 @@ const closeModal = (): void => {
   </DsfrModal>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .search {
-  .fr-select {
+  :deep(.fr-select) {
     width: fit-content;
   }
 }
diff --git a/client/components/mixins/SearchPro.vue b/client/components/mixins/SearchPro.vue
new file mode 100644
index 0000000..2d924a0
--- /dev/null
+++ b/client/components/mixins/SearchPro.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { Ref } from 'vue';
+import utils from '../../utils';
+import { Address } from '../../dto/address.dto';
+import { Geo } from '../../dto/geo.dto';
+import { requiredIf } from '@vuelidate/validators';
+import useVuelidate from '@vuelidate/core';
+import api from '../../api';
+
+const props = defineProps<{
+  departementCode: string,
+  typeEau: string;
+  profil: string;
+  pointSelected: any;
+}>();
+
+const emit = defineEmits<{
+  return: any;
+}>();
+
+const router = useRouter();
+const zoneAlerteOptions: Ref<any[]> = ref([]);
+
+const modalOpened: Ref<boolean> = ref(false);
+const modalTitle: Ref<string> = ref('');
+const modalText: Ref<string> = ref('');
+const modalIcon: Ref<string> = ref('');
+const modalActions: Ref<any[]> = ref([]);
+const loading = ref(false);
+const query = ref('');
+
+const formData = reactive({
+  address: null,
+  geo: null,
+  zoneAlerte: null,
+  pointSelected: null,
+});
+
+const rules = computed(() => {
+  return {
+    address: {
+      requiredIf: requiredIf(!formData.geo && !formData.zoneAlerte && !formData.pointSelected),
+    },
+    geo: {
+      requiredIf: requiredIf(!formData.address && !formData.zoneAlerte && !formData.pointSelected),
+    },
+    zoneAlerte: {
+      requiredIf: requiredIf(!formData.address && !formData.geo && !formData.pointSelected),
+    },
+    pointSelected: {
+      requiredIf: requiredIf(!formData.address && !formData.geo && !formData.zoneAlerte),
+    },
+  };
+});
+
+const v$ = useVuelidate(rules, formData);
+
+const searchZone = async () => {
+  await v$.value.$validate();
+  if (v$.value.$error) {
+    return;
+  }
+  if (formData.pointSelected) {
+    const fakeAdresse = <Address>{
+      geometry: {
+        coordinates: [formData.pointSelected.lng, formData.pointSelected.lat],
+      },
+      properties: {
+        citycode: formData.pointSelected.commune,
+        label: formData.pointSelected.communeNom,
+      },
+    };
+    utils.searchZones(fakeAdresse, null, props.profil, props.typeEau, router, modalTitle, modalText, modalIcon, modalActions, modalOpened, loading.value);
+  } else if (formData.address || formData.geo) {
+    utils.searchZones(formData.address, formData.geo, props.profil, props.typeEau, router, modalTitle, modalText, modalIcon, modalActions, modalOpened, loading.value);
+  } else {
+    // SEARCH BY ZA
+  }
+};
+
+const setAddress = (address: Address | null, geo: Geo | null) => {
+  formData.address = address;
+  formData.geo = geo;
+};
+
+const closeModal = (): void => {
+  modalOpened.value = false;
+};
+
+const loadZoneAlerte = async () => {
+  const { data, error } = await api.getZonesByDepartement(props.departementCode);
+  if (data.value) {
+    zoneAlerteOptions.value = [];
+    let za = data.value
+      .filter((zone: any) => zone.type === props.typeEau)
+      .sort((a: any, b: any) => a.code?.localeCompare(b.code));
+    // On enlève les doublons
+    const zaMap = new Map();
+    za.forEach((z: any) => {
+      const key = `${z.code}_${z.niveauGravite}`;
+      if (!zaMap.has(key)) {
+        zaMap.set(key, z);
+      }
+    });
+    zaMap.values().forEach((zone: any) => {
+      zoneAlerteOptions.value.push({
+        text: `${zone.code ? zone.code + ' ' : ''}${zone.nom}`,
+        value: zone.id,
+      });
+    });
+  }
+};
+
+watch(() => [props.typeEau, props.departementCode], () => {
+  loadZoneAlerte();
+}, { immediate: true });
+
+watch(() => props.pointSelected, () => {
+  if (props.pointSelected && props.pointSelected.lng && props.pointSelected.lat && props.pointSelected.commune) {
+    formData.pointSelected = props.pointSelected;
+    searchZone();
+  }
+}, { immediate: true });
+</script>
+
+<template>
+  <div class="search">
+    <div>
+      <h3 class="fr-h6">Trois possibilités pour préciser la zone de prélèvement</h3>
+      <p>Cliquez sur la carte pour indiquer où se situe votre point de prélèvement</p>
+    </div>
+    <div class="divider">ou</div>
+    <div>
+      <DsfrInputGroup>
+        <DsfrSelect
+          label="Choisissez la zone d'alerte"
+          :disabled="zoneAlerteOptions.length <= 0"
+          :options="zoneAlerteOptions"
+          v-model="formData.zoneAlerte"
+        />
+      </DsfrInputGroup>
+    </div>
+    <div class="divider">ou</div>
+    <div>
+      <MixinsSearchAddress @search="setAddress($event.address, $event.geo)"
+                           :required="false"
+                           :query="query"
+                           :light="true"
+                           :showGeoloc="true"
+                           :loading="loading" />
+    </div>
+    <div class="fr-pt-2w text-align-right">
+      <DsfrButton @click="emit('return')"
+                  class="fr-mr-1w"
+                  secondary>
+        Précédent
+      </DsfrButton>
+      <DsfrButton @click="searchZone()"
+                  :disabled="loading || v$.$invalid">
+        Suivant
+      </DsfrButton>
+    </div>
+  </div>
+
+  <DsfrModal :opened="modalOpened"
+             :title="modalTitle"
+             :icon="modalIcon"
+             :actions=modalActions
+             @close="closeModal">
+    <div v-html="modalText"></div>
+  </DsfrModal>
+</template>
\ No newline at end of file
diff --git a/client/pages/donnees/carte-commune/index.vue b/client/pages/donnees/carte-commune/index.vue
index d936271..57f3570 100644
--- a/client/pages/donnees/carte-commune/index.vue
+++ b/client/pages/donnees/carte-commune/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Ref } from 'vue';
-import { useRefDataStore } from '../../../store/refData';
 import html2canvas from 'html2canvas';
 
 definePageMeta({
@@ -15,8 +14,6 @@ const links: Ref<any[]> = ref([{ to: '/', text: 'Accueil' }, {
   text: 'Données sécheresse',
   to: '/donnees',
 }, { text: 'Évolution de la situation de la sécheresse par commune' }]);
-const refDataStore = useRefDataStore();
-await refDataStore.loadRefData();
 const filterData: any = ref(null);
 const loading = ref(false);
 const screenshotZone = ref();
diff --git a/client/pages/donnees/carte-historique/index.vue b/client/pages/donnees/carte-historique/index.vue
index 7545a5b..c4aeb9b 100644
--- a/client/pages/donnees/carte-historique/index.vue
+++ b/client/pages/donnees/carte-historique/index.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { Ref } from 'vue';
-import api from '../../../api';
-import { useRefDataStore } from '../../../store/refData';
 import html2canvas from 'html2canvas';
 
 definePageMeta({
@@ -16,8 +14,6 @@ const links: Ref<any[]> = ref([{ to: '/', text: 'Accueil' }, {
   text: 'Données sécheresse',
   to: '/donnees',
 }, { text: 'Carte et historique des restrictions' }]);
-const refDataStore = useRefDataStore();
-await refDataStore.loadRefData();
 const filterData: any = ref(null);
 const filterText: any = ref(null);
 const screenshotZone = ref();
diff --git a/client/pages/donnees/departement/index.vue b/client/pages/donnees/departement/index.vue
index 4c602ae..739bfcc 100644
--- a/client/pages/donnees/departement/index.vue
+++ b/client/pages/donnees/departement/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Ref } from 'vue';
-import { useRefDataStore } from '../../../store/refData';
 
 definePageMeta({
   layout: 'basic',
@@ -14,8 +13,6 @@ const links: Ref<any[]> = ref([{ to: '/', text: 'Accueil' }, {
   text: 'Données sécheresse',
   to: '/donnees',
 }, { text: 'Évolution journalière du nombre de départements soumis à restriction' }]);
-const refDataStore = useRefDataStore();
-await refDataStore.loadRefData();
 </script>
 
 <template>
diff --git a/client/pages/donnees/index.vue b/client/pages/donnees/index.vue
index 8cce653..642fd93 100644
--- a/client/pages/donnees/index.vue
+++ b/client/pages/donnees/index.vue
@@ -52,15 +52,15 @@ const links: Ref<any[]> = ref([{ to: '/', text: 'Accueil' }, { text: 'Données s
           >
           </DsfrCard>
         </div>
-<!--        <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">-->
-<!--          <DsfrCard-->
-<!--            img-src="/donnee_carte_commune.png"-->
-<!--            link="/donnees/carte-commune"-->
-<!--            alt-img="Image d'illustration de la carte"-->
-<!--            title="Intensité des sécheresses passées"-->
-<!--          >-->
-<!--          </DsfrCard>-->
-<!--        </div>-->
+        <div class="fr-col-12 fr-col-md-6 fr-col-lg-3">
+          <DsfrCard
+            img-src="/donnee_carte_commune.png"
+            link="/donnees/carte-commune"
+            alt-img="Image d'illustration de la carte"
+            title="Intensité des sécheresses passées"
+          >
+          </DsfrCard>
+        </div>
       </div>
     </div>
   </div>
diff --git a/client/pages/donnees/surface/index.vue b/client/pages/donnees/surface/index.vue
index 86a1445..233277e 100644
--- a/client/pages/donnees/surface/index.vue
+++ b/client/pages/donnees/surface/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Ref } from 'vue';
-import { useRefDataStore } from '../../../store/refData';
 
 definePageMeta({
   layout: 'basic',
@@ -14,8 +13,6 @@ const links: Ref<any[]> = ref([{ to: '/', text: 'Accueil' }, {
   text: 'Données sécheresse',
   to: '/donnees',
 }, { text: 'Évolution journalière du pourcentage de la surface concernée par des niveaux de gravité' }]);
-const refDataStore = useRefDataStore();
-await refDataStore.loadRefData();
 </script>
 
 <template>
diff --git a/client/pages/index.vue b/client/pages/index.vue
index b4ee247..94bf7d6 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -18,7 +18,6 @@ const {isParticulier} = addressStore;
   <div>
     <AccueilPresentation/>
     <AccueilTypesEau/>
-    <CarteWrapper />
     <MixinsDonnees />
     <MixinsEmail/>
     <AccueilGestes v-if="isParticulier()"/>
diff --git a/client/store/address.ts b/client/store/address.ts
index c794c14..1c82285 100644
--- a/client/store/address.ts
+++ b/client/store/address.ts
@@ -40,7 +40,7 @@ export const useAddressStore = defineStore('addressStore', () => {
 
   function getCodeDepartement(): string | undefined {
     if (address.value) {
-      return address.value.properties.postcode.slice(0, 2);
+      return address.value.properties.citycode.slice(0, 2);
     } else if (geo.value) {
       return geo.value.codeDepartement
     }
diff --git a/client/store/refData.ts b/client/store/refData.ts
index 9129060..4d9190f 100644
--- a/client/store/refData.ts
+++ b/client/store/refData.ts
@@ -33,5 +33,7 @@ export const useRefDataStore = defineStore('refDataStore', () => {
     }
   }
 
+  loadRefData();
+
   return { setDepartements, departements, setRegions, regions, setBassinsVersants, bassinsVersants, loadRefData };
 });
\ No newline at end of file
diff --git a/client/utils/index.ts b/client/utils/index.ts
index 6f10786..21748e6 100644
--- a/client/utils/index.ts
+++ b/client/utils/index.ts
@@ -222,20 +222,28 @@ const index = {
     });
   },
 
-  generatePopupHtml(pmtilesData: any, showRestrictionsBtn: boolean) {
+  generatePopupHtml(pmtilesData: any, showRestrictionsBtn: boolean, address?: Address, geo?: Geo) {
     const niveauGravite = niveauxGravite.find(n => n.niveauGravite === pmtilesData.niveauGravite);
+
+    let addressName = '';
+    if (address?.properties?.label) {
+      addressName = `Adresse proche&nbsp: ${address.properties.label}`;
+    } else if (geo?.code) {
+      addressName = `Commune&nbsp: ${geo.nom} (${geo.code})`;
+    }
     let popupHtml = `
-<div class="map-popup-zone">${pmtilesData.nom}</div>
-<div class="fr-my-1w">
+<div class="fr-mb-1w">
 <p class="fr-badge situation-level-bg-${this.getRestrictionRank(pmtilesData.niveauGravite)}">${niveauGravite.text}</p>
 </div>
+<div class="map-popup-zone">Zone&nbsp;: ${pmtilesData.nom}</div>
+<div class="fr-my-1w">${addressName}</div>
 `;
 
     if (showRestrictionsBtn) {
       popupHtml += `
 <div>
 <button class="fr-btn btn-map-popup">
-Voir les restrictions
+Je consulte les restrictions
 </button>
 </div>`;
     }