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

add images to previews

Browse Source
This commit is contained in:
nflnkr 2023-12-06 19:41:17 +03:00
parent 27a76b3011
commit 9e92209088
6 changed files with 197 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/model/quizSettings.ts
View File

@ -29,8 +29,6 @@ export type QuizResultsType = true | null;
export interface QuizConfig { export interface QuizConfig {
type: QuizType; type: QuizType;
logo: string | null;
originalLogo: string | null;
noStartPage: boolean; noStartPage: boolean;
startpageType: QuizStartpageType; startpageType: QuizStartpageType;
results: QuizResultsType; results: QuizResultsType;
@ -41,6 +39,8 @@ export interface QuizConfig {
position: QuizStartpageAlignType; position: QuizStartpageAlignType;
favIcon: string | null; favIcon: string | null;
originalFavIcon: string | null; originalFavIcon: string | null;
logo: string | null;
originalLogo: string | null;
background: { background: {
type: null | "image" | "video"; type: null | "image" | "video";
desktop: string | null; desktop: string | null;
@ -63,8 +63,6 @@ export interface QuizConfig {
export const defaultQuizConfig: QuizConfig = { export const defaultQuizConfig: QuizConfig = {
type: null, type: null,
logo: null,
originalLogo: null,
noStartPage: false, noStartPage: false,
startpageType: null, startpageType: null,
results: null, results: null,
@ -75,6 +73,8 @@ export const defaultQuizConfig: QuizConfig = {
position: "left", position: "left",
favIcon: null, favIcon: null,
originalFavIcon: null, originalFavIcon: null,
logo: null,
originalLogo: null,
background: { background: {
type: null, type: null,
desktop: null, desktop: null,

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

@ -582,22 +582,22 @@ export default function StartPageSettings() {
<DropZone <DropZone
text={"5 MB максимум"} text={"5 MB максимум"}
sx={{ maxWidth: "300px" }} sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.logo} imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.originalLogo} originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={file => { onImageUploadClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => { uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url; quiz.config.startpage.logo = url;
quiz.config.originalLogo = url; quiz.config.startpage.originalLogo = url;
}); });
}} }}
onImageSaveClick={file => { onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => { uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url; quiz.config.startpage.logo = url;
}); });
}} }}
onDeleteClick={() => { onDeleteClick={() => {
updateQuiz(quiz.id, quiz => { updateQuiz(quiz.id, quiz => {
quiz.config.logo = null; quiz.config.startpage.logo = null;
}); });
}} }}
/> />
@ -664,22 +664,22 @@ export default function StartPageSettings() {
<DropZone <DropZone
text={"5 MB максимум"} text={"5 MB максимум"}
sx={{ maxWidth: "300px" }} sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.logo} imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.originalLogo} originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={file => { onImageUploadClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => { uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url; quiz.config.startpage.logo = url;
quiz.config.originalLogo = url; quiz.config.startpage.originalLogo = url;
}); });
}} }}
onImageSaveClick={file => { onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => { uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url; quiz.config.startpage.logo = url;
}); });
}} }}
onDeleteClick={() => { onDeleteClick={() => {
updateQuiz(quiz.id, quiz => { updateQuiz(quiz.id, quiz => {
quiz.config.logo = null; quiz.config.startpage.logo = null;
}); });
}} }}
/> />

4
src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
View File

@ -219,9 +219,9 @@ export default function QuizPreviewLayout() {
} }
function QuestionPreviewComponent({ question }: { function QuestionPreviewComponent({ question }: {
question: AnyTypedQuizQuestion | UntypedQuizQuestion; question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined;
}) { }) {
if (question.type === null) return null; if (!question || question.type === null) return null;
switch (question.type) { switch (question.type) {
case "variant": return <Variant question={question} />; case "variant": return <Variant question={question} />;

21
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Variant.tsx
View File

@ -26,10 +26,12 @@ export default function Variant({ question }: Props) {
}; };
return ( return (
<FormControl fullWidth> <Box sx={{
<FormLabel id="quiz-question-radio-group" data-cy="question-title"> display: "flex",
{question.title} flexDirection: "column",
</FormLabel> gap: 1,
}}>
<Typography>{question.title}</Typography>
<RadioGroup <RadioGroup
aria-labelledby="quiz-question-radio-group" aria-labelledby="quiz-question-radio-group"
value={value} value={value}
@ -66,6 +68,15 @@ export default function Variant({ question }: Props) {
/> />
))} ))}
</RadioGroup> </RadioGroup>
</FormControl> <img
src={question.content.back}
style={{
display: "block",
objectFit: "scale-down",
alignSelf: "start",
maxWidth: "100%",
}}
/>
</Box>
); );
} }

30
src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Varimg.tsx
View File

@ -1,4 +1,4 @@
import { useState, ChangeEvent } from "react"; import { useState, ChangeEvent, useEffect } from "react";
import { import {
Box, Box,
FormControl, FormControl,
@ -86,14 +86,13 @@ export default function Varimg({ question }: Props) {
<Box <Box
sx={{ sx={{
border: "1px solid #E3E3E3", border: "1px solid #E3E3E3",
maxWidth: "400px",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
borderRadius: "8px",
}} }}
> >
{currentVariant?.extendedText ? ( {currentVariant ?
currentVariant.extendedText ? (
<img <img
src={currentVariant.extendedText} src={currentVariant.extendedText}
data-cy="variant-image" data-cy="variant-image"
@ -106,12 +105,23 @@ export default function Varimg({ question }: Props) {
}} }}
/> />
) : ( ) : (
<Typography p={2}> <Typography p={2}>Картинка отсутствует</Typography>
{selectedVariantIndex === -1 ) : question.content.back ? (
? "Выберите вариант" <img
: "Картинка отсутствует"} src={question.content.back}
</Typography> data-cy="variant-image"
)} alt="question variant"
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
) : (
<Typography p={2}>Выберите вариант</Typography>
)
}
</Box> </Box>
</Box> </Box>
); );

4
src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
View File

@ -53,9 +53,9 @@ export default function QuizPreviewLayout() {
}} }}
> >
{quiz.config.startpage.background.type === "image" && {quiz.config.startpage.background.type === "image" &&
quiz.config.startpage.background.desktop && ( quiz.config.startpage.logo && (
<img <img
src={quiz.config.startpage.background.desktop} src={quiz.config.startpage.logo}
style={{ style={{
height: "30px", height: "30px",
maxWidth: "50px", maxWidth: "50px",