TKO/services/frontend/components/News.vue

85 lines
2.3 KiB
Vue
Raw Permalink Normal View History

2025-03-05 16:21:16 +01:00
<template v-if="articles">
2025-02-16 21:10:50 +01:00
<h1 id="article">Aktuality</h1>
2025-02-16 14:20:40 +01:00
<h2>Přečtěte si aktuality z našeho klubu</h2>
2025-03-05 16:21:16 +01:00
<v-row class="articles">
2025-02-16 14:20:40 +01:00
<v-col
2025-03-05 16:21:16 +01:00
v-for="article in articles"
:key="article.id"
2025-02-16 14:20:40 +01:00
cols="12"
md="6"
>
<v-card class="article">
<v-row>
<v-col>
<v-img
2025-03-12 16:27:23 +01:00
:lazy-src="article.image"
:src="article.image"
2025-02-16 14:20:40 +01:00
aspect-ratio="1"
cover
2025-03-05 16:21:16 +01:00
class="article__image"
2025-03-12 16:27:23 +01:00
@click="showCarousel = true"
2025-02-16 14:20:40 +01:00
>
<template v-slot:placeholder>
2025-03-12 16:27:23 +01:00
<v-row justify="center" align="center" class="fill-height">
<v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
2025-02-16 14:20:40 +01:00
</v-row>
</template>
2025-03-12 16:27:23 +01:00
<v-dialog v-model="showCarousel">
<dialog-carousel
:image="article.image"
:images="article.images"
:title="article.title"
@isActive="showCarousel = false"
/>
</v-dialog>
2025-02-16 14:20:40 +01:00
</v-img>
</v-col>
<v-col
cols="12"
md="8"
2025-02-09 22:09:39 +01:00
>
2025-02-16 14:20:40 +01:00
<v-row class="article__title">{{ article.title }}</v-row>
<v-row class="article__date">{{ article.date}}</v-row>
2025-03-05 16:21:16 +01:00
<v-row class="article__text">{{ article.content }}</v-row>
<v-row class="article__sign">{{ article.author }}</v-row>
2025-02-16 14:20:40 +01:00
</v-col>
</v-row>
</v-card>
2025-02-09 22:09:39 +01:00
</v-col>
</v-row>
2025-03-05 16:21:16 +01:00
<v-btn to="/aktuality" class="show_more">
<v-icon icon="mdi-chevron-down"/>Dalsí aktuality<v-icon icon="mdi-chevron-down"/>
</v-btn>
2025-02-07 17:29:15 +01:00
</template>
<script setup lang="ts">
2025-02-16 14:20:40 +01:00
import './assets/css/main.css'
2025-03-05 16:21:16 +01:00
import { useAPI } from "~/composables/useAPI";
2025-03-12 16:27:23 +01:00
const showCarousel = ref(false);
2025-03-09 11:20:03 +01:00
interface ArticleImage {
image: string;
}
2025-03-05 16:21:16 +01:00
interface Article {
id: number;
title: string;
image: string;
2025-03-09 11:20:03 +01:00
images: ArticleImage[];
2025-03-05 16:21:16 +01:00
date: string;
content: string;
author: string;
}
const articles = ref<Article[]>([]);
const { error, data } = await useAPI<Article[]>('load-articles/', {method: "GET"});
if ( data.value ){
articles.value = data.value;
}
else if (error.value) {
console.error("Error loading articles:", error.value);
}
2025-02-19 20:51:19 +01:00
2025-02-16 14:20:40 +01:00
</script>