fetch and display etape data

web/themes/custom/caravane/assets/js/vuejs/Etape.vue

@@ -1,11 +1,40 @@
 <template>
-  <div v-if="etapeData">
+  <div v-if="etape_number">
+    <header>
+      <h1>{{adresse.locality}}, {{ adresse.postal_code }}</h1>
+      <h2>{{title}}</h2>
+      <div>
+        <p>Étape n°{{etape_number}}</p>
+        <p>Du {{dates.value}} au {{ dates.end_value }}</p>
+      </div>
+      <img :src="vignette.url" :alt="vignette.alt">
+    </header>
+    <main>
+      <div v-for="partie in parties">
+        <h3 v-html="partie.title"></h3>
+        <p v-html="partie.text"></p>
+      </div>
+    </main>
+
+
+
+
 <!--     
     <div v-if="loading">Loading...</div>
     <div v-if="error">{{ error }}</div>
- -->    
+ -->
+
+    <div><pre>{{href}}</pre></div>
+
+    
+    <div><pre><b>GEOFIELD</b>{{geofield}}</pre></div>
+    <div><pre><b>GALERIES</b>{{galeries}}</pre></div>
+    <div><pre><b>PARTIES</b>{{parties}}</pre></div>
+    <div><pre><b>SAISON</b>{{saison}}</pre></div>
+    <div><pre><b>THEMATIQUES</b>{{thematiques}}</pre></div>
+
+
     <div>
-      <pre>{{ etapeData }}</pre>
     </div>
   </div>
 </template>
@@ -16,5 +45,28 @@
 
   const store = useEtapeStore();
 
-  const { etapeData, loading, error } = storeToRefs(store);
-</script>
+  const { 
+    loading, error,
+
+    href,
+    title,
+    adresse,
+    etape_number,
+    dates,
+    geofield,
+    galeries,
+    parties,
+    saison,
+    thematiques,
+    vignette,
+
+  } = storeToRefs(store);
+</script>
+
+<style lang="scss">
+  header {
+    img {
+      width: 100%;
+    }
+  }
+</style>