Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix design ultah basic

Browse Source
This commit is contained in:
Farhaan4 2025-10-28 11:34:34 +07:00
parent 6eaa82f652
commit 29de22c0d0
2 changed files with 108 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
View File

@ -1,37 +1,55 @@
<template> <template>
<div class="p-6 text-center max-w-2xl mx-auto relative"> <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"> <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> </h2>
<!-- 🎈 Balon Kiri --> <!-- 🎈 Balon Kiri -->
<img src="/balloon2.png" alt="Balloons Left" <img
class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none" /> 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 --> <!-- 🎈 Balon Kanan -->
<img src="/balloon2.png" alt="Balloons Right" <img
class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none" /> 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 --> <!-- 💌 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"> <form @submit.prevent="submitMessage" class="space-y-4">
<!-- Nama Tamu --> <!-- Nama Tamu -->
<div> <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" 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> </div>
<!-- Pesan/Ucapan --> <!-- Pesan/Ucapan -->
<div> <div>
<textarea v-model="form.message" rows="4" placeholder="Tulis ucapan dan harapan terbaik..." <textarea
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> 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> </div>
<!-- Status Kehadiran --> <!-- Status Kehadiran -->
<div> <div>
<select v-model="form.attendance" <select
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"> 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="hadir">✅ Saya Hadir</option>
<option value="tidak_hadir">❌ Tidak Hadir</option> <option value="tidak_hadir">❌ Tidak Hadir</option>
<option value="mungkin">🤔 Mungkin Hadir</option> <option value="mungkin">🤔 Mungkin Hadir</option>
@ -39,13 +57,19 @@
</div> </div>
<!-- Error Message --> <!-- 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 }} {{ errorMessage }}
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
<button type="submit" :disabled="!form.name.trim() || !form.message.trim() || submitLoading" <button
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"> 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' }} ✨ {{ submitLoading ? 'Mengirim...' : 'Kirim RSVP' }}
</button> </button>
</form> </form>
@ -58,15 +82,16 @@
</div> </div>
<div v-else class="space-y-4 max-h-96 overflow-y-auto px-2 relative z-10"> <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" <div class="space-y-4">
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 v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
<div class="flex items-start justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="font-bold text-orange-800 text-lg">{{ msg.nama }}</span> <span class="font-bold text-orange-800">{{ msg.nama }}</span>
<span :class="getAttendanceClass(msg.status_kehadiran)" class="px-3 py-1 rounded-full text-sm font-semibold"> <span :class="getAttendanceClass(msg.status_kehadiran)" class="text-sm px-2 py-1 rounded-lg">
{{ formatAttendance(msg.status_kehadiran) }} {{ formatAttendance(msg.status_kehadiran) }}
</span> </span>
</div> </div>
<p class="text-gray-700 text-left">{{ msg.pesan }}</p> <p class="text-gray-700">{{ msg.pesan }}</p>
</div>
</div> </div>
<div v-if="messages.length === 0" class="bg-white/60 p-8 rounded-2xl"> <div v-if="messages.length === 0" class="bg-white/60 p-8 rounded-2xl">
@ -86,27 +111,20 @@ const route = useRoute();
const config = useRuntimeConfig(); const config = useRuntimeConfig();
const backendUrl = config.public.apiBaseUrl; const backendUrl = config.public.apiBaseUrl;
const invitationCode = route.params.code || ''; const invitationCode = route.params.code || '';
const guest = route.query.guest const guest = route.query.code
const props = defineProps({
const messages = ref([]); messages: {
const form = ref({ name: '', message: '', attendance: 'hadir' }); type: Array,
required: false,
default: () => []
// 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 messages = ref([...props.messages])
const form = ref({ name: '', message: '', attendance: 'hadir' });
// Fungsi untuk mengirim data RSVP ke backend // Fungsi untuk mengirim data RSVP ke backend
const submitMessage = async () => { const submitMessage = async () => {
@ -123,6 +141,7 @@ const submitMessage = async () => {
} }
try { try {
console.log('POST to:', `${backendUrl}/api/rsvp/${invitationCode}`, payload)
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, { const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
method: 'POST', method: 'POST',
headers: { headers: {
@ -137,12 +156,13 @@ const submitMessage = async () => {
}); });
if (!response.ok) { if (!response.ok) {
throw new Error('Gagal menyimpan RSVP'); console.log(response)
throw new Error(`Gagal menyimpan RSVP,${response.errors}`);
} }
const result = await response.json(); const result = await response.json();
messages.value.push(result.data); // Tambahkan RSVP baru ke daftar 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 alert(result.message); // Tampilkan pesan sukses dari backend
} catch (error) { } catch (error) {
console.error('Error menyimpan RSVP:', error); console.error('Error menyimpan RSVP:', error);
@ -153,11 +173,11 @@ const submitMessage = async () => {
// Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran // Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
const getAttendanceClass = (attendance) => { const getAttendanceClass = (attendance) => {
switch (attendance) { switch (attendance) {
case 'yes': case 'iya':
return 'bg-green-100 text-green-700'; return 'bg-green-100 text-green-700';
case 'no': case 'tidak':
return 'bg-red-100 text-red-700'; return 'bg-red-100 text-red-700';
case 'maybe': case 'mungkin':
return 'bg-yellow-100 text-yellow-700'; return 'bg-yellow-100 text-yellow-700';
default: default:
return 'bg-gray-100 text-gray-700'; return 'bg-gray-100 text-gray-700';
@ -167,33 +187,25 @@ const getAttendanceClass = (attendance) => {
// Fungsi untuk memformat teks kehadiran // Fungsi untuk memformat teks kehadiran
const formatAttendance = (attendance) => { const formatAttendance = (attendance) => {
switch (attendance) { switch (attendance) {
case 'yes': case 'iya':
return 'Hadir'; return 'Hadir';
case 'no': case 'tidak':
return 'Tidak Hadir'; return 'Tidak Hadir';
case 'maybe': case 'mungkin':
return 'Mungkin'; return 'Mungkin';
default: default:
return attendance; return attendance;
} }
}; };
// Panggil fetchMessages saat komponen dimuat
onMounted(() => {
fetchMessages();
});
</script> </script>
<style scoped> <style scoped>
@keyframes swing-top { @keyframes swing-top {
0% { 0% {
transform: rotate(2deg); transform: rotate(2deg);
} }
50% { 50% {
transform: rotate(-2deg); transform: rotate(-2deg);
} }
100% { 100% {
transform: rotate(2deg); transform: rotate(2deg);
} }
@ -202,6 +214,5 @@ onMounted(() => {
.animate-swing-top { .animate-swing-top {
animation: swing-top 4s ease-in-out infinite; animation: swing-top 4s ease-in-out infinite;
transform-origin: bottom center; transform-origin: bottom center;
/* ✅ Balon berayun dari bawah (tali diam) */
} }
</style> </style>

88
proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
View File

@ -9,81 +9,58 @@
</div> </div>
<!-- Navigation --> <!-- Navigation -->
<nav <nav v-if="currentSection !== 'landing'"
v-if="currentSection !== 'landing'" class="fixed top-6 left-1/2 transform -translate-x-1/2 z-20 animate-fade-in">
class="fixed top-6 left-1/2 transform -translate-x-1/2 z-20 animate-fade-in"
>
<ul <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" 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')"
<li><button @click="switchSection('introduction')" :class="navClass('introduction')" class="px-3 py-1 rounded-full transition-all duration-300">Intro</button></li> 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('event')" :class="navClass('event')"
<li><button @click="switchSection('gallery')" :class="navClass('gallery')" class="px-3 py-1 rounded-full transition-all duration-300">Galeri</button></li> class="px-3 py-1 rounded-full transition-all duration-300">Event</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('gallery')" :class="navClass('gallery')"
<li><button @click="switchSection('thanks')" :class="navClass('thanks')" class="px-3 py-1 rounded-full transition-all duration-300">Terima Kasih</button></li> 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> </ul>
</nav> </nav>
<!-- Tombol Musik --> <!-- Tombol Musik -->
<div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'"> <div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
<button <button @click="toggleMusic"
@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">
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> <span class="text-lg">{{ isPlaying ? '⏸️' : '▶️' }}</span>
</button> </button>
</div> </div>
<!-- Main Section --> <!-- Main Section -->
<main <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 -->
<Landing <Landing v-if="currentSection === 'landing' && tamu" :childName="formData.nama_panggilan"
v-if="currentSection === 'landing' && tamu"
:childName="formData.nama_panggilan"
:guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'" :guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'"
@open-invitation="switchSection('introduction')" @open-invitation="switchSection('introduction')" @toggle-music="toggleMusic" />
@toggle-music="toggleMusic"
/>
<!-- Introduction --> <!-- Introduction -->
<Introduction <Introduction v-if="currentSection === 'introduction'" :age="formData.umur_yang_dirayakan"
v-if="currentSection === 'introduction'" :childName="formData.nama_lengkap" :childOrder="formData.anak_ke"
:age="formData.umur_yang_dirayakan"
:childName="formData.nama_lengkap"
:childOrder="formData.anak_ke"
:parentsName="`${formData.nama_bapak} & ${formData.nama_ibu}`" :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 -->
<Event <Event v-if="currentSection === 'event'" :hari_tanggal_acara="formData.hari_tanggal_acara" :waktu="formData.waktu"
v-if="currentSection === 'event'" :alamat="formData.alamat" :link_gmaps="formData.link_gmaps" :hitung_mundur="formData.hitung_mundur" />
: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 -->
<Gallery v-if="currentSection === 'gallery'" :images="galleryImages" /> <Gallery v-if="currentSection === 'gallery'" :images="galleryImages" />
<!-- Guest Book --> <!-- Guest Book -->
<GuestBook <GuestBook v-if="currentSection === 'guestbook'" :guestName="tamu.nama_tamu || 'Tamu Undangan'" :messages="messages"
v-if="currentSection === 'guestbook'" @addMessage="addMessage" />
:guestName="route.query.guest || tamu.nama_tamu || 'Tamu Undangan'"
:messages="messages"
@addMessage="addMessage"
/>
<!-- Thank You --> <!-- Thank You -->
<ThankYou <ThankYou v-if="currentSection === 'thanks'" :childName="formData.nama_panggilan" :jsonData="formData" />
v-if="currentSection === 'thanks'"
:childName="formData.nama_panggilan"
:jsonData="formData"
/>
</main> </main>
</div> </div>
</template> </template>
@ -113,7 +90,7 @@ const route = useRoute()
// Data dari backend // Data dari backend
const formData = computed(() => props.data.form || {}) 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) // Galeri gambar (support foto array atau field lama)
const galleryImages = computed(() => { const galleryImages = computed(() => {
@ -167,8 +144,15 @@ button {
} }
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; transform: translateY(-10px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
.animate-fade-in { .animate-fade-in {