description
This commit is contained in:
Nyavokevin
parent
e4f5c6db20
commit
3f70660958
@ -1,35 +1,3 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import LandingLayout from '@/layouts/app/LandingLayout.vue';
|
|
||||||
import { router } from '@inertiajs/vue3';
|
|
||||||
import axios from 'axios';
|
|
||||||
import { computed, onMounted, ref } from 'vue';
|
|
||||||
|
|
||||||
const goToBooking = () => {
|
|
||||||
router.visit('/rendez-vous');
|
|
||||||
};
|
|
||||||
|
|
||||||
const card = ref<any>(null);
|
|
||||||
const error = ref<string | null>(null);
|
|
||||||
const loading = ref(true);
|
|
||||||
|
|
||||||
const params = new URLSearchParams(window.location.search);
|
|
||||||
const cardId = params.get('id');
|
|
||||||
|
|
||||||
const hasCard = computed(() => card.value !== null);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
try {
|
|
||||||
const response = await axios.get(`/api/get-card/${cardId}`);
|
|
||||||
card.value = response.data.cards;
|
|
||||||
} catch (err: any) {
|
|
||||||
console.error('Card fetch error:', err);
|
|
||||||
error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.';
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<LandingLayout>
|
<LandingLayout>
|
||||||
<main class="flex flex-1 justify-center px-4 py-8 sm:px-6 sm:py-12 md:py-16 lg:px-8">
|
<main class="flex flex-1 justify-center px-4 py-8 sm:px-6 sm:py-12 md:py-16 lg:px-8">
|
||||||
@ -62,46 +30,69 @@ onMounted(async () => {
|
|||||||
<!-- Card Header -->
|
<!-- Card Header -->
|
||||||
<div class="bg-[var(--midnight-blue)] p-6 text-center text-white">
|
<div class="bg-[var(--midnight-blue)] p-6 text-center text-white">
|
||||||
<h2 class="text-2xl font-bold">{{ card.name }}</h2>
|
<h2 class="text-2xl font-bold">{{ card.name }}</h2>
|
||||||
|
<p v-if="card.orientation" class="mt-2 text-sm opacity-80">
|
||||||
|
Orientation: {{ card.orientation === 'reversed' ? 'Inversée' : 'Droite' }}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card Content -->
|
<!-- Card Content -->
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<!-- Card Image -->
|
<!-- Card Image -->
|
||||||
<div class="mb-6 flex justify-center">
|
<div class="mb-6 flex justify-center">
|
||||||
<img :src="`/cards/${card.id + 1}.png`" :alt="card.name" class="w-full max-w-xs rounded-lg shadow-md" />
|
<img
|
||||||
|
:src="card.image_url || `/cards/${card.id + 1}.png`"
|
||||||
|
:alt="card.name"
|
||||||
|
class="w-full max-w-xs rounded-lg shadow-md"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Description based on orientation -->
|
<!-- General description (if available) -->
|
||||||
<div class="mb-6">
|
<div v-if="card.description" class="mb-6">
|
||||||
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Signification intégrale</h3>
|
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Description</h3>
|
||||||
<p class="leading-relaxed text-gray-700">
|
<p class="leading-relaxed text-gray-700">
|
||||||
{{ card.description }}
|
{{ card.description }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Description based on orientation -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<!-- <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
|
||||||
|
{{ card.orientation === 'reversed' ? 'Signification Inversée' : 'Signification Droite' }}
|
||||||
|
</h3> -->
|
||||||
|
<p class="leading-relaxed text-gray-700">
|
||||||
|
{{ card.orientation === 'reversed' ? card.description_reversed : card.description_upright }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Alternative meaning -->
|
<!-- Alternative meaning -->
|
||||||
<!-- <div class="mb-6">
|
<div class="mb-6">
|
||||||
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
|
<!-- <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
|
||||||
{{
|
{{ card.orientation === 'reversed' ? 'Signification Droite' : 'Signification Inversée' }}
|
||||||
card.orientation === 'reversed'
|
</h3> -->
|
||||||
? 'Signification Alternative (Droite)'
|
|
||||||
: 'Signification Alternative (Inversée)'
|
|
||||||
}}
|
|
||||||
</h3>
|
|
||||||
<p class="leading-relaxed text-gray-700">
|
<p class="leading-relaxed text-gray-700">
|
||||||
{{ card.orientation === 'reversed' ? card.description_upright : card.description_reversed }}
|
{{ card.orientation === 'reversed' ? card.description_upright : card.description_reversed }}
|
||||||
</p>
|
</p>
|
||||||
</div> -->
|
</div>
|
||||||
|
|
||||||
<!-- Symbolism -->
|
<!-- Symbolism -->
|
||||||
<div v-if="card.symbolism && card.symbolism.length > 0">
|
<div v-if="card.symbolism && Object.keys(card.symbolism).length > 0" class="mb-6">
|
||||||
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Symbolisme</h3>
|
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Symbolisme</h3>
|
||||||
<ul class="list-disc space-y-2 pl-5 text-gray-700">
|
<ul class="space-y-2 text-gray-700">
|
||||||
<li v-for="(symbol, index) in card.symbolism" :key="index">
|
<li v-for="(value, key) in card.symbolism" :key="key" class="pl-0">
|
||||||
{{ symbol }}
|
<strong class="text-[var(--midnight-blue)]">{{ key }}:</strong> {{ value }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Additional Information -->
|
||||||
|
<!-- <div class="mt-8 border-t border-gray-200 pt-6">
|
||||||
|
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Informations Supplémentaires</h3>
|
||||||
|
<div class="grid grid-cols-1 gap-4 text-sm text-gray-600 sm:grid-cols-2">
|
||||||
|
<div><span class="font-medium">ID de la carte:</span> {{ card.id }}</div>
|
||||||
|
<div><span class="font-medium">Créée le:</span> {{ formatDate(card.created_at) }}</div>
|
||||||
|
<div><span class="font-medium">Mise à jour le:</span> {{ formatDate(card.updated_at) }}</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -126,20 +117,43 @@ onMounted(async () => {
|
|||||||
</main>
|
</main>
|
||||||
</LandingLayout>
|
</LandingLayout>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import LandingLayout from '@/layouts/app/LandingLayout.vue';
|
||||||
|
import { router } from '@inertiajs/vue3';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { computed, onMounted, ref } from 'vue';
|
||||||
|
|
||||||
<style scoped>
|
const goToBooking = () => {
|
||||||
.layout-content-container {
|
router.visit('/rendez-vous');
|
||||||
animation: fadeIn 0.6s ease-out;
|
};
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
const card = ref<any>(null);
|
||||||
from {
|
const error = ref<string | null>(null);
|
||||||
opacity: 0;
|
const loading = ref(true);
|
||||||
transform: translateY(10px);
|
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const cardId = params.get('id');
|
||||||
|
|
||||||
|
const hasCard = computed(() => card.value !== null);
|
||||||
|
|
||||||
|
// Helper function to format dates
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
return new Date(dateString).toLocaleDateString('fr-FR', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get(`/api/get-card/${cardId}`);
|
||||||
|
card.value = response.data.cards;
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error('Card fetch error:', err);
|
||||||
|
error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.';
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
}
|
}
|
||||||
to {
|
});
|
||||||
opacity: 1;
|
</script>
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user