Capital/pages/embed/gallery/index.vue

59 lines
1.2 KiB
Vue
Raw Normal View History

2024-08-17 02:51:24 +00:00
<template>
<div>
<div class="mt-3 mb-6.5 mx-[3.5ch] text-center">
<h1 class="text-2xl">{{ t("navGallery") }}</h1>
<span>{{ t("navGalleryCaption") }}</span>
</div>
<div class="album">
<v-card v-for="item in items" class="album-item mb-3" :to="`/gallery/${item.rid}`">
2024-08-17 02:51:24 +00:00
<attachment-renderer :item="item" />
</v-card>
<div class="flex p-5 justify-center items-center">
<v-btn variant="outlined" text="Load more" :loading="loading" @click="load" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: "embed",
})
const { t } = useI18n()
useHead({
title: t("navGallery"),
})
useSeoMeta({
title: t("navGallery"),
ogTitle: t("navGallery"),
description: t("navGalleryCaption"),
ogDescription: t("navGalleryCaption"),
ogType: "website",
})
const config = useRuntimeConfig()
const items = ref<any[]>([])
const loading = ref(false)
async function load() {
loading.value = true
const res = await fetch(`${config.public.solarNetworkApi}/cgi/uc/attachments?take=20&offset=${items.value.length}&original=true`)
2024-08-17 02:51:24 +00:00
const result = await res.json()
items.value.push(...result.data)
loading.value = false
}
onMounted(() => {
load()
})
</script>