V1 Parcours pro ✨

MTES-MCT · Oct 14, 2024 · 2a6bdd5 · 2a6bdd5
1 parent ca550b8
commit 2a6bdd5
Show file tree

Hide file tree

Showing 15 changed files with 354 additions and 139 deletions.
diff --git 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
@@ -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,25 +56,24 @@
 <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;
 }
 
 .search-card {
   background-color: var(--background-default-grey);
   border: 1px var(--blue-cumulus-main-526) solid;
+  border-radius: 15px;
 
   &-wrapper {
     max-width: 700px;
     margin: auto;
   }
 }
 
-.fr-notice {
-  width: 100vw;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
+.wrap-map {
+  position: relative;
+  width: 100%;
 }
 </style>
diff --git 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
@@ -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;