diff --git a/package-lock.json b/package-lock.json index 8ee4235..766fea4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4978,6 +4978,11 @@ } } }, + "date-fns": { + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz", + "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==" + }, "debug": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", diff --git a/package.json b/package.json index 6fd5fe4..8147f25 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", "axios": "^0.19.2", + "date-fns": "^2.16.1", "notistack": "^1.0.1", "react": "16.8.0", "react-click-away-listener": "^1.4.3", diff --git a/src/components/Administrator.tsx b/src/components/Administrator.tsx index 1acbfa0..dcd274b 100644 --- a/src/components/Administrator.tsx +++ b/src/components/Administrator.tsx @@ -1,12 +1,41 @@ +import { format } from 'date-fns'; import React, { useEffect, useState } from 'react'; import styled from 'styled-components/macro'; import { axiosInstance } from '../utils/axiosInstance'; +import { useSnackbar } from 'notistack'; +import CloseIcon from '@material-ui/icons/Close'; +import { SyncLoader } from 'react-spinners'; +const StyledCloseIcon = styled(CloseIcon)` + color: #000000; + &:hover { + color: white; + cursor: pointer; + } +`; + +const SaveButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + user-select: none; + background-color: #c7a424; + border: none; + font-weight: bold; + cursor: pointer; + height: 40px; + &:hover { + color: #ffffff; + box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24); + } + + width: 150px; +`; const AdministratorWrapper = styled.div` display: flex; flex-direction: column; - margin:0 auto; - height:100vh; + margin: 0 auto; + height: 100vh; `; const Wrap = styled.div` @@ -52,6 +81,9 @@ const Form = styled.form` `; export const Administrator = () => { + const { enqueueSnackbar } = useSnackbar(); + const { closeSnackbar } = useSnackbar(); + const today = new Date(); const dd = String(today.getDate()).padStart(2, '0'); const mm = String(today.getMonth() + 1).padStart(2, '0'); @@ -59,61 +91,118 @@ export const Administrator = () => { const date = yyyy + '-' + mm + '-' + dd; - const [selectedFile, setSelectedFile] = useState(null); - - const destination = `${process.env.REACT_APP_API_URL}/api/v1/configurator/config`; + const [selectedFile, setSelectedFile] = useState(null); + const [startFirstDate, setStartFirstDate] = useState(null); + const [endFirstDate, setEndFirstDate] = useState(null); + const [startSecondDate, setStartSecondDate] = useState(null); + const [endSecondDate, setEndSecondDate] = useState(null); + const [loading, setLoading] = useState(false); useEffect(() => { - }, [selectedFile]); + if (startFirstDate !== null) { + console.log(format(startFirstDate, 'dd.MM.yyyy')); + } + }, [startFirstDate]); - const uploadFile = async (event:React.FormEvent) => { + const uploadFile = async (event: React.FormEvent) => { + const action = (key: any) => ( + <> + { + closeSnackbar(key); + }} + > + + ); event.preventDefault(); const formData = new FormData(); - formData.append("file",selectedFile as Blob); + formData.append('file', selectedFile as Blob); + if (startFirstDate !== null) { + formData.append('firstTourBegin', format(startFirstDate, 'dd.MM.yyyy')); + } + if (endFirstDate !== null) { + formData.append('firstTourEnd', format(endFirstDate, 'dd.MM.yyyy')); + } + if (startSecondDate !== null) { + formData.append('secondTourBegin', format(startSecondDate, 'dd.MM.yyyy')); + } + if (endSecondDate !== null) { + formData.append('secondTourEnd', format(endSecondDate, 'dd.MM.yyyy')); + } - const response = await axiosInstance.post(`${process.env.REACT_APP_API_URL}/api/v1/configurator/config`, formData) + const config = { + headers: { + 'content-type': 'multipart/form-data', + }, + }; - console.log(response); - } - + try { + setLoading(true); + const response = await axiosInstance.post( + `${process.env.REACT_APP_API_URL}/api/v1/configurator/config/`, + formData, + config, + ); + enqueueSnackbar('Plan został zapisany', { + variant: 'success', + action, + }); + console.log(response); + } catch (e) { + enqueueSnackbar('Zapisywanie planu nie powiodło się', { + variant: 'error', + action, + }); + console.log(e); + } + setLoading(false); + }; return ( - - - plan na plan - -
-
-
Start:
{' '} + + + plan na plan + +
- +
Start pierwszej tury:
{' '} +
+ setStartFirstDate(e.target.valueAsDate)} /> +
+
Koniec pierwszej tury:
{' '} +
+ setEndFirstDate(e.target.valueAsDate)} /> +
-
-
-
Koniec:
{' '}
- +
Start drugiej tury:
{' '} +
+ setStartSecondDate(e.target.valueAsDate)} /> +
-
-
- { - if (e.target.files && e.target.files[0]) { - const file = e.target.files[0]; - setSelectedFile(file); - } - }} - /> -
-
- -
-
+
+
Koniec drugiej tury:
{' '} +
+ setEndSecondDate(e.target.valueAsDate)} /> +
+
+
+ { + if (e.target.files && e.target.files[0]) { + const file = e.target.files[0]; + setSelectedFile(file); + } + }} + /> +
+
+ {loading === false ? 'Zapisz' : } +
+ ); diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index 3851fd7..05536f4 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/src/contexts/CoursesProvider.tsx @@ -150,13 +150,13 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => { `${process.env.REACT_APP_API_URL}/api/v1/commisions/user/${userID}`, JSON.stringify(basketIds), ); - enqueueSnackbar('Plan został zapisany', { + enqueueSnackbar('Ustawienia zostały zapisane', { variant: 'success', action, }); } catch (e) { console.log('error: ', e); - enqueueSnackbar('Zapisywanie planu nie powiodło się', { + enqueueSnackbar('Ustawienia nie zostały zapisane', { variant: 'error', action, });