Formattage

reseau-constellation · Mar 20, 2024 · fd31ee4 · fd31ee4
1 parent 532d011
commit fd31ee4
Show file tree

Hide file tree

Showing 8 changed files with 223 additions and 154 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -5,37 +5,37 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module 'vue' {
+declare module "vue" {
   export interface GlobalComponents {
-    Accueil: (typeof import("./src/components/étapes/Accueil.vue"))["default"]
-    'AjoutDonnée': typeof import('./src/components/étapes/démo/AjoutDonnée.vue')['default']
-    BtnMenuLangues: typeof import('./src/components/BtnMenuLangues.vue')['default']
-    'CarteFonctionalité': typeof import('./src/components/CarteFonctionalité.vue')['default']
-    CarteLien: typeof import('./src/components/étapes/communs/CarteLien.vue')['default']
-    CarteOption: (typeof import("./src/components/étapes/communs/CarteOption.vue"))["default"]
-    'CarteTéléchargement': typeof import('./src/components/CarteTéléchargement.vue')['default']
-    CarteUtilisation: typeof import('./src/components/CarteUtilisation.vue')['default']
-    copy: (typeof import("./src/components/MenuLangues copy.vue"))["default"]
-    'ÉtapeCours': typeof import('./src/components/ÉtapeCours.vue')['default']
-    GraphiqueStation: typeof import('./src/components/étapes/démo/GraphiqueStation.vue')['default']
-    IndiceInstallationApple: typeof import('./src/components/IndiceInstallationApple.vue')['default']
-    InfoStation: typeof import('./src/components/étapes/démo/InfoStation.vue')['default']
-    'ItemLangueProgrès': typeof import('./src/components/ItemLangueProgrès.vue')['default']
-    MarqueurSite: (typeof import("./src/components/étapes/démo/MarqueurSite.vue"))["default"]
-    MarqueurStation: typeof import('./src/components/étapes/démo/MarqueurStation.vue')['default']
-    MenuLangues: typeof import('./src/components/MenuLangues.vue')['default']
-    'MesDonnées': typeof import('./src/components/étapes/démo/MesDonnées.vue')['default']
-    OptionObtConstellation: (typeof import("./src/components/étapes/obtConstellation/OptionObtConstellation.vue"))["default"]
-    PageAccueil: (typeof import("./src/components/étapes/PageAccueil.vue"))["default"]
-    PagePrincipale: typeof import('./src/components/PagePrincipale.vue')['default']
-    'PageTéléchargements': (typeof import("./src/components/PageTéléchargements.vue"))["default"]
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SectionAccueil: typeof import('./src/components/étapes/SectionAccueil.vue')['default']
-    SectionCode: typeof import('./src/components/étapes/SectionCode.vue')['default']
-    'SectionDémo': typeof import('./src/components/étapes/démo/SectionDémo.vue')['default']
-    SectionObtConstellation: typeof import('./src/components/étapes/obtConstellation/SectionObtConstellation.vue')['default']
-    'SectionTéléchargerDonnées': typeof import('./src/components/étapes/SectionTéléchargerDonnées.vue')['default']
-    TitreSection: typeof import('./src/components/TitreSection.vue')['default']
+    Accueil: (typeof import("./src/components/étapes/Accueil.vue"))["default"];
+    AjoutDonnée: (typeof import("./src/components/étapes/démo/AjoutDonnée.vue"))["default"];
+    BtnMenuLangues: (typeof import("./src/components/BtnMenuLangues.vue"))["default"];
+    CarteFonctionalité: (typeof import("./src/components/CarteFonctionalité.vue"))["default"];
+    CarteLien: (typeof import("./src/components/étapes/communs/CarteLien.vue"))["default"];
+    CarteOption: (typeof import("./src/components/étapes/communs/CarteOption.vue"))["default"];
+    CarteTéléchargement: (typeof import("./src/components/CarteTéléchargement.vue"))["default"];
+    CarteUtilisation: (typeof import("./src/components/CarteUtilisation.vue"))["default"];
+    copy: (typeof import("./src/components/MenuLangues copy.vue"))["default"];
+    ÉtapeCours: (typeof import("./src/components/ÉtapeCours.vue"))["default"];
+    GraphiqueStation: (typeof import("./src/components/étapes/démo/GraphiqueStation.vue"))["default"];
+    IndiceInstallationApple: (typeof import("./src/components/IndiceInstallationApple.vue"))["default"];
+    InfoStation: (typeof import("./src/components/étapes/démo/InfoStation.vue"))["default"];
+    ItemLangueProgrès: (typeof import("./src/components/ItemLangueProgrès.vue"))["default"];
+    MarqueurSite: (typeof import("./src/components/étapes/démo/MarqueurSite.vue"))["default"];
+    MarqueurStation: (typeof import("./src/components/étapes/démo/MarqueurStation.vue"))["default"];
+    MenuLangues: (typeof import("./src/components/MenuLangues.vue"))["default"];
+    MesDonnées: (typeof import("./src/components/étapes/démo/MesDonnées.vue"))["default"];
+    OptionObtConstellation: (typeof import("./src/components/étapes/obtConstellation/OptionObtConstellation.vue"))["default"];
+    PageAccueil: (typeof import("./src/components/étapes/PageAccueil.vue"))["default"];
+    PagePrincipale: (typeof import("./src/components/PagePrincipale.vue"))["default"];
+    PageTéléchargements: (typeof import("./src/components/PageTéléchargements.vue"))["default"];
+    RouterLink: (typeof import("vue-router"))["RouterLink"];
+    RouterView: (typeof import("vue-router"))["RouterView"];
+    SectionAccueil: (typeof import("./src/components/étapes/SectionAccueil.vue"))["default"];
+    SectionCode: (typeof import("./src/components/étapes/SectionCode.vue"))["default"];
+    SectionDémo: (typeof import("./src/components/étapes/démo/SectionDémo.vue"))["default"];
+    SectionObtConstellation: (typeof import("./src/components/étapes/obtConstellation/SectionObtConstellation.vue"))["default"];
+    SectionTéléchargerDonnées: (typeof import("./src/components/étapes/SectionTéléchargerDonnées.vue"))["default"];
+    TitreSection: (typeof import("./src/components/TitreSection.vue"))["default"];
   }
 }
diff --git a/src/components/étapes/SectionCode.vue b/src/components/étapes/SectionCode.vue
@@ -34,9 +34,13 @@
       </div>
     </v-col>
     <v-col :cols="12" class="text-center text-h6">
-      {{ t('code.conclusion') }}
+      {{ t("code.conclusion") }}
       <br />
-      <v-icon icon="mdi-email-outline" start @click="() => ouvrirLien(`mailto://${COURRIEL_CONTACT}`)"/>
+      <v-icon
+        icon="mdi-email-outline"
+        start
+        @click="() => ouvrirLien(`mailto://${COURRIEL_CONTACT}`)"
+      />
       {{ COURRIEL_CONTACT }}
     </v-col>
   </etape-cours>
@@ -64,8 +68,8 @@ const { mdAndUp } = useDisplay();
 const { மொழியாக்கம்_பயன்படுத்து } = கிளிமூக்கை_பயன்படுத்து();
 const { $மொ: t } = மொழியாக்கம்_பயன்படுத்து({});
 
-const lienAppli = `https://appli.réseau-constellation.ca/#/données/nuée/${encodeURIComponent(ID_NUÉE_DONNÉES)}`
-const lienPython = "https://github.com/reseau-constellation/egu24-python"
-const lienR = "https://github.com/reseau-constellation/egu24-r"
-const lienJulia = "https://github.com/reseau-constellation/egu24-julia"
+const lienAppli = `https://appli.réseau-constellation.ca/#/données/nuée/${encodeURIComponent(ID_NUÉE_DONNÉES)}`;
+const lienPython = "https://github.com/reseau-constellation/egu24-python";
+const lienR = "https://github.com/reseau-constellation/egu24-r";
+const lienJulia = "https://github.com/reseau-constellation/egu24-julia";
 </script>
diff --git a/src/components/étapes/démo/GraphiqueStation.vue b/src/components/étapes/démo/GraphiqueStation.vue
@@ -1,9 +1,5 @@
 <template>
-  <v-sheet
-   width="100%"
-   :height="hauteur"
-   class="text-center mb-2"
-  >
+  <v-sheet width="100%" :height="hauteur" class="text-center mb-2">
     <div class="text-center">
       <div v-show="assezDeDonnées" ref="resizeRef" class="ma-6">
         <svg ref="svgRef" width="100%">
@@ -18,10 +14,10 @@
         :height="hauteur"
       >
         <v-card-text>
-            <div class="mx-auto text-h6 text-center text-disabled">
-                {{ t("démo.graphique.aucuneDonnée") }}
-            </div>
-        </v-card-text>  
+          <div class="mx-auto text-h6 text-center text-disabled">
+            {{ t("démo.graphique.aucuneDonnée") }}
+          </div>
+        </v-card-text>
       </v-card>
     </div>
   </v-sheet>
@@ -164,8 +160,6 @@ const useResizeObserver = () => {
   return { resizeState, resizeRef };
 };
 const { resizeRef, resizeState } = useResizeObserver();
-
-
 </script>
 <style scoped>
 svg {

diff --git a/src/components/étapes/démo/MarqueurStation.vue b/src/components/étapes/démo/MarqueurStation.vue
@@ -9,8 +9,14 @@
           </v-card-subtitle>
         </v-card-item>
         <v-card-text class="px-0 text-center">
-          <GraphiqueStation :hauteur="150" :vals="donnéesStation?.cumul"/>
-          <v-btn class="mt-2" variant="flat" icon="mdi-camera-outline" size="small" @click="()=>émettre('prendrePhoto')"/>
+          <GraphiqueStation :hauteur="150" :vals="donnéesStation?.cumul" />
+          <v-btn
+            class="mt-2"
+            variant="flat"
+            icon="mdi-camera-outline"
+            size="small"
+            @click="() => émettre('prendrePhoto')"
+          />
         </v-card-text>
       </v-card>
     </l-popup>
@@ -28,11 +34,12 @@ const props = defineProps<{
   idStation: string;
 }>();
 const émettre = defineEmits<{
-  (e: 'prendrePhoto'): void
+  (e: "prendrePhoto"): void;
 }>();
 
 const { எண்ணை_வடிவூட்டு } = எண்களைப்_பயன்படுத்து();
-const { utiliserDonnéesStation, numérisées, mesContributions, bdsCorresp } = utiliserDonnées();
+const { utiliserDonnéesStation, numérisées, mesContributions, bdsCorresp } =
+  utiliserDonnées();
 
 const latFormatté = எண்ணை_வடிவூட்டு(
   computed(() => Number.parseFloat(props.coords[0].toFixed(4))),
@@ -41,8 +48,7 @@ const longFormatté = எண்ணை_வடிவூட்டு(
   computed(() => Number.parseFloat(props.coords[1].toFixed(4))),
 );
 
-const donnéesStation = utiliserDonnéesStation({ idStation: props.idStation })
-
+const donnéesStation = utiliserDonnéesStation({ idStation: props.idStation });
 </script>
 <style>
 .leaflet-popup-content {

diff --git a/src/components/étapes/démo/SectionDémo.vue b/src/components/étapes/démo/SectionDémo.vue
@@ -12,37 +12,48 @@
       <v-divider class="my-4" />
     </v-col>
     <v-col :cols="mdAndUp ? 6 : 12">
-      <v-card class="px-6" variant="flat" height="65vh" style="overflow-y: scroll">
+      <v-card
+        class="px-6"
+        variant="flat"
+        height="65vh"
+        style="overflow-y: scroll"
+      >
         <div class="text-h5 d-flex">
           {{ t("démo.sousTitre") }}
           <v-spacer />
-
-          <v-btn icon="mdi-download" variant="flat" :loading="enTéléchargement" @click="()=>téléchargerDonnées()"/>
+
+          <v-btn
+            icon="mdi-download"
+            variant="flat"
+            :loading="enTéléchargement"
+            @click="() => téléchargerDonnées()"
+          />
           <v-switch
             v-model="précipSurCarte"
             true-icon="mdi-weather-pouring"
             false-icon="mdi-cloud-off-outline"
             :color="précipSurCarte ? 'primary' : undefined"
           />
         </div>
-        <v-card-text class="px-0" >
+        <v-card-text class="px-0">
           <v-row v-if="stationSélectionnée">
             <v-col :cols="9">
-              <v-img
-                :src="observation?.image"
-              />
+              <v-img :src="observation?.image" />
             </v-col>
             <v-col :cols="3">
               <v-card variant="flat">
                 <v-card-item class="px-0 pt-0">
                   <v-card-title>
                     {{ stationSélectionnée.id }}
                   </v-card-title>
-                  <v-card-subtitle> 
-                    <v-icon icon="mdi-map-marker-outline" start />{{ `${latFormatté}, ${longFormatté}` }} 
+                  <v-card-subtitle>
+                    <v-icon icon="mdi-map-marker-outline" start />{{
+                      `${latFormatté}, ${longFormatté}`
+                    }}
                     <br />
                     <span v-if="observation">
-                      <v-icon icon="mdi-clock-time-three-outline" start /> {{ new Date(observation.horo).toLocaleString() }}
+                      <v-icon icon="mdi-clock-time-three-outline" start />
+                      {{ new Date(observation.horo).toLocaleString() }}
                     </span>
                   </v-card-subtitle>
                 </v-card-item>
@@ -66,10 +77,13 @@
                   >
                     Submit
                   </v-btn>
-                  <v-btn class="my-2"
-                  width="100%"
-                  append-icon="mdi-camera-flip-outline" 
-                  variant="outlined" @click="()=>prendrePhoto()">
+                  <v-btn
+                    class="my-2"
+                    width="100%"
+                    append-icon="mdi-camera-flip-outline"
+                    variant="outlined"
+                    @click="() => prendrePhoto()"
+                  >
                     New photo
                   </v-btn>
                 </v-card-text>
@@ -79,10 +93,13 @@
           <div v-else class="mx-auto my-auto text-h5 text-center text-disabled">
             {{ t(plusDePhotos ? "démo.plusDePhotos" : "démo.choisirStation") }}
             <br />
-            <v-btn icon="mdi-camera-outline" variant="flat" @click="()=>prendrePhoto()" />
+            <v-btn
+              icon="mdi-camera-outline"
+              variant="flat"
+              @click="() => prendrePhoto()"
+            />
           </div>
         </v-card-text>
-
       </v-card>
     </v-col>
     <v-col :cols="mdAndUp ? 6 : 12">
@@ -110,26 +127,29 @@
             :key="station.id"
             :coords="station.coords"
             :id-station="station.id"
-            @prendre-photo="() => prendrePhoto({idStation: station.id})"
+            @prendre-photo="() => prendrePhoto({ idStation: station.id })"
           />
         </l-map>
       </div>
     </v-col>
     <v-col :cols="12" class="my-0 py-0">
       <div
-          class="px-6 text-disabled"
-          @click="() => ouvrirLien('https://data.smartphones4water.org/')"
-        >
-          {{ t("démo.source") }}
-          <v-icon class="mx-2" size="small" icon="mdi-open-in-new" />
-          {{ t("démo.merci") }}
-          <v-icon class="mx-2" icon="mdi-emoticon-happy-outline" size="small" />
+        class="px-6 text-disabled"
+        @click="() => ouvrirLien('https://data.smartphones4water.org/')"
+      >
+        {{ t("démo.source") }}
+        <v-icon class="mx-2" size="small" icon="mdi-open-in-new" />
+        {{ t("démo.merci") }}
+        <v-icon class="mx-2" icon="mdi-emoticon-happy-outline" size="small" />
       </div>
     </v-col>
   </etape-cours>
 </template>
 <script setup lang="ts">
-import { எண்களைப்_பயன்படுத்து, கிளிமூக்கை_பயன்படுத்து } from "@lassi-js/kilimukku-vue";
+import {
+  எண்களைப்_பயன்படுத்து,
+  கிளிமூக்கை_பயன்படுத்து,
+} from "@lassi-js/kilimukku-vue";
 import { useDisplay } from "vuetify";
 
 import EtapeCours from "@/components/ÉtapeCours.vue";
@@ -157,42 +177,48 @@ const { மொழியாக்கம்_பயன்படுத்து } =
 const { $மொ: t } = மொழியாக்கம்_பயன்படுத்து();
 const { எண்ணை_வடிவூட்டு } = எண்களைப்_பயன்படுத்து();
 
-const { choisirObservationAléatoire, exporterDonnées, contribuer } = utiliserDonnées();
-
+const { choisirObservationAléatoire, exporterDonnées, contribuer } =
+  utiliserDonnées();
 
 // Contrôles
 const précipSurCarte = ref(false);
-const stationSélectionnée = computed(()=>{
-  return stations.find(s => s.id === observation.value?.station)
+const stationSélectionnée = computed(() => {
+  return stations.find((s) => s.id === observation.value?.station);
 });
 
 const enTéléchargement = ref(false);
 const téléchargerDonnées = async () => {
   enTéléchargement.value = true;
   await exporterDonnées();
   enTéléchargement.value = false;
-  
-}
+};
 
 // Station
 const latFormatté = எண்ணை_வடிவூட்டு(
-  computed(() => Number.parseFloat(stationSélectionnée.value?.coords[0].toFixed(4) || "0")),
+  computed(() =>
+    Number.parseFloat(stationSélectionnée.value?.coords[0].toFixed(4) || "0"),
+  ),
 );
 const longFormatté = எண்ணை_வடிவூட்டு(
-  computed(() => Number.parseFloat(stationSélectionnée.value?.coords[1].toFixed(4) || "0")),
+  computed(() =>
+    Number.parseFloat(stationSélectionnée.value?.coords[1].toFixed(4) || "0"),
+  ),
 );
 
 // Sélection photos
 const observation = ref<InfoObservation>();
 const plusDePhotos = ref(false);
 let dernièreStationDemandée: string | undefined = undefined;
 
-const prendrePhoto = async ({idStation}: {idStation?: string} = {}) => {
+const prendrePhoto = async ({ idStation }: { idStation?: string } = {}) => {
   dernièreStationDemandée = idStation;
-  const nouvellePhoto = choisirObservationAléatoire({idStation, idPrésente: observation.value?.id})
+  const nouvellePhoto = choisirObservationAléatoire({
+    idStation,
+    idPrésente: observation.value?.id,
+  });
   observation.value = nouvellePhoto;
-  if (!nouvellePhoto) plusDePhotos.value = true
-}
+  if (!nouvellePhoto) plusDePhotos.value = true;
+};
 
 // Entrée données
 const précip = ref("");
@@ -214,14 +240,14 @@ const validPrécip = [
 
 const enSoumission = ref(false);
 const soumettreDonnée = async () => {
-  if (!observation.value) throw new Error("Observation non sélectionnée")
+  if (!observation.value) throw new Error("Observation non sélectionnée");
   enSoumission.value = true;
   await contribuer({
     précip: parseFloat(précip.value),
-    obs: observation.value
-  })
+    obs: observation.value,
+  });
   précip.value = "";
-  prendrePhoto({idStation: dernièreStationDemandée});
+  prendrePhoto({ idStation: dernièreStationDemandée });
   enSoumission.value = false;
 };
 </script>