admin panel API connected

This commit is contained in:
wrzesinski-hubert 2021-01-13 19:05:11 +01:00
parent 1c7888a478
commit 1930b80cd8
4 changed files with 139 additions and 44 deletions

5
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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<File|null>(null);
const destination = `${process.env.REACT_APP_API_URL}/api/v1/configurator/config`;
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [startFirstDate, setStartFirstDate] = useState<Date | null>(null);
const [endFirstDate, setEndFirstDate] = useState<Date | null>(null);
const [startSecondDate, setStartSecondDate] = useState<Date | null>(null);
const [endSecondDate, setEndSecondDate] = useState<Date | null>(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<HTMLFormElement>) => {
const uploadFile = async (event: React.FormEvent<HTMLFormElement>) => {
const action = (key: any) => (
<>
<StyledCloseIcon
onClick={() => {
closeSnackbar(key);
}}
></StyledCloseIcon>
</>
);
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 (
<AdministratorWrapper>
<Wrap>
<LogoWrapper>
<Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<Text> plan na plan </Text>
</LogoWrapper>
<Form
onSubmit={uploadFile}
>
<div>
<div>Start:</div>{' '}
<LogoWrapper>
<Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<Text> plan na plan </Text>
</LogoWrapper>
<Form onSubmit={uploadFile}>
<div>
<input type="date" min={date} />
<div>Start pierwszej tury:</div>{' '}
<div>
<input type="date" min={date} onChange={(e) => setStartFirstDate(e.target.valueAsDate)} />
</div>
<div>Koniec pierwszej tury:</div>{' '}
<div>
<input type="date" min={date} onChange={(e) => setEndFirstDate(e.target.valueAsDate)} />
</div>
</div>
</div>
<div>
<div>Koniec:</div>{' '}
<div>
<input type="date" min={date} />
<div>Start drugiej tury:</div>{' '}
<div>
<input type="date" min={date} onChange={(e) => setStartSecondDate(e.target.valueAsDate)} />
</div>
</div>
</div>
<div>
<input
type="file"
onChange={(e) => {
if (e.target.files && e.target.files[0]) {
const file = e.target.files[0];
setSelectedFile(file);
}
}}
/>
</div>
<div>
<input type="submit"/>
</div>
</Form>
<div>
<div>Koniec drugiej tury:</div>{' '}
<div>
<input type="date" min={date} onChange={(e) => setEndSecondDate(e.target.valueAsDate)} />
</div>
</div>
<div>
<input
type="file"
onChange={(e) => {
if (e.target.files && e.target.files[0]) {
const file = e.target.files[0];
setSelectedFile(file);
}
}}
/>
</div>
<div>
<SaveButton type="submit">{loading === false ? 'Zapisz' : <SyncLoader />} </SaveButton>
</div>
</Form>
</Wrap>
</AdministratorWrapper>
);

View File

@ -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,
});