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

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

@ -582,22 +582,22 @@ export default function StartPageSettings() {
<DropZone
text={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.logo}
originalImageUrl={quiz.config.originalLogo}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url;
quiz.config.originalLogo = url;
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
}}
onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url;
quiz.config.startpage.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.logo = null;
quiz.config.startpage.logo = null;
});
}}
/>
@ -664,22 +664,22 @@ export default function StartPageSettings() {
<DropZone
text={"5 MB максимум"}
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.logo}
originalImageUrl={quiz.config.originalLogo}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url;
quiz.config.originalLogo = url;
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
}}
onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.logo = url;
quiz.config.startpage.logo = url;
});
}}
onDeleteClick={() => {
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 }: {
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined;
}) {
if (question.type === null) return null;
if (!question || question.type === null) return null;
switch (question.type) {
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 (
<FormControl fullWidth>
<FormLabel id="quiz-question-radio-group" data-cy="question-title">
{question.title}
</FormLabel>
<Box sx={{
display: "flex",
flexDirection: "column",
gap: 1,
}}>
<Typography>{question.title}</Typography>
<RadioGroup
aria-labelledby="quiz-question-radio-group"
value={value}
@ -66,6 +68,15 @@ export default function Variant({ question }: Props) {
/>
))}
</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 {
Box,
FormControl,
@ -86,14 +86,13 @@ export default function Varimg({ question }: Props) {
<Box
sx={{
border: "1px solid #E3E3E3",
maxWidth: "400px",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "8px",
}}
>
{currentVariant?.extendedText ? (
{currentVariant ?
currentVariant.extendedText ? (
<img
src={currentVariant.extendedText}
data-cy="variant-image"
@ -106,12 +105,23 @@ export default function Varimg({ question }: Props) {
}}
/>
) : (
<Typography p={2}>
{selectedVariantIndex === -1
? "Выберите вариант"
: "Картинка отсутствует"}
</Typography>
)}
<Typography p={2}>Картинка отсутствует</Typography>
) : question.content.back ? (
<img
src={question.content.back}
data-cy="variant-image"
alt="question variant"
style={{
width: "100%",
display: "block",
objectFit: "scale-down",
flexGrow: 1,
}}
/>
) : (
<Typography p={2}>Выберите вариант</Typography>
)
}
</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.desktop && (
quiz.config.startpage.logo && (
<img
src={quiz.config.startpage.background.desktop}
src={quiz.config.startpage.logo}
style={{
height: "30px",
maxWidth: "50px",