fix design template ultah starter

2025-10-28 10:26:37 +07:00 · 2025-10-28 10:26:37 +07:00 · 024c9b243f
commit 024c9b243f
parent d68f171acf
6 changed files with 75 additions and 37 deletions
--- a/proyek-frontend/app/components/templates/UltahStarter/Event.vue
+++ b/proyek-frontend/app/components/templates/UltahStarter/Event.vue
@ -16,7 +16,7 @@
        <div class="text-3xl">📅</div>
        <div class="text-left">
          <h2 class="font-semibold text-red-400">Hari & Tanggal</h2>
-          <p class="text-white font-medium">Rabu, 22 Oktober 2025</p>
+          <p class="text-white font-medium">{{ hari_tanggal_acara }}</p>
        </div>
      </div>

@ -25,7 +25,7 @@
        <div class="text-3xl">⏰</div>
        <div class="text-left">
          <h2 class="font-semibold text-blue-400">Waktu Acara</h2>
-          <p class="text-white font-medium">18.00</p>
+          <p class="text-white font-medium">{{ waktu }}</p>
        </div>
      </div>

@ -34,16 +34,18 @@
        <div class="text-3xl">📍</div>
        <div class="text-left">
          <h2 class="font-semibold text-yellow-400">Lokasi Petualangan</h2>
-          <p class="text-white font-medium">jkbjkb</p>
+          <p class="text-white font-medium">{{ alamat }}</p>
        </div>
      </div>

      <!-- Tombol Maps -->
-      <button
-        class="mt-4 bg-gray-800 text-white px-6 py-3 rounded-full font-semibold hover:bg-gray-700 transition-all duration-300 mx-auto flex items-center gap-2"
+      <a
+        :href="link_gmaps"
+        target="_blank"
+        class="mt-4 bg-gradient-to-r from-green-600 to-green-700 text-white px-6 py-3 rounded-full font-semibold hover:from-green-700 hover:to-green-800 transition-all duration-300 mx-auto flex items-center gap-2 justify-center"
      >
-        🗺️ Link Maps Menyusul
-      </button>
+         🗺️ Buka Google Maps 
+      </a>
    </div>

    <!-- Catatan -->
--- a/proyek-frontend/app/components/templates/UltahStarter/Landing.vue
+++ b/proyek-frontend/app/components/templates/UltahStarter/Landing.vue
@ -46,7 +46,7 @@
    <p
      class="text-2xl font-bold mb-10 text-yellow-100 drop-shadow-md animate-fade-up-delay"
    >
-      Bergabunglah dalam petualangan ulang tahun {{ childName }}! 🎭
+      Bergabunglah dalam petualangan ulang tahun ! 🎭
    </p>

    <!-- 🔘 BUTTON -->
--- a/proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue
+++ b/proyek-frontend/app/components/templates/UltahStarter/ThankYou.vue
@ -51,10 +51,8 @@
        Atas kehadiran dan doa <span class="text-yellow-300 font-semibold">spider-power</span> untuk
      </p>

-      <p
-        class="text-2xl sm:text-4xl font-bold text-yellow-300 bg-black/40 py-3 sm:py-4 px-6 sm:px-8 rounded-2xl border border-yellow-500/50"
-      >
-        {{ childName || 'Spider-Kid' }}
+      <p class="text-2xl sm:text-4xl font-bold text-yellow-300 bg-black/40 py-3 sm:py-4 px-6 sm:px-8 rounded-2xl border border-yellow-500/50">
+        {{ childName }}
      </p>

      <div class="bg-black/50 backdrop-blur-lg rounded-2xl p-6 border border-red-500/50">
--- a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
@ -89,7 +89,7 @@ import ThankYou from '~/components/templates/UltahStarter/ThankYou.vue'
 // Props dari induk
 const props = defineProps({
  data: { type: Object, required: true },
-  tamu: { type: Object, required: true } // Tambahkan props tamu
+  tamu: { type: Object, required: true } 
 })

 // URL backend
@ -103,10 +103,10 @@ const messages = computed(() => props.data.rsvp || [])

 // ✅ Gambar galeri
 const galleryImages = computed(() => {
-  const f = formData.value
-  return [f.foto_1, f.foto_2, f.foto_3, f.foto_4, f.foto_5]
+  const fotos = formData.value.foto || [] 
+  return fotos
    .filter(Boolean)
-    .map(img => `${backendUrl}/storage/${img.replace(/^public\//, '')}`)
+    .map(img => `${backendUrl}/storage/${img}`) 
 })

 // 🌍 Navigasi section
@ -139,25 +139,53 @@ const currentComponent = computed(() => {
  }
 })

-// 🎁 Props untuk tiap komponen
-const componentProps = computed(() => ({
-  childName: formData.value.nama_panggilan,
-  guestName: route.query.guest || props.tamu.nama_tamu || 'Tamu Undangan',
-  age: formData.value.umur_yang_dirayakan,
-  childOrder: formData.value.anak_ke,
-  parentsName: `${formData.value.nama_bapak} & ${formData.value.nama_ibu}`,
-  childPhoto: formData.value.foto?.length
-    ? `${backendUrl}/storage/${formData.value.foto[0]}`
-    : null,
-  hari_tanggal_acara: formData.value.hari_tanggal_acara,
-  waktu: formData.value.waktu,
-  alamat: formData.value.alamat,
-  link_gmaps: formData.value.link_gmaps,
-  hitung_mundur: formData.value.hitung_mundur,
-  images: galleryImages.value,
-  messages: messages.value,
-  jsonData: formData.value
-}))
+// Props untuk tiap komponen
+const componentProps = computed(() => {
+  const f = formData.value
+
+  // Foto anak (untuk Introduction & ThankYou)
+  const childPhoto = f.foto?.[0] 
+    ? `${backendUrl}/storage/${f.foto[0].replace(/^public\//, '')}` 
+    : null
+
+  // Format tanggal: 2025-10-24 → Jumat, 24 Oktober 2025
+  const formatDate = (dateStr) => {
+    if (!dateStr) return 'Akan diumumkan'
+    try {
+      const d = new Date(dateStr)
+      return d.toLocaleDateString('id-ID', {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
+      })
+    } catch {
+      return dateStr
+    }
+  }
+
+  return {
+    // === Introduction & ThankYou ===
+    childName: f.nama_lengkap || 'Spider Kid',
+    guestName: route.query.guest || props.tamu.nama_tamu || 'Tamu Undangan',
+    age: f.umur_yang_dirayakan,
+    childOrder: f.anak_ke,
+    parentsName: `${f.nama_bapak || 'Bapak'} & ${f.nama_ibu || 'Ibu'}`,
+    childPhoto,
+
+    // === Event ===
+    hari_tanggal_acara: formatDate(f.hari_tanggal_acara),
+    waktu: f.waktu,
+    alamat: f.alamat,
+    link_gmaps: f.link_gmaps || '#',
+
+    // === Gallery ===
+    images: galleryImages.value,
+
+    // === ThankYou ===
+    jsonData: f
+  }
+})

 // Debug log
 import { watchEffect } from 'vue'
--- a/proyek-frontend/app/pages/form/ulang_tahun/starter.vue
+++ b/proyek-frontend/app/pages/form/ulang_tahun/starter.vue
@ -113,6 +113,16 @@
              Alamat
            </label>
          </div>
+          <div class="relative md:col-span-2">
+            <input v-model="form.form.link_gmaps" type="text" required 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-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 Gmaps
+            </label>
+          </div>
        </div>
      </section>

--- a/proyek-frontend/app/pages/p/[code].vue
+++ b/proyek-frontend/app/pages/p/[code].vue
@ -131,11 +131,11 @@ const fetchInvitation = async () => {
    const response = await $fetch(`${backendUrl}/api/pelanggans/code/${route.params.code}`)
    
    console.log('✅ API response:', response)
-
+   console.log('🎫 tamuData:', tamuData.value)
    // Validate response
    if (!response.success) {
      throw new Error(response.message || 'Undangan tidak ditemukan')
-      console.log('🎫 tamuData:', tamuData.value)
+      
    }

    if (!response.data || !response.data.pelanggan) {