Skip to content

Commit

Permalink
chore: pushing changes
Browse files Browse the repository at this point in the history
Signed-off-by: Type-32 <[email protected]>
  • Loading branch information
Type-32 committed Sep 30, 2024
1 parent c91d0fb commit e449c82
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 0 deletions.
5 changes: 5 additions & 0 deletions app/layouts/MainLayout.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ const links = [
icon: 'i-lucide-users',
to: `/leagues`
},
{
label: 'Galleries',
icon: 'i-lucide-album',
to: `/galleries`
},
{
label: 'Rules',
icon: 'i-lucide-book',
Expand Down
72 changes: 72 additions & 0 deletions app/pages/galleries/[galleryId].vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<script setup lang="ts">
import MainLayout from "~/layouts/MainLayout.vue";
import type {Gallery, Media} from "@prisma/client";
const data = ref<Gallery>(), content = ref<Media[]>(), loadingPage = ref(false)
const $util = useGalleries(), $media = useMedia(), $route = useRoute()
onMounted(async () => {
loadingPage.value = true
data.value = (await $util.getGallery([$route.params.galleryId as any as number])).at(0)
content.value = await $util.getGalleryMedia(data.value?.id || 0)
loadingPage.value = false
})
useSeoMeta({
title: data.value?.name,
ogTitle: data.value?.name
})
function parseAndFormatDate(dateString: string): string {
const date = new Date(dateString);
const year = date.getUTCFullYear();
const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
const day = date.getUTCDate().toString().padStart(2, '0');
const hours = date.getUTCHours().toString().padStart(2, '0');
const minutes = date.getUTCMinutes().toString().padStart(2, '0');
return `${year}/${month}/${day}, ${hours}:${minutes}`;
}
function isImage(url: string){
return url?.endsWith(".jpeg") || url?.endsWith(".jpg") || url?.endsWith(".png")
}
function isVideo(url: string){
return url?.endsWith(".mp4") || url?.endsWith(".mkv") || url?.endsWith(".mov")
}
</script>

<template>
<MainLayout>
<UContainer class="py-10 gap-10 flex flex-col" v-if="!loadingPage">
<UPage>
<UPageHeader
:title="data?.name"
>
<template #headline>
<time class="text-gray-500 dark:text-gray-400">{{ parseAndFormatDate(data?.createdAt.toISOString() || (new Date().toISOString())) }}</time>
</template>
</UPageHeader>
<UPageBody>
<div class="flex flex-col items-center justify-center w-full">
<div class="container" v-for="(img, index) in content" :key="index">
<img v-if="isImage(img?.url)" :src="$media.getMediaUrl(img)" class="object-contain h-full rounded-lg" alt="media image"/>
<video v-if="isVideo(img?.url)" :src="$media.getMediaUrl(img)" class="object-contain h-full rounded-lg"/>
</div>
</div>
</UPageBody>
</UPage>
</UContainer>
<UContainer v-else>
<USkeleton class="w-full h-32"/>
<USkeleton class="w-full h-32"/>
<USkeleton class="w-full h-96"/>
</UContainer>
</MainLayout>
</template>

<style scoped>
</style>
14 changes: 14 additions & 0 deletions app/pages/galleries/index.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
<script setup lang="ts">
import MainLayout from "~/layouts/MainLayout.vue";
import type {Category, Gallery} from "@prisma/client";
const loadingPage = ref(true);
const $util = useCategories(), $gallery = useGalleries()
const categories = ref<Category[]>(), galleries = ref<Array<Gallery[]>>()
onMounted(async () => {
loadingPage.value = true
categories.value = (await $util.getCategories()).reverse()
for(let i = 0; i < categories.value.length; i++)
galleries.value?.push(await $util.getCategoryGalleries(categories.value?.at(i)?.id || 0))
loadingPage.value = false
})
</script>

<template>
Expand Down

0 comments on commit e449c82

Please sign in to comment.