2021-01-13 19:05:11 +01:00
|
|
|
import { format } from 'date-fns';
|
2021-01-19 16:10:43 +01:00
|
|
|
import React, { useEffect, useState, useContext } from 'react';
|
2021-01-12 22:59:12 +01:00
|
|
|
import styled from 'styled-components/macro';
|
|
|
|
import { axiosInstance } from '../utils/axiosInstance';
|
2021-01-13 19:05:11 +01:00
|
|
|
import { useSnackbar } from 'notistack';
|
|
|
|
import CloseIcon from '@material-ui/icons/Close';
|
|
|
|
import { SyncLoader } from 'react-spinners';
|
2021-01-19 16:10:43 +01:00
|
|
|
import { CASContext } from '../contexts/CASProvider';
|
|
|
|
import LogoutIcon from '../assets/logout.svg';
|
2021-01-13 19:05:11 +01:00
|
|
|
|
|
|
|
const StyledCloseIcon = styled(CloseIcon)`
|
|
|
|
color: #000000;
|
|
|
|
&:hover {
|
|
|
|
color: white;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
`;
|
2021-01-12 22:59:12 +01:00
|
|
|
|
2021-01-19 16:10:43 +01:00
|
|
|
const Icon = styled.img`
|
|
|
|
width: 40px;
|
|
|
|
margin-left: 40px;
|
|
|
|
cursor: pointer;
|
|
|
|
@media only screen and (max-width: 670px) {
|
|
|
|
width: 35px;
|
|
|
|
}
|
|
|
|
position:absolute;
|
|
|
|
top:10px;
|
|
|
|
right:10px;
|
|
|
|
`;
|
|
|
|
|
2021-01-13 19:05:11 +01:00
|
|
|
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;
|
2021-01-19 21:32:43 +01:00
|
|
|
margin:10px;
|
2021-01-13 19:05:11 +01:00
|
|
|
&:hover {
|
|
|
|
color: #ffffff;
|
|
|
|
box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
|
|
|
|
}
|
|
|
|
|
|
|
|
width: 150px;
|
|
|
|
`;
|
2021-01-12 22:59:12 +01:00
|
|
|
const AdministratorWrapper = styled.div`
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2021-01-13 19:05:11 +01:00
|
|
|
margin: 0 auto;
|
|
|
|
height: 100vh;
|
2021-01-12 22:59:12 +01:00
|
|
|
`;
|
|
|
|
|
|
|
|
const Wrap = styled.div`
|
|
|
|
display: flex;
|
|
|
|
flex: 1;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const LogoWrapper = styled.div`
|
|
|
|
display: flex;
|
|
|
|
flex: 1;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2021-01-19 21:32:43 +01:00
|
|
|
margin-top:-50px;
|
2021-01-12 22:59:12 +01:00
|
|
|
`;
|
|
|
|
|
|
|
|
const Text = styled.div`
|
|
|
|
font-family: 'Roboto', sans-serif;
|
|
|
|
font-size: 5rem;
|
|
|
|
user-select: none;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Logo = styled.img`
|
|
|
|
width: 400px;
|
|
|
|
height: 400px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Form = styled.form`
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
input {
|
|
|
|
padding: 5px;
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
width: 210px;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2021-01-19 16:10:43 +01:00
|
|
|
const DownloadSection = styled.div`
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
input {
|
|
|
|
padding: 5px;
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
width: 210px;
|
|
|
|
}
|
|
|
|
`;
|
2021-01-12 22:59:12 +01:00
|
|
|
export const Administrator = () => {
|
2021-01-19 16:10:43 +01:00
|
|
|
const { logout } = useContext(CASContext)!;
|
2021-01-13 19:05:11 +01:00
|
|
|
const { enqueueSnackbar } = useSnackbar();
|
|
|
|
const { closeSnackbar } = useSnackbar();
|
|
|
|
|
2021-01-12 22:59:12 +01:00
|
|
|
const today = new Date();
|
|
|
|
const dd = String(today.getDate()).padStart(2, '0');
|
|
|
|
const mm = String(today.getMonth() + 1).padStart(2, '0');
|
|
|
|
const yyyy = today.getFullYear();
|
|
|
|
|
|
|
|
const date = yyyy + '-' + mm + '-' + dd;
|
|
|
|
|
2021-01-13 19:05:11 +01:00
|
|
|
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);
|
2021-01-12 22:59:12 +01:00
|
|
|
|
2021-01-19 16:10:43 +01:00
|
|
|
const downloadFile = async () => {
|
|
|
|
|
|
|
|
const {data} = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/export/csv`,{responseType:"blob"});
|
|
|
|
|
|
|
|
console.log("123",xd);
|
|
|
|
|
|
|
|
const downloadUrl = window.URL.createObjectURL(new Blob([data]));
|
|
|
|
|
|
|
|
const link = document.createElement('a');
|
|
|
|
|
|
|
|
link.href = downloadUrl;
|
|
|
|
|
|
|
|
link.setAttribute('download', 'file.csv');
|
|
|
|
|
|
|
|
document.body.appendChild(link);
|
|
|
|
|
|
|
|
link.click();
|
|
|
|
|
|
|
|
link.remove();
|
|
|
|
|
|
|
|
};
|
2021-01-13 19:05:11 +01:00
|
|
|
|
|
|
|
const uploadFile = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
|
|
const action = (key: any) => (
|
|
|
|
<>
|
|
|
|
<StyledCloseIcon
|
|
|
|
onClick={() => {
|
|
|
|
closeSnackbar(key);
|
|
|
|
}}
|
|
|
|
></StyledCloseIcon>
|
|
|
|
</>
|
|
|
|
);
|
2021-01-12 22:59:12 +01:00
|
|
|
event.preventDefault();
|
|
|
|
const formData = new FormData();
|
2021-01-13 19:05:11 +01:00
|
|
|
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 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,
|
|
|
|
);
|
2021-01-19 17:46:14 +01:00
|
|
|
enqueueSnackbar('Ustawienia zostały zapisane', {
|
2021-01-13 19:05:11 +01:00
|
|
|
variant: 'success',
|
|
|
|
action,
|
|
|
|
});
|
|
|
|
} catch (e) {
|
2021-01-19 17:46:14 +01:00
|
|
|
enqueueSnackbar('Ustawienia nie zostały zapisane', {
|
2021-01-13 19:05:11 +01:00
|
|
|
variant: 'error',
|
|
|
|
action,
|
|
|
|
});
|
|
|
|
console.log(e);
|
|
|
|
}
|
|
|
|
setLoading(false);
|
|
|
|
};
|
2021-01-12 22:59:12 +01:00
|
|
|
|
2021-01-19 16:10:43 +01:00
|
|
|
const xd = true;
|
|
|
|
|
2021-01-12 22:59:12 +01:00
|
|
|
return (
|
|
|
|
<AdministratorWrapper>
|
2021-01-19 16:10:43 +01:00
|
|
|
<Icon alt="logout" src={LogoutIcon} onClick={logout}/>
|
2021-01-12 22:59:12 +01:00
|
|
|
<Wrap>
|
2021-01-13 19:05:11 +01:00
|
|
|
<LogoWrapper>
|
|
|
|
<Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
|
|
|
|
<Text> plan na plan </Text>
|
|
|
|
</LogoWrapper>
|
2021-01-19 21:32:43 +01:00
|
|
|
{xd === true ? (
|
|
|
|
<div>
|
2021-01-19 16:10:43 +01:00
|
|
|
<Form onSubmit={uploadFile}>
|
|
|
|
<div>
|
|
|
|
<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>
|
2021-01-13 19:05:11 +01:00
|
|
|
<div>
|
2021-01-19 16:10:43 +01:00
|
|
|
<div>Start drugiej tury:</div>{' '}
|
|
|
|
<div>
|
|
|
|
<input type="date" min={date} onChange={(e) => setStartSecondDate(e.target.valueAsDate)} />
|
|
|
|
</div>
|
2021-01-13 19:05:11 +01:00
|
|
|
</div>
|
|
|
|
<div>
|
2021-01-19 16:10:43 +01:00
|
|
|
<div>Koniec drugiej tury:</div>{' '}
|
|
|
|
<div>
|
|
|
|
<input type="date" min={date} onChange={(e) => setEndSecondDate(e.target.valueAsDate)} />
|
|
|
|
</div>
|
2021-01-13 19:05:11 +01:00
|
|
|
</div>
|
|
|
|
<div>
|
2021-01-19 16:10:43 +01:00
|
|
|
<input
|
|
|
|
type="file"
|
|
|
|
onChange={(e) => {
|
|
|
|
if (e.target.files && e.target.files[0]) {
|
|
|
|
const file = e.target.files[0];
|
|
|
|
setSelectedFile(file);
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>
|
2021-01-13 19:05:11 +01:00
|
|
|
</div>
|
|
|
|
<div>
|
2021-01-19 16:10:43 +01:00
|
|
|
<SaveButton type="submit">{loading === false ? 'Zapisz' : <SyncLoader />} </SaveButton>
|
2021-01-13 19:05:11 +01:00
|
|
|
</div>
|
2021-01-19 16:10:43 +01:00
|
|
|
</Form>
|
2021-01-19 21:32:43 +01:00
|
|
|
<DownloadSection>
|
|
|
|
<SaveButton onClick={downloadFile}>Pobierz dane.csv</SaveButton>
|
|
|
|
</DownloadSection>
|
|
|
|
</div>
|
|
|
|
) : (<div></div>
|
2021-01-19 16:10:43 +01:00
|
|
|
)}
|
2021-01-12 22:59:12 +01:00
|
|
|
</Wrap>
|
|
|
|
</AdministratorWrapper>
|
|
|
|
);
|
|
|
|
};
|