photo gallery init

alkator/urls.py

@@ -16,10 +16,11 @@ Including another URLconf
 """
 from django.contrib import admin
 from django.urls import path
-from alkatorapi.views import register, results
+from alkatorapi.views import register, results, photos
 
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('api/register', register),
     path('api/results', results),
+    path('api/photos', photos),
 ]

alkator_table.py

@@ -0,0 +1,8 @@
+from alkatorapi.models import ALKATOR_CHOICES, User
+n = 1
+for user in User.objects.order_by('duration'):
+    if user.alkator_category == 1:
+        print(f'{n}. {user.duration} {ALKATOR_CHOICES[user.alkator_category-1][1]} {user.starting_number:02}')
+        n += 1
+    else:
+        print(f'x. {user.duration} {ALKATOR_CHOICES[user.alkator_category-1][1]} {user.starting_number:02}')

alkatorapi/views.py

@@ -3,6 +3,8 @@ from django.http import HttpResponse
 from django.views.decorators.csrf import csrf_exempt
 from datetime import date, datetime
 import json
+import glob
+import PIL.Image
 
 from .models import User, ALKATOR_CHOICES_DICT
 
@@ -59,3 +61,16 @@ def results(request):
             'starting_number': user.starting_number,
         })
     return HttpResponse(json.dumps(results), content_type='application/json')
+
+
+def photos(request):
+    files = glob.glob("photos/*.jpg")
+    rtn = []
+    for file in files:
+        img = PIL.Image.open(file)
+        rtn.append({
+            'original': '/' + file,
+            'original_width': img.width,
+            'original_height': img.height,
+        })
+    return HttpResponse(json.dumps(rtn), content_type='application/json')

frontend/package.json

@@ -62,7 +62,11 @@
     "@babel/preset-react": "^7.23.3",
     "bootstrap": "^5.3.2",
     "core-js": "^3.35.1",
+    "react": "^18.3.1",
     "react-data-table-component": "^7.6.2",
-    "sass": "^1.70.0"
+    "react-dom": "^18.3.1",
+    "react-photo-gallery": "^8.0.0",
+    "sass": "^1.70.0",
+    "styled-components": "^6.1.9"
   }
 }

frontend/src/scripts/index.js

@@ -4,8 +4,10 @@ import DataTable from "react-data-table-component";
 import React, { Component } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import Gallery from "react-photo-gallery";
 
-const addr_prefix = "" //"http://localhost:8000"
+
+const addr_prefix = "http://localhost:8000"
 
 
 class Main extends Component {
@@ -16,10 +18,19 @@ class Main extends Component {
             status: "",
             faq: false,
             results: [],
+            page: window.location.hash,
+            photos: [],
         };
         fetch(addr_prefix + "/api/results").then(resp => resp.json()).then(json => {
             this.setState({results: json})
         })
+        fetch(addr_prefix + "/api/photos").then(resp => resp.json()).then(json => {
+            this.setState({photos: json})
+        })
+        window.addEventListener("hashchange", (e) => {this.onHashChange(e)})
+    }
+    onHashChange(event){
+        this.setState({page: window.location.hash})
     }
     onSubmit(event){
         event.preventDefault();
@@ -46,7 +57,34 @@ class Main extends Component {
         this.setState({faq: !this.state.faq});
     }
     render(){
+        let photos = []
+        for (let photo in this.state.photos){
+            photos.push({
+                src: photo.original,
+                width: photo.original_width,
+                height: photo.original_height,
+            })
+        }
         return (
+<div>
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+        <div class="container">
+            <ul class="navbar-nav mb-0">
+                <li class="nav-item">
+                <a class="nav-link" aria-current="page" href="#">Domů</a>
+                </li>
+                <li class="nav-item">
+                <a class="nav-link" href="#gallery">Galerie</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    {this.state.page == "#gallery" &&
+    <div class="container">
+        <Gallery photos={photos} />
+    </div>
+    }
+    {this.state.page == "" &&
     <div>
         {this.state.status == "success" &&
         <div class="absolute container-fluid alert alert-success">
@@ -231,6 +269,8 @@ class Main extends Component {
         <div class="container video">
             <iframe width="100%" height="800px" src="https://www.youtube.com/embed/v3r2IAPdFFQ?si=kkh2_BBJXw56gVaP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
         </div>
+    </div>
+    }
     <div class="container text">
         <a href="/public/reverz.pdf">Reverz</a><br />
         <a href="/public/ochrana_osobnich_udaju.pdf">Ochrana osobních údajů</a><br />