README.md

@@ -2,10 +2,9 @@
 
 ## Running
 
-1. create .env from .env.example 
+1. `docker compose run --rm frontend npm install`
-2. `docker compose run --rm frontend npm install`
+2. `docker compose build`
-3. `docker compose build`
+3. `docker compose up`
-4. `docker compose up`
 
 ## Adding new frontend packages
 

TODO

@@ -1,8 +1,11 @@
 Nastylovat:
+- footer
 - lazyload načítat o něco dříve (neli zrušit alespoň mimo galerii)
 
 Naprogramovat:
+- tlačítko "načíst další aktuality" v komponentě News (možná přidat i novou stránku /aktuality
 - přidat v galerii zvětsovač na obrázky
+- přidat volání na api
 
 Naplánovat:
 - kurzy + cena: vyskakovací okno na rezervaci s jménem lekce? jak to vyřešit s kalendářem? (stránka /rezervace)

services/backend/backend/urls.py

@@ -21,7 +21,7 @@ from debug_toolbar.toolbar import debug_toolbar_urls
 from django.conf.urls.static import static
 from django.conf import settings
 
-from tko.views import ContactView, NewArticleListView, AllArticleListView, EventListView, GalleryView
+from tko.views import ContactView, NewArticleListView, AllArticleListView, EventListView
 
 urlpatterns = [
     path('admin/', admin.site.urls),
@@ -29,7 +29,6 @@ urlpatterns = [
     path('load-articles/', NewArticleListView.as_view(), name='load-articles'),
     path('load-all-articles/', AllArticleListView.as_view(), name='load-all-articles'),
     path('load-events/', EventListView.as_view(), name='load-events'),
-    path('load-gallery/', GalleryView.as_view(), name='load-gallery'),
 ] + debug_toolbar_urls()
 
 urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

services/backend/tko/admin.py

@@ -19,15 +19,9 @@ class ContactAdmin(admin.ModelAdmin):
         return False
 
 
-class ArticleImageInline(admin.TabularInline):  # Or admin.StackedInline for a different layout
-    model = models.ArticleImage
-    extra = 1
-
-
 @admin.register(models.Article)
 class ArticleAdmin(admin.ModelAdmin):
     list_display = ['title', 'date', 'author']
-    inlines = [ArticleImageInline]
 
 
 @admin.register(models.Event)

services/backend/tko/migrations/0005_remove_article_image_alter_article_date_articleimage.py

@@ -1,32 +0,0 @@
-# Generated by Django 5.1.5 on 2025-03-05 15:36
-
-import django.db.models.deletion
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('tko', '0004_alter_article_image'),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name='article',
-            name='image',
-        ),
-        migrations.AlterField(
-            model_name='article',
-            name='date',
-            field=models.DateField(auto_now_add=True),
-        ),
-        migrations.CreateModel(
-            name='ArticleImage',
-            fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('image', models.FileField(default='default.png', upload_to='images/%Y')),
-                ('is_main', models.BooleanField(default=False)),
-                ('article', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='images', to='tko.article')),
-            ],
-        ),
-    ]

services/backend/tko/migrations/0006_remove_articleimage_is_main_article_image_and_more.py

@@ -1,27 +0,0 @@
-# Generated by Django 5.1.5 on 2025-03-10 16:43
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('tko', '0005_remove_article_image_alter_article_date_articleimage'),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name='articleimage',
-            name='is_main',
-        ),
-        migrations.AddField(
-            model_name='article',
-            name='image',
-            field=models.FileField(blank=True, default='default.png', upload_to='images/%Y'),
-        ),
-        migrations.AlterField(
-            model_name='articleimage',
-            name='image',
-            field=models.FileField(upload_to='images/%Y'),
-        ),
-    ]

services/backend/tko/migrations/0007_remove_article_image_articleimage_main_and_more.py

@@ -1,27 +0,0 @@
-# Generated by Django 5.1.5 on 2025-03-10 18:22
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('tko', '0006_remove_articleimage_is_main_article_image_and_more'),
-    ]
-
-    operations = [
-        migrations.RemoveField(
-            model_name='article',
-            name='image',
-        ),
-        migrations.AddField(
-            model_name='articleimage',
-            name='main',
-            field=models.BooleanField(default=False),
-        ),
-        migrations.AlterField(
-            model_name='articleimage',
-            name='image',
-            field=models.FileField(default='default.png', upload_to='images/%Y'),
-        ),
-    ]

services/backend/tko/models.py

@@ -1,6 +1,6 @@
 from django.db import models
 
-
+# Create your models here.
 class Contact(models.Model):
     name = models.CharField(max_length=100)
     email = models.EmailField()
@@ -14,23 +14,16 @@ class Contact(models.Model):
 class Article(models.Model):
     title = models.CharField(max_length=100)
     content = models.TextField()
+    image = models.FileField(default="default.png", blank=True)
     date = models.DateField(auto_now_add=True)
     author = models.CharField(max_length=100)
+
     active_to = models.DateField(null=True, blank=True)  # do not show some invitation after this date
 
     def __str__(self):
         return self.title
 
 
-class ArticleImage(models.Model):
-    article = models.ForeignKey(Article, on_delete=models.CASCADE, related_name='images')
-    image = models.FileField(upload_to="images/%Y", default="default.png")
-    main = models.BooleanField(default=False)
-
-    def __str__(self):
-        return f"Image for {self.article.title}, {self.article.date}"
-
-
 class Event(models.Model):
     title = models.CharField(max_length=100)
     start_date = models.DateTimeField()

services/backend/tko/serializers.py

@@ -1,7 +1,7 @@
 from rest_framework import serializers
 from django.utils.timezone import localtime
 
-from tko.models import Contact, Article, Event, ArticleImage
+from tko.models import Contact, Article, Event
 
 
 class ContactSerializer(serializers.ModelSerializer):
@@ -10,36 +10,17 @@ class ContactSerializer(serializers.ModelSerializer):
         fields = '__all__'
 
 
-class ArticleImageSerializer(serializers.ModelSerializer):
-    title = serializers.SerializerMethodField(read_only=True)
-
-    class Meta:
-        model = ArticleImage
-        fields = ['image', 'title']
-
-    @staticmethod
-    def get_title(obj):
-        return obj.article.title
-
-
 class ArticleListSerializer(serializers.ModelSerializer):
     date = serializers.SerializerMethodField()
-    image = serializers.SerializerMethodField()
-    images = ArticleImageSerializer(many=True, read_only=True)
 
     class Meta:
         model = Article
-        fields = ["id", "author", "content", "date", "image", "title", "images"]
+        fields = ["id", "author", "content", "date", "image", "title"]
 
     @staticmethod
     def get_date(obj):
         return obj.date.strftime("%-d. %-m. %Y")
 
-    @staticmethod
-    def get_image(obj):
-        main_image = obj.images.order_by("main").first()
-        return main_image.image.url if main_image else None
-
 
 class EventListSerializer(serializers.ModelSerializer):
     start = serializers.SerializerMethodField()

services/backend/tko/views.py

@@ -4,8 +4,8 @@ from django.db.models import Q
 from rest_framework.generics import ListAPIView, CreateAPIView
 from rest_framework import permissions
 
-from tko.models import Article, Event, ArticleImage
+from tko.models import Article, Event
-from tko.serializers import ArticleListSerializer, EventListSerializer, ContactSerializer, ArticleImageSerializer
+from tko.serializers import ArticleListSerializer, EventListSerializer, ContactSerializer
 
 
 class ContactView(CreateAPIView):
@@ -33,12 +33,6 @@ class AllArticleListView(ListAPIView):
         ).order_by('-date')
 
 
-class GalleryView(ListAPIView):
-    queryset = ArticleImage.objects.all().order_by("-article_id", "main")
-    serializer_class = ArticleImageSerializer
-    permission_classes = [permissions.AllowAny]
-
-
 class EventListView(ListAPIView):
     queryset = Event.objects.all()
     serializer_class = EventListSerializer

services/frontend/assets/css/main.css

@@ -118,12 +118,6 @@ h5 {
   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.5rem;

services/frontend/components/News.vue

@@ -17,21 +17,15 @@
               aspect-ratio="1"
               cover
               class="article__image"
-              @click="showCarousel = true"
             >
               <template v-slot:placeholder>
-                <v-row justify="center" align="center" class="fill-height">
+                <v-row>
-                  <v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
+                  <v-progress-circular
+                    color="grey-lighten-5"
+                    indeterminate
+                  ></v-progress-circular>
                 </v-row>
               </template>
-              <v-dialog v-model="showCarousel">
-                <dialog-carousel
-                  :image="article.image"
-                  :images="article.images"
-                  :title="article.title"
-                  @isActive="showCarousel = false"
-                />
-              </v-dialog>
             </v-img>
           </v-col>
           <v-col
@@ -53,19 +47,13 @@
 </template>
 <script setup lang="ts">
 import './assets/css/main.css'
+
 import { useAPI } from "~/composables/useAPI";
 
-const showCarousel = ref(false);
-
-interface ArticleImage {
-  image: string;
-}
-
 interface Article {
   id: number;
   title: string;
   image: string;
-  images: ArticleImage[];
   date: string;
   content: string;
   author: string;
@@ -82,4 +70,5 @@ else if (error.value) {
   console.error("Error loading articles:", error.value);
 }
 
+
 </script>

services/frontend/components/dialog/Carousel.vue

@@ -1,35 +0,0 @@
-<template>
-  <v-card class="article__image">
-    <v-card-title>{{ title }}
-      <v-icon class="to_right" @click="$emit('isActive', false)">mdi-close</v-icon>
-    </v-card-title>
-    <v-carousel
-      :hide-delimiters="true"
-      height="90vh"
-    >
-      <v-carousel-item
-        v-for="(item, i) in images"
-        :key="i"
-        :src="item.image"
-        cover
-        class="carousel__image"
-      ></v-carousel-item>
-    </v-carousel>
-  </v-card>
-</template>
-
-<script setup lang="ts">
-import './assets/css/main.css';
-
-interface ArticleImage {
-  image: string;
-}
-
-defineProps<{
-  image: string;
-  images: ArticleImage[];
-  title: string;
-}>();
-
-defineEmits(["isActive"])
-</script>

services/frontend/pages/galerie.vue

@@ -2,17 +2,16 @@
   <h1>Galerie</h1>
   <v-row>
     <v-col
-      v-for="(photo, index) in gallery"
+      v-for="(photo, index) in photos"
       :key="index"
       cols="4"
       style="padding: 0;"
     >
       <v-img
-        :lazy-src="photo.image"
+        :lazy-src="photo.src"
-        :src="photo.image"
+        :src="photo.src"
         aspect-ratio="1"
         cover
-        @click="showCarousel = true"
       >
         <template v-slot:placeholder>
           <v-row>
@@ -22,37 +21,43 @@
             ></v-progress-circular>
           </v-row>
         </template>
-        <v-dialog v-model="showCarousel">
-          <dialog-carousel
-            :image="photo.image"
-            :images="gallery"
-            :title="photo.title"
-            @isActive="showCarousel = false"
-          />
-        </v-dialog>
       </v-img>
     </v-col>
   </v-row>
 </template>
 <script setup lang="ts">
 import './assets/css/main.css'
-import { useAPI } from "~/composables/useAPI";
 
-const showCarousel = ref(false);
+const photos = [
-
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
-interface ArticleImage {
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
-  image: string;
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
-  title: string;
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
-}
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
-
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
-const gallery = ref<ArticleImage[]>([]);
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
-
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
-const { error, data } = await useAPI<ArticleImage[]>('load-gallery/', {method: "GET"});
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
-
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
-if ( data.value ){
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
-    gallery.value = data.value as ArticleImage[];
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
-}
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
-else if (error.value) {
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
-  console.error("Error loading gallery:", error.value);
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
-}
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+]
 </script>