195 lines
9.3 KiB
Vue
195 lines
9.3 KiB
Vue
<script setup>
|
|
import { Link, usePage } from '@inertiajs/vue3';
|
|
import { onMounted, defineProps, computed, ref, nextTick } from 'vue';
|
|
import { gsap } from 'gsap';
|
|
import { initFlowbite } from 'flowbite';
|
|
|
|
const { block, blockData, frontpage } = defineProps({
|
|
block: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
blockData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
frontpage: {
|
|
type: Boolean
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
initFlowbite();
|
|
});
|
|
|
|
const articlesContainer = ref(null);
|
|
const page = usePage();
|
|
|
|
/**
|
|
* Retrieve only 4 event articles
|
|
*/
|
|
|
|
const limitedArticles = computed(() => blockData.articles.slice(0, 4));
|
|
|
|
/**
|
|
* Paginate event articles into arrays of 4
|
|
*/
|
|
|
|
const paginateEventArticles = computed(() => {
|
|
const pageSize = 4;
|
|
return blockData.events.reduce((acc, article, index) => {
|
|
const chunkIndex = Math.floor(index / pageSize);
|
|
if(!acc[chunkIndex]) {
|
|
acc[chunkIndex] = []; // start a new chunk
|
|
}
|
|
acc[chunkIndex].push(article);
|
|
return acc;
|
|
}, []);
|
|
});
|
|
|
|
const currentEventPage = ref(0);
|
|
|
|
// Use this computed property to get the articles of the current page
|
|
|
|
const currentArticles = computed(() => paginateEventArticles.value[currentEventPage.value]);
|
|
|
|
const nextPage = () => {
|
|
if (currentEventPage.value < paginateEventArticles.value.length - 1) {
|
|
// Animate current articles out to the left
|
|
gsap.to(articlesContainer.value, {x: -100, opacity: 0, onComplete: () => {
|
|
currentEventPage.value++;
|
|
// Wait for the DOM to update
|
|
nextTick().then(() => {
|
|
// Animate new articles in from the right
|
|
gsap.fromTo(articlesContainer.value, {x: 100, opacity: 0}, {x: 0, opacity: 1});
|
|
});
|
|
}});
|
|
}
|
|
};
|
|
|
|
const prevPage = () => {
|
|
if (currentEventPage.value > 0) {
|
|
// Animate current articles out to the right
|
|
gsap.to(articlesContainer.value, {x: 100, opacity: 0, onComplete: () => {
|
|
currentEventPage.value--;
|
|
// Wait for the DOM to update
|
|
nextTick().then(() => {
|
|
// Animate new articles in from the left
|
|
gsap.fromTo(articlesContainer.value, {x: -100, opacity: 0}, {x: 0, opacity: 1});
|
|
});
|
|
}});
|
|
}
|
|
};
|
|
|
|
// Check if currentPage is the first page
|
|
const isFirstPage = computed(() => currentEventPage.value === 0);
|
|
|
|
// Check if currentPage is the last page
|
|
const isLastPage = computed(() => currentEventPage.value === paginateEventArticles.value.length - 1);
|
|
|
|
/** Get a node value from json */
|
|
|
|
const extractMetaValue = (node, key) => {
|
|
let meta = JSON.parse(node.fs_meta);
|
|
|
|
return meta[key];
|
|
};
|
|
|
|
/**
|
|
* formatDate
|
|
*
|
|
* Formats a date string to a Norwegian date format.
|
|
*
|
|
* @param {
|
|
* } dateString
|
|
*/
|
|
|
|
const formatDate = (dateString) => {
|
|
const date = new Date(dateString);
|
|
const day = ('0' + date.getDate()).slice(-2);
|
|
const month = ('0' + (date.getMonth() + 1)).slice(-2);
|
|
const year = date.getFullYear();
|
|
|
|
return `${day}/${month}/${year}`;
|
|
};
|
|
|
|
/**
|
|
* dateString
|
|
*
|
|
* Formats a date string to a Norwegian time format.
|
|
* @param {*} dateString
|
|
*/
|
|
|
|
const formatTime = (dateString) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<section id="events" class="relative block w-full h-screen overflow-hidden">
|
|
<div class="absolute inset-0 bg-cover" :style="{ backgroundImage: `url('${block.image}')` }"></div>
|
|
<div class="absolute inset-0 bg-black opacity-80"></div>
|
|
<div class="absolute p-12 w-full overflow-auto" style="top: 0; bottom: 0;">
|
|
<div class="flex-row justify-center items-center">
|
|
<h1 v-if="block.showtitle" class="text-center text-white font-arctic text-2xl md:text-4xl">{{ block.title || 'Tittel' }}</h1>
|
|
<h2 v-if="block.showlabel" class="text-center text-amber-600 font-serif text-md md:text-xl">{{ block.label || 'Merkelapp' }}</h2>
|
|
<h3 v-if="block.showsecondarylabel && !$page.props.auth.user" class="text-center text-gray-400 font-serif text-sm md:text-md">{{ block.secondarylabel || 'Sekundær merkelapp' }}</h3>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-[1280px]">
|
|
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-12">
|
|
<!-- Begin events loop -->
|
|
<div
|
|
v-for="(event, index) in blockData.events"
|
|
:key="event.id"
|
|
class="max-w-sm rounded-lg shadow-xl bg-gray-800 border-gray-700 relative"
|
|
>
|
|
<div class="relative z-0">
|
|
<Link v-if="event.image_id" :href="route('event', event.slug)">
|
|
<img class="rounded-t-lg" :src="extractMetaValue(event.image, 'symbolic_name')" :alt="extractMetaValue(event.image, 'title')" />
|
|
<!-- Badge positioned absolutely within the relative container -->
|
|
<template v-if="event.capacity">
|
|
<div v-if="event.signups.length === 0" class="absolute top-0 right-0 bg-blue-100 text-blue-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-blue-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
|
{{ event.capacity - event.signups.length }} plasser igjen
|
|
</div>
|
|
<div v-else-if="event.signups.length < (event.capacity / 2)" class="absolute top-0 right-0 bg-green-100 text-green-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-green-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
|
{{ event.capacity - event.signups.length }} plasser igjen
|
|
</div>
|
|
<div v-else-if="event.signups.length > (event.capacity / 2) && event.signups.length != event.capacity" class="absolute top-0 right-0 bg-yellow-100 text-yellow-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-yellow-300 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
|
{{ event.capacity - event.signups.length }} plasser igjen
|
|
</div>
|
|
<div v-else class="absolute top-0 right-0 bg-red-100 text-red-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border border-red-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
|
Alle plasser er tatt
|
|
</div>
|
|
</template>
|
|
<div v-else class="absolute top-0 right-0 bg-green-100 text-green-800 text-sm md:text-md font-medium me-2 px-2.5 py-0.5 rounded border-green-400 inline-flex items-center justify-center z-20" style="margin: 0.5rem;">
|
|
Ingen plassrestriksjoner
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
<div class="p-5">
|
|
<Link :href="route('event', event.slug)">
|
|
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white">{{ event.title }}</h5>
|
|
</Link>
|
|
<p class="text-sm text-green-400 mb-1">
|
|
Oppstart: {{ formatDate(event.start) }}, klokken {{ formatTime(event.start) }}
|
|
</p>
|
|
<p v-if="event.signups.length > 0" class="mb-2 text-xs text-green-200">{{ event.signups.length }} deltager(e) har meldt seg på så langt</p>
|
|
<p v-else class="mb-2 text-xs text-red-300">Ingen påmeldte så langt</p>
|
|
<p class="mb-3 font-normal text-gray-400">{{ event.excerpt }}</p>
|
|
<Link :href="route('event', event.slug)" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-green-600 hover:bg-green-700 focus:ring-green-800">
|
|
Les mer
|
|
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<!-- End events loop -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template> |