From d0a9dd6a13dbf86b42a0449135e093635fef5776 Mon Sep 17 00:00:00 2001
From: toqvist <tobias.ahlqvist@protonmail.com>
Date: Fri, 5 Apr 2024 22:38:48 +0200
Subject: [PATCH] Display products on dispatch

---
 astro/src/components/KiosMap.tsx | 53 +++++++++++++++++++++++---------
 1 file changed, 38 insertions(+), 15 deletions(-)

diff --git a/astro/src/components/KiosMap.tsx b/astro/src/components/KiosMap.tsx
index 6b9b228..bdfc532 100644
--- a/astro/src/components/KiosMap.tsx
+++ b/astro/src/components/KiosMap.tsx
@@ -233,7 +233,7 @@ export const KiosMap = () => {
     setSelectedNode({ id: nodeId, type: typeParam })
     console.log("set id:", nodeId)
   }
-  
+
   //params: dispatch: Dispatch, courier: User
   const handleAcceptRoute = () => {
 
@@ -270,7 +270,7 @@ export const KiosMap = () => {
     <div className='w-full flex justify-center align-middle'>
       {
         selectedNode.type !== 'none' && (
-          <div className='absolute bg-white border-gray-950 border-2 z-[998] left-10 top-1/4 p-4'>
+          <div className='absolute bg-white border-gray-950 border-2 z-[998] left-10 top-1/5 mt-24 p-4'>
             <div className='flex gap-8 flex-col'>
               {selectedMaker !== undefined && (
                 <div className='flex gap-4 flex-col'>
@@ -297,21 +297,25 @@ export const KiosMap = () => {
                                 return (
                                   <li className="flex flex-row gap-4">
                                     {product.picture.url &&
-                                     <img
-                                      width={160}
-                                      src={product.picture.url}
-                                      alt={product.picture.alt || ''}/>
-                                     }
-                                    <div className="flex flex-col gap-4 pb-4">
+                                      <img
+                                        width={160}
+                                        src={product.picture.url}
+                                        alt={product.picture.alt || ''} />
+                                    }
+                                    <div className="flex flex-col pb-4">
                                       <h3 className='text-4xl text-black py-2'>
-                                      {product.name}
+                                        {product.name}
                                       </h3>
-                                      <Button 
+                                      {product.weight &&
+                                        <p className='text-black text-lg'
+                                        >Weight: {product.weight}</p>
+                                      }
+                                      <Button
                                         variant={'kios'}
-                                        className='w-full'
+                                        className='w-full mt-6'
                                         onClick={() => handleRequestProduct()}
-                                        >
-                                          Request product
+                                      >
+                                        Request product
                                       </Button>
                                     </div>
                                   </li>
@@ -337,9 +341,28 @@ export const KiosMap = () => {
                 </>
               )}
 
-              //Todo: Display products
               {selectedDispatch !== undefined && (
-                <div className='flex flex-col gap-4'>
+                <div className='flex flex-col gap-8'>
+                  <div>
+                    <h2 className='text-xl font-bold underline-offset-2 underline py-2'>
+                      Product{selectedDispatch.products.length > 1 && 's'}
+                    </h2>
+                    {selectedDispatch.products.map((product, i) => {
+                      return (
+                        <div className='flex flex-row items-center gap-4'>
+                          <img
+                            src={product.picture.url}
+                            alt={product.picture.alt}
+                            className='border-2 border-black'
+                            width={60}
+                          />
+                          <h3 className='font-bold text-xl'>{product.name}</h3>
+                        </div>
+                      )
+                    })}
+                  </div>
+
+
                   <Contacts
                     name={selectedDispatch.maker.name}
                     email={selectedDispatch.maker.email}