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

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