fix design ultah basic
This commit is contained in:
Farhaan4
parent
6eaa82f652
commit
29de22c0d0
@ -1,37 +1,55 @@
|
||||
<template>
|
||||
<div class="p-6 text-center max-w-2xl mx-auto relative">
|
||||
<h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
|
||||
💌 Buku Tamu 💌
|
||||
💌 Guest Book 💌
|
||||
</h2>
|
||||
|
||||
<!-- 🎈 Balon Kiri -->
|
||||
<img src="/balloon2.png" alt="Balloons Left"
|
||||
class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none" />
|
||||
<img
|
||||
src="/balloon2.png"
|
||||
alt="Balloons Left"
|
||||
class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none"
|
||||
/>
|
||||
|
||||
<!-- 🎈 Balon Kanan -->
|
||||
<img src="/balloon2.png" alt="Balloons Right"
|
||||
class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none" />
|
||||
<img
|
||||
src="/balloon2.png"
|
||||
alt="Balloons Right"
|
||||
class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none"
|
||||
/>
|
||||
|
||||
<!-- 💌 Form RSVP -->
|
||||
<div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8 relative z-10">
|
||||
<div
|
||||
class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8 relative z-10"
|
||||
>
|
||||
<form @submit.prevent="submitMessage" class="space-y-4">
|
||||
<!-- Nama Tamu -->
|
||||
<div>
|
||||
<input v-model="form.name" type="text" :placeholder="guest || 'Nama Lengkap Tamu'"
|
||||
<input
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
:placeholder="guest || 'Nama Lengkap Tamu'"
|
||||
class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300"
|
||||
:disabled="!!guest" />
|
||||
:disabled="!!guest"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Pesan/Ucapan -->
|
||||
<div>
|
||||
<textarea v-model="form.message" rows="4" placeholder="Tulis ucapan dan harapan terbaik..."
|
||||
class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"></textarea>
|
||||
<textarea
|
||||
v-model="form.message"
|
||||
rows="4"
|
||||
placeholder="Tulis ucapan dan harapan terbaik..."
|
||||
class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Status Kehadiran -->
|
||||
<div>
|
||||
<select v-model="form.attendance"
|
||||
class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 appearance-none bg-white">
|
||||
<select
|
||||
v-model="form.attendance"
|
||||
class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 appearance-none bg-white"
|
||||
>
|
||||
<option value="hadir">✅ Saya Hadir</option>
|
||||
<option value="tidak_hadir">❌ Tidak Hadir</option>
|
||||
<option value="mungkin">🤔 Mungkin Hadir</option>
|
||||
@ -39,13 +57,19 @@
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div v-if="errorMessage" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl">
|
||||
<div
|
||||
v-if="errorMessage"
|
||||
class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl"
|
||||
>
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" :disabled="!form.name.trim() || !form.message.trim() || submitLoading"
|
||||
class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed w-full text-lg">
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="!form.name.trim() || !form.message.trim() || submitLoading"
|
||||
class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed w-full text-lg"
|
||||
>
|
||||
✨ {{ submitLoading ? 'Mengirim...' : 'Kirim RSVP' }}
|
||||
</button>
|
||||
</form>
|
||||
@ -58,16 +82,17 @@
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4 max-h-96 overflow-y-auto px-2 relative z-10">
|
||||
<div v-for="(msg, i) in messages" :key="msg.id || i"
|
||||
class="bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border-l-4 border-orange-400 transform hover:scale-105 transition-all duration-300">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<span class="font-bold text-orange-800 text-lg">{{ msg.nama }}</span>
|
||||
<span :class="getAttendanceClass(msg.status_kehadiran)" class="px-3 py-1 rounded-full text-sm font-semibold">
|
||||
<div class="space-y-4">
|
||||
<div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-bold text-orange-800">{{ msg.nama }}</span>
|
||||
<span :class="getAttendanceClass(msg.status_kehadiran)" class="text-sm px-2 py-1 rounded-lg">
|
||||
{{ formatAttendance(msg.status_kehadiran) }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-700 text-left">{{ msg.pesan }}</p>
|
||||
<p class="text-gray-700">{{ msg.pesan }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="messages.length === 0" class="bg-white/60 p-8 rounded-2xl">
|
||||
<p class="text-gray-600 text-lg">
|
||||
@ -86,27 +111,20 @@ const route = useRoute();
|
||||
const config = useRuntimeConfig();
|
||||
const backendUrl = config.public.apiBaseUrl;
|
||||
const invitationCode = route.params.code || '';
|
||||
const guest = route.query.guest
|
||||
const guest = route.query.code
|
||||
|
||||
|
||||
const messages = ref([]);
|
||||
const form = ref({ name: '', message: '', attendance: 'hadir' });
|
||||
|
||||
|
||||
// Fungsi untuk mengambil daftar RSVP dari backend
|
||||
const fetchMessages = async () => {
|
||||
try {
|
||||
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`);
|
||||
if (!response.ok) throw new Error('Gagal mengambil data RSVP');
|
||||
|
||||
const data = await response.json();
|
||||
messages.value = data.data || [];
|
||||
} catch (error) {
|
||||
console.error('Error mengambil RSVP:', error);
|
||||
alert('Terjadi kesalahan saat mengambil data RSVP.');
|
||||
const props = defineProps({
|
||||
messages: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
const messages = ref([...props.messages])
|
||||
|
||||
|
||||
const form = ref({ name: '', message: '', attendance: 'hadir' });
|
||||
|
||||
// Fungsi untuk mengirim data RSVP ke backend
|
||||
const submitMessage = async () => {
|
||||
@ -123,6 +141,7 @@ const submitMessage = async () => {
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('POST to:', `${backendUrl}/api/rsvp/${invitationCode}`, payload)
|
||||
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@ -131,18 +150,19 @@ const submitMessage = async () => {
|
||||
body: JSON.stringify({
|
||||
nama: form.value.name,
|
||||
pesan: form.value.message,
|
||||
status_kehadiran: form.value.attendance,
|
||||
status_kehadiran: form.value.attendance,
|
||||
}),
|
||||
|
||||
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Gagal menyimpan RSVP');
|
||||
if (!response.ok) {
|
||||
console.log(response)
|
||||
throw new Error(`Gagal menyimpan RSVP,${response.errors}`);
|
||||
}
|
||||
|
||||
|
||||
const result = await response.json();
|
||||
messages.value.push(result.data); // Tambahkan RSVP baru ke daftar
|
||||
form.value = { name: '', message: '', attendance: 'yes' }; // Reset form
|
||||
form.value = { name: '', message: '', attendance: 'hadir' };
|
||||
alert(result.message); // Tampilkan pesan sukses dari backend
|
||||
} catch (error) {
|
||||
console.error('Error menyimpan RSVP:', error);
|
||||
@ -153,11 +173,11 @@ const submitMessage = async () => {
|
||||
// Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
|
||||
const getAttendanceClass = (attendance) => {
|
||||
switch (attendance) {
|
||||
case 'yes':
|
||||
case 'iya':
|
||||
return 'bg-green-100 text-green-700';
|
||||
case 'no':
|
||||
case 'tidak':
|
||||
return 'bg-red-100 text-red-700';
|
||||
case 'maybe':
|
||||
case 'mungkin':
|
||||
return 'bg-yellow-100 text-yellow-700';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-700';
|
||||
@ -167,33 +187,25 @@ const getAttendanceClass = (attendance) => {
|
||||
// Fungsi untuk memformat teks kehadiran
|
||||
const formatAttendance = (attendance) => {
|
||||
switch (attendance) {
|
||||
case 'yes':
|
||||
case 'iya':
|
||||
return 'Hadir';
|
||||
case 'no':
|
||||
case 'tidak':
|
||||
return 'Tidak Hadir';
|
||||
case 'maybe':
|
||||
case 'mungkin':
|
||||
return 'Mungkin';
|
||||
default:
|
||||
return attendance;
|
||||
}
|
||||
};
|
||||
|
||||
// Panggil fetchMessages saat komponen dimuat
|
||||
onMounted(() => {
|
||||
fetchMessages();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes swing-top {
|
||||
0% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
@ -202,6 +214,5 @@ onMounted(() => {
|
||||
.animate-swing-top {
|
||||
animation: swing-top 4s ease-in-out infinite;
|
||||
transform-origin: bottom center;
|
||||
/* ✅ Balon berayun dari bawah (tali diam) */
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -9,81 +9,58 @@
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav
|
||||
v-if="currentSection !== 'landing'"
|
||||
class="fixed top-6 left-1/2 transform -translate-x-1/2 z-20 animate-fade-in"
|
||||
>
|
||||
<nav v-if="currentSection !== 'landing'"
|
||||
class="fixed top-6 left-1/2 transform -translate-x-1/2 z-20 animate-fade-in">
|
||||
<ul
|
||||
class="flex space-x-2 bg-white/70 backdrop-blur-lg px-6 py-3 rounded-full shadow-lg text-sm font-semibold text-gray-800 border border-yellow-200"
|
||||
>
|
||||
<li><button @click="switchSection('introduction')" :class="navClass('introduction')" class="px-3 py-1 rounded-full transition-all duration-300">Intro</button></li>
|
||||
<li><button @click="switchSection('event')" :class="navClass('event')" class="px-3 py-1 rounded-full transition-all duration-300">Event</button></li>
|
||||
<li><button @click="switchSection('gallery')" :class="navClass('gallery')" class="px-3 py-1 rounded-full transition-all duration-300">Galeri</button></li>
|
||||
<li><button @click="switchSection('guestbook')" :class="navClass('guestbook')" class="px-3 py-1 rounded-full transition-all duration-300">Buku Tamu</button></li>
|
||||
<li><button @click="switchSection('thanks')" :class="navClass('thanks')" class="px-3 py-1 rounded-full transition-all duration-300">Terima Kasih</button></li>
|
||||
class="flex space-x-2 bg-white/70 backdrop-blur-lg px-6 py-3 rounded-full shadow-lg text-sm font-semibold text-gray-800 border border-yellow-200">
|
||||
<li><button @click="switchSection('introduction')" :class="navClass('introduction')"
|
||||
class="px-3 py-1 rounded-full transition-all duration-300">Intro</button></li>
|
||||
<li><button @click="switchSection('event')" :class="navClass('event')"
|
||||
class="px-3 py-1 rounded-full transition-all duration-300">Event</button></li>
|
||||
<li><button @click="switchSection('gallery')" :class="navClass('gallery')"
|
||||
class="px-3 py-1 rounded-full transition-all duration-300">Galeri</button></li>
|
||||
<li><button @click="switchSection('guestbook')" :class="navClass('guestbook')"
|
||||
class="px-3 py-1 rounded-full transition-all duration-300">Guest Book</button></li>
|
||||
<li><button @click="switchSection('thanks')" :class="navClass('thanks')"
|
||||
class="px-3 py-1 rounded-full transition-all duration-300">Terima Kasih</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Tombol Musik -->
|
||||
<div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
|
||||
<button
|
||||
@click="toggleMusic"
|
||||
class="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 p-4 rounded-full text-white shadow-xl transition-all duration-300 hover:scale-110 hover:shadow-2xl"
|
||||
>
|
||||
<button @click="toggleMusic"
|
||||
class="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 p-4 rounded-full text-white shadow-xl transition-all duration-300 hover:scale-110 hover:shadow-2xl">
|
||||
<span class="text-lg">{{ isPlaying ? '⏸️' : '▶️' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Main Section -->
|
||||
<main
|
||||
class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
|
||||
>
|
||||
class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
|
||||
<!-- Landing -->
|
||||
<Landing
|
||||
v-if="currentSection === 'landing' && tamu"
|
||||
:childName="formData.nama_panggilan"
|
||||
<Landing v-if="currentSection === 'landing' && tamu" :childName="formData.nama_panggilan"
|
||||
:guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'"
|
||||
@open-invitation="switchSection('introduction')"
|
||||
@toggle-music="toggleMusic"
|
||||
/>
|
||||
@open-invitation="switchSection('introduction')" @toggle-music="toggleMusic" />
|
||||
|
||||
<!-- Introduction -->
|
||||
<Introduction
|
||||
v-if="currentSection === 'introduction'"
|
||||
:age="formData.umur_yang_dirayakan"
|
||||
:childName="formData.nama_lengkap"
|
||||
:childOrder="formData.anak_ke"
|
||||
<Introduction v-if="currentSection === 'introduction'" :age="formData.umur_yang_dirayakan"
|
||||
:childName="formData.nama_lengkap" :childOrder="formData.anak_ke"
|
||||
:parentsName="`${formData.nama_bapak} & ${formData.nama_ibu}`"
|
||||
:childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[0]}` : null"
|
||||
/>
|
||||
:childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[0]}` : null" />
|
||||
|
||||
<!-- Event -->
|
||||
<Event
|
||||
v-if="currentSection === 'event'"
|
||||
:hari_tanggal_acara="formData.hari_tanggal_acara"
|
||||
:waktu="formData.waktu"
|
||||
:alamat="formData.alamat"
|
||||
:link_gmaps="formData.link_gmaps"
|
||||
:hitung_mundur="formData.hitung_mundur"
|
||||
/>
|
||||
<Event v-if="currentSection === 'event'" :hari_tanggal_acara="formData.hari_tanggal_acara" :waktu="formData.waktu"
|
||||
:alamat="formData.alamat" :link_gmaps="formData.link_gmaps" :hitung_mundur="formData.hitung_mundur" />
|
||||
|
||||
<!-- Gallery -->
|
||||
<Gallery v-if="currentSection === 'gallery'" :images="galleryImages" />
|
||||
|
||||
<!-- Guest Book -->
|
||||
<GuestBook
|
||||
v-if="currentSection === 'guestbook'"
|
||||
:guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'"
|
||||
:messages="messages"
|
||||
@addMessage="addMessage"
|
||||
/>
|
||||
<GuestBook v-if="currentSection === 'guestbook'" :guestName="tamu.nama_tamu || 'Tamu Undangan'" :messages="messages"
|
||||
@addMessage="addMessage" />
|
||||
|
||||
<!-- Thank You -->
|
||||
<ThankYou
|
||||
v-if="currentSection === 'thanks'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:jsonData="formData"
|
||||
/>
|
||||
<ThankYou v-if="currentSection === 'thanks'" :childName="formData.nama_panggilan" :jsonData="formData" />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
@ -113,7 +90,7 @@ const route = useRoute()
|
||||
|
||||
// Data dari backend
|
||||
const formData = computed(() => props.data.form || {})
|
||||
const messages = computed(() => props.data.rsvp || [])
|
||||
const messages = ref(props.data.rsvp || [])
|
||||
|
||||
// Galeri gambar (support foto array atau field lama)
|
||||
const galleryImages = computed(() => {
|
||||
@ -167,8 +144,15 @@ button {
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user