SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

start page settings now uses new store

Browse Source
This commit is contained in:
nflnkr 2023-11-14 16:13:10 +03:00
parent 213075706b
commit 28d8cc8320
2 changed files with 924 additions and 1008 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1689
src/pages/startPage/StartPageSettings.tsx
View File

File diff suppressed because it is too large Load Diff

243
src/pages/startPage/dropZone.tsx
View File

@ -1,151 +1,130 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import {
Box,
ButtonBase,
useTheme,
Typography,
SxProps,
Theme,
Box,
ButtonBase,
useTheme,
Typography,
SxProps,
Theme,
} from "@mui/material";
import { SnackbarProvider, enqueueSnackbar } from "notistack";
import { quizStore } from "@root/quizes";
import UploadIcon from "@icons/UploadIcon";
import { useCurrentQuiz } from "@root/quizes/hooks";
interface Props {
text?: string;
sx?: SxProps<Theme>;
heightImg: string;
widthImg?: string;
text?: string;
sx?: SxProps<Theme>;
heightImg: string;
widthImg?: string;
}
//Научи функцию принимать данные для валидации
export const DropZone = ({ text, sx, heightImg, widthImg }: Props) => {
const quizId = Number(useParams().quizId);
const { listQuizes, updateQuizesList } = quizStore();
const [ready, setReady] = useState(false);
const theme = useTheme();
const quiz = listQuizes[quizId];
console.log(quiz.config.startpage.background.desktop);
const theme = useTheme();
const { quiz, updateQuiz } = useCurrentQuiz();
const [ready, setReady] = useState(false);
const imgHC = (imgInp: HTMLInputElement) => {
const file = imgInp.files?.[0];
if (file) {
if (file.size < 5242880) {
updateQuizesList(quizId, {
config: {
...quiz.config,
startpage: {
...quiz.config.startpage,
background: {
...quiz.config.startpage.background,
desktop: URL.createObjectURL(file),
},
},
},
});
} else {
enqueueSnackbar("Размер картинки слишком велик");
}
}
};
if (!quiz) return null; // TODO throw and catch with error boundary
const dragenterHC = () => {
setReady(true);
};
const imgHC = (imgInp: HTMLInputElement) => {
const file = imgInp.files?.[0];
if (file) {
if (file.size < 5242880) {
updateQuiz(quiz => {
quiz.config.startpage.background.desktop = URL.createObjectURL(file);
});
} else {
enqueueSnackbar("Размер картинки слишком велик");
}
}
};
const dragexitHC = () => {
setReady(false);
};
const dragenterHC = () => {
setReady(true);
};
const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
setReady(false);
const dragexitHC = () => {
setReady(false);
};
const file = event.dataTransfer.files[0];
if (file.size < 5242880) {
updateQuizesList(quizId, {
config: {
...quiz.config,
startpage: {
...quiz.config.startpage,
background: {
...quiz.config.startpage.background,
desktop: URL.createObjectURL(file),
},
},
},
});
} else {
enqueueSnackbar("Размер картинки слишком велик");
}
};
const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
setReady(false);
const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
};
const file = event.dataTransfer.files[0];
if (file.size < 5242880) {
updateQuiz(quiz => {
quiz.config.startpage.background.desktop = URL.createObjectURL(file);
});
} else {
enqueueSnackbar("Размер картинки слишком велик");
}
};
return (
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input
onChange={(event) => imgHC(event.target)}
hidden
accept="image/*"
multiple
type="file"
/>
<Box
onDragEnter={dragenterHC}
onDragExit={dragexitHC}
onDrop={dropHC}
onDragOver={dragOverHC}
sx={{
width: "100%",
height: "120px",
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: theme.palette.background.default,
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
borderRadius: "8px",
opacity: quiz.config.startpage.background.desktop ? "0.5" : 1,
...sx,
}}
>
<UploadIcon />
<Typography
sx={{
position: "absolute",
right: "10px",
bottom: "10px",
color: theme.palette.orange.main,
fontSize: "16px",
lineHeight: "19px",
textDecoration: "underline",
}}
>
{text}
</Typography>
<SnackbarProvider
style={{ backgroundColor: theme.palette.brightPurple.main }}
/>
{quiz.config.startpage.background.desktop && (
<img
height={heightImg}
width={widthImg}
src={quiz.config.startpage.background.desktop}
style={{
position: "absolute",
zIndex: "-1",
objectFit: "revert-layer",
}}
alt="img"
/>
)}
</Box>
</ButtonBase>
);
const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
};
return (
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
<input
onChange={(event) => imgHC(event.target)}
hidden
accept="image/*"
multiple
type="file"
/>
<Box
onDragEnter={dragenterHC}
onDragExit={dragexitHC}
onDrop={dropHC}
onDragOver={dragOverHC}
sx={{
width: "100%",
height: "120px",
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: theme.palette.background.default,
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
borderRadius: "8px",
opacity: quiz.config.startpage.background.desktop ? "0.5" : 1,
...sx,
}}
>
<UploadIcon />
<Typography
sx={{
position: "absolute",
right: "10px",
bottom: "10px",
color: theme.palette.orange.main,
fontSize: "16px",
lineHeight: "19px",
textDecoration: "underline",
}}
>
{text}
</Typography>
<SnackbarProvider
style={{ backgroundColor: theme.palette.brightPurple.main }}
/>
{quiz.config.startpage.background.desktop && (
<img
height={heightImg}
width={widthImg}
src={quiz.config.startpage.background.desktop}
style={{
position: "absolute",
zIndex: "-1",
objectFit: "revert-layer",
}}
alt="img"
/>
)}
</Box>
</ButtonBase>
);
};