new version

src/client/html/fotobox.html

@@ -0,0 +1,5 @@
+<div class="site-content grid-container">
+    <h1>Fotobox</h1>
+    <p>Es wurden einige Fotos in der Fotobox gemacht, die ihr hier ansehen und <a href="/bilder/Fotobox.zip" target="_blank">downloaden</a> könnt.</p><br/>
+    <div id="gallery"></div>
+</div>

src/client/html/hochzeitsfotos.html

@@ -0,0 +1,5 @@
+<div class="site-content grid-container">
+    <h1>Hochzeitsfotos</h1>
+    <p>Hier könnt ihr die Fotos unserer Hochzeit ansehen und <a href="/bilder/Hochzeit.zip" target="_blank">downloaden.</a></p><br/>
+    <div id="gallery"></div>
+</div>

src/client/index.html

@@ -27,17 +27,21 @@
                 <span class="menu-closer"></span>
                 <li class="active" data-site="home" data-img-show-always="1"><a>Home</a></li>
                 <li data-site="tagesablauf"><a>Tagesablauf</a></li>
-                <li data-site="unterkunft"><a>Unterkunft</a></li>
-                <li data-site="geschenke"><a>Geschenke</a></li>
+<!--                <li data-site="unterkunft"><a>Unterkunft</a></li>-->
+<!--                <li data-site="geschenke"><a>Geschenke</a></li>-->
                 <li data-site="standesamt"><a>Standesamt</a></li>
+                <li data-site="hochzeitsfotos"><a>Hochzeitsfotos</a></li>
+                <li data-site="fotobox"><a>Fotobox</a></li>
             </ul>
             <ul class="menu align-center-middle medium-horizontal hide-for-small-only">
                 <li><img class="logo-img" src="img/logo.png" alt="J&S"></li>
                 <li class="active" data-site="home" data-img-show-always="1"><a>Home</a></li>
                 <li data-site="tagesablauf"><a>Tagesablauf</a></li>
-                <li data-site="unterkunft"><a>Unterkunft</a></li>
-                <li data-site="geschenke"><a>Geschenke</a></li>
+<!--                <li data-site="unterkunft"><a>Unterkunft</a></li>-->
+<!--                <li data-site="geschenke"><a>Geschenke</a></li>-->
                 <li data-site="standesamt"><a>Standesamt</a></li>
+                <li data-site="hochzeitsfotos"><a>Hochzeitsfotos</a></li>
+                <li data-site="fotobox"><a>Fotobox</a></li>
             </ul>
         </div>
         <div class="top-bar-right">

src/client/js/ImageGallery/ImageGallery.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import Carousel, {Modal, ModalGateway} from "react-images";
 import {useCallback, useState} from "react";
-import {photos} from "./photos";
+import {photos as defaultPhotos} from "./photos";
 import Gallery from "./Gallery/Gallery";
 
-export type ImageGalleryProps = {};
+export type ImageGalleryProps = {photos?: any};
 
-function ImageGallery({}: ImageGalleryProps) {
+function ImageGallery({photos = defaultPhotos}: ImageGalleryProps) {
 
     const [currentImage, setCurrentImage] = useState(0);
     const [viewerIsOpen, setViewerIsOpen] = useState(false);

src/client/js/index.ts

@@ -4,6 +4,8 @@ import {PresentsHandler} from "./PresentsHandler";
 
 import "../sass/index.scss"
 import {setupImageGallery} from "./setupImageGallery";
+import {setupFotobox} from "./setupFotobox";
+import {setupHochzeitsfotos} from "./setupHochzeitsfotos";
 
 const templates = {
     home: require("../html/home.html"),
@@ -11,6 +13,8 @@ const templates = {
     tagesablauf: require("../html/tagesablauf.html"),
     geschenke: require("../html/geschenke.html"),
     standesamt: require("../html/standesamt.html"),
+    fotobox: require("../html/fotobox.html"),
+    hochzeitsfotos: require("../html/hochzeitsfotos.html"),
 }
 
 const images = {
@@ -19,6 +23,8 @@ const images = {
     tagesablauf: null,
     geschenke: require("../img/geschenke.jpg").default,
     standesamt: null,
+    fotobox: null,
+    hochzeitsfotos: null,
 }
 
 const callbacks = {
@@ -92,7 +98,9 @@ const callbacks = {
         });
     },
     geschenke: async () => await new PresentsHandler().showPresents(),
-    standesamt: setupImageGallery
+    standesamt: setupImageGallery,
+    fotobox: setupFotobox,
+    hochzeitsfotos: setupHochzeitsfotos,
 }
 
 $(document).foundation();

src/client/js/setupFotobox.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import {ImageGallery} from "./ImageGallery/ImageGallery";
+
+export async function setupFotobox(){
+    const photos = await fetch("/bilder/fotobox/photos.json").then(r => r.json());
+    console.log("LOG-d photos", photos);
+    ReactDOM.render(<ImageGallery photos={photos}/>, document.getElementById("gallery"));
+}

src/client/js/setupHochzeitsfotos.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import {ImageGallery} from "./ImageGallery/ImageGallery";
+
+export async function setupHochzeitsfotos(){
+    const photos = await fetch("/bilder/julia_sam/photos.json").then(r => r.json());
+    ReactDOM.render(<ImageGallery photos={photos}/>, document.getElementById("gallery"));
+}

src/server/Server.ts

@@ -81,6 +81,7 @@ export class Server {
     private configureApp(): void {
         this.app.use(express.json({limit: "1mb"}));
         this.app.use(express.static(path.join(__dirname, "../../dist")));
+        this.app.use(express.static(path.join(__dirname, "../static")));
     }
 
     private configureRoutes(): void {