#51 - map of events

resources/css/app.css

@@ -10,3 +10,12 @@
   @apply bg-[linear-gradient(90deg,#FFFFFF_0%,#B0F8F9_33%,#A1FEFF_66%,#FFFFFF_100%)]
   bg-clip-text text-transparent
 }
+
+.leaflet-popup-content-wrapper {
+  background: transparent !important;
+}
+
+.leaflet-popup-content,
+.leaflet-popup-content p {
+  margin: 0 !important;
+}

resources/js/Components/EventCard.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+
+withDefaults(
+  defineProps<{
+    id: number | string
+    imageUrl?: string | undefined
+    start: string
+    isPaid: boolean
+    title: string
+    location?: string | null
+    ageCategory?: string | null
+  }>(),
+  {
+    imageUrl: 'https://picsum.photos/200/300',
+    location: 'Brak lokalizacji',
+    ageCategory: 'Brak',
+  },
+)
+</script>
+
+<template>
+  <InertiaLink
+    :href="`/event/${id}`"
+    class="block max-w-sm bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition delay-100 duration-300 hover:scale-105"
+  >
+    <img
+      :src="imageUrl"
+      alt="Event Banner"
+      class="w-full h-48 object-cover"
+    >
+
+    <div class="p-4 space-y-2">
+      <div class="flex items-center justify-between">
+        <div class="text-sm text-gray-500">{{ start }}</div>
+        <span
+          class="text-xs font-semibold px-2 py-1 rounded-full"
+          :class="[isPaid ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600']"
+        >
+          {{ isPaid ? 'Płatny' : 'Darmowy' }}
+        </span>
+      </div>
+
+      <h3 class="text-lg font-bold text-gray-900">{{ title }}</h3>
+
+      <p class="text-sm text-gray-600 flex items-center">
+        {{ location }}
+      </p>
+
+      <p class="text-sm text-gray-600">
+        Ograniczenie wiekowe:
+        <span class="font-medium">{{ ageCategory }}</span>
+      </p>
+    </div>
+  </InertiaLink>
+</template>

resources/js/Components/EventPopUp.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { Link as InertiaLink } from '@inertiajs/vue3'
+import { formatDate, formatTime } from '@/utilities/formatDate'
+import BaseButton from '@/Components/BaseButton.vue'
+import type { EventMarker } from '@/types/events'
+
+defineProps<{ event: EventMarker }>()
+</script>
+
+<template>
+  <div class="bg-white rounded-xl shadow-lg size-full overflow-hidden">
+    <img
+      :src="event.image_url ?? '/images/placeholder.png'"
+      :alt="event.title"
+      class="w-full h-24 object-cover"
+    >
+
+    <div class="px-3 py-2">
+      <div class="space-y-2">
+        <div class="flex items-center justify-between text-sm text-gray-500">
+          <span>{{ formatDate(event.start) }} - {{ formatTime(event.start) }} </span>
+          <span
+            class="text-xs font-semibold px-2 py-1 rounded-full"
+            :class="event.is_paid ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'"
+          >
+            {{ event.is_paid ? 'Płatny' : 'Darmowy' }}
+          </span>
+        </div>
+        <div>
+          <h3 class="text-lg font-bold text-gray-900 leading-tight">
+            {{ event.title }}
+          </h3>
+        </div>
+        <div class="">
+          <p class="text-base font-medium text-gray-800">
+            {{ event.location ?? 'Brak lokalizacji' }}
+          </p>
+          <p class="text-sm font-normal text-gray-500">
+            {{ event.age_category ? `Ogr. wiek.: ${event.age_category}` : 'Brak ograniczeń' }}
+          </p>
+        </div>
+        <div>
+          <InertiaLink :href="`/event/${event.id}`">
+            <BaseButton
+              type="button"
+              class="w-full bg-zinc-800 text-white justify-center font-bold px-10 "
+            >
+              Zobacz szczegóły
+            </BaseButton>
+          </InertiaLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

resources/js/Components/InfoBlock.vue

@@ -1,27 +1,47 @@
 <script setup lang="ts">
-import { MapPinIcon as DefaultIcon } from '@heroicons/vue/24/solid'
-
-defineProps<{
-  icon?: any
-  title: string
-  line1?: string
-  line2?: string
-  line3?: string
-}>()
+import { UserIcon as DefaultIcon } from '@heroicons/vue/24/outline'
+withDefaults(
+  defineProps<{
+    icon?: object | null
+    imageUrl?: string | null
+    title?: string | null
+    infoItems?: string[] | null
+  }>(),
+  {
+    icon: DefaultIcon,
+    imageUrl: undefined,
+    title: '',
+    infoItems: () => [],
+  },
+)
 </script>
 
 <template>
-  <div class="flex gap-x-6 items-center">
+  <div class="flex sm:gap-x-6 gap-x-3 items-center">
     <div
-      class="flex bg-brand/10 size-20 rounded-2xl items-center justify-center aspect-square"
+      class="flex shrink-0 bg-brand/10 sm:size-20 size-10 rounded-2xl items-center justify-center aspect-square overflow-hidden"
     >
-      <component :is="icon || DefaultIcon" class="size-10 text-brand" />
+      <img
+        v-if="imageUrl"
+        :src="imageUrl"
+        alt="Obrazek"
+        class="object-cover size-full"
+      >
+      <component
+        :is="icon ?? DefaultIcon"
+        v-else
+        class="sm:size-10 size-5 text-brand"
+      />
     </div>
     <div class="flex flex-col">
-      <h2 class="text-3xl font-bold">{{ title }}</h2>
-      <p v-if="line1" class="text-gray-500">{{ line1 }}</p>
-      <p v-if="line2" class="text-gray-500">{{ line2 }}</p>
-      <p v-if="line3" class="text-gray-500">{{ line3 }}</p>
+      <h2 class="sm:text-3xl text-left text-sm font-bold">{{ title }}</h2>
+      <p
+        v-for="(info, index) in infoItems"
+        :key="index"
+        class="sm:text-sm text-xs text-left text-gray-500"
+      >
+        {{ info }}
+      </p>
     </div>
   </div>
 </template>

resources/js/Components/LoginFacebook.vue

@@ -6,7 +6,7 @@ async function handleFacebookLogin() {
   try {
     const response = await axios.get('/api/auth/facebook/redirect')
     if (response.data.url) {
-      localStorage.setItem('loginRedirectUrl', window.location.href)
+      sessionStorage.setItem('loginRedirectUrl', window.location.href)
       window.location.href = response.data.url
     }
   } catch (error: any) {

resources/js/Components/Map.vue

@@ -1,28 +1,35 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import api from '@/services/api'
+import { ref, onMounted, createApp, h } from 'vue'
 import L from 'leaflet'
+import EventPopUp from '@/Components/EventPopUp.vue'
+import type { EventMarker } from '@/types/events'
 
-const CENTER: [number, number] = [51.21006, 16.1619]
 const INITIAL_ZOOM = 14
-const MIN_ZOOM = 13
+const MIN_ZOOM = 1
 const MAX_ZOOM = 17
-const BOUNDS: [[number, number], [number, number]] = [
-  [51.2597694104174, 16.03829270690674],
-  [51.153081195098444, 16.30093461210093],
-]
 const MAX_BOUNDS_VISCOSITY = 1
 
+const props = defineProps<{
+  center?: [number, number]
+  zoom?: number
+  disableFetch?: boolean
+}>()
+
+const DEFAULT_CENTER: [number, number] = [51.21006, 16.1619]
 const mapElement = ref<HTMLDivElement | null>(null)
 
-onMounted(() => {
+onMounted(async () => {
   if (!mapElement.value) return
 
+  const mapCenter = props.center ?? DEFAULT_CENTER
+  const mapZoom   = props.zoom   ?? INITIAL_ZOOM
+
   const map = L.map(mapElement.value, {
-    center: CENTER,
-    zoom: INITIAL_ZOOM,
+    center: mapCenter,
+    zoom: mapZoom,
     minZoom: MIN_ZOOM,
     maxZoom: MAX_ZOOM,
-    maxBounds: BOUNDS,
     maxBoundsViscosity: MAX_BOUNDS_VISCOSITY,
   })
 
@@ -36,7 +43,28 @@ onMounted(() => {
     },
   ).addTo(map)
 
-  L.marker(CENTER).addTo(map).bindPopup('You are here.')
+  L.marker(mapCenter).addTo(map).bindPopup('You are here.')
+
+  try {
+    if (!props.disableFetch) {
+      const res = await api.get<{ data: EventMarker[] }>('/events')
+      res.data.data.forEach(event => {
+        if (event.latitude != null && event.longitude != null) {
+          const marker = L.marker([event.latitude, event.longitude]).addTo(map)
+          const container = document.createElement('div')
+          createApp({ render: () => h(EventPopUp, { event }) }).mount(container)
+          marker.bindPopup(container, {
+            minWidth: 250,
+            maxWidth: 250,
+            autoPanPadding: [0, 0],
+            className: 'leaflet-popup--custom',
+          })
+        }
+      })
+    }
+  } catch (error) {
+    alert('Nie udało się pobrać wydarzeń:')
+  }
 })
 </script>
 

resources/js/Components/Navbar.vue

@@ -1,53 +1,33 @@
 <script setup lang="ts">
-import { Link as InertiaLink, usePage } from '@inertiajs/vue3'
-import { computed } from 'vue'
-import { useLogout } from '@/composables/useLogout'
-import { type AuthProps } from '@/types/types'
+import { Link as InertiaLink } from '@inertiajs/vue3'
+import { useAuth } from '@/composables/useAuth'
 
-const page = usePage()
-
-const authProps = computed(() => (page.props as unknown) as AuthProps)
-const isLoggedIn = computed(() => !!authProps.value.auth.user)
-
-const { logout } = useLogout()
+const { isLoggedIn, logout } = useAuth()
 </script>
 
 <template>
   <div class="w-full">
-    <div
-      class="flex font-medium items-center md:justify-end justify-between gap-y-5 pt-10 sm:gap-x-10 mx-5 mb-10"
-    >
+    <div class="flex font-medium items-center md:justify-end justify-between gap-y-5 pt-10 sm:gap-x-10 mx-5 mb-10">
       <template v-if="!isLoggedIn">
-        <InertiaLink href="/login" class="hover:underline">
-          Zaloguj się
-        </InertiaLink>
-        <InertiaLink
-          href="/register"
-          class="bg-black text-white rounded-full shadow-shadow-blue hover:scale-105 shadow-sm py-2 px-8"
+        <InertiaLink href="/login" class="hover:underline">Zaloguj się</InertiaLink>
+        <InertiaLink href="/register"
+                     class="bg-black text-white rounded-full shadow-shadow-blue hover:scale-105 shadow-sm py-2 px-8"
         >
           Zarejestruj się
         </InertiaLink>
       </template>
 
       <template v-else>
-        <InertiaLink
-          href="/profile"
-          class="hover:underline"
-        >
-          Profil
-        </InertiaLink>
-        <button
-          class="bg-black text-white rounded-full shadow-shadow-blue hover:scale-105 shadow-sm py-2 px-8"
-          @click.prevent="logout"
+        <InertiaLink href="/profile" class="hover:underline">Profil</InertiaLink>
+        <button class="bg-black text-white rounded-full shadow-shadow-blue hover:scale-105 shadow-sm py-2 px-8"
+                @click.prevent="logout"
         >
           Wyloguj się
         </button>
       </template>
     </div>
 
-    <div
-      class="flex flex-col space-y-6 items-center justify-center text-center mb-6"
-    >
+    <div class="flex flex-col space-y-6 items-center justify-center text-center mb-6">
       <img src="/images/LogoBrand.png" alt="LetsEvent">
       <slot />
     </div>

resources/js/Components/PaginationComponent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const { page, lastPage } = defineProps<{
+  page: number
+  lastPage: number
+}>()
+
+const emit = defineEmits<(e: 'update:page', newPage: number) => void>()
+
+const canPrev = computed(() => page > 1)
+const canNext = computed(() => page < lastPage)
+
+function goPrev() {
+  if (canPrev.value) emit('update:page', page - 1)
+}
+
+function goNext() {
+  if (canNext.value) emit('update:page', page + 1)
+}
+</script>
+
+<template>
+  <div v-if="lastPage > 1" class="flex justify-center items-center gap-4 mt-4">
+    <button
+      class="px-4 py-2 bg-gray-200 rounded disabled:opacity-50"
+      :disabled="!canPrev"
+      @click="goPrev"
+    >
+      Poprzednia
+    </button>
+    <span>Strona {{ page }} z {{ lastPage }}</span>
+    <button
+      class="px-4 py-2 bg-gray-200 rounded disabled:opacity-50"
+      :disabled="!canNext"
+      @click="goNext"
+    >
+      Następna
+    </button>
+  </div>
+</template>

resources/js/Layouts/Layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="font-medium bg-gray-50 sm:flex sm:items-center sm:justify-center"
+    class="font-medium bg-gray-50 sm:flex sm:items-center min-h-screen sm:justify-center"
   >
     <slot />
   </div>