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

feat: uploading skeletons

Browse Source
This commit is contained in:
IlyaDoronin 2024-01-19 14:22:48 +03:00
parent 9b0454eab5
commit 95ae8c6a83
5 changed files with 277 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
View File

@ -69,26 +69,24 @@ export default function OptionsAndPicture({
setPictureUploading(true);
try {
const url = await uploadQuestionImage(
question.id,
quizQid,
file,
(question, url) => {
if (!("variants" in question.content)) return;
const url = await uploadQuestionImage(
question.id,
quizQid,
file,
(question, url) => {
if (!("variants" in question.content)) return;
const variant = question.content.variants.find(
(variant) => variant.id === selectedVariantId,
);
if (!variant) return;
const variant = question.content.variants.find(
(variant) => variant.id === selectedVariantId,
);
if (!variant) return;
variant.extendedText = url;
variant.originalImageUrl = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
} catch {}
variant.extendedText = url;
variant.originalImageUrl = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
setPictureUploading(false);
};

34
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -63,27 +63,25 @@ export default function OptionsPicture({
setPictureUploading(true);
try {
const url = await uploadQuestionImage(
question.id,
quizQid,
file,
(question, url) => {
if (!("variants" in question.content)) return;
const url = await uploadQuestionImage(
question.id,
quizQid,
file,
(question, url) => {
if (!("variants" in question.content)) return;
const variant = question.content.variants.find(
(variant) => variant.id === selectedVariantId,
);
if (!variant) return;
const variant = question.content.variants.find(
(variant) => variant.id === selectedVariantId,
);
if (!variant) return;
variant.extendedText = url;
variant.originalImageUrl = url;
},
);
variant.extendedText = url;
variant.originalImageUrl = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
} catch {}
closeImageUploadModal();
openCropModal(file, url);
setPictureUploading(false);
};

71
src/pages/Questions/UploadImage/index.tsx
View File

@ -1,5 +1,6 @@
import { useState } from "react";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
import { Box, Skeleton, Typography, useTheme } from "@mui/material";
import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
@ -12,6 +13,7 @@ type UploadImageProps = {
};
export default function UploadImage({ question }: UploadImageProps) {
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const theme = useTheme();
const quiz = useCurrentQuiz();
@ -29,29 +31,50 @@ export default function UploadImage({ question }: UploadImageProps) {
>
Загрузить изображение
</Typography>
<DropZone
text={"5 MB максимум"}
heightImg={"110px"}
sx={{ maxWidth: "300px", width: "100%" }}
imageUrl={question.content.back}
originalImageUrl={question.content.originalBack}
onImageUploadClick={(file) => {
uploadQuestionImage(question.id, quiz.qid, file, (question, url) => {
question.content.back = url;
question.content.originalBack = url;
});
}}
onDeleteClick={() => {
updateQuestion(question.id, (question) => {
question.content.back = null;
});
}}
onImageSaveClick={(file) => {
uploadQuestionImage(question.id, quiz.qid, file, (question, url) => {
question.content.back = url;
});
}}
/>
{pictureUploding ? (
<Skeleton variant="rounded" sx={{ height: "120px", width: "300px" }} />
) : (
<DropZone
text={"5 MB максимум"}
sx={{ maxWidth: "300px", width: "100%" }}
imageUrl={question.content.back}
originalImageUrl={question.content.originalBack}
onImageUploadClick={async (file) => {
setPictureUploading(true);
await uploadQuestionImage(
question.id,
quiz.qid,
file,
(question, url) => {
question.content.back = url;
question.content.originalBack = url;
},
);
setPictureUploading(false);
}}
onDeleteClick={() => {
updateQuestion(question.id, (question) => {
question.content.back = null;
});
}}
onImageSaveClick={async (file) => {
setPictureUploading(true);
await uploadQuestionImage(
question.id,
quiz.qid,
file,
(question, url) => {
question.content.back = url;
},
);
setPictureUploading(false);
}}
/>
)}
</Box>
);
}

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

@ -25,6 +25,7 @@ import {
Select,
Tooltip,
Typography,
Skeleton,
useMediaQuery,
useTheme,
} from "@mui/material";
@ -75,6 +76,9 @@ export default function StartPageSettings() {
const quiz = useCurrentQuiz();
const [formState, setFormState] = useState<"design" | "content">("design");
const [mobileVersion, setMobileVersion] = useState(false);
const [faviconUploding, setFaviconUploading] = useState<boolean>(false);
const [backgroundUploding, setBackgroundUploading] = useState<boolean>(false);
const [logoUploding, setLogoUploading] = useState<boolean>(false);
if (!quiz) return null;
@ -84,14 +88,20 @@ export default function StartPageSettings() {
const designType = quiz?.config?.startpageType;
const favIconDropZoneElement = (
const favIconDropZoneElement = faviconUploding ? (
<Skeleton sx={{ width: "48px", height: "48px", transform: "none" }} />
) : (
<FaviconDropZone
imageUrl={quiz.config.startpage.favIcon}
onImageUploadClick={async (file) => {
setFaviconUploading(true);
const resizedImage = await resizeFavIcon(file);
uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
await uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
quiz.config.startpage.favIcon = url;
});
setFaviconUploading(false);
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
@ -330,30 +340,47 @@ export default function StartPageSettings() {
>
Изображение
</Typography>
<DropZone
value={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.background.desktop}
originalImageUrl={
quiz.config.startpage.background.originalDesktop
}
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
quiz.config.startpage.background.originalDesktop = url;
});
}}
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.background.desktop = null;
});
}}
/>
{backgroundUploding ? (
<Skeleton
sx={{
width: "300px",
height: "120px",
transform: "none",
}}
/>
) : (
<DropZone
text={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.background.desktop}
originalImageUrl={
quiz.config.startpage.background.originalDesktop
}
onImageUploadClick={async (file) => {
setBackgroundUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
quiz.config.startpage.background.originalDesktop =
url;
});
setBackgroundUploading(false);
}}
onImageSaveClick={async (file) => {
setBackgroundUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
});
setBackgroundUploading(false);
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.background.desktop = null;
});
}}
/>
)}
</Box>
<ModalSizeImage />
@ -386,47 +413,68 @@ export default function StartPageSettings() {
</Tooltip>
)}
</Box>
<ButtonBase
component="label"
sx={{
justifyContent: "center",
height: "48px",
width: "48px",
display: "flex",
alignItems: "center",
my: "20px",
}}
>
<input
onChange={(event) => {
const file = event.target.files?.[0];
if (file) {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.video = url;
});
// setVideo(URL.createObjectURL(file));
}
}}
hidden
accept=".mp4"
multiple
type="file"
/>
<UploadBox
icon={<UploadIcon />}
{backgroundUploding ? (
<Skeleton
sx={{
height: "48px",
width: "48px",
height: "48px",
transform: "none",
margin: "20px 0",
}}
/>
</ButtonBase>
{quiz.config.startpage.background.video ? (
<video
src={quiz.config.startpage.background.video}
width="400"
controls
/>
) : null}
) : (
<>
<ButtonBase
component="label"
sx={{
justifyContent: "center",
height: "48px",
width: "48px",
display: "flex",
alignItems: "center",
my: "20px",
}}
>
<input
onChange={async (event) => {
setBackgroundUploading(true);
const file = event.target.files?.[0];
if (file) {
await uploadQuizImage(
quiz.id,
file,
(quiz, url) => {
quiz.config.startpage.background.video = url;
},
);
// setVideo(URL.createObjectURL(file));
}
setBackgroundUploading(false);
}}
hidden
accept=".mp4"
multiple
type="file"
/>
<UploadBox
icon={<UploadIcon />}
sx={{
height: "48px",
width: "48px",
}}
/>
</ButtonBase>
{quiz.config.startpage.background.video && (
<video
src={quiz.config.startpage.background.video}
width="400"
controls
/>
)}
</>
)}
</>
)}
{designType !== "centered" && (
@ -500,28 +548,44 @@ export default function StartPageSettings() {
>
Логотип
</Typography>
<DropZone
value={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
}}
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.logo = null;
});
}}
/>
{logoUploding ? (
<Skeleton
sx={{
width: "300px",
height: "120px",
transform: "none",
}}
/>
) : (
<DropZone
text={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={async (file) => {
setLogoUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
setLogoUploading(false);
}}
onImageSaveClick={async (file) => {
setLogoUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
setLogoUploading(false);
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.logo = null;
});
}}
/>
)}
</Box>
<Typography
@ -567,28 +631,44 @@ export default function StartPageSettings() {
>
Логотип
</Typography>
<DropZone
value={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
}}
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.logo = null;
});
}}
/>
{logoUploding ? (
<Skeleton
sx={{
width: "300px",
height: "120px",
transform: "none",
}}
/>
) : (
<DropZone
text={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={async (file) => {
setLogoUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
setLogoUploading(false);
}}
onImageSaveClick={async (file) => {
setLogoUploading(true);
await uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
setLogoUploading(false);
}}
onDeleteClick={() => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.logo = null;
});
}}
/>
)}
</Box>
<Typography

24
src/ui_kit/MediaSelectionAndDisplay.tsx
View File

@ -41,19 +41,17 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
async function handleImageUpload(file: File) {
setPictureUploading(true);
try {
const url = await uploadQuestionImage(
resultData.id,
quizQid,
file,
(question, url) => {
question.content.back = url;
question.content.originalBack = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
} catch {}
const url = await uploadQuestionImage(
resultData.id,
quizQid,
file,
(question, url) => {
question.content.back = url;
question.content.originalBack = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
setPictureUploading(false);
}