few fixes and basics of backend

.env.example

@@ -1,6 +1,6 @@
-DATABASE_NAME=
-DATABASE_USER=
-DATABASE_PASSWORD=
+DATABASE_NAME=tko
+DATABASE_USER=tko
+DATABASE_PASSWORD=jsemniki
 DATABASE_HOST=postgres
 DATABASE_PORT=5432
 

TODO

@@ -10,6 +10,9 @@ Naprogramovat:
 - přidat v galerii zvětsovač na obrázky
 - přidat backend
 - přidat databázi
+    - kontakty
+    - clanky
+    - kalendar
 - přidat api
 - přidat volání na api
 

services/backend/tko/admin.py

@@ -0,0 +1,19 @@
+from django.contrib import admin
+
+# Register your models here.
+from . import models
+
+
+@admin.register(models.Contact)
+class ContactAdmin(admin.ModelAdmin):
+    fields = "__all__"
+
+
+@admin.register(models.Article)
+class ArticleAdmin(admin.ModelAdmin):
+    fields = "__all__"
+
+
+@admin.register(models.Event)
+class EventAdmin(admin.ModelAdmin):
+    fields = "__all__"

services/backend/tko/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class TkoConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'tko'

services/backend/tko/models.py

@@ -0,0 +1,26 @@
+from django.db import models
+
+# Create your models here.
+class Contact(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    email = models.EmailField()
+    phone_number = models.CharField(max_length=16)
+    content = models.TextField()
+
+
+class Article(models.Model):
+    title = models.CharField(max_length=100)
+    content = models.TextField()
+    # image = models.ImageField(upload_to='articles/%Y/%m/%d')
+    date = models.DateField()
+    author = models.CharField(max_length=100)
+
+    active_to = models.DateField(null=True, blank=True)  # do not show some invitation after this date
+
+
+class Event(models.Model):
+    title = models.CharField(max_length=100)
+    start_date = models.DateTimeField()
+    end_date = models.DateTimeField()
+    color = models.CharField(max_length=100)

services/backend/tko/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

services/backend/tko/views.py

@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.

services/frontend/assets/css/main.css

@@ -46,6 +46,24 @@ h5 {
   margin-top: 1rem;
 }
 
+.sheet__box {
+  min-width: 25rem;
+  margin-left: calc(20% - 2.5rem);
+  margin-right: calc(20% - 2.5rem);
+}
+
+.app__title {
+  font-family: 'Playfair Display', serif;
+  font-size: 2rem;
+  color: #333; /* Light gray */
+}
+
+.app__tab {
+  font-family: 'Playfair Display', serif;
+  font-size: 2rem;
+  color: #CF3476; /* Light gray */
+}
+
 .to_left {
   font-family: 'Playfair Display', serif;
   font-size: 1rem;

services/frontend/components/About.vue

@@ -3,7 +3,7 @@
     src="https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"
     class="about__parallax"
   >
-    <v-container fluid fill-height>
+    <v-container fluid fill-height id="about">
       <v-row align="center" justify="center">
         <v-col
           cols="12"

services/frontend/components/Advantages.vue

@@ -1,7 +1,7 @@
 <template>
   <h1>Co dostanete s tanečním klubem</h1>
   <h2>Výhody tanečníka</h2>
-  <card
+  <v-card
     v-for="advantage in advantages"
     :key="advantage.id"
     class="advantage"
@@ -19,7 +19,7 @@
     <v-card-text class="advantage__text">
       {{ advantage.subtitle }}
     </v-card-text>
-  </card>
+  </v-card>
 </template>
 <script setup lang="ts">
 import './assets/css/main.css'

services/frontend/components/Calendar.vue

@@ -0,0 +1,30 @@
+<template>
+  <h1>Kalendář</h1>
+  <h2>Podívejte se, kdy se můžete přidat!</h2>
+
+  <v-sheet class="sheet__box">
+    <v-calendar
+      v-model="value"
+      first-day-of-week="1"
+      locale="cs-CZ"
+      ref="calendar"
+      view-mode="week"
+      :events="events"
+      :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+    />
+  </v-sheet>
+</template>
+
+<script setup lang="ts">
+import './assets/css/main.css'
+
+const value = [new Date()];
+const events = [
+  {
+    title: "ahoj",
+    start: new Date(),
+    end: new Date(),
+    color: 'red',
+  }
+];
+</script>

services/frontend/components/Courses.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1>Kurzy - cena</h1>
+  <h1 id="courses">Kurzy - cena</h1>
   <h2>Vyberte, co Vám nejlépe vyhovuje</h2>
 
   <v-row>

services/frontend/components/News.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1>Aktuality</h1>
+  <h1 id="article">Aktuality</h1>
   <h2>Přečtěte si aktuality z našeho klubu</h2>
     <v-row>
       <v-col
@@ -49,14 +49,7 @@ const articles = [
     autor: "Bebloid Obecný",
     date: "2. 2. 2025",
     title: "David potrolil soutěž",
-    src: "https://melbourneentertainmentco.com.au/wp-content/uploads/2020/04/Juan-and-Jess-600x600-profile.jpg",
-    desc: "V neděli 2. 2. David potrolil sambu, kde místo tančení lítal jako zmatená včelka. Terka, ačkoliv před soutěží velice zmatkovala a sebepoškozovala se, tak na parketě předvedla výborné představení. Na další trolení se můžeme všichni těšit do Brna na konci tohoto měsíce. "
-  },
-  {
-    autor: "Bebloid Obecný",
-    date: "2. 2. 2025",
-    title: "David potrolil soutěž",
-    src: "https://melbourneentertainmentco.com.au/wp-content/uploads/2020/04/Juan-and-Jess-600x600-profile.jpg",
+    src: "/terka&david.jpg",
     desc: "V neděli 2. 2. David potrolil sambu, kde místo tančení lítal jako zmatená včelka. Terka, ačkoliv před soutěží velice zmatkovala a sebepoškozovala se, tak na parketě předvedla výborné představení. Na další trolení se můžeme všichni těšit do Brna na konci tohoto měsíce. "
   },
 ]

services/frontend/components/Trainers.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1>Naši trenéři a lektoři</h1>
+  <h1 id="trainers">Naši trenéři a lektoři</h1>
   <h2>Seznamte se s námi!</h2>
     <v-row style="margin-bottom: 2rem;">
       <v-col class="text-center" cols="12" md="3" v-for="lector in lectors" :key="lector.id">

services/frontend/components/menu/Header.vue

@@ -1,24 +1,21 @@
 <template>
     <v-layout>
-      <v-app-bar
-        color="primary"
-        style="position: sticky"
-      >
+      <v-app-bar style="position: fixed">
         <v-app-bar-nav-icon
             @click="drawer = !drawer"
             class="d-flex d-sm-none"
         />
-        <a href=""><big-icon icon="mdi-dance-ballroom" /></a>
-        <v-app-bar-title>Taneční klub Ostrava</v-app-bar-title>
+        <a href="/"><big-icon icon="mdi-dance-ballroom" /></a>
+        <v-app-bar-title class="app__title">Taneční klub Ostrava</v-app-bar-title>
 
         <v-tabs
           v-for="(tab, index) in tabs" :key="index"
           v-model="currentTab"
           align-with-title
-          class="d-none d-sm-flex"
-          color="color"
+          class="d-none d-sm-flex app__tab"
         >
-          <v-tab :text="tab.name" :value="tab.name" @click="useGoTo(tab.ref)"></v-tab>
+          <v-tab v-if="tab.ref" :text="tab.name" :value="tab.name" @click="useGoTo(tab.ref)"></v-tab>
+          <v-tab v-if="tab.href" :text="tab.name" :value="tab.name" :href="tab.href"></v-tab>
         </v-tabs>
 
 
@@ -101,12 +98,12 @@ async function useGoTo (selector: string, props: {offset? :number} = {}): Promis
 const currentTab = ref({name: 'O nás', ref: "#about", href: "o-nas"});
 const drawer = ref(null)
 const tabs = [
-  {name: 'O nás', ref: "#about", href: "o-nas"},
-  {name: "Trenéři", ref: "#trainers", href: "treneri"},
-  {name: 'Kurzy', ref: "#courses", href: "kurzy"},
-  {name: 'Galerie', ref: "#gallery", href: "galerie"},
-  {name: 'Aktuality', ref: "#article", href: "clanky"},
-  {name: 'Kontakty', ref: "#contact", href: "kontakt"},
+  {name: 'O nás', ref: "#about", href: ""},
+  {name: "Trenéři", ref: "#trainers", href: ""},
+  {name: 'Kurzy', ref: "#courses", href: ""},
+  {name: 'Galerie', ref: "", href: "/galerie"},
+  {name: 'Aktuality', ref: "#article", href: ""},
+  {name: 'Kontakty', ref: "", href: "/kontakty"},
 ]
 
 // import { useTheme } from 'vuetify'

services/frontend/pages/index.vue

@@ -11,10 +11,13 @@
       </h2>
     </div>
   </v-parallax>
-  <advantages id="advantages"/>
-  <courses id="courses"/>
-  <news id="article"/>
-  <about id="about"/>
-  <trainers id="trainers"/>
-  <contact-us id="contact"/>
-</template>
+  <calendar/>
+  <news/>
+  <trainers/>
+  <about/>
+  <advantages/>
+  <courses/>
+  <contact-us/>
+</template>
+<script setup lang="ts">
+</script>

services/frontend/plugins/vuetify.ts

@@ -5,9 +5,13 @@ import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
 import { aliases, mdi } from 'vuetify/iconsets/mdi'
 import {VIcon} from "vuetify/components";
+import {VCalendar} from "vuetify/labs/VCalendar";
 
 export default defineNuxtPlugin((app) => {
   const vuetify = createVuetify({
+    components: {
+      VCalendar,
+    },
     icons: {  // https://pictogrammers.com/library/mdi/icon/youtube/
       defaultSet: 'mdi',
     },
@@ -52,6 +56,14 @@ export default defineNuxtPlugin((app) => {
         style: [{ margin: '20px', 'font-size': '60px'}]
       },
     },
+    locale: {
+      locale: 'cs',
+    },
+    date: {
+      locale: {
+        cs: 'cs-CZ',
+      }
+    }
   })