responsibility

TODO

@@ -1,13 +0,0 @@
-Nastylovat:
-- lazyload načítat o něco dříve (neli zrušit alespoň mimo galerii)
-- mobilní verze
-
-Frontend:
-- přidat v galerii zvětsovač na obrázky
-- notyfi
-
-Naplánovat:
-- kurzy + cena: vyskakovací okno na rezervaci s jménem lekce? jak to vyřešit s kalendářem? (stránka /rezervace)
-
-Backend:
-- přidat posílání mailu panu vrchnímu

services/backend/backend/settings.py

@@ -20,6 +20,9 @@ env = environ.Env()
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
+MEDIA_URL = '/media/'
+
+MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/
@@ -162,9 +165,6 @@ STATIC_URL = '/static/'
 #     os.path.join(BASE_DIR, 'static')
 # ]
 
-MEDIA_URL = '/media/'
-
-MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field

services/backend/tko/serializers.py

@@ -19,7 +19,7 @@ class ArticleImageSerializer(serializers.ModelSerializer):
 
     @staticmethod
     def get_title(obj):
-        return obj.article.title
+        return obj.article.title if obj.article else ''
 
 
 class ArticleListSerializer(serializers.ModelSerializer):
@@ -38,7 +38,8 @@ class ArticleListSerializer(serializers.ModelSerializer):
     @staticmethod
     def get_image(obj):
         main_image = obj.images.order_by("main").first()
-        return main_image.image.url if main_image else None
+        url = 'http://localhost:8000'
+        return f"{url}{main_image.image.url}" if main_image else None
 
 
 class EventListSerializer(serializers.ModelSerializer):

services/backend/tko/views.py

@@ -4,6 +4,7 @@ from django.db.models import Q
 from post_office import mail
 
 from rest_framework.generics import ListAPIView, CreateAPIView
+from rest_framework.permissions import IsAuthenticated, AllowAny
 from rest_framework.response import Response
 
 from tko.models import Article, Event, ArticleImage
@@ -49,6 +50,7 @@ class AllArticleListView(ListAPIView):
 
 
 class GalleryView(ListAPIView):
+    permission=[AllowAny]
     queryset = ArticleImage.objects.all().order_by("-article_id", "main")
     serializer_class = ArticleImageSerializer
 

services/frontend/assets/css/main.css

@@ -6,7 +6,6 @@
 }
 
 h1 {
-  font-family: 'Futura', sans-serif;
   font-size: 3rem;
   color: #333;
   text-align: center;
@@ -16,15 +15,14 @@ h1 {
 }
 
 h2 {
-  font-family: 'Futura', sans-serif;
   font-size: 1.5rem;
   color: #CF3476;
   text-align: center;
+  word-break: break-word;
   margin-bottom: 2rem;
 }
 
 h3 {
-  font-family: 'Futura', sans-serif;
   font-size: 1.5rem;
   color: #666;
   text-align: center;
@@ -32,7 +30,6 @@ h3 {
 }
 
 h4 {
-  font-family: 'Futura', sans-serif;
   font-size: 1rem;
   color: #666;
   text-align: center;
@@ -40,7 +37,6 @@ h4 {
 }
 
 h5 {
-  font-family: 'Futura', sans-serif;
   font-size: 1rem;
   color: #aaa;
   margin-top: 1rem;
@@ -48,7 +44,7 @@ h5 {
 
 @media (max-width: 600px) {
   h1 {
-    font-size: 2rem; /* Smaller size for mobile */
+    font-size: 1.8rem; /* Smaller size for mobile */
     margin-top: 1.5rem;
   }
 
@@ -61,6 +57,7 @@ h5 {
   min-width: 25rem;
   margin-left: calc(20% - 2.5rem);
   margin-right: calc(20% - 2.5rem);
+  margin-bottom: 3rem;
 }
 
 .app__logo {
@@ -69,30 +66,25 @@ h5 {
 }
 
 .app__title {
-  font-family: 'Futura', sans-serif;
   font-size: 2rem;
   color: #333;
 }
 
 .app__tab {
-  font-family: 'Futura', sans-serif;
   font-size: 2rem;
   color: #CF3476;
 }
 
 .to_left {
-  font-family: 'Futura', sans-serif;
   font-size: 1rem;
 }
 
 .to_right {
-  font-family: 'Futura', sans-serif;
   float: right;
 }
 
 .contact {
   margin: 20px calc(20% - 40px) 50px;
-  min-width: 25rem;
   border-radius: 15px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 }
@@ -102,12 +94,10 @@ h5 {
   font-size: 3rem;
   color: #333;
   margin-bottom: 1rem;
-  font-family: 'Futura', sans-serif;
   font-weight: bold;
 }
 
 .contact__dialog__title {
-  font-family: 'Futura', sans-serif;
   font-size: 2rem;
   color: #333;
   margin-bottom: 1rem;
@@ -121,6 +111,16 @@ h5 {
 }
 
 @media (max-width: 600px) {
+  .contact__title {
+    font-size: 1.5rem;
+  }
+
+  .contact {
+    min-width: unset;
+    margin: 10px;
+    padding: 1rem;
+  }
+
   .v-dialog > .v-card {
     border-radius: 0 !important;
     height: 100vh;
@@ -134,61 +134,47 @@ h5 {
 }
 
 .articles {
-  margin-left: calc(20% - 2.5rem);
+  display: flex;
-  margin-right: calc(20% - 2.5rem);
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 1200px;
 }
 
 .article {
-  padding: 10px;
+  padding: 1rem;
   min-width: 40%;
-  border-radius: 15px;
+  border-radius: 0;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
   margin-bottom: 1rem;
 }
 
-.article__image {
-  border-radius: 0.5rem;
-}
-
-.carousel__image img {
-  border-radius: 0.5rem;
-  object-fit: contain !important;
-  padding: 1rem;
-}
-
 .article__title {
-  font-family: 'Futura', sans-serif;
+  font-size: 1.4rem;
-  font-size: 1.5rem;
   color: #CF3476;
-  text-align: left;
-  margin-top: 0.1rem;
   font-weight: bold;
 }
 
 .article__date {
-  font-family: 'Futura', sans-serif;
   font-size: 0.8rem;
   text-align: left;
 }
 
 .article__text {
-  font-family: 'Futura', sans-serif;
   font-size: 1rem;
-  text-align: left;
+  color: #333;
-  min-height: 6rem;
+  line-height: 1.5;
-  color: #666;
+  padding: 0.5rem;
+  margin-bottom: 1rem;
 }
 
 .article__sign {
-  font-family: 'Futura', sans-serif;
+  text-align: right;
   font-size: 1rem;
-  float: right;
+  font-style: italic;
-  padding-right: 1rem;
+  color: #555;
-  color: #333;
 }
 
 .show_more {
-  font-family: 'Futura', sans-serif;
   text-align: center;
   color: #CF3476;
   background: transparent;
@@ -243,7 +229,6 @@ h5 {
 }
 
 .pricing__price {
-  font-family: 'Futura', sans-serif;
   font-size: 3rem;
   font-weight: bold;
   color: #CF3476;
@@ -251,9 +236,9 @@ h5 {
 }
 
 .pricing__subtitle {
-  font-family: 'Futura', sans-serif;
   font-size: 1rem;
   color: #555;
+  word-break: break-word;
   margin-bottom: 0.5rem;
 }
 
@@ -262,9 +247,12 @@ h5 {
     min-width: 100%;
   }
 
-  .pricing-title,
+  .pricing-title {
+    font-size: 1.4rem;
+  }
+
   .pricing-desc {
-    min-height: unset; /* Removes forced height to prevent breakage */
+    min-height: unset;
   }
 }
 
@@ -298,7 +286,6 @@ h5 {
   overflow: hidden;
 }
 
-/* Mobile Styles */
 @media (max-width: 600px) {
   .trainers__parallax {
     max-height: 30rem;
@@ -326,7 +313,6 @@ h5 {
 }
 
 .advantage__title {
-  font-family: 'Futura', sans-serif;
   padding: 0.5rem 0;
   color: #CF3476;
   font-size: 1.5rem;
@@ -335,7 +321,6 @@ h5 {
 }
 
 .advantage__text {
-  font-family: 'Futura', sans-serif;
   padding-bottom: 1rem;
   font-size: 1rem;
   color: #333;
@@ -362,7 +347,7 @@ h5 {
 .about {
   background: transparent;
   box-shadow: none;
-  height: 100%;
+  height: auto;
   max-width: 80%;
   margin: 0 auto;
   text-align: center;
@@ -370,7 +355,7 @@ h5 {
 }
 
 .about__parallax {
-  max-height: 30rem;
+  max-height: 28rem;
   margin-top: 2rem;
 }
 
@@ -381,57 +366,55 @@ h5 {
 
 @media (max-width: 600px) {
   .history__parallax {
-    max-height: 45rem;
+    max-height: 58rem;
   }
 }
 
 .about__title {
-  font-family: 'Futura', sans-serif;
+  font-size: 2.5rem;
-  font-size: 3rem;
-  text-align: center;
-  width: 100%;
-  display: block;
   color: #fff;
   margin-top: 1rem;
   font-weight: bold;
+  word-break: break-word;
+  white-space: normal;
 }
 
 .about__subtitle {
-  font-family: 'Futura', sans-serif;
   color: #FF3D8C;
-  font-size: 1.3rem;
+  font-size: 1.25rem;
-  text-align: center;
+  margin-bottom: 1rem;
-  width: 100%;
+  word-break: break-word;
-  display: block;
-  margin-bottom: 0.5rem;
   font-weight: bold;
 }
 
 .about__text {
-  font-family: 'Futura', sans-serif;
   color: #ddd;
-  font-size: 1rem;
+  font-size: 1.125rem;
-  text-align: center;
   padding: 0 1rem;
+  line-height: 1.6;
 }
 
 @media (max-width: 600px) {
   .about {
-    max-width: 100%;
+    max-width: 95%;
     padding: 1rem;
   }
 
+  .about__parallax {
+    min-height: 32rem;
+  }
+
   .about__title {
     font-size: 1.5rem;
   }
 
   .about__subtitle {
     font-size: 1rem;
+    word-break: break-word;
   }
 
   .about__text {
-    font-size: 1rem;
+    font-size: 0.95rem;
-    padding: 0 10px;
   }
 }
 

services/frontend/components/About.vue

@@ -7,9 +7,9 @@
     <v-container id="about">
       <v-card class="about">
         <v-card-title class="about__title">Vítejte v tanečním klubu!</v-card-title>
-        <v-card-subtitle class="about__subtitle">Vítejte na webu Tanečního klubu Ostrava!</v-card-subtitle>
+        <v-card-subtitle class="about__subtitle">Objevte kouzlo tance s námi!</v-card-subtitle>
         <v-card-text class="about__text">
-          Objevte kouzlo tance s námi! Ať už jste začátečník nebo zkušený tanečník, v našem klubu najdete místo, kde se můžete rozvíjet, bavit a sdílet svou vášeň pro pohyb. Nabízíme kurzy pro všechny věkové kategorie, od společenských tanců po moderní styly.
+          Ať už jste začátečník nebo zkušený tanečník, v našem klubu najdete místo, kde se můžete rozvíjet, bavit a sdílet svou vášeň pro pohyb. Nabízíme kurzy pro všechny věkové kategorie, od společenských tanců po moderní styly.
           <br><br>
           Přidejte se k nám a nechte tanec proměnit váš život! 💃🕺
           <br><br>

services/frontend/components/Advantages.vue

@@ -1,6 +1,6 @@
 <template>
-  <h1>Přínosy tance: Více než jen pohyb</h1>
+  <h1>Přínosy tance</h1>
-  <h2>Tancem k lepšímu životu</h2>
+  <h2>Více než jen pohyb</h2>
   <v-card
     v-for="advantage in advantages"
     :key="advantage.id"

services/frontend/components/ContactUs.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-card class="contact">
+  <v-card class="contact pa-4">
     <v-card-title class="contact__title">Kontaktujte nás!</v-card-title>
-    <dialog-contact-form />
+    <lazy-dialog-contact-form />
   </v-card>
 </template>
 <script setup lang="ts">

services/frontend/components/Courses.vue

@@ -14,10 +14,10 @@
     <v-card class="pricing-box" @click="openDialog = true; chosenCourse = course">
       <div class="pricing-content">
         <h3 class="pricing-title">{{ course.name }}</h3>
-        <v-card-subtitle>
+        <v-card-subtitle v-if="course.time">
           <div class="pricing__subtitle">{{ course.time }}</div>
         </v-card-subtitle>
-        <v-card-title>
+        <v-card-title v-if="course.price">
           <div class="pricing__price">{{ course.price }}</div>
         </v-card-title>
         <v-card-text v-if="course.desc">

services/frontend/components/News.vue

@@ -9,13 +9,13 @@
         md="6"
       >
       <v-card class="article">
+        <v-row class="article__title">{{ article.title }}</v-row>
         <v-row>
           <v-col>
             <v-img
               :lazy-src="article.image"
               :src="article.image"
               aspect-ratio="1"
-              cover
               class="article__image"
               @click="showCarousel = true"
             >
@@ -38,17 +38,16 @@
             cols="12"
             md="8"
           >
-            <v-row class="article__title">{{ article.title }}</v-row>
+
-            <v-row class="article__date">{{ article.date}}</v-row>
             <v-row class="article__text">{{ article.content }}</v-row>
-            <v-row class="article__sign">{{ article.author }}</v-row>
           </v-col>
         </v-row>
+            <v-row class="article__sign">Dne {{ article.date}}, {{ article.author }}</v-row>
       </v-card>
     </v-col>
   </v-row>
-  <v-btn to="/aktuality" class="show_more">
+  <v-btn to="/aktuality" class="show_more" v-if="!props.forAll">
-    <v-icon icon="mdi-chevron-down"/>Dalsí aktuality<v-icon icon="mdi-chevron-down"/>
+    <v-icon icon="mdi-chevron-down"/>Další aktuality<v-icon icon="mdi-chevron-down"/>
   </v-btn>
 </template>
 <script setup lang="ts">
@@ -57,6 +56,10 @@ import { useAPI } from "~/composables/useAPI";
 
 const showCarousel = ref(false);
 
+const props = defineProps<{
+  forAll: boolean
+}>();
+
 interface ArticleImage {
   image: string;
 }
@@ -73,7 +76,9 @@ interface Article {
 
 const articles = ref<Article[]>([]);
 
-const { error, data } = await useAPI<Article[]>('load-articles/', {method: "GET"});
+const endpoint = props.forAll ? 'load-all-articles/' : 'load-articles/';
+
+const { error, data } = await useAPI<Article[]>(endpoint, {method: "GET"});
 
 if ( data.value ){
     articles.value = data.value;

services/frontend/components/dialog/ContactForm.vue

@@ -1,5 +1,12 @@
 <template>
   <v-form v-model="valid">
+      <v-snackbar
+          v-model="showSnackbar"
+          :color="snackbarColor"
+          :timeout="5000"
+      >
+        {{ snackbarMessage }}
+      </v-snackbar>
       <v-container>
         <v-row>
           <v-col
@@ -7,7 +14,11 @@
             md="4"
           >
             <v-text-field
+              dense
+              hide-details="auto"
               v-model="fullName"
+              :error-messages="get(errorMessages, 'name')"
+              @change="hideError('name')"
               label="Jméno"
               variant="underlined"
             ></v-text-field>
@@ -18,7 +29,13 @@
             md="4"
           >
             <v-text-field
+              dense
+              hide-details="auto"
+              type="email"
+              autocomplete="email"
               v-model="email"
+              :error-messages="get(errorMessages, 'email')"
+              @change="hideError('email')"
               label="Emailová adresa"
               variant="underlined"
             ></v-text-field>
@@ -29,7 +46,12 @@
             md="4"
           >
             <v-text-field
+              dense
+              hide-details="auto"
+              type="tel"
               v-model="phone"
+              :error-messages="get(errorMessages, 'phone_number')"
+              @change="hideError('phone_number')"
               label="Telefonní číslo"
               variant="underlined"
             ></v-text-field>
@@ -39,6 +61,8 @@
           <v-col>
             <v-textarea
               v-model="textField"
+              :error-messages="get(errorMessages, 'content')"
+              @change="hideError('content')"
               label="Váš dotaz"
               variant="underlined"
             />
@@ -47,6 +71,8 @@
         <v-row>
           <v-col>
             <v-btn
+              auto-grow
+              rows="3"
               class="contact__button"
               type="submit"
               @click.prevent="sendContact"
@@ -63,14 +89,34 @@ import './assets/css/main.css'
 import {useAPI} from "~/composables/useAPI";
 
 const valid = ref<boolean>(false);
+const errorMessages = ref<Record<string, string[]>>({});
 
 const fullName = ref<string>("");
 const email = ref<string>("");
 const phone = ref<string>("");
 const textField = ref<string>("");
 
+const showSnackbar = ref(false);
+const snackbarMessage = ref("");
+const snackbarColor = ref("red-accent-4")
+
+function get(obj: any, path: string, defaultValue = undefined) {
+  return path.split('.').reduce((acc, part) => acc && acc[part], obj) ?? defaultValue;
+}
+
+function resetContractData() {
+  fullName.value = "";
+  email.value = "";
+  phone.value = "";
+  textField.value = "";
+}
+
+function hideError (key: string) {
+  delete errorMessages.value[key];
+}
+
 async function sendContact() {
-  const { data, error } = await useAPI('create-contact/', {
+  const { error } = await useAPI('create-contact/', {
     method: "POST",
     body: {
       name: fullName.value,
@@ -79,6 +125,18 @@ async function sendContact() {
       content: textField.value,
     }
   });
+
+  if (error.value) {
+    snackbarMessage.value = "Něco se pokazilo. Zkuste to znovu.";
+    snackbarColor.value = "red-accent-4";
+    errorMessages.value = error.value.data;
+  } else {
+    snackbarMessage.value = "Děkujeme! Vaše zpráva byla odeslána.";
+    snackbarColor.value = "success";
+    resetContractData();
+  }
+
+  showSnackbar.value = true;
 }
 
 </script>

services/frontend/components/menu/Header.vue

@@ -1,76 +1,58 @@
 <template>
   <ClientOnly>
-    <v-layout>
+    <v-layout style="margin-bottom: 3rem">
       <v-app-bar style="position: fixed">
-        <v-app-bar-nav-icon
-          @click="drawer = !drawer"
-          class="d-flex d-sm-none"
-        />
         <div>
           <a href="/"><v-img class="app__logo" src="/logo.png" /></a>
         </div>
-        <v-app-bar-title class="app__title">Taneční klub Ostrava</v-app-bar-title>
+        <v-app-bar-title class="app__title" v-if="$vuetify.display.smAndUp">
+          Taneční klub Ostrava
+        </v-app-bar-title>
 
         <v-tabs v-model="currentTab" class="d-none d-sm-flex app__tab">
-          <div
+          <v-tab
             v-for="(tab, index) in tabs"
             :key="index"
+            :text="tab.name"
+            :value="tab.name"
+            :href="tab.href ? tab.href : undefined"
+            @click="handleNavigation(tab)"
           >
-            <v-tab
+            {{ tab.name }}
-              v-if="tab.ref"
+          </v-tab>
-              :text="tab.name"
-              :value="tab.name"
-              @click="useGoTo(tab.ref)"
-            >
-              {{ tab.name }}
-            </v-tab>
-            <v-tab
-              v-if="tab.href"
-              :text="tab.name"
-              :value="tab.name"
-              :href="tab.href"
-            >
-              {{ tab.name }}
-            </v-tab>
-          </div>
         </v-tabs>
 
+        <v-menu transition="slide-y-transition">
+          <template v-slot:activator="{ props }">
+            <v-app-bar-nav-icon
+              class="d-flex d-sm-none app__tab ml-auto"
+              style="padding-right: 1rem"
+              v-bind="props"
+            />
+          </template>
 
-<!--        <v-col-->
+          <v-list>
-<!--          class="text-right"-->
+            <v-list-item
-<!--          @click="toggleTheme"-->
+              v-for="(item, i) in homeTabs"
-<!--        >-->
+              :key="i"
-<!--          <big-icon icon="mdi-lightbulb-cfl"/>-->
+              :value="i"
-<!--        </v-col>-->
+              @click="handleNavigation(item)"
+            >
+              <v-list-item-title>{{ item.name }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
       </v-app-bar>
-
-      <v-fab
-        class="ms-4 mb-4"
-      ></v-fab>
-
-      <v-navigation-drawer
-        v-model="drawer"
-        absolute
-        fixed
-        left
-      >
-        <v-list nav dense>
-          <v-list-item v-for="(tab, index) in tabs" :key="index">
-            <v-list-item-title @click="useGoTo(tab.ref)">{{ tab.name }}</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-navigation-drawer>
     </v-layout>
   </ClientOnly>
 </template>
 
 <script setup lang="ts">
 import { useGoTo } from "~/composables/useGoTo";
-import {useRoute} from "#vue-router";
+import { useRoute } from "#vue-router";
-const route = useRoute();
 
-const currentTab = ref({ name: 'O nás', ref: "#about", href: "o-nas" });
+const route = useRoute();
-const drawer = ref(null)
+const currentTab = ref({ name: "O nás", ref: "#about", href: "o-nas" });
 
 const homeTabs = [
   { name: "O nás", ref: "#about", href: "" },
@@ -86,18 +68,17 @@ const otherTabs = [
   { name: "Trenéři", ref: "", href: "/" },
   { name: "Kurzy", ref: "", href: "/" },
   { name: "Galerie", ref: "", href: "/galerie" },
-  { name: "Aktuality", ref: "", href: "/" },
+  { name: "Aktuality", ref: "", href: "/aktuality" },
   { name: "Kontakty", ref: "", href: "/kontakty" },
 ];
 
 const tabs = computed(() => (route.path === "/" ? homeTabs : otherTabs));
-// import { useTheme } from 'vuetify'
-//
-// const theme = useTheme()
-//
-// function toggleTheme () {
-//   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-// }
-
 
+const handleNavigation = (tab: any) => {
+  if (tab.ref) {
+    useGoTo(tab.ref);
+  } else if (tab.href) {
+    window.location.href = tab.href;
+  }
+};
 </script>

services/frontend/pages/aktuality.vue

@@ -1,70 +1,3 @@
-<template v-if="articles">
+<template>
-  <h1 id="article">Aktuality</h1>
+  <lazy-news :for-all="true"/>
-  <h2>Přečtěte si aktuality z našeho klubu</h2>
+</template>
-    <v-row>
-      <v-col
-        v-for="article in articles"
-        :key="article.id"
-        cols="12"
-        md="6"
-      >
-      <v-card class="article">
-        <v-row>
-          <v-col>
-            <v-img
-              :lazy-src="article.image"
-              :src="article.image"
-              aspect-ratio="1"
-              cover
-              class="article__image"
-            >
-              <template v-slot:placeholder>
-                <v-row>
-                  <v-progress-circular
-                    color="grey-lighten-5"
-                    indeterminate
-                  ></v-progress-circular>
-                </v-row>
-              </template>
-            </v-img>
-          </v-col>
-          <v-col
-            cols="12"
-            md="8"
-          >
-            <v-row class="article__title">{{ article.title }}</v-row>
-            <v-row class="article__date">{{ article.date}}</v-row>
-            <v-row class="article__text">{{ article.content }}</v-row>
-            <v-row class="article__sign">{{ article.author }}</v-row>
-          </v-col>
-        </v-row>
-      </v-card>
-    </v-col>
-  </v-row>
-</template>
-
-<script setup lang="ts">
-import './assets/css/main.css'
-
-import {useAPI} from "~/composables/useAPI";
-
-interface Article {
-  id: number;
-  title: string;
-  image: string;
-  date: string;
-  content: string;
-  author: string;
-}
-
-const articles = ref<Article[]>([]);
-
-const { error, data } = await useAPI('load-all-articles/', {method: "GET"});
-
-if ( data.value ){
-    articles.value = data.value as Article[];
-}
-else if (error.value) {
-  console.error("Error loading articles:", error.value);
-}
-</script>

services/frontend/pages/galerie.vue

@@ -47,12 +47,20 @@ interface ArticleImage {
 
 const gallery = ref<ArticleImage[]>([]);
 
-const { error, data } = await useAPI<ArticleImage[]>('load-gallery/', {method: "GET"});
+loadImages();
 
-if ( data.value ){
+async function loadImages(){
+  const { error, data } = await useAPI<ArticleImage[]>('load-gallery/', {method: "GET"});
+
+  if ( data.value ){
     gallery.value = data.value as ArticleImage[];
+  }
+  else if (error.value) {
+    console.error("Error loading gallery:", error.value);
+  }
 }
-else if (error.value) {
+
-  console.error("Error loading gallery:", error.value);
+
-}
+
+
 </script>

services/frontend/pages/index.vue

@@ -11,12 +11,12 @@
       </h2>
     </div>
   </v-parallax>
-  <news/>
+  <lazy-news :for-all="false"/>
-  <about/>
+  <lazy-about/>
-  <courses/>
+  <lazy-courses/>
-  <trainers/>
+  <lazy-trainers/>
-  <advantages/>
+  <lazy-advantages/>
-  <history/>
+  <lazy-history/>
 </template>
 
 <script setup lang="ts">

services/frontend/pages/kurzy.vue

@@ -1,37 +1,4 @@
 <template>
-  <h1 id="courses">Kurzy</h1>
+  <lazy-courses />
-  <h2>Vyberte, co Vám nejlépe vyhovuje</h2>
+  <lazy-calendar/>
-
+</template>
-  <v-row>
-    <v-col
-        cols="12"
-        md="4"
-        v-for="(course, index) in courses"
-        :key="index"
-    >
-      <v-card class="pricing-box">
-        <h3>{{ course.name }}</h3>
-        <v-card-subtitle><div class="pricing__subtitle">{{ course.time }}</div></v-card-subtitle>
-        <v-card-title><div class="pricing__price">{{ course.price }}</div></v-card-title>
-        <v-card-text v-if="course.desc"><div class="pricing__subtitle">{{ course.desc }}</div></v-card-text>
-        <v-btn class="show_more"><v-icon icon="mdi-chevron-down"/>Kontaktujte nás<v-icon icon="mdi-chevron-down"/></v-btn>
-      </v-card>
-    </v-col>
-  </v-row>
-  <calendar/>
-</template>
-<script setup lang="ts">
-import './assets/css/main.css'
-
-// TODO: vyskakovací okno s kontaktním formulářem po rozkliku :)
-
-const courses = [
-  {name: "Sportovní taneční klub", time: "", price: "", desc: "Připojte se k našemu tanečnímu klubu a rozvíjejte své taneční dovednosti v přátelském prostředí. Nabízíme různé styly tance pro všechny úrovně."},
-  {name: "Svatební tance", time: "", price: "", desc: "Udělejte svůj první tanec nezapomenutelným. Pomůžeme Vám vytvořit choreografii na míru, která bude odrážet Váš jedinečný styl."},
-  {name: "Příprava na plesovou sezónu", time: "", price: "", desc: "Chcete zazářit na plese? Připravíme Vás na plesovou sezónu a naučíme Vás elegantní taneční kroky a etiketu."},
-  {name: "Individuální taneční kurzy", time: "", price: "", desc: "Učte se tančit vlastním tempem s individuálním přístupem. Naši zkušení lektoři se zaměří na Vaše potřeby a pomohou Vám dosáhnout Vašich tanečních cílů."},
-  {name: "Individuální lekce", time: "", price: "", desc: "Zlepšete své taneční dovednosti s intenzivními individuálními lekcemi. Zaměřte se na konkrétní taneční techniky nebo styly, které Vás zajímají."},
-  {name: "Pronájem sálu", time: "", price: "", desc: "Hledáte ideální prostor pro tanec nebo jinou aktivitu? Náš taneční sál je k dispozici k pronájmu pro Vaše akce."},
-]
-
-</script>