admin panel API connected
This commit is contained in:
wrzesinski-hubert
parent
1c7888a478
commit
1930b80cd8
5
package-lock.json
generated
5
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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)
|
||||
|
||||
console.log(response);
|
||||
}
|
||||
const config = {
|
||||
headers: {
|
||||
'content-type': 'multipart/form-data',
|
||||
},
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user