gallery?

alkatorapi/models.py

@@ -8,8 +8,8 @@ ALKATOR_CHOICES = (
 )
 
 ALKATOR_CLASSES = (
-    (1, "Jaro 2024"),
+    (1, "Jaro 2024 Sobkovice"),
-    (2, "Podzim 2024"),
+    (2, "Podzim 2024 Studené"),
 )
 
 ALKATOR_CHOICES_DICT = {

alkatorapi/views.py

@@ -11,6 +11,7 @@ import json
 import glob
 import PIL.Image
 import random
+from collections import OrderedDict
 
 from .models import User, ALKATOR_CHOICES_DICT, ALKATOR_CLASSES
 from alkator.settings import COMGATE_MERCHANT, COMGATE_SECRET, COMGATE_TEST
@@ -194,16 +195,22 @@ def results(request):
 def photos(request):
     rtn = []
     for (i, name) in ALKATOR_CLASSES:
+        photos = {}
+        rtn.append(photos)
+        photos['name'] = name
+        photos['index'] = i
+        photos['photos'] = []
         files = glob.glob(f"photos/{i}/*.jpg")
         random.shuffle(files)
         for file in files:
             img = PIL.Image.open(file)
-            rtn.append({
+            photos['photos'].append({
                 'original': '/' + file.replace(".jpg", ".webp"),
                 'thumbnail': '/' + file.replace(f'photos/{i}/', f'photos/{i}/thumbnail/').replace(".jpg", ".webp"),
                 'original_width': img.width,
                 'original_height': img.height,
             })
+
     return HttpResponse(json.dumps(rtn), content_type='application/json')
 
 

frontend/src/scripts/index.js

@@ -21,6 +21,7 @@ class Main extends Component {
             status: "",
             faq: false,
             results: [],
+            gallery_open: null,
             page: window.location.hash,
             photos: [],
             photoIsOpen: false,
@@ -56,7 +57,7 @@ class Main extends Component {
         })
     }
     onHashChange(event){
-        this.setState({page: window.location.hash})
+        this.setState({page: window.location.hash, gallery_open: null})
     }
     handleChangeFiles(event) {
         this.setState({files: [...event.target.files]})
@@ -105,17 +106,19 @@ class Main extends Component {
     }
     render(){
         let photos_gallery = [];
-        let photos_carousel = []
+        let photos_carousel = [];
-        for (const photo of this.state.photos){
+        if(gallery_open){
-            photos_gallery.push({
+            for (const photo of this.state.photos[gallery_open]){
-                src: photo.thumbnail,
+                photos_gallery.push({
-                width: photo.original_width,
+                    src: photo.thumbnail,
-                height: photo.original_height,
+                    width: photo.original_width,
-            })
+                    height: photo.original_height,
-            photos_carousel.push({
+                })
-                original: photo.original
+                photos_carousel.push({
-            })
+                    original: photo.original
-        };
+                })
+            };
+        }
         return (
 <div>
     <ModalGateway>
@@ -175,6 +178,19 @@ class Main extends Component {
     </div>
     }
     {this.state.page == "#gallery" &&
+    <div class="container">
+        {this.state.photos.map((photos) => {
+        <div class="card" style="width: 18rem;">
+            <img src={photos.photos[Math.floor(Math.random() * photos.photos.length)].thumbnail} class="card-img-top" />
+            <div class="card-body">
+                <h5 class="card-title">{photos.name}</h5>
+                <a href="#" class="btn btn-primary" onClick={this.openGallery(photos.index)}>Otevřít galerii</a>
+            </div>
+        </div>
+        })}
+    </div>
+    }
+    {this.state.page == "#gallery" && this.state.gallery_open &&
     <div class="container">
         <Gallery photos={photos_gallery} onClick={this.openPhoto}/>
     </div>
@@ -376,7 +392,8 @@ class Main extends Component {
         Číslo účtu: 131-2219860207/0100<br />
         E-mail: info@alkator.cz<br />
         Tel: +420 728 018 088<br />
-        <img src="/public/footer.png" style={{"width":"100%","height":"auto"}} />
+        <img src="/public/footer.png" style={{"width":"100%","height":"auto"}} /><br/>
+        © Alkátor team 2024
     </div>
 </div>
         );