diff --git a/package.json b/package.json index dcc9d33..07461b6 100644 --- a/package.json +++ b/package.json @@ -48,4 +48,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/src/components/CreationDate/CreationDate.tsx b/src/components/CreationDate/CreationDate.tsx new file mode 100644 index 0000000..7edc0e2 --- /dev/null +++ b/src/components/CreationDate/CreationDate.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import TableCell from '@mui/material/TableCell'; +import {formatDate} from './utils' + +const CreationDate: React.FC<{date: string} > = ({date}) => { + const properDate = formatDate(date); + + return( + + {properDate} + + ); +} + +export default CreationDate; diff --git a/src/components/CreationDate/index.ts b/src/components/CreationDate/index.ts new file mode 100644 index 0000000..66fd931 --- /dev/null +++ b/src/components/CreationDate/index.ts @@ -0,0 +1 @@ +export {default} from './CreationDate' diff --git a/src/components/CreationDate/utils.ts b/src/components/CreationDate/utils.ts new file mode 100644 index 0000000..39fe5d0 --- /dev/null +++ b/src/components/CreationDate/utils.ts @@ -0,0 +1,9 @@ +export function formatDate(baseDate: string): string{ + const newDate = new Date(baseDate); + + const year = newDate.getFullYear(); + const month = newDate.getMonth(); + const day = newDate.getDay(); + + return `${day < 10 ? `0${day}` : day }-${month}-${year}`; +} diff --git a/src/components/ListModal/ListModal.tsx b/src/components/ListModal/ListModal.tsx new file mode 100644 index 0000000..9b5477b --- /dev/null +++ b/src/components/ListModal/ListModal.tsx @@ -0,0 +1,50 @@ +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemText from '@mui/material/ListItemText'; +import Checkbox from '@mui/material/Checkbox'; +import { useState } from 'react'; + + + +const ListModal = () =>{ + + let myList: string[] = ["jeden", "dwa", "trzy"]; + + const [checked, setChecked] = useState([1]); + + const handleToggle = (value: string) => () => { + const newChecked = [...checked]; + + setChecked(newChecked); + }; + + return ( + + {myList.map((value) => { + const labelId = `checkbox-list-secondary-label-${value}`; + return ( + + } + disablePadding + > + + + + + ); + })} + + ); + +} + +export default ListModal \ No newline at end of file diff --git a/src/components/ListModal/index.ts b/src/components/ListModal/index.ts new file mode 100644 index 0000000..dc08be1 --- /dev/null +++ b/src/components/ListModal/index.ts @@ -0,0 +1 @@ +export { default } from './ListModal'; diff --git a/src/components/Name/Country.tsx b/src/components/Name/Country.tsx new file mode 100644 index 0000000..3135550 --- /dev/null +++ b/src/components/Name/Country.tsx @@ -0,0 +1,9 @@ +import Typography from '@mui/material/Typography/Typography' +import React from 'react' + +const Country = ({country}: {country : string}) => ( + {country} +) + + +export default Country; \ No newline at end of file diff --git a/src/components/Name/Name.tsx b/src/components/Name/Name.tsx new file mode 100644 index 0000000..bdb380d --- /dev/null +++ b/src/components/Name/Name.tsx @@ -0,0 +1,9 @@ +import Typography from '@mui/material/Typography'; +import React from 'react'; + +const Name = ({fullName}: {fullName: string}) => { + return {fullName} +} + +export default Name; + diff --git a/src/components/PackagesList/PackagesList.tsx b/src/components/PackagesList/PackagesList.tsx new file mode 100644 index 0000000..4c0fb67 --- /dev/null +++ b/src/components/PackagesList/PackagesList.tsx @@ -0,0 +1,62 @@ +import Box from "@mui/system/Box" +import * as React from 'react'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import {PackageDistribution} from './types'; + +interface PackagesListProps { + children: React.ReactNode; +} +function formatAddress (row: PackageDistribution) +{ + + return <>{row.address} {row.postcode} {row.city} {row.country} {row.lat} {row.lng} +} + + +const PackagesList = () => { + + const [packages, setPackages] = React.useState([]); + + React.useEffect( + () => { + fetch("https://santa.deployed.space/api/distribution") + .then((response) => response.json()) + .then((data) => { setPackages(data) }); + }, []) + + + return ( + <> + + + + + + ID Paczki + Imie i Nazwisko + Adress + + + + { + packages.map((row) => ( + + {row.id} + {row.name} + {formatAddress(row)} + + ))} + +
+ + + + ) +} + +export default PackagesList diff --git a/src/components/PackagesList/index.ts b/src/components/PackagesList/index.ts new file mode 100644 index 0000000..0586362 --- /dev/null +++ b/src/components/PackagesList/index.ts @@ -0,0 +1 @@ +export { default } from './PackagesList'; \ No newline at end of file diff --git a/src/components/PackagesList/types.ts b/src/components/PackagesList/types.ts new file mode 100644 index 0000000..dbac237 --- /dev/null +++ b/src/components/PackagesList/types.ts @@ -0,0 +1,10 @@ +export interface PackageDistribution { + id: number; + name: string; + address: string; + postcode: string; + city: string; + country: string; + lat: string; + lng: string; +} diff --git a/src/components/PackagingStatus/PackagingStatus.tsx b/src/components/PackagingStatus/PackagingStatus.tsx new file mode 100644 index 0000000..1b21283 --- /dev/null +++ b/src/components/PackagingStatus/PackagingStatus.tsx @@ -0,0 +1,12 @@ +import Box from "@mui/system/Box"; +import { useEffect, useState } from "react"; +import {DeliveryStatus} from './types'; + +const PackagingStatus = ({status}: {status:string}) => { + return ( + {status} + + ) +} + +export default PackagingStatus; \ No newline at end of file diff --git a/src/components/PackagingStatus/index.ts b/src/components/PackagingStatus/index.ts new file mode 100644 index 0000000..f3b9e49 --- /dev/null +++ b/src/components/PackagingStatus/index.ts @@ -0,0 +1 @@ +export { default } from './PackagingStatus'; \ No newline at end of file diff --git a/src/components/PackagingStatus/types.ts b/src/components/PackagingStatus/types.ts new file mode 100644 index 0000000..f6c6677 --- /dev/null +++ b/src/components/PackagingStatus/types.ts @@ -0,0 +1,11 @@ +export interface DeliveryStatus{ + id: number + wish_list_id: number + name: string + kindness: number + status: string + country: string + city: string + created_at: string + } + diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx new file mode 100644 index 0000000..fb3419c --- /dev/null +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -0,0 +1,37 @@ +import { LinearProgress, Typography } from "@mui/material"; +import Box from "@mui/system/Box"; +import { useEffect, useState } from "react"; +import { PackageDistribution } from "./types"; + +const ProgressBar = () => { + const fetchData = async () => { + const data = await fetch("https://santa.deployed.space/api/distribution/"); + const distribution: PackageDistribution[] = await data.json(); + setVal(distribution.length); + }; + const [val, setVal] = useState(0); + + useEffect(() => { + fetchData(); + }, []); + return ( + + + {" "} + Obłożenie sań:{" "} + + {Math.floor((val * 100) / 15)}% + + + + + ); +}; + +export default ProgressBar; diff --git a/src/components/ProgressBar/index.ts b/src/components/ProgressBar/index.ts new file mode 100644 index 0000000..fa15e6b --- /dev/null +++ b/src/components/ProgressBar/index.ts @@ -0,0 +1 @@ +export { default } from './ProgressBar'; \ No newline at end of file diff --git a/src/components/ProgressBar/types.ts b/src/components/ProgressBar/types.ts new file mode 100644 index 0000000..f78652c --- /dev/null +++ b/src/components/ProgressBar/types.ts @@ -0,0 +1,13 @@ +export interface ProgressBarProps { + children: React.ReactNode; +} +export interface PackageDistribution { + id: number + name: string + address: string + postcode: string + city: string + country: string + lat: string + lng: string + } \ No newline at end of file diff --git a/src/components/SendPresents/SendPresents.tsx b/src/components/SendPresents/SendPresents.tsx new file mode 100644 index 0000000..4477646 --- /dev/null +++ b/src/components/SendPresents/SendPresents.tsx @@ -0,0 +1,99 @@ +import React from "react"; +import { Box, Button, Card, CardContent, Grid, makeStyles, Modal, Paper, styled, Typography } from "@mui/material"; +import StarIcon from '@mui/icons-material/Star'; +import CloseIcon from '@mui/icons-material/Close'; +import ListModal from "../ListModal"; + + +const SendPresents = () =>{ + + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 650, + bgcolor: 'background.paper', + borderRadius: '12px', + boxShadow: 24, + p: 4, + display: 'flex', + padding: '0', + flexDirection: 'column', + }; + + + return (<> + + + + + + + + + Imię:
+ x
+ Nazwisko:
+ xxx xxxxxxxx
+ Wiek:
+ x lat
+ Grzeczność:
+ x
+ Kraj:
+ x
+ Miasto:
+ x
+ Ulica:
+ x
+ + + + + + + + + + ID x
+ calendar xx.xx.xxxx
+ + + + + + category + + + + + + + + + + + + + + + + + + + + ) +} + +export default SendPresents \ No newline at end of file diff --git a/src/components/SendPresents/index.ts b/src/components/SendPresents/index.ts new file mode 100644 index 0000000..fa02911 --- /dev/null +++ b/src/components/SendPresents/index.ts @@ -0,0 +1 @@ +export { default as SendPresents } from './SendPresents'; \ No newline at end of file diff --git a/src/components/TablePackages/PackageTableRow.tsx b/src/components/TablePackages/PackageTableRow.tsx new file mode 100644 index 0000000..cfd5b8e --- /dev/null +++ b/src/components/TablePackages/PackageTableRow.tsx @@ -0,0 +1,41 @@ +import { CheckBoxOutlineBlankOutlined } from "@mui/icons-material"; +import { TableCell, TableRow } from "@mui/material"; +import PackagingStatus from "../PackagingStatus"; +import { Packages } from "./types"; +import CreationDate from "../CreationDate"; +import Name from "../../components/Name/Name" +import Country from '../../components/Name/Country'; +import { SendPresents } from "../SendPresents"; + +const PackageTableRow = ({ id, kindness, createdAt, status, ...rest }: Packages) => { + return ( + + + + + + + {id} + + + + + + + + + + + + {rest.city} + + + + + + + + ); +}; + +export default PackageTableRow; diff --git a/src/components/TablePackages/TablePackageHeaders.tsx b/src/components/TablePackages/TablePackageHeaders.tsx new file mode 100644 index 0000000..91f378a --- /dev/null +++ b/src/components/TablePackages/TablePackageHeaders.tsx @@ -0,0 +1,20 @@ +import { Box, TableCell, Typography } from "@mui/material"; +import { PackageHeadersValues } from "./types"; + +const PackageTableHeaders = ({ headers }: PackageHeadersValues) => { + return ( + <> + {headers.map((element) => { + return ( + + + {element} + + + ); + })} + + ); +}; + +export default PackageTableHeaders; diff --git a/src/components/TablePackages/TablePackages.tsx b/src/components/TablePackages/TablePackages.tsx new file mode 100644 index 0000000..d744e65 --- /dev/null +++ b/src/components/TablePackages/TablePackages.tsx @@ -0,0 +1,83 @@ +import { CheckBoxOutlineBlankOutlined } from "@mui/icons-material"; +import { Packages } from "./types"; +import PackageTableRow from "./PackageTableRow"; +import { + Table, + TableContainer, + Paper, + TableHead, + TableRow, + TableCell, +} from "@mui/material"; +import { useEffect, useState } from "react"; +import PackageTableHeaders from "./TablePackageHeaders"; +import CreationDate from "../CreationDate"; +import {DeliveryStatus} from './types'; + +const headers = [ + "ID listu", + "Imię i nazwisko", + "Status pakowania", + "Kraj", + "Miasto", + "Data Akceptacji", + "", +]; + +const mockTableElements: Packages[] = [ + { + id: 1, + wishListId: 1, + name: "Joe Kernel", + kindness: 5, + status: "sent", + country: "Polska", + city: "Kraków", + createdAt: "2022-12-15T10:08:52.796000+01:00", + }, + { + id: 2, + wishListId: 1, + name: "YES", + kindness: 5, + status: "sent", + country: "Polska", + city: "Kraków", + createdAt: "2022-12-15T10:08:52.796000+01:00", + }, +]; + +const TablePackages = () => { + const [tableElements, setStat] = useState([]); + const fetchData=async()=>{ + const data = await fetch('https://santa.deployed.space/api/packages/'); + const delivery : Packages[]= await data.json(); + setStat(delivery); + } + + useEffect(()=>{ + fetchData(); + },[]) + + return ( + <> + + + + + + + + + + + {tableElements.map((element) => { + return ; + })} +
+ + + ); +}; + +export default TablePackages; diff --git a/src/components/TablePackages/index.ts b/src/components/TablePackages/index.ts new file mode 100644 index 0000000..6ed1f6d --- /dev/null +++ b/src/components/TablePackages/index.ts @@ -0,0 +1 @@ +export { default } from "./TablePackages"; diff --git a/src/components/TablePackages/types.ts b/src/components/TablePackages/types.ts new file mode 100644 index 0000000..da63e8a --- /dev/null +++ b/src/components/TablePackages/types.ts @@ -0,0 +1,26 @@ +export interface PackageHeadersValues { + headers: string[]; +} + +export interface Packages { + id: number; + wishListId: number; + name: string; + kindness: number; + status: string; + country: string; + city: string; + createdAt: string; +} + + +export interface DeliveryStatus{ + id: number + wish_list_id: number + name: string + kindness: number + status: string + country: string + city: string + created_at: string +} diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx new file mode 100644 index 0000000..d10d29d --- /dev/null +++ b/src/components/Timer/Timer.tsx @@ -0,0 +1,73 @@ +import { CircularProgress, Typography } from "@mui/material"; +import Box from "@mui/system/Box"; +import { useEffect, useState } from "react"; + + +type seconds = { + seconds : number; +} + +const Timer = () =>{ + + const fetchData = async () => { + const data = await fetch( + "https://santa.deployed.space/api/distribution/timer/"); + const response : seconds = await data.json(); + setTime(response.seconds); + } + + const [time, setTime] = useState(); + useEffect( () =>{ + + + fetchData(); + + const intervalID = setInterval(() => { + + setTime((time) => { + if(time === 0 ){ + fetchData(); + } + if(time === undefined){ + return time; + } + + return time-1; + } ); + }, 1000); + + return () => clearInterval(intervalID); + + },[]) + + + if(time === undefined){ + return( +
+ +
+ ) + + } + + + + return ( + <> + + Czas do odlotu: + + + { `${Math.floor(time/60)} min ${time%60} sek`} + + + + ) + + +} + + +export default Timer; \ No newline at end of file diff --git a/src/components/Timer/index.ts b/src/components/Timer/index.ts new file mode 100644 index 0000000..e744132 --- /dev/null +++ b/src/components/Timer/index.ts @@ -0,0 +1,3 @@ +export { default } from './Timer'; + + diff --git a/src/components/VerifyLetterModal/VerifyLetter.tsx b/src/components/VerifyLetterModal/VerifyLetter.tsx new file mode 100644 index 0000000..a7e18f7 --- /dev/null +++ b/src/components/VerifyLetterModal/VerifyLetter.tsx @@ -0,0 +1,128 @@ +import React from "react"; +import { Box, Button, Grid, Modal, Typography, CircularProgress } from "@mui/material"; +import StarIcon from '@mui/icons-material/Star'; +import CloseIcon from '@mui/icons-material/Close'; + + +export default function ({ ID }: { ID: number }) { + + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + const [letterData, setLetterData] = React.useState<{ + id: number, + name: string, + age: number, + country: string, + city: string, + postCode: string, + address: string, + createdAt: string, + items: string[] + } | undefined>(undefined); + + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 650, + bgcolor: 'background.paper', + borderRadius: '12px', + boxShadow: 24, + p: 4, + display: 'flex', + padding: '0', + flexDirection: 'column', + }; + + React.useEffect(() => { + const fetchData = async () => { + const response = await fetch(`https://santa.deployed.space/api/wishlists/${ID}`, { method: "GET" }); + if (response.ok) { + setLetterData(await response.json()); + } + }; + fetchData(); + }, []) + if (letterData === undefined) { + return + } + return (<> + + + + + + + + + Imię:
+ {letterData?.name}
+ Wiek:
+ {letterData?.age}
+ Grzeczność:
+ x
+ Kraj:
+ {letterData?.country}
+ Miasto:
+ {letterData?.city}
+ Kod pocztowy:
+ {letterData?.postCode}
+ Ulica i numer domu:
+ {letterData?.address}
+ + + + + + + + + + ID {letterData.id}
+ + + calendar {new Date(letterData.createdAt).toLocaleString()} + + + + + + category + + + + + + + + + + + {letterData.items.map((item) => ( + <> + + {item} + < br /> + + ))} + Lista:
+ + + + + + + + + + ) +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 9d5a007..3ed6e4d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,4 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', diff --git a/src/paths/pages/Distribution.tsx b/src/paths/pages/Distribution.tsx index ec713b9..f3cdda1 100644 --- a/src/paths/pages/Distribution.tsx +++ b/src/paths/pages/Distribution.tsx @@ -1,18 +1,36 @@ import Topbar from "../../components/Topbar"; import Box from "@mui/system/Box"; +import PackagesList from "../../components/PackagesList"; +import ProgressBar from "../../components/ProgressBar"; +import Timer from "../../components/Timer"; +import { Grid } from "@mui/material"; const Distribution = () => { return ( - <> - Distribution Topbar - - Distribution - - - ) -} + flexGrow: 1, + }} + > + + + + + + + + + + + + + ); +}; -export default Distribution \ No newline at end of file +export default Distribution; diff --git a/src/paths/pages/Letters.jsx b/src/paths/pages/Letters.jsx new file mode 100644 index 0000000..cd33564 --- /dev/null +++ b/src/paths/pages/Letters.jsx @@ -0,0 +1,69 @@ +import React, { useEffect, useState } from 'react' +import Topbar from "../../components/Topbar" +import Name from "../../components/Name/Name" +import Box from "@mui/system/Box" +import { TableBody, TableCell, TableHead, TableRow } from "@mui/material" +import TableContainer from "@mui/material/TableContainer" +import Table from "@mui/material/Table" +import Paper from "@mui/material/Paper" +import Checkbox from "@mui/material/Checkbox" +import VerifyLetter from "../../components/VerifyLetterModal/VerifyLetter" +import CreationDate from '../../components/CreationDate' +import Country from '../../components/Name/Country' + +const Letters = () => { + const [list, setList] = useState([]) + + useEffect(() => { + fetch('https://santa.deployed.space/api/wishlists/') + .then((response) => response.json()) + .then((data) => { setList(data) }) + }, []) + + return ( + <> + Listy + + + + + + + Id listu + Imię i nazwisko + Poziom Grzeczności + Status + Kraj + Miasto + Data nadesłania + + + + + {list.map((item) => ( + + + + + {item.id} + + + + + + + + + ))} + +
+ + + + ) +} + +export default Letters \ No newline at end of file diff --git a/src/paths/pages/Letters.tsx b/src/paths/pages/Letters.tsx deleted file mode 100644 index dfde9b1..0000000 --- a/src/paths/pages/Letters.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Topbar from "../../components/Topbar" -import Box from "@mui/system/Box" -const Letters = () => { - return ( - <> - Letters topbar - Letters - - ) -} - -export default Letters \ No newline at end of file diff --git a/src/paths/pages/Packages.tsx b/src/paths/pages/Packages.tsx index a7d8175..3def96c 100644 --- a/src/paths/pages/Packages.tsx +++ b/src/paths/pages/Packages.tsx @@ -1,16 +1,24 @@ -import Box from "@mui/system/Box" -import Topbar from "../../components/Topbar" +import Box from "@mui/system/Box"; +import Topbar from "../../components/Topbar"; +import TablePackages from "../../components/TablePackages"; const Packages = () => { + return ( <> Packages topbar - Packages + + + - ) -} + ); +}; -export default Packages \ No newline at end of file +export default Packages;