gallery

.env.hope-fly

@@ -0,0 +1 @@
+REACT_APP_WWW_ROOT = "https://hope-fly.de/gallery/"

package.json

@@ -3,12 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.12",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.14",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "env-cmd": "^10.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-image-gallery": "^1.2.11",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -17,7 +25,10 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "build:local": "env-cmd -f .env.local npm run build",
+    "build:hope-fly": "env-cmd -f .env.hope-fly npm run build",
+    "postbuild:local": "cp -vrRT ./build/. /opt/lampp/htdocs/gallery/"
   },
   "eslintConfig": {
     "extends": [
@@ -37,7 +48,9 @@
       "last 1 safari version"
     ]
   },
+  "homepage": "./",
   "devDependencies": {
+    "@types/react-image-gallery": "^1.2.0",
     "tailwindcss": "^3.2.7"
   }
 }

public/.htaccess

@@ -0,0 +1,4 @@
+Options -MultiViews
+    RewriteEngine On
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteRule ^ index.html [QSA,L]

public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/App.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
+import AppBar from './components/AppBar';
+import ImageGalleryX from './components/ImageGallery';
 import './App.css';
 
 function App() {
   return (
-    <div className="App">
-      <h1 className=''>Gallery</h1>
-    </div>
+  <div className="App">
+    <AppBar />
+    <ImageGalleryX />
+  </div>
   );
 }
 
-export default App;
+export default App;

src/components/AppBar.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1
+    },
+    menuButton: {
+      marginRight: theme.spacing(2)
+    },
+    title: {
+      flexGrow: 1
+    }
+  })
+);
+
+export default function ButtonAppBar() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" className={classes.title}>
+            Gallery
+          </Typography>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}

src/components/ImageGallery.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback, useMemo } from "react";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import ImageGallery, { ReactImageGalleryItem } from "react-image-gallery";
+import "react-image-gallery/styles/css/image-gallery.css";
+import { imageGalleryItems } from "../state";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1
+    },
+    thubmnail: {
+      backgroundColor: "red",
+      '&.image-gallery-thumbnail.active': {
+        borderColor: 'green',
+      },
+      '&.image-gallery-thumbnail:hover': {
+        borderColor: 'lightgreen',
+      },
+    }
+  })
+);
+
+export default function ImageGalleryX() 
+{
+  const classes = useStyles();
+
+  const root: string = process.env.REACT_APP_WWW_ROOT!;
+  const uploads: string = root + 'uploads/';
+
+  const items = useMemo(() => {
+    return imageGalleryItems.map((item: ReactImageGalleryItem) => {
+      const newItem = { ...item };
+      newItem.original = uploads + newItem.original;
+      newItem.thumbnailClass = classes.thubmnail;
+      return newItem;
+    });
+  }, [classes.thubmnail]);
+
+  return (
+    <div className={classes.root}>
+      <ImageGallery
+        items={items}
+        showFullscreenButton={false}
+        showThumbnails
+      />
+    </div>
+  );
+}

src/gallery.json

@@ -0,0 +1,43 @@
+[
+    {
+      "original": "IMG_20230217_161150_331.jpg",
+      "thumbnail": ""
+    },
+    {
+      "original": "IMG_20230218_182608_079.jpg",
+      "thumbnail": ""
+    },
+    {
+        "original": "IMG_20230218_182625_867.jpg",
+        "thumbnail": ""
+    },
+    {
+        "original": "IMG_20230218_184359_940.jpg",
+        "thumbnail": ""
+    },
+    {
+        "original": "IMG_20230218_184429_386.jpg",
+        "thumbnail": ""
+    },
+    {
+        "original": "IMG_20230305_164907_552.jpg",
+        "thumbnail": ""
+    },
+    {
+        "original": "IMG_20230305_164913_285.jpg",
+        "thumbnail": ""
+    },
+    {
+        "original": "IMG_20230305_164919_797.jpg",
+        "thumbnail": ""
+    },
+    {
+        "original": "IMG_20230305_164921_376.jpg",
+        "thumbnail": ""
+    },
+    {
+        "original": "IMG_20230305_164923_912.jpg",
+        "thumbnail": ""
+    }
+]
+  

src/state.ts

@@ -0,0 +1,5 @@
+import { ReactImageGalleryItem } from 'react-image-gallery';
+import data from './gallery.json'; 
+
+
+export const imageGalleryItems: ReactImageGalleryItem[] = data;