Xeovalyte
6cc14bcaf0
All checks were successful
Build and Deploy / Deploy (push) Successful in 4m36s
87 lines
3.2 KiB
Vue
87 lines
3.2 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
|
<div v-if="newsStore.loaded && newsStore.news" class="flex flex-col gap-3">
|
|
<NuxtLink to="/news/newmessage" v-if="userStore.userData.sendNews" class="item-hover border-dashed border-2 container text-center font-bold text-xl border-neutral-500 mb-3">
|
|
Nieuw Bericht
|
|
</NuxtLink>
|
|
<div v-if="newsStore.news[0]" v-for="(item, index) in newsStore.news" :key="index">
|
|
<div class="item container flex flex-col relative">
|
|
<h3 class="text-sm">{{ longEventDate(item.date.toDate()) }}</h3>
|
|
<h2 class="text-2xl font-bold">{{ item.title }}</h2>
|
|
<p class="description" v-html="convertLinks(item.description)"></p>
|
|
<Icon v-if="userStore.userData.sendNews" @click="newsStore.deleteNews(item, index)" size="1.5em" name="ion:trash-sharp" class="absolute top-3 right-3 hover:cursor-pointer text-red-500" />
|
|
</div>
|
|
</div>
|
|
<h2 v-else class="font-bold text-center text-xl mt-3">
|
|
Er is geen nieuws
|
|
</h2>
|
|
</div>
|
|
<div class="w-full flex flex-col justify-center items-center" v-else>
|
|
<Icon size="2em" name="ion:load-c" class="animate-spin" />
|
|
<h2 class="mt-2 font-bold">Loading...</h2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
title: 'Nieuws'
|
|
})
|
|
|
|
const userStore = useUserStore()
|
|
const newsStore = useNewsStore()
|
|
|
|
onMounted(() => {
|
|
newsStore.getNews()
|
|
})
|
|
|
|
const convertLinks = ( input ) => {
|
|
|
|
let text = input;
|
|
const linksFound = text.match( /(?:www|https?)[^\s]+/g );
|
|
const aLink = [];
|
|
|
|
if ( linksFound != null ) {
|
|
|
|
for ( let i=0; i<linksFound.length; i++ ) {
|
|
let replace = linksFound[i];
|
|
if ( !( linksFound[i].match( /(http(s?)):\/\// ) ) ) { replace = 'http://' + linksFound[i] }
|
|
let linkText = replace.split( '/' )[2];
|
|
if ( linkText.substring( 0, 3 ) == 'www' ) { linkText = linkText.replace( 'www.', '' ) }
|
|
if ( linkText.match( /youtu/ ) ) {
|
|
|
|
let youtubeID = replace.split( '/' ).slice(-1)[0];
|
|
aLink.push( '<div class="video-wrapper"><iframe src="https://www.youtube.com/embed/' + youtubeID + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>' )
|
|
}
|
|
else if ( linkText.match( /vimeo/ ) ) {
|
|
let vimeoID = replace.split( '/' ).slice(-1)[0];
|
|
aLink.push( '<div class="video-wrapper"><iframe src="https://player.vimeo.com/video/' + vimeoID + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>' )
|
|
}
|
|
else {
|
|
aLink.push( '<a class="text-primary hover:underline underline-offset-2" href="' + replace + '" target="_blank">' + linkText + '</a>' );
|
|
}
|
|
text = text.split( linksFound[i] ).map(item => { return aLink[i].includes('iframe') ? item.trim() : item } ).join( aLink[i] );
|
|
}
|
|
return text;
|
|
|
|
}
|
|
else {
|
|
return input;
|
|
}
|
|
}
|
|
|
|
const longEventDate = (eventDate) => {
|
|
const date = new Date(eventDate)
|
|
|
|
return date.toLocaleString('nl-NL', {
|
|
weekday: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
hour: 'numeric',
|
|
minute: 'numeric'
|
|
}
|
|
)}
|
|
|
|
</script>
|