Compare commits
2 Commits
29de22c0d0
...
1987f882dd
| Author | SHA1 | Date | |
|---|---|---|---|
|
1987f882dd | ||
|
|
cc2e340e17 |
@ -1,27 +1,23 @@
|
||||
<template>
|
||||
<!-- 🌌 Latar belakang fullscreen -->
|
||||
<section
|
||||
class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
|
||||
>
|
||||
class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6">
|
||||
<!-- 🌟 Bintang Berkedip -->
|
||||
<div class="absolute inset-0 overflow-hidden z-0">
|
||||
<div
|
||||
v-for="(star, i) in stars"
|
||||
:key="i"
|
||||
class="absolute bg-white rounded-full animate-twinkle"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
<div v-for="(star, i) in stars" :key="i" class="absolute bg-white rounded-full animate-twinkle" :style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"></div>
|
||||
</div>
|
||||
|
||||
<!-- 🌈 Cahaya lembut -->
|
||||
<div class="absolute w-[600px] h-[600px] bg-blue-400/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
|
||||
<div
|
||||
class="absolute w-[600px] h-[600px] bg-blue-400/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
</div>
|
||||
|
||||
<!-- 💬 Konten utama -->
|
||||
<div class="relative z-10 max-w-lg w-full space-y-6 animate-fade-in">
|
||||
@ -32,29 +28,27 @@
|
||||
<p class="text-blue-100">{{ saySomething }}</p>
|
||||
|
||||
<!-- 📝 Form -->
|
||||
<form
|
||||
@submit.prevent="sendMessage"
|
||||
class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4"
|
||||
>
|
||||
<input
|
||||
v-model="guestNameInput"
|
||||
type="text"
|
||||
placeholder="Nama Anda"
|
||||
<form @submit.prevent="submitMessage"
|
||||
class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4">
|
||||
<input v-model="form.name" type="text" placeholder="Nama Anda"
|
||||
class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
|
||||
required
|
||||
/>
|
||||
<textarea
|
||||
v-model="messageInput"
|
||||
rows="3"
|
||||
placeholder="Tulis ucapan Anda..."
|
||||
required />
|
||||
<textarea v-model="form.message" rows="3" placeholder="Tulis ucapan Anda..."
|
||||
class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
|
||||
required
|
||||
></textarea>
|
||||
required></textarea>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-yellow-400 text-gray-900 font-semibold px-6 py-2.5 rounded-full shadow-lg hover:bg-yellow-500 transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<select v-model="form.attendance" class="w-full px-4 py-3 rounded-xl border-2 border-orange-400
|
||||
focus:ring-2 focus:ring-orange-500 focus:border-orange-500
|
||||
bg-gradient-to-r from-yellow-50 to-orange-50 text-gray-800
|
||||
appearance-none transition-all duration-300 cursor-pointer">
|
||||
<option value="hadir" class="bg-white text-gray-800">✅ Hadir</option>
|
||||
<option value="tidak_hadir" class="bg-white text-gray-800">❌ Tidak Hadir</option>
|
||||
<option value="mungkin" class="bg-white text-gray-800">🤔 Mungkin</option>
|
||||
</select>
|
||||
|
||||
|
||||
<button type="submit"
|
||||
class="bg-yellow-400 text-gray-900 font-semibold px-6 py-2.5 rounded-full shadow-lg hover:bg-yellow-500 transition-all duration-300 transform hover:scale-105">
|
||||
Kirim ✨
|
||||
</button>
|
||||
</form>
|
||||
@ -62,75 +56,138 @@
|
||||
<!-- 💌 Pesan -->
|
||||
<div v-if="messages.length" class="mt-10 space-y-4 text-left max-h-[300px] overflow-y-auto">
|
||||
<transition-group name="fade" tag="div">
|
||||
<div
|
||||
v-for="(msg, index) in messages"
|
||||
:key="index"
|
||||
class="bg-white/10 border border-white/10 rounded-xl p-4 shadow-md animate-fade-in"
|
||||
>
|
||||
<p class="font-semibold text-yellow-300">{{ msg.name }}</p>
|
||||
<p class="text-blue-100">{{ msg.text }}</p>
|
||||
<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">{{ msg.pesan }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🌠 Ornamen bawah -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/30 to-transparent"></div>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/30 to-transparent">
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRuntimeConfig } from '#app';
|
||||
|
||||
const route = useRoute();
|
||||
const config = useRuntimeConfig();
|
||||
const backendUrl = config.public.apiBaseUrl;
|
||||
const invitationCode = route.params.code || '';
|
||||
const guest = route.query.code
|
||||
|
||||
const props = defineProps({
|
||||
guestName: String,
|
||||
saySomething: String,
|
||||
messages: Array
|
||||
})
|
||||
const emit = defineEmits(['addMessage'])
|
||||
|
||||
const guestNameInput = ref(props.guestName || '')
|
||||
const messageInput = ref('')
|
||||
|
||||
// 🌟 Efek bintang
|
||||
const stars = ref([])
|
||||
|
||||
const generateStars = () => {
|
||||
const count = 70
|
||||
const temp = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
temp.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 2 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.8 + 0.2
|
||||
})
|
||||
messages: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
}
|
||||
stars.value = temp
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => generateStars())
|
||||
const messages = ref([...props.messages])
|
||||
|
||||
const sendMessage = () => {
|
||||
if (!guestNameInput.value || !messageInput.value) return
|
||||
emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
|
||||
messageInput.value = ''
|
||||
}
|
||||
const form = ref({ name: '', message: '', attendance: 'hadir' });
|
||||
|
||||
onMounted(() => {
|
||||
messages.value = props.messages || []
|
||||
})
|
||||
|
||||
// Fungsi untuk mengirim data RSVP ke backend
|
||||
const submitMessage = async () => {
|
||||
if (!form.value.name || !form.value.message) {
|
||||
alert('Nama dan ucapan harus diisi!');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('POST to:', `${backendUrl}/api/rsvp/${invitationCode}`, {
|
||||
nama: form.value.name,
|
||||
pesan: form.value.message,
|
||||
status_kehadiran: form.value.attendance,
|
||||
});
|
||||
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
nama: form.value.name,
|
||||
pesan: form.value.message,
|
||||
status_kehadiran: form.value.attendance,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Gagal menyimpan RSVP`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
messages.value.push(result.data);
|
||||
form.value = { name: '', message: '', attendance: 'hadir' };
|
||||
alert(result.message);
|
||||
} catch (error) {
|
||||
console.error('Error menyimpan RSVP:', error);
|
||||
alert('Terjadi kesalahan saat menyimpan RSVP.');
|
||||
}
|
||||
};
|
||||
|
||||
// Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
|
||||
const getAttendanceClass = (attendance) => {
|
||||
switch (attendance) {
|
||||
case 'hadir':
|
||||
return 'bg-green-100 text-green-700';
|
||||
case 'tidak_hadir':
|
||||
return 'bg-red-100 text-red-700';
|
||||
case 'mungkin':
|
||||
return 'bg-yellow-100 text-yellow-700';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-700';
|
||||
}
|
||||
};
|
||||
|
||||
// Fungsi untuk memformat teks kehadiran
|
||||
const formatAttendance = (attendance) => {
|
||||
switch (attendance) {
|
||||
case 'hadir':
|
||||
return 'Hadir';
|
||||
case 'tidak_hadir':
|
||||
return 'Tidak Hadir';
|
||||
case 'mungkin':
|
||||
return 'Mungkin';
|
||||
default:
|
||||
return attendance;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 🌟 Animasi bintang berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3.5s ease-in-out infinite;
|
||||
}
|
||||
@ -141,11 +198,13 @@ const sendMessage = () => {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1.2s ease-out;
|
||||
}
|
||||
@ -155,6 +214,7 @@ const sendMessage = () => {
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
@ -164,8 +224,9 @@ const sendMessage = () => {
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -1,245 +1,241 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden"
|
||||
>
|
||||
<!-- ================= BACKGROUND ELEMENTS ================= -->
|
||||
<!-- Bintang berkedip -->
|
||||
<div class="absolute inset-0">
|
||||
<div
|
||||
v-for="(star, index) in stars"
|
||||
:key="index"
|
||||
class="absolute rounded-full bg-white animate-twinkle"
|
||||
:class="star.class"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Awan dekoratif -->
|
||||
<div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
|
||||
<div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
|
||||
|
||||
<!-- ================= NAVIGATION ================= -->
|
||||
<nav
|
||||
v-if="currentSection !== 'landing'"
|
||||
class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20"
|
||||
>
|
||||
<ul
|
||||
class="flex space-x-4 bg-black/30 backdrop-blur-lg px-8 py-4 rounded-full shadow-2xl border border-white/10 text-sm font-semibold text-white"
|
||||
>
|
||||
<li><button @click="switchSection('introduction')" :class="navClass('introduction')">🌙 Intro</button></li>
|
||||
<li><button @click="switchSection('event')" :class="navClass('event')">⭐ Event</button></li>
|
||||
<li><button @click="switchSection('gallery')" :class="navClass('gallery')">✨ Gallery</button></li>
|
||||
<li><button @click="switchSection('say')" :class="navClass('say')">💫 Ucapan</button></li>
|
||||
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">🌟 Terima Kasih</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- ================= MUSIK CONTROL ================= -->
|
||||
<div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
|
||||
<button
|
||||
@click="toggleMusic"
|
||||
class="bg-purple-600/80 hover:bg-purple-700/80 p-4 rounded-full text-white shadow-2xl backdrop-blur-sm border border-white/10 transition-all duration-300"
|
||||
>
|
||||
{{ isPlaying ? '⏸️' : '▶️' }}
|
||||
</button>
|
||||
<audio ref="audioPlayer" :src="musicUrl" loop></audio>
|
||||
</div>
|
||||
|
||||
<!-- ================= MAIN CONTENT ================= -->
|
||||
<main
|
||||
class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
|
||||
>
|
||||
<!-- Landing Page -->
|
||||
<KhitanALanding
|
||||
v-if="currentSection === 'landing'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:guestName="data.nama_tamu"
|
||||
@next-page="switchSection('introduction')"
|
||||
/>
|
||||
|
||||
<!-- Introduction -->
|
||||
<KhitanIntroduction
|
||||
v-if="currentSection === 'introduction'"
|
||||
:form="formData"
|
||||
@next="switchSection('event')"
|
||||
/>
|
||||
|
||||
<!-- Event -->
|
||||
<KhitanEvent
|
||||
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"
|
||||
@next="switchSection('gallery')"
|
||||
/>
|
||||
|
||||
<!-- Gallery -->
|
||||
<KhitanGallery
|
||||
v-if="currentSection === 'gallery'"
|
||||
:images="galleryImages"
|
||||
@next="switchSection('say')"
|
||||
/>
|
||||
|
||||
<!-- Guest Book -->
|
||||
<KhitanSay
|
||||
v-if="currentSection === 'say'"
|
||||
:guestName="data.nama_tamu"
|
||||
:saySomething="formData.say_something"
|
||||
:messages="messages"
|
||||
@addMessage="addMessage"
|
||||
@next="switchSection('thanks')"
|
||||
/>
|
||||
|
||||
<!-- Thank You -->
|
||||
<KhitanThankYou
|
||||
v-if="currentSection === 'thanks'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:jsonData="formData"
|
||||
/>
|
||||
</main>
|
||||
<div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden">
|
||||
<!-- ================= BACKGROUND ELEMENTS ================= -->
|
||||
<!-- Bintang berkedip -->
|
||||
<div class="absolute inset-0">
|
||||
<div v-for="(star, index) in stars" :key="index" class="absolute rounded-full bg-white animate-twinkle"
|
||||
:class="star.class" :style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRuntimeConfig } from '#app'
|
||||
|
||||
// ================== IMPORT KOMPONEN ==================
|
||||
import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
|
||||
import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
|
||||
import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
|
||||
import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
|
||||
import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
|
||||
import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
|
||||
|
||||
// ================== PROPS ==================
|
||||
const props = defineProps({
|
||||
data: { type: Object, required: true }
|
||||
})
|
||||
|
||||
// ================== BACKEND CONFIG ==================
|
||||
const config = useRuntimeConfig()
|
||||
const backendUrl = config.public.apiBaseUrl
|
||||
|
||||
// ================== FORM DATA ==================
|
||||
const formData = computed(() => props.data.form || {})
|
||||
|
||||
// ================== GALERI ==================
|
||||
const galleryImages = computed(() => {
|
||||
const f = formData.value
|
||||
return [
|
||||
f.foto_1,
|
||||
f.foto_2,
|
||||
f.foto_3,
|
||||
f.foto_4
|
||||
].filter(Boolean).map(img => `${backendUrl}/${img}`)
|
||||
})
|
||||
|
||||
// ================== NAVIGASI SECTION ==================
|
||||
const currentSection = ref('landing')
|
||||
const switchSection = (s) => (currentSection.value = s)
|
||||
|
||||
// ================== BINTANG ANIMASI ==================
|
||||
const stars = ref([])
|
||||
|
||||
const generateStars = () => {
|
||||
const starCount = 50
|
||||
const newStars = []
|
||||
|
||||
for (let i = 0; i < starCount; i++) {
|
||||
newStars.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 3 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.7 + 0.3,
|
||||
class: `star-${i % 3}`
|
||||
|
||||
<!-- Awan dekoratif -->
|
||||
<div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
|
||||
<div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
|
||||
|
||||
<!-- ================= NAVIGATION ================= -->
|
||||
<nav v-if="currentSection !== 'landing'" class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20">
|
||||
<ul class="flex space-x-4 bg-black/30 backdrop-blur-lg px-8 py-4 rounded-full shadow-2xl border border-white/10 text-sm font-semibold text-white">
|
||||
<li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
|
||||
<li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
|
||||
<li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
|
||||
<li><button @click="switchSection('say')" :class="navClass('say')">Ucapan</button></li>
|
||||
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">Terima Kasih</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- ================= MUSIK CONTROL ================= -->
|
||||
<div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
|
||||
<button @click="toggleMusic"
|
||||
class="bg-purple-600/80 hover:bg-purple-700/80 p-4 rounded-full text-white shadow-2xl backdrop-blur-sm border border-white/10 transition-all duration-300">
|
||||
{{ isPlaying ? 'Pause' : 'Play' }}
|
||||
</button>
|
||||
<audio ref="audioPlayer" :src="musicUrl" loop></audio>
|
||||
</div>
|
||||
|
||||
<!-- ================= MAIN CONTENT ================= -->
|
||||
<main class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
|
||||
<!-- Landing Page -->
|
||||
<KhitanALanding v-if="currentSection === 'landing'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:guestName="tamu.nama_tamu"
|
||||
@next-page="switchSection('introduction')" />
|
||||
|
||||
<!-- Introduction -->
|
||||
<KhitanIntroduction v-if="currentSection === 'introduction'"
|
||||
:form="formData"
|
||||
@next="switchSection('event')" />
|
||||
|
||||
<!-- Event -->
|
||||
<KhitanEvent 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"
|
||||
@next="switchSection('gallery')" />
|
||||
|
||||
<!-- Gallery -->
|
||||
<KhitanGallery v-if="currentSection === 'gallery'"
|
||||
:images="galleryImages"
|
||||
@next="switchSection('say')" />
|
||||
|
||||
<!-- Guest Book (Ucapan) -->
|
||||
<KhitanSay v-if="currentSection === 'say'"
|
||||
:guestName="tamu.nama_tamu || 'Tamu Undangan'"
|
||||
:messages="messages"
|
||||
@addMessage="addMessage" />
|
||||
|
||||
<!-- Thank You -->
|
||||
<KhitanThankYou v-if="currentSection === 'thanks'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:jsonData="formData" />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useRuntimeConfig } from '#app'
|
||||
|
||||
// ================== IMPORT KOMPONEN ==================
|
||||
import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
|
||||
import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
|
||||
import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
|
||||
import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
|
||||
import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
|
||||
import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
|
||||
|
||||
// ================== PROPS ==================
|
||||
const props = defineProps({
|
||||
data: { type: Object, required: true },
|
||||
tamu: { type: Object, required: true }
|
||||
})
|
||||
|
||||
// ================== BACKEND CONFIG ==================
|
||||
const config = useRuntimeConfig()
|
||||
const backendUrl = config.public.apiBaseUrl
|
||||
|
||||
// ================== FORM DATA ==================
|
||||
const formData = computed(() => props.data.form || {})
|
||||
|
||||
// ================== PESAN UCAPAN (RSVP) ==================
|
||||
const messages = ref(props.data.rsvp || [])
|
||||
|
||||
// ================== GALERI GAMBAR ==================
|
||||
const galleryImages = computed(() => {
|
||||
const fotos = formData.value.foto || []
|
||||
return fotos
|
||||
.filter(Boolean)
|
||||
.map(img => {
|
||||
// Jika img sudah URL lengkap (dari CDN), gunakan langsung
|
||||
if (typeof img === 'string' && img.startsWith('http')) return img
|
||||
// Jika dari storage lokal
|
||||
return `${backendUrl}/storage/${img}`
|
||||
})
|
||||
})
|
||||
|
||||
// ================== NAVIGASI SECTION ==================
|
||||
const currentSection = ref('landing')
|
||||
const switchSection = (section) => {
|
||||
currentSection.value = section
|
||||
// Auto scroll ke atas saat pindah section
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
// ================== BINTANG ANIMASI ==================
|
||||
const stars = ref([])
|
||||
const generateStars = () => {
|
||||
const starCount = 50
|
||||
const newStars = []
|
||||
for (let i = 0; i < starCount; i++) {
|
||||
newStars.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 3 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.7 + 0.3,
|
||||
class: `star-${i % 3}`
|
||||
})
|
||||
}
|
||||
stars.value = newStars
|
||||
}
|
||||
|
||||
// ================== MUSIK ==================
|
||||
const audioPlayer = ref(null)
|
||||
const isPlaying = ref(false)
|
||||
|
||||
const musicUrl = computed(() => {
|
||||
const url = formData.value.link_music
|
||||
if (!url) return ''
|
||||
// Jika sudah URL lengkap (YouTube, Spotify, dll), gunakan langsung
|
||||
if (url.startsWith('http')) return url
|
||||
// Jika dari storage lokal
|
||||
return `${backendUrl}/${url}`
|
||||
})
|
||||
|
||||
const toggleMusic = () => {
|
||||
if (!audioPlayer.value) return
|
||||
if (isPlaying.value) {
|
||||
audioPlayer.value.pause()
|
||||
} else {
|
||||
audioPlayer.value.play().catch(() => {
|
||||
// Autoplay dicegah browser
|
||||
isPlaying.value = false
|
||||
})
|
||||
}
|
||||
isPlaying.value = !isPlaying.value
|
||||
}
|
||||
|
||||
// Auto-play saat masuk section pertama (setelah landing)
|
||||
watch(currentSection, (newVal) => {
|
||||
if (newVal === 'introduction' && musicUrl.value && !isPlaying.value) {
|
||||
setTimeout(() => {
|
||||
audioPlayer.value?.play().catch(() => {})
|
||||
}, 500)
|
||||
}
|
||||
}, { immediate: false })
|
||||
|
||||
// ================== TAMBAH UCAPAN (RSVP) ==================
|
||||
const addMessage = async (newMessage) => {
|
||||
try {
|
||||
const res = await fetch(`${backendUrl}/api/rsvp`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
undangan_id: props.data.id,
|
||||
nama: newMessage.nama,
|
||||
ucapan: newMessage.ucapan,
|
||||
kehadiran: newMessage.kehadiran
|
||||
})
|
||||
}
|
||||
stars.value = newStars
|
||||
})
|
||||
|
||||
if (!res.ok) throw new Error('Gagal menyimpan ucapan')
|
||||
|
||||
const saved = await res.json()
|
||||
messages.value.push(saved.data)
|
||||
} catch (err) {
|
||||
console.error('Error saving RSVP:', err)
|
||||
alert('Gagal mengirim ucapan. Coba lagi nanti.')
|
||||
}
|
||||
|
||||
// ================== MUSIK ==================
|
||||
const audioPlayer = ref(null)
|
||||
const isPlaying = ref(false)
|
||||
const musicUrl = computed(() =>
|
||||
formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
|
||||
)
|
||||
|
||||
const toggleMusic = () => {
|
||||
if (!audioPlayer.value) return
|
||||
if (isPlaying.value) {
|
||||
audioPlayer.value.pause()
|
||||
} else {
|
||||
audioPlayer.value.play()
|
||||
}
|
||||
isPlaying.value = !isPlaying.value
|
||||
}
|
||||
|
||||
// ================== GUEST BOOK ==================
|
||||
const messages = ref([])
|
||||
const addMessage = (msg) => messages.value.push(msg)
|
||||
|
||||
// ================== STYLE NAV ==================
|
||||
const navClass = (s) =>
|
||||
currentSection.value === s
|
||||
? 'text-yellow-300 glow'
|
||||
: 'hover:text-yellow-200 transition-colors duration-300'
|
||||
|
||||
// ================== LIFECYCLE ==================
|
||||
onMounted(() => {
|
||||
generateStars()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Animasi bintang berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Efek glow untuk navigasi aktif */
|
||||
.glow {
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
|
||||
0 0 20px rgba(255, 255, 255, 0.6),
|
||||
0 0 30px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Transisi halus untuk konten utama */
|
||||
main {
|
||||
transition: all 0.7s ease-in-out;
|
||||
}
|
||||
|
||||
/* Scrollbar custom */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
// ================== NAV STYLE ==================
|
||||
const navClass = (section) =>
|
||||
currentSection.value === section
|
||||
? 'text-yellow-300 glow'
|
||||
: 'hover:text-yellow-200 transition-colors duration-300'
|
||||
|
||||
// ================== LIFECYCLE ==================
|
||||
onMounted(() => {
|
||||
generateStars()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Animasi bintang */
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.1); }
|
||||
}
|
||||
.animate-twinkle { animation: twinkle 3s ease-in-out infinite; }
|
||||
|
||||
/* Glow untuk nav aktif */
|
||||
.glow {
|
||||
text-shadow:
|
||||
0 0 10px rgba(255, 255, 255, 0.8),
|
||||
0 0 20px rgba(255, 255, 255, 0.6),
|
||||
0 0 30px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
|
||||
</style>
|
||||
@ -2,130 +2,197 @@
|
||||
<div class="min-h-screen bg-gray-50 py-10 px-6">
|
||||
<div class="max-w-5xl mx-auto bg-white rounded-2xl shadow-lg p-8">
|
||||
<h1 class="text-2xl font-bold text-center text-gray-800">
|
||||
Form Undangan Khitan Starter
|
||||
Form Undangan Khitan Basic
|
||||
</h1>
|
||||
<p class="text-center text-gray-500 text-sm mb-8">
|
||||
Isi semua data berikut dengan lengkap dan benar.
|
||||
Isi semua data dengan lengkap dan benar.
|
||||
</p>
|
||||
|
||||
<!-- Data Pemesan -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">📋 Data Pemesan</h2>
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Data Pemesan</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<input
|
||||
v-model="form.nama_pemesan"
|
||||
type="text"
|
||||
placeholder="Nama Pemesan"
|
||||
required
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
|
||||
/>
|
||||
<input
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
required
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
|
||||
/>
|
||||
<input
|
||||
v-model="form.no_tlpn"
|
||||
type="text"
|
||||
placeholder="No Telepon"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
|
||||
/>
|
||||
<!-- Nama Pemesan -->
|
||||
<div class="relative">
|
||||
<input v-model="form.nama_pemesan" type="text" placeholder=" " required
|
||||
class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
<label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
|
||||
peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
|
||||
peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
|
||||
peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
|
||||
Nama Pemesan
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="relative">
|
||||
<input v-model="form.email" type="email" placeholder=" " required
|
||||
class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
<label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
|
||||
peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
|
||||
peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
|
||||
peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
|
||||
Email
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- No Telepon -->
|
||||
<div class="relative">
|
||||
<input v-model="form.no_tlpn" type="text" placeholder=" " required
|
||||
class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
<label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
|
||||
peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
|
||||
peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
|
||||
peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
|
||||
No Telepon
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Data Anak -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">👦 Data Anak yang Dikhitan</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<input
|
||||
v-model="form.form.nama_lengkap"
|
||||
type="text"
|
||||
placeholder="Nama Lengkap Anak"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
|
||||
/>
|
||||
<input
|
||||
v-model="form.form.nama_bapak"
|
||||
type="text"
|
||||
placeholder="Nama Bapak"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
|
||||
/>
|
||||
<input
|
||||
v-model="form.form.nama_ibu"
|
||||
type="text"
|
||||
placeholder="Nama Ibu"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
|
||||
/>
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Data Anak yang Dikhitan</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<template v-for="(field, i) in [
|
||||
{ model: 'nama_lengkap', label: 'Nama Lengkap' },
|
||||
{ model: 'nama_panggilan', label: 'Nama Panggilan' },
|
||||
{ model: 'nama_bapak', label: 'Nama Bapak' },
|
||||
{ model: 'nama_ibu', label: 'Nama Ibu' }
|
||||
]" :key="i">
|
||||
<div class="relative">
|
||||
<input v-model="form.form[field.model]" placeholder=" " required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
<label class="absolute left-2 text-gray-400 transition-all
|
||||
peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm
|
||||
peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500
|
||||
peer-valid:top-0 peer-valid:text-[10px] peer-valid:text-gray-500">
|
||||
{{ field.label }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Detail Acara -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">📅 Detail Acara</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<input
|
||||
v-model="form.form.hari_tanggal_acara"
|
||||
type="date"
|
||||
placeholder="Hari & Tanggal Acara"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
|
||||
/>
|
||||
<input
|
||||
v-model="form.form.waktu"
|
||||
type="text"
|
||||
placeholder="Waktu Acara"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
|
||||
/>
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Detail Acara</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<!-- Hari & Tanggal -->
|
||||
<div class="flex flex-col">
|
||||
<label class="text-gray-600 text-sm font-medium mb-1">Hari & Tanggal Acara</label>
|
||||
<input v-model="form.form.hari_tanggal_acara" type="date" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
</div>
|
||||
|
||||
<!-- Waktu -->
|
||||
<div class="flex flex-col">
|
||||
<label class="text-gray-600 text-sm font-medium mb-1">Waktu Acara</label>
|
||||
<input v-model="form.form.waktu" type="time" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="form.form.alamat"
|
||||
rows="3"
|
||||
placeholder="Alamat Acara"
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-3 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition resize-none"
|
||||
></textarea>
|
||||
|
||||
<!-- Alamat -->
|
||||
<div class="mt-6 relative">
|
||||
<textarea v-model="form.form.alamat" rows="3" placeholder=" " required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-5 pb-1.5 text-sm resize-none
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"></textarea>
|
||||
<label class="absolute left-2 text-gray-400 transition-all
|
||||
peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm
|
||||
peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500
|
||||
peer-valid:top-0 peer-valid:text-[10px] peer-valid:text-gray-500">
|
||||
Alamat Acara
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Link Google Maps -->
|
||||
<div class="mt-4 relative">
|
||||
<input v-model="form.form.link_gmaps" type="url" placeholder=" " required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
<label class="absolute left-1 top-0 text-gray-400 text-xs transition-all
|
||||
peer-placeholder-shown:top-4 peer-placeholder-shown:left-2 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm
|
||||
peer-focus:top-0 peer-focus:left-1 peer-focus:text-[10px] peer-focus:text-blue-500
|
||||
peer-valid:top-0 peer-valid:left-1 peer-valid:text-[10px] peer-valid:text-gray-500">
|
||||
Link Google Maps
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Hitung Mundur -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Hitung Mundur</h2>
|
||||
<div class="relative">
|
||||
<input v-model="form.form.hitung_mundur" type="datetime-local" placeholder=" " class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
<label class="absolute left-2 text-gray-400 transition-all
|
||||
peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm
|
||||
peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500
|
||||
peer-valid:top-0 peer-valid:text-[10px] peer-valid:text-gray-500">
|
||||
Waktu Hitung Mundur
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Rekening -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Rekening</h2>
|
||||
<div class="relative">
|
||||
<input v-model="form.form.rekening_1" type="text" placeholder=" " required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
<label class="absolute left-2 text-gray-400 transition-all duration-200
|
||||
peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm
|
||||
peer-focus:top-[-2px] peer-focus:text-[10px] peer-focus:text-blue-500
|
||||
peer-valid:top-[-2px] peer-valid:text-[10px] peer-valid:text-gray-500">
|
||||
Rekening 1
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Musik -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Musik</h2>
|
||||
<div class="relative">
|
||||
<input v-model="form.form.link_music" type="text" placeholder=" " required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-4 pb-1.5 text-sm
|
||||
focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
|
||||
<label class="absolute left-2 text-gray-400 transition-all duration-200
|
||||
peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-sm
|
||||
peer-focus:top-[-2px] peer-focus:text-[10px] peer-focus:text-blue-500
|
||||
peer-valid:top-[-2px] peer-valid:text-[10px] peer-valid:text-gray-500">
|
||||
Link Musik (opsional)
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Say Something -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Say Something</h2>
|
||||
<textarea v-model="form.form.say_something" rows="4" placeholder="Kata-kata atau ucapan terima kasih..."
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition resize-none"></textarea>
|
||||
</section>
|
||||
|
||||
<!-- Galeri Foto -->
|
||||
<section class="mb-8">
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🖼️ Galeri Foto</h2>
|
||||
<div
|
||||
class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col justify-center items-center text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
|
||||
>
|
||||
<input
|
||||
id="gallery"
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
<h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">Galeri Foto</h2>
|
||||
<div class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col justify-center items-center
|
||||
text-gray-400 hover:border-blue-400 hover:text-blue-500 transition">
|
||||
<input id="gallery" type="file" multiple accept="image/*" class="hidden" @change="handleFileChange" />
|
||||
<label v-if="!previews.length" for="gallery" class="cursor-pointer flex flex-col items-center">
|
||||
<span class="text-4xl font-bold">+</span>
|
||||
<span class="text-sm mt-2">Pilih Foto (maks. 2, JPEG/PNG, maks. 2MB)</span>
|
||||
<span class="text-sm mt-2">Pilih Foto (maks. 4, JPEG/PNG, maks. 2MB)</span>
|
||||
</label>
|
||||
<div v-else class="grid grid-cols-2 gap-4">
|
||||
<div
|
||||
v-for="(src, i) in previews"
|
||||
:key="i"
|
||||
class="relative group"
|
||||
>
|
||||
<img
|
||||
:src="src"
|
||||
class="w-24 h-24 object-cover rounded-lg border shadow"
|
||||
/>
|
||||
<button
|
||||
@click="removeFile(i)"
|
||||
class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition"
|
||||
title="Hapus foto"
|
||||
>
|
||||
<div v-else class="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
<div v-for="(src, i) in previews" :key="i" class="relative group">
|
||||
<img :src="src" class="w-24 h-24 object-cover rounded-lg border shadow" />
|
||||
<button @click="removeFile(i)" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5
|
||||
flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition"
|
||||
title="Hapus foto">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<label
|
||||
v-if="previews.length < 2"
|
||||
for="gallery"
|
||||
class="cursor-pointer flex flex-col items-center justify-center w-24 h-24 border-2 border-dashed border-gray-300 rounded-lg text-gray-400 hover:border-blue-400 hover:text-blue-500 transition"
|
||||
>
|
||||
<label v-if="previews.length < 4" for="gallery" class="cursor-pointer flex flex-col items-center justify-center w-24 h-24
|
||||
border-2 border-dashed border-gray-300 rounded-lg text-gray-400
|
||||
hover:border-blue-400 hover:text-blue-500 transition">
|
||||
<span class="text-3xl font-bold">+</span>
|
||||
</label>
|
||||
</div>
|
||||
@ -134,16 +201,10 @@
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="text-end mt-6">
|
||||
<button
|
||||
@click="batal"
|
||||
class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2"
|
||||
>
|
||||
<button @click="batal" class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2">
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
@click="konfirmasi"
|
||||
class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition"
|
||||
>
|
||||
<button @click="konfirmasi" class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition">
|
||||
Konfirmasi
|
||||
</button>
|
||||
</div>
|
||||
@ -154,6 +215,7 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import Swal from 'sweetalert2'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@ -163,11 +225,17 @@ const form = ref({
|
||||
no_tlpn: '',
|
||||
form: {
|
||||
nama_lengkap: '',
|
||||
nama_panggilan: '',
|
||||
nama_bapak: '',
|
||||
nama_ibu: '',
|
||||
hari_tanggal_acara: '',
|
||||
waktu: '',
|
||||
alamat: ''
|
||||
alamat: '',
|
||||
link_gmaps: '',
|
||||
say_something: '',
|
||||
hitung_mundur: '',
|
||||
rekening_1: '',
|
||||
link_music: ''
|
||||
},
|
||||
foto: []
|
||||
})
|
||||
@ -176,27 +244,25 @@ const previews = ref([])
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
const files = Array.from(e.target.files)
|
||||
const totalFiles = form.value.foto.length + files.length
|
||||
|
||||
if (totalFiles > 2) {
|
||||
alert('Maksimal 2 foto!')
|
||||
const total = form.value.foto.length + files.length
|
||||
if (total > 4) {
|
||||
Swal.fire('Maksimal 4 foto!', '', 'warning')
|
||||
e.target.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
files.forEach(file => {
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
alert(`File ${file.name} terlalu besar! Maksimal 2MB.`)
|
||||
Swal.fire(`${file.name} terlalu besar! Maks 2MB.`, '', 'error')
|
||||
return
|
||||
}
|
||||
if (!['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
|
||||
alert(`File ${file.name} harus berupa JPEG atau PNG!`)
|
||||
Swal.fire(`${file.name} harus JPEG/PNG.`, '', 'error')
|
||||
return
|
||||
}
|
||||
form.value.foto.push(file)
|
||||
previews.value.push(URL.createObjectURL(file))
|
||||
})
|
||||
|
||||
e.target.value = ''
|
||||
}
|
||||
|
||||
@ -206,17 +272,17 @@ const removeFile = (index) => {
|
||||
}
|
||||
|
||||
const konfirmasi = async () => {
|
||||
try {
|
||||
if (!form.value.nama_pemesan || !form.value.email) {
|
||||
alert('Harap isi semua kolom wajib (Nama Pemesan, Email)!')
|
||||
return
|
||||
}
|
||||
if (!form.value.nama_pemesan || !form.value.email) {
|
||||
Swal.fire('Harap isi Nama Pemesan dan Email!', '', 'warning')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const data = new FormData()
|
||||
data.append('nama_pemesan', form.value.nama_pemesan)
|
||||
data.append('email', form.value.email)
|
||||
data.append('no_tlpn', form.value.no_tlpn)
|
||||
data.append('template_slug', 'undangan-khitan-starter')
|
||||
data.append('template_slug', 'undangan-khitan-basic')
|
||||
|
||||
for (const [key, value] of Object.entries(form.value.form)) {
|
||||
data.append(`form[${key}]`, value)
|
||||
@ -235,23 +301,77 @@ const konfirmasi = async () => {
|
||||
|
||||
if (!res.ok) {
|
||||
if (res.status === 422) {
|
||||
const errors = result.errors || {}
|
||||
const errorMessages = Object.values(errors).flat().join('\n')
|
||||
throw new Error(errorMessages || result.message || 'Validasi gagal')
|
||||
}
|
||||
if (res.status === 404) {
|
||||
throw new Error(result.message || 'Template tidak ditemukan')
|
||||
throw new Error(Object.values(result.errors || {}).flat().join('\n'))
|
||||
}
|
||||
throw new Error(result.message || 'Gagal mengirim data')
|
||||
}
|
||||
|
||||
alert(result.message || 'Data berhasil disimpan!')
|
||||
await Swal.fire({
|
||||
title: 'Berhasil!',
|
||||
text: result.message || 'Data undangan berhasil disimpan.',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'Lanjut ke WhatsApp',
|
||||
confirmButtonColor: '#2563eb',
|
||||
background: '#f9fafb',
|
||||
color: '#111827',
|
||||
})
|
||||
|
||||
// Kirim ke WhatsApp Admin
|
||||
const adminNumber = '62895333053398'
|
||||
const pesan = `
|
||||
Halo Admin
|
||||
Ada pesanan baru untuk *Undangan Khitan Basic*
|
||||
|
||||
*Data Pemesan*
|
||||
- Nama: ${form.value.nama_pemesan}
|
||||
- Email: ${form.value.email}
|
||||
- No. Telepon: ${form.value.no_tlpn}
|
||||
|
||||
*Data Anak*
|
||||
- Nama Lengkap: ${form.value.form.nama_lengkap || '-'}
|
||||
- Nama Panggilan: ${form.value.form.nama_panggilan || '-'}
|
||||
- Bapak: ${form.value.form.nama_bapak || '-'}
|
||||
- Ibu: ${form.value.form.nama_ibu || '-'}
|
||||
|
||||
*Detail Acara*
|
||||
- Tanggal: ${form.value.form.hari_tanggal_acara || '-'}
|
||||
- Waktu: ${form.value.form.waktu || '-'}
|
||||
- Alamat: ${form.value.form.alamat || '-'}
|
||||
- Gmaps: ${form.value.form.link_gmaps || '-'}
|
||||
|
||||
*Hitung Mundur*: ${form.value.form.hitung_mundur || '-'}
|
||||
|
||||
*Say Something*:
|
||||
${form.value.form.say_something || '-'}
|
||||
|
||||
*Rekening 1*: ${form.value.form.rekening_1 || '-'}
|
||||
|
||||
*Musik*: ${form.value.form.link_music || '-'}
|
||||
|
||||
Terima kasih
|
||||
`
|
||||
|
||||
const waUrl = `https://wa.me/${adminNumber}?text=${encodeURIComponent(pesan)}`
|
||||
window.open(waUrl, '_blank')
|
||||
|
||||
router.push('/')
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('Terjadi kesalahan: ' + err.message)
|
||||
Swal.fire('Gagal!', err.message || 'Terjadi kesalahan saat menyimpan.', 'error')
|
||||
}
|
||||
}
|
||||
|
||||
const batal = () => router.back()
|
||||
</script>
|
||||
const batal = () => {
|
||||
Swal.fire({
|
||||
title: 'Batalkan?',
|
||||
text: 'Perubahan yang belum disimpan akan hilang.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#d33',
|
||||
cancelButtonColor: '#6b7280',
|
||||
confirmButtonText: 'Ya, Batalkan'
|
||||
}).then(result => {
|
||||
if (result.isConfirmed) router.back()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user