ruangrupa/kios-webapp
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display products on dispatch
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
toqvist 2024-04-05 22:38:48 +02:00
parent e0bb3a349d
commit d0a9dd6a13
1 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
astro/src/components/KiosMap.tsx
View File

@ -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}