Merge branch 'add_navbar'

PiotrTyrakowski · Sep 29, 2024 · f66644b · f66644b
2 parents f11dd80 + a4626b0
commit f66644b
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 40 deletions.
diff --git a/parent_app/package-lock.json b/parent_app/package-lock.json
diff --git a/parent_app/package.json b/parent_app/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.1",
     "@mui/x-charts": "^7.18.0",
     "@types/react-chartjs-2": "^2.0.2",
     "chart.js": "^4.4.4",

diff --git a/parent_app/src/app/list/page.tsx b/parent_app/src/app/list/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import Card from '../../components/Card';
 import { convertISOToTime } from '@/utils/dateTimeConverter';
 import { convertISOToDate } from '@/utils/dateTimeConverter';
+import Navbar from '../../components/Navbar';
 
 
 type ImageData = {
@@ -25,6 +26,12 @@ const ImageGallery = () => {
       try {
         const response = await fetch('/api/get-images');
         const data = await response.json();
+
+        data.sort((a: ImageData, b: ImageData) => {
+          return new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime();
+        });
+
+
         setImages(data);
       } catch (error) {
         console.error('Error fetching images:', error);
@@ -41,19 +48,11 @@ const ImageGallery = () => {
   }
 
   return (
+    <div>
     <div className='min-h-screen bg-gray-100 p-4'>
-      <h1 className="text-black">Image Gallery</h1>
+      {/* <h1 className="text-black">Image Gallery</h1> */}
+      <p className=" text-4xl font-bold text-gray-800 mb-4">Image Gallery</p>
       <ul style={{ listStyleType: 'none', padding: 0 }}>
-        {/* {images.map((image) => (
-          <li key={image._id} style={{ marginBottom: '20px' }}>
-            <img
-              src={`data:image/png;base64,${image.buffer}`}
-              alt="Submitted"
-              style={{ width: '200px', height: '200px', objectFit: 'cover' }}
-            />
-            <p>Submitted at: {new Date(image.submittedAt).toLocaleString()}</p>
-          </li> 
-        ))} */}
         {images.map((image) => (
           <Card 
             key={image._id}
@@ -66,6 +65,8 @@ const ImageGallery = () => {
         ))}
       </ul>
     </div>
+    <Navbar />
+    </div>
   );
 };
 

diff --git a/parent_app/src/app/page.tsx b/parent_app/src/app/page.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { format } from 'date-fns';
 import { LineChart } from '@mui/x-charts/LineChart';
 import {BarChart} from "@mui/x-charts";
+import Navbar from "../components/Navbar";
 
 
 
@@ -70,7 +71,7 @@ const HomePage = () => {
                     scaleType: 'band', // Ustawienie typu "band" dla osi X
                   },
                 ]}
-                tooltip={{trigger: 'none'}}
+                // tooltip={{trigger: 'none'}}
                 series={[
                   {
                     id: 'auto-generated-id-0', // Dodanie identyfikatora do serii danych
@@ -106,15 +107,15 @@ const HomePage = () => {
                 ]}
                 width={400} // Dostosowanie szerokości wykresu
                 height={275} // Dostosowanie wysokości wykresu
-                tooltip={{trigger: 'none'}}
+                // tooltip={{trigger: 'none'}}
             />
           </div>
         </div>
       </section>
 
       </div >
         {/* Bottom Navigation */}
-        <div className="sticky bottom-0 left-0 right-0 bg-white py-4 flex justify-around border border-gray-400 ">
+        {/* <div className="sticky bottom-0 left-0 right-0 bg-white py-4 flex justify-around border border-gray-400 ">
           <a className="text-center text-pink-500">
             <span className="block text-[2rem]">🏠</span>
             <span className="text-xs">Home</span>
@@ -123,7 +124,8 @@ const HomePage = () => {
             <span className="block text-[2rem]">📅️</span>
             <span className="text-xs">Poop history</span>
           </a>
-        </div>
+        </div>         */}
+        <Navbar />
       </div>
 
   );

diff --git a/parent_app/src/components/Card.js b/parent_app/src/components/Card.js
@@ -1,32 +1,67 @@
 import smile from '../icons/smile.svg';
 import sad from '../icons/sad.svg';
 import Image from 'next/image';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import { useState } from 'react';
+
+const Card = ({ image, weight, hour, date, face }) => {
+    const [open, setOpen] = useState(false);
+    const handleClickOpen = () => {
+      setOpen(true);
+    };
+    const handleClose = () => {
+      setOpen(false);
+    };
 
-const Card = ({ image, waga, godzina, data, face }) => {
     return ( <>
-      <div className="bg-white rounded-lg p-4 mb-4 shadow-md items-center" style={{ width: '350px', height: '150px' }}>
+      <button 
+        onClick={() => {
+            handleClickOpen();
+        }}
+        className="bg-white rounded-lg p-4 mb-4 shadow-md items-center" style={{ width: '350px', height: '150px' }}>
         <div>
-            <p className="text-black">{data}</p>
+            <p className="text-black border-b-2 text-xl text-left pl-2">{date}</p>
         </div>
         <div className="w-full h-full flex">
             {/* Left side: Image */}
-            <div className="w-1/3 h-full">
+            <div className="w-1/3 h-full m-auto">
                 {face === '1' ? (
-                <Image src={smile} alt="smile" width={100} height={100} />
+                <Image className="p-4 pb-7 m-auto items-center h-full" src={smile} alt="smile" width={80} height={80} />
                 ) : (
-                <Image src={sad} alt="sad" width={100} height={100} />
+                <Image className="p-4 pb-7 m-auto items-center h-full" src={sad} alt="sad" width={80} height={80} />
                 )}
             </div>
 
             {/* Right side: Text fields */}
             <div className="w-2/3 h-full pl-4 flex flex-col justify-center">
-            <p className="text-black">Waga: {waga} g</p>
-            <p className="text-black">Godzina: {godzina}</p>
-            console.log(`data:image/png;base64,${image.buffer}`);
-            console.log(face);
+            <p className="text-black text-xl pb-1">Waga: {weight} g</p>
+            <p className="text-black text-xl pb-2">Godzina: {hour}</p>
+            {/* console.log(`data:image/png;base64,${image.buffer}`); */}
             </div>
         </div>
-      </div>
+      </button>
+
+        {/* Dialog */}
+        <Dialog open={open} onClose={handleClose} className='rounded-3xl'>
+            <DialogTitle className='text-xl'>Poop from {date} </DialogTitle>
+            <DialogContent>
+            {/* <p>Waga: {waga} g</p>
+            <p>Godzina: {godzina}</p>
+            <p>Data: {date}</p>
+            <p>Face: {face === '1' ? '😊' : '😢'}</p> */}
+            <img src={`data:image/png;base64,${image.buffer}`} alt="image" className='rounded-lg' />
+            </DialogContent>
+            <DialogActions>
+            <Button onClick={handleClose} color="primary">
+                ❌
+            </Button>
+            </DialogActions>
+        </Dialog>
+
       </>
     );
   };

diff --git a/parent_app/src/components/Navbar.js b/parent_app/src/components/Navbar.js
@@ -0,0 +1,22 @@
+import Link from 'next/link';
+
+const Navbar = () => {
+    return (
+        <div className="sticky bottom-0 left-0 right-0 bg-white py-4 flex justify-around border border-gray-400">
+            <Link href="/" legacyBehavior>
+                <a className="text-center text-pink-500">
+                    <span className="block text-[2rem]">🏠</span>
+                    <span className="text-xs">Home</span>
+                </a>
+            </Link>
+            <Link href="/list" legacyBehavior>
+                <a className="text-center text-pink-500">
+                    <span className="block text-[2rem]">📅️</span>
+                    <span className="text-xs">Poop history</span>
+                </a>
+            </Link>
+        </div>
+    );
+};
+
+export default Navbar;