Merge pull request #5 from PiotrTyrakowski/server-piotr

Server piotr

parent_app/package.json

@@ -20,7 +20,8 @@
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
-    "react-icons": "^5.3.0"
+    "react-icons": "^5.3.0",
+    "swr": "^2.2.5"
   },
   "devDependencies": {
     "@types/node": "^20",

parent_app/src/app/list/page.tsx

@@ -1,50 +1,39 @@
-// app/page.tsx (or any page you'd like to use)
 'use client'
-import { useEffect, useState } from 'react';
+import useSWR from 'swr';
+import Card from '../../components/Card';
+import { convertISOToTime, convertISOToDate } from '@/utils/dateTimeConverter';
 
 type ImageData = {
   _id: string;
-  buffer: string; // Base64-encoded string
+  buffer: string;
   submittedAt: string;
+  weight: string;
+  face: string;
 };
 
-const ImageGallery = () => {
-  const [images, setImages] = useState<ImageData[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchImages = async () => {
-      try {
-        const response = await fetch('/api/get-images');
-        const data = await response.json();
-        setImages(data);
-      } catch (error) {
-        console.error('Error fetching images:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
+const fetcher = (url: string) => fetch(url).then(res => res.json());
 
-    fetchImages();
-  }, []);
+const ImageGallery = () => {
+  const { data: images, error } = useSWR<ImageData[]>('/api/get-images', fetcher, {
+    refreshInterval: 5000, // Fetch data every 5 seconds
+  });
 
-  if (loading) {
-    return <p>Loading images...</p>;
-  }
+  if (error) return <p className="text-black">Failed to load images.</p>;
+  if (!images) return <p className="text-black">Loading images...</p>;
 
   return (
-    <div>
-      <h1>Image Gallery</h1>
+    <div className='min-h-screen bg-gray-100 p-4'>
+      <h1 className="text-black">Image Gallery</h1>
       <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>
+          <Card 
+            key={image._id}
+            image={image} 
+            waga={image.weight} 
+            godzina={convertISOToTime(image.submittedAt)} 
+            data={convertISOToDate(image.submittedAt)} 
+            face={image.face} 
+          />
         ))}
       </ul>
     </div>

parent_app/src/components/Card.js

@@ -0,0 +1,35 @@
+import smile from '../icons/smile.svg';
+import sad from '../icons/sad.svg';
+import Image from 'next/image';
+
+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' }}>
+        <div>
+            <p className="text-black">{data}</p>
+        </div>
+        <div className="w-full h-full flex">
+            {/* Left side: Image */}
+            <div className="w-1/3 h-full">
+                {face === '1' ? (
+                <Image src={smile} alt="smile" width={100} height={100} />
+                ) : (
+                <Image src={sad} alt="sad" width={100} height={100} />
+                )}
+            </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);
+            </div>
+        </div>
+      </div>
+      </>
+    );
+  };
+
+  export default Card;
+

parent_app/src/utils/dateTimeConverter.ts

@@ -0,0 +1,22 @@
+export const convertISOToDate = (isoString: string): string => {
+    const date = new Date(isoString);
+
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+
+    //const seconds = String(date.getSeconds()).padStart(2, '0');
+
+    return `${day}-${month}-${year}`;
+  };
+
+  export const convertISOToTime = (isoString: string): string => {
+    const date = new Date(isoString);
+
+
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    //const seconds = String(date.getSeconds()).padStart(2, '0');
+
+    return `${hours}:${minutes}`;
+  };