92 lines
1.9 KiB
Vue
92 lines
1.9 KiB
Vue
<template>
|
|
<Transition>
|
|
<div v-if="etape.etape_number">
|
|
<header>
|
|
<h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
|
|
<h2>{{etape.title}}</h2>
|
|
<div>
|
|
<p>Étape n°{{etape.etape_number}}</p>
|
|
<p>Du {{etape.dates.value}} au {{ etape.dates.end_value }}</p>
|
|
</div>
|
|
<img :src="etape.vignette.url" :alt="etape.vignette.alt">
|
|
</header>
|
|
<main>
|
|
<div v-for="partie in etape.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>{{etape.geofield}}</pre></div>
|
|
<div><pre><b>GALERIES</b>{{etape.galeries}}</pre></div>
|
|
<div><pre><b>PARTIES</b>{{etape.parties}}</pre></div>
|
|
<div><pre><b>SAISON</b>{{etape.saison}}</pre></div>
|
|
<div><pre><b>THEMATIQUES</b>{{etape.thematiques}}</pre></div>
|
|
|
|
|
|
<div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
<Transition>
|
|
<div v-if="page.title">
|
|
<header>
|
|
<h1>{{ page.title }}</h1>
|
|
</header>
|
|
<main>
|
|
<div v-html="page.text"></div>
|
|
</main>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { watch } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useContentStore } from '../stores/content';
|
|
|
|
const store = useContentStore();
|
|
|
|
const {
|
|
loading, error,
|
|
href,
|
|
etape,
|
|
page,
|
|
|
|
} = storeToRefs(store);
|
|
|
|
watch(() => href.value, (newHref) => {
|
|
if (newHref) {
|
|
history.pushState(null, '', newHref);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.v-enter-active,
|
|
.v-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.v-enter-from,
|
|
.v-leave-to {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.v-leave-from {
|
|
transform: translateY(0%);
|
|
opacity: 1;
|
|
}
|
|
</style> |