Skip to content

Commit

Permalink
Item browsing
Browse files Browse the repository at this point in the history
  • Loading branch information
@eerosahlberg
eerosahlberg committed Apr 21, 2024
1 parent b21da62 commit 0b76863
Show file tree
Hide file tree
Showing 3 changed files with 307 additions and 134 deletions.
281 changes: 147 additions & 134 deletions components/DateSelector.js
View file
Original file line number Diff line number Diff line change
@@ -1,158 +1,171 @@
import { useDispatch, useSelector } from 'react-redux';
import DatePicker from 'react-datepicker';
import {
Box,
Button,
Heading,
AlertDialog,
AlertDialogBody,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogContent,
AlertDialogOverlay,
useDisclosure,
Flex,
Box,
Button,
Heading,
AlertDialog,
AlertDialogBody,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogContent,
AlertDialogOverlay,
useDisclosure,
Flex,
Text,
} from '@chakra-ui/react';
import 'react-datepicker/dist/react-datepicker.css';
import { setStartDate, setEndDate, datesSet } from '../redux/dates.slice';
import { clearCart } from '../redux/cart.slice';
import React from 'react';
import { useState } from 'react';
import { useRouter } from 'next/router';

export default function DateSelector() {
const dates = useSelector((state) => state.dates);
const cart = useSelector((state) => state.cart);
const dispatch = useDispatch();
const dates = useSelector((state) => state.dates);
const cart = useSelector((state) => state.cart);
const dispatch = useDispatch();

const Ref = React.useRef();
const Ref = React.useRef();

const { isOpen, onOpen, onClose } = useDisclosure();
const router = useRouter();

const [startDateModified, setStartDateModified] = useState(false);
const [endDateModified, setEndDateModified] = useState(false);
const { isOpen, onOpen, onClose } = useDisclosure();

const [startDate, setLocalStartDate] = useState();
const [endDate, setLocalEndDate] = useState();
const [startDateModified, setStartDateModified] = useState(false);
const [endDateModified, setEndDateModified] = useState(false);

function setDates() {
dispatch(clearCart());
const [startDate, setLocalStartDate] = useState();
const [endDate, setLocalEndDate] = useState();

dispatch(setStartDate(startDate));
dispatch(setEndDate(endDate));
dispatch(datesSet(true));
function setDates() {
dispatch(clearCart());

onClose();
}
dispatch(setStartDate(startDate));
dispatch(setEndDate(endDate));
dispatch(datesSet(true));

return (
<>
{!dates.datesSet ? (
<>
<Heading>Aloitus</Heading>
<Box>
Aloita valitsemalla kamojen nouto- ja palautusajankohdat. Huomioi aikoja valitessasi, että
lähtökohtaisesti kamoja voi noutaa vain kalustopäivystyksestä maanantaisin klo 18-19.
</Box>
</>
) : (
<>
<Heading as={'h2'} size='md'>
Valitut päivämäärät:
</Heading>
<Flex width={'fit-content'} borderWidth={'1px'} borderRadius='lg' marginTop={'0.5em'} marginBottom='0.5em'>
<Box p={4}>
<Box>
<Box as={'span'} fontWeight='bold'>
Nouto:
</Box>
<Box as={'span'} ml={2}>
{dates.startDate.toLocaleDateString('fi-FI', {
weekday: 'long',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: '2-digit',
})}
</Box>
</Box>
<Box>
<Box as={'span'} fontWeight='bold'>
Palautus:
</Box>
<Box as={'span'} ml={2}>
{dates.endDate.toLocaleDateString('fi-FI', {
weekday: 'long',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: '2-digit',
})}
</Box>
</Box>
</Box>
</Flex>
</>
)}
onClose();
}

<Button marginBottom={'1em'} onClick={onOpen}>
{dates.datesSet ? 'Muokkaa päivämääriä' : 'Aseta Päivämäärät'}
</Button>
<AlertDialog isOpen={isOpen} leastDestructiveRef={Ref} onClose={onClose}>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
Valitse varauksen ajankohdat
</AlertDialogHeader>
return (
<>
{!dates.datesSet ? (
<>
<Heading>Aloitus</Heading>
<Box>
Aloita valitsemalla kamojen nouto- ja palautusajankohdat. Huomioi aikoja valitessasi, että
lähtökohtaisesti kamoja voi noutaa vain kalustopäivystyksestä maanantaisin klo 18-19.
</Box>
</>
) : (
<>
<Heading as={'h2'} size='md'>
Valitut päivämäärät:
</Heading>
<Flex width={'fit-content'} borderWidth={'1px'} borderRadius='lg' marginTop={'0.5em'} marginBottom='0.5em'>
<Box p={4}>
<Box>
<Box as={'span'} fontWeight='bold'>
Nouto:
</Box>
<Box as={'span'} ml={2}>
{dates.startDate.toLocaleDateString('fi-FI', {
weekday: 'long',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: '2-digit',
})}
</Box>
</Box>
<Box>
<Box as={'span'} fontWeight='bold'>
Palautus:
</Box>
<Box as={'span'} ml={2}>
{dates.endDate.toLocaleDateString('fi-FI', {
weekday: 'long',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: '2-digit',
})}
</Box>
</Box>
</Box>
</Flex>
</>
)}
<Box>
<Button onClick={onOpen}>{dates.datesSet ? 'Muokkaa päivämääriä' : 'Aseta Päivämäärät'}</Button>
</Box>
{!dates.datesSet ? (
<>
<Text>Tai</Text>
<Box>
<Button marginBottom={'1em'} onClick={() => router.push('/item/browse')}>
Selaa kaikkia kamoja
</Button>
</Box>
</>
) : null}
<AlertDialog isOpen={isOpen} leastDestructiveRef={Ref} onClose={onClose}>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
Valitse varauksen ajankohdat
</AlertDialogHeader>

<AlertDialogBody>
<Heading size={'md'}>Nouto</Heading>
<Box padding={'4px'} flexDirection='row' display='flex'>
<DatePicker
selected={startDateModified ? startDate : false}
placeholderText='🗓️ Kamojen noutoaika'
onChange={(date) => {
setLocalStartDate(date);
setStartDateModified(true);
}}
showTimeSelect
dateFormat='d.M.yyyy H:mm'
timeFormat='H:mm'
/>
</Box>
<AlertDialogBody>
<Heading size={'md'}>Nouto</Heading>
<Box padding={'4px'} flexDirection='row' display='flex'>
<DatePicker
selected={startDateModified ? startDate : false}
placeholderText='🗓️ Kamojen noutoaika'
onChange={(date) => {
setLocalStartDate(date);
setStartDateModified(true);
}}
showTimeSelect
dateFormat='d.M.yyyy H:mm'
timeFormat='H:mm'
/>
</Box>

<Heading size={'md'}>Palautus</Heading>
<Box padding={'4px'}>
<DatePicker
selected={endDateModified ? endDate : false}
placeholderText='🗓️ Kamojen palautusaika'
onChange={(date) => {
setLocalEndDate(date);
setEndDateModified(true);
}}
showTimeSelect
dateFormat='d.M.yyyy H:mm'
timeFormat='H:mm'
/>
</Box>
{dates.datesSet ? 'HUOM! Päivämäärien muokkaaminen tyhjentää ostoskorin' : null}
</AlertDialogBody>
<Heading size={'md'}>Palautus</Heading>
<Box padding={'4px'}>
<DatePicker
selected={endDateModified ? endDate : false}
placeholderText='🗓️ Kamojen palautusaika'
onChange={(date) => {
setLocalEndDate(date);
setEndDateModified(true);
}}
showTimeSelect
dateFormat='d.M.yyyy H:mm'
timeFormat='H:mm'
/>
</Box>
{dates.datesSet ? 'HUOM! Päivämäärien muokkaaminen tyhjentää ostoskorin' : null}
</AlertDialogBody>

<AlertDialogFooter>
<Button ref={Ref} onClick={onClose} ml={3}>
Peruuta
</Button>
<Button
colorScheme='blue'
isDisabled={!startDateModified || !endDateModified}
onClick={() => setDates()}
ml={3}
>
Vahvista
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
</>
);
<AlertDialogFooter>
<Button ref={Ref} onClick={onClose} ml={3}>
Peruuta
</Button>
<Button
colorScheme='blue'
isDisabled={!startDateModified || !endDateModified}
onClick={() => setDates()}
ml={3}
>
Vahvista
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
</>
);
}
1 change: 1 addition & 0 deletions docker-compose.yml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
version: '3.9'
services:
postgres:
restart: always
image: postgres
volumes:
- db_data:/var/lib/postgresql/data
Expand Down
Loading

0 comments on commit 0b76863

Please sign in to comment.