From 08653768c872b02894cf300d05db9de67af4e75b Mon Sep 17 00:00:00 2001
From: m-vuk <marko.vukadinovic@geo-dome.de>
Date: Thu, 26 Sep 2024 11:54:48 +0200
Subject: [PATCH] [#612] diagramm positionierung

---
 .../app/(dashboard)/[city]/page.module.scss   | 40 ++++++++--
 frontend/app/(dashboard)/[city]/page.tsx      | 21 +++---
 frontend/app/components/ImageModal.tsx        | 75 +++++++++++++++++++
 3 files changed, 119 insertions(+), 17 deletions(-)
 create mode 100644 frontend/app/components/ImageModal.tsx

diff --git a/frontend/app/(dashboard)/[city]/page.module.scss b/frontend/app/(dashboard)/[city]/page.module.scss
index dc42b74f..55f5a547 100644
--- a/frontend/app/(dashboard)/[city]/page.module.scss
+++ b/frontend/app/(dashboard)/[city]/page.module.scss
@@ -2,24 +2,50 @@
   flex: 1;
 }
 
-.mdContent{
+.mdContent {
   img {
     max-width: 100%;
   }
 }
 
-.checklistContainer{
+.checklistContainer {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
-  a{
+
+  a {
     flex: 1;
     max-width: 500px;
   }
 }
 
-.charts{
-  img{max-width: 100%;}
-  figure { display: table; margin-left:auto;margin-right: auto;max-width: 90%;margin-top:50px}
-  figcaption { display: table-caption; caption-side: bottom ; text-align: center;font-size: smaller;}
+.charts {
+  img {
+    float: left;
+    margin-right: 15px;
+    max-width: 60%;
+  }
+
+  figure {
+    margin-top: 3z0px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  figcaption {
+    flex: 1;
+    font-size: smaller;
+    /* Schriftgröße anpassen */
+    margin-top: 0;
+  }
+  @media screen and (max-width: 600px) {
+    img {
+      pointer-events: none;
+      max-width: 100%;
+    }
+    figcaption {
+      text-align:center;
+    }
+  }
 }
\ No newline at end of file
diff --git a/frontend/app/(dashboard)/[city]/page.tsx b/frontend/app/(dashboard)/[city]/page.tsx
index 4528c991..760cceff 100644
--- a/frontend/app/(dashboard)/[city]/page.tsx
+++ b/frontend/app/(dashboard)/[city]/page.tsx
@@ -11,6 +11,7 @@ import ImplementationIndicator from "@/app/components/ImplementationIndicator";
 import ChecklistIndicator from "@/app/components/ChecklistIndicator";
 import type { CheckItem, Chart } from "@/types";
 import rehypeRaw from "rehype-raw";
+import ImageModal from "@/app/components/ImageModal";
 
 interface CityDescriptionProps {
   teaser: string;
@@ -96,16 +97,16 @@ export default async function CityDashboard({ params }: { params: { city: string
     </NavigationTile>
   </Link> : <></>
 
-  const charts = Array.isArray(city.charts) ? city.charts.map((chart:Chart, key:number) => <figure key={key}>
-      <img className="d-block border"
-          title={chart.alt_description}
-          alt={chart.alt_description}
-          src={ chart.image }/>
-      <figcaption>
-      <Markdown rehypePlugins={[rehypeRaw]} className="mdContent">{chart.caption}</Markdown>
-        <span className="text-muted">Quelle: { chart.source } - Lizenz: { chart.license }</span>
-      </figcaption>
-    </figure>) :<></>
+  const charts = Array.isArray(city.charts) ? city.charts.map((chart:Chart, key:number) => <ImageModal title={chart.alt_description}
+  key={key}
+  alt={chart.alt_description}
+  src={ chart.image }
+  caption={ chart.caption }
+  source={ chart.source }
+  license={ chart.license }
+  >
+  </ImageModal>
+  ) :<></>
 
   const localgroup = city?.local_group?.description ? <LocalGroup
       localGroup={city.local_group}
diff --git a/frontend/app/components/ImageModal.tsx b/frontend/app/components/ImageModal.tsx
new file mode 100644
index 00000000..b9b1834b
--- /dev/null
+++ b/frontend/app/components/ImageModal.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Modal, CloseButton } from 'react-bootstrap';
+import Markdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+interface ImageModalProps {
+  src: string;
+  alt?: string;
+  title?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  modalTitle?: string;
+  caption?: string;
+  license?: string;
+  source?: string;
+}
+
+const ImageModal: React.FC<ImageModalProps> = ({
+  src,
+  alt = '',
+  title = '',
+  className = '',
+  license = '',
+  caption = '',
+  source = '',
+  style = {},
+}) => {
+  const [show, setShow] = useState(false);
+
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  return (
+    <>
+      {/* Clickable image */}
+      <figure>
+        <img className={`d-block border ${className}`}
+            title={title}
+            alt={title}
+            src={ src }
+            onClick={handleShow}
+
+            />
+        <figcaption>
+        <Markdown rehypePlugins={[rehypeRaw]} className="mdContent">{caption}</Markdown>
+            <span className="text-muted">Quelle: { source } - Lizenz: { license }</span>
+        </figcaption>
+     </figure>
+
+      {/* Modal for large image */}
+      <Modal show={show} onHide={handleClose} centered fullscreen>
+        <Modal.Body className='m-auto'>
+        <CloseButton onClick={handleClose} style={{position:"absolute",right:0, top:10}}/>
+        <figure className='h-100 m-auto text-center'>
+            <img className={`m-auto d-block border ${className}`}
+                title={title}
+                alt={title}
+                src={ src }
+                onClick={handleClose}
+                style={{maxHeight: "90%"}}
+                />
+            <figcaption>
+            <Markdown rehypePlugins={[rehypeRaw]} className="mdContent">{caption}</Markdown>
+                <span className="text-muted">Quelle: { source } - Lizenz: { license }</span>
+            </figcaption>
+        </figure>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default ImageModal;