SQuiz/frontAnswerer
3
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

overtime

Browse Source
This commit is contained in:
Nastya 2025-10-23 14:40:18 +03:00
parent dac5356d1d
commit f2ac428bcb
10 changed files with 438 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -1,3 +1,4 @@
1.0.3 Добавлена функция отсчёта до конца жизни квиза
1.0.2 Страничка результатов способна показать историю и правильность ответов для балловго квиза
1.0.1 Отображение для баллового квиза на страничке результатов списка
1.0.0 Добавлены фичи "мультиответ", "перенос строки в своём ответе", "свой ответ", "плейсхолдер своего ответа"

213
lib/components/ViewPublicationPage/StartPageViewPublication/OverTime.tsx Normal file
View File

@ -0,0 +1,213 @@
import { Box, Typography, useTheme, SxProps, Theme } from "@mui/material";
import { useQuizStore } from "@stores/useQuizStore";
import moment from "moment";
import React from "react";
import { useTranslation } from "react-i18next";
type OverTimeProps = {
sx?: SxProps<Theme>;
};
export const OverTime = ({ sx }: OverTimeProps) => {
const theme = useTheme();
const { settings } = useQuizStore();
const { t } = useTranslation();
const [currentTime, setCurrentTime] = React.useState(moment());
// Реактивный таймер с useEffect
React.useEffect(() => {
const interval = setInterval(() => {
setCurrentTime(moment());
}, 1000);
return () => clearInterval(interval);
}, []);
// Проверяем, включен ли overTime
const overTimeConfig = settings?.cfg?.overTime;
const isEnabled = overTimeConfig?.enabled;
// Если не включен, не показываем карточку
if (!isEnabled) {
return null;
}
// Функция для расчета времени до окончания
const calculateTimeLeft = (now: moment.Moment) => {
// Для тестирования: добавляем 2 часа к текущему времени
const testEndsAt = moment().add(2, "hours");
const endsAt = overTimeConfig?.endsAt ? moment(overTimeConfig.endsAt) : testEndsAt;
if (endsAt.isBefore(now) || endsAt.isSame(now)) {
return { days: 0, hours: 0, minutes: 0, seconds: 0 };
}
const duration = moment.duration(endsAt.diff(now));
return {
days: Math.floor(duration.asDays()),
hours: duration.hours(),
minutes: duration.minutes(),
seconds: duration.seconds(),
};
};
const { days, hours, minutes, seconds } = calculateTimeLeft(currentTime);
return (
<Box
sx={{
width: "225px",
backgroundColor: theme.palette.paperBackground,
boxShadow: "1px 1px 4px 0px rgba(51, 54, 71, 0.29)",
borderRadius: "8px",
p: "10px",
...sx,
}}
>
<Typography
sx={{
fontSize: "12px",
color: theme.palette.paperText,
textAlign: "center",
}}
>
{overTimeConfig?.description || t("Quiz will become unavailable in")}
</Typography>
<Box
sx={{
display: "inline-flex",
justifyContent: "space-around",
alignItems: "center",
width: "100%",
mt: "8px",
color: theme.palette.paperSecondaryText,
}}
>
<Box
sx={{
bgcolor: theme.palette.paperBlockBackground,
width: "42px",
height: "45px",
display: "flex",
flexDirection: "column",
alignItems: "center",
borderRadius: "8px",
justifyContent: "center",
}}
>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.paperText,
lineHeight: 1.2,
}}
>
{days}
</Typography>
<Typography
sx={{
fontSize: "10px",
lineHeight: 1.2,
}}
>
{t("days")}
</Typography>
</Box>
:
<Box
sx={{
bgcolor: theme.palette.paperBlockBackground,
width: "42px",
height: "45px",
display: "flex",
flexDirection: "column",
alignItems: "center",
borderRadius: "8px",
justifyContent: "center",
}}
>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.paperText,
lineHeight: 1.2,
}}
>
{hours}
</Typography>
<Typography
sx={{
fontSize: "10px",
lineHeight: 1.2,
}}
>
{t("hours")}
</Typography>
</Box>
:
<Box
sx={{
bgcolor: theme.palette.paperBlockBackground,
width: "42px",
height: "45px",
display: "flex",
flexDirection: "column",
alignItems: "center",
borderRadius: "8px",
justifyContent: "center",
}}
>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.paperText,
lineHeight: 1.2,
}}
>
{minutes}
</Typography>
<Typography
sx={{
fontSize: "10px",
lineHeight: 1.2,
}}
>
{t("minutes")}
</Typography>
</Box>
:
<Box
sx={{
bgcolor: theme.palette.paperBlockBackground,
width: "42px",
height: "45px",
display: "flex",
flexDirection: "column",
alignItems: "center",
borderRadius: "8px",
justifyContent: "center",
}}
>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.paperText,
lineHeight: 1.2,
}}
>
{seconds}
</Typography>
<Typography
sx={{
fontSize: "10px",
lineHeight: 1.2,
}}
>
{t("seconds")}
</Typography>
</Box>
</Box>
</Box>
);
};

92
lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
View File

@ -18,6 +18,9 @@ import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoa
import QuizVideo from "@/ui_kit/VideoIframe/VideoIframe";
import { isProduction } from "@/utils/defineDomain";
import { useEffect, useState } from "react";
import moment from "moment";
import { OverTime } from "./OverTime";
export const StartPageViewPublication = () => {
const theme = useTheme();
@ -32,6 +35,17 @@ export const StartPageViewPublication = () => {
const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);
const [currentTime, setCurrentTime] = useState(moment());
// Реактивный таймер для обновления времени
useEffect(() => {
const interval = setInterval(() => {
setCurrentTime(moment());
}, 1000);
return () => clearInterval(interval);
}, []);
const handleCopyNumber = () => {
navigator.clipboard.writeText(settings.cfg.info.phonenumber);
@ -39,15 +53,6 @@ export const StartPageViewPublication = () => {
yandexMetrics.phoneNumberOpened();
};
console.log("------------------------------------------------");
console.log("Background type:", settings.cfg.startpage.background.type);
console.log("Is image type:", settings.cfg.startpage.background.type === "image");
console.log("Is video type:", settings.cfg.startpage.background.type === "video");
console.log("Video URL:", settings.cfg.startpage.background.video);
console.log("Desktop background:", settings.cfg.startpage.background.desktop);
console.log("Startpage type:", settings.cfg.startpageType);
console.log("------------------------------------------------");
const background =
settings.cfg.startpage.background.type === "image" ? (
<img
@ -96,6 +101,12 @@ export const StartPageViewPublication = () => {
<Box
sx={{
margin: settings.cfg.startpageType === "centered" ? "0 auto" : null,
display:
isMobile && settings.cfg.startpage.position === "center" && settings.cfg.startpageType === "expanded"
? "flex"
: "block",
flexDirection: "column",
alignItems: "center",
}}
>
<Box
@ -146,6 +157,8 @@ export const StartPageViewPublication = () => {
{settings.cfg.info.orgname}
</Typography>
</Box>
{((settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position !== "center") ||
(isMobile && settings.cfg.startpageType === "expanded")) && <OverTime />}
</Box>
);
@ -159,13 +172,6 @@ export const StartPageViewPublication = () => {
alignItems: "center",
gap: "7px",
textDecoration: "none",
marginLeft:
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center" &&
!isTablet &&
!isMobile
? "61px"
: undefined,
}}
>
{settings.cfg.startpageType === "expanded" ? (
@ -182,6 +188,14 @@ export const StartPageViewPublication = () => {
(question) => question.type !== null && question.type !== "result"
).length;
// Проверяем, истекло ли время для overTime
const overTimeConfig = settings?.cfg?.overTime;
const isOverTimeEnabled = overTimeConfig?.enabled;
const isTimeExpired =
isOverTimeEnabled && overTimeConfig?.endsAt
? currentTime.isAfter(moment(overTimeConfig.endsAt)) || currentTime.isSame(moment(overTimeConfig.endsAt))
: false;
const onQuizStart = () => {
setCurrentQuizStep("question");
@ -289,7 +303,7 @@ export const StartPageViewPublication = () => {
<Box width={settings.cfg.startpageType === "standard" ? "100%" : "auto"}>
<Button
variant="contained"
disabled={realQuestionsCount === 0}
disabled={realQuestionsCount === 0 || isTimeExpired}
sx={{
fontSize: "18px",
padding: "10px 20px",
@ -304,8 +318,13 @@ export const StartPageViewPublication = () => {
</Box>
</Box>
<Box
id="here"
sx={{
display: "flex",
display:
settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile
? "grid"
: "flex",
gridTemplateColumns: "1fr auto 1fr",
flexGrow: settings.cfg.startpageType === "centered" ? (isMobile ? 0 : 1) : 0,
gap: isMobile ? "30px" : "40px",
alignItems: "flex-end",
@ -345,8 +364,18 @@ export const StartPageViewPublication = () => {
settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"
? "2"
: "0",
justifySelf: "end",
}}
>
{((isMobile && settings.cfg.startpageType === "centered") ||
settings.cfg.startpageType === "standard") && (
<OverTime
sx={{
m: isMobile && settings.cfg.startpageType === "centered" ? "54px 0 20px" : "0",
ml: settings.cfg.startpageType === "standard" && !isMobile ? "100%" : "0",
}}
/>
)}
{settings.cfg.info.site && (
<ButtonBase
onClick={onSiteClick}
@ -478,7 +507,25 @@ export const StartPageViewPublication = () => {
</Typography>
</Box>
{show_badge && PenaBadge}
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "16px",
alignItems:
isMobile ||
(settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center")
? "center"
: "end",
}}
>
{((!isMobile && settings.cfg.startpageType === "centered") ||
(!isMobile &&
settings.cfg.startpageType === "expanded" &&
settings.cfg.startpage.position === "center")) && <OverTime />}
{show_badge && PenaBadge}
</Box>
</Box>
</>
}
@ -489,3 +536,10 @@ export const StartPageViewPublication = () => {
</Paper>
);
};
/*
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
*/

5
lib/model/settingsData.ts
View File

@ -123,6 +123,11 @@ export interface QuizConfig {
yandexMetricsNumber?: number;
vkMetricsNumber?: number;
backBlocked?: boolean;
overTime?: {
enabled: boolean;
endsAt: number;
description: string;
};
}
export type FormContactFieldName = "name" | "email" | "phone" | "text" | "address";

105
lib/utils/themes/Publication/themePublication.ts
View File

@ -4,6 +4,23 @@ import themePublic from "./genericPublication";
import type { Theme } from "@mui/material";
import type { QuizTheme } from "@model/settingsData";
// Расширение интерфейса палитры Material-UI для добавления кастомных полей
declare module "@mui/material/styles" {
interface Palette {
paperBackground: string;
paperText: string;
paperSecondaryText: string;
paperBlockBackground: string;
}
interface PaletteOptions {
paperBackground?: string;
paperText?: string;
paperSecondaryText?: string;
paperBlockBackground?: string;
}
}
const StandardTheme = createTheme({
...themePublic,
palette: {
@ -22,6 +39,10 @@ const StandardTheme = createTheme({
background: {
default: "#FFFFFF",
},
paperBackground: "#F2F3F7",
paperText: "#333647",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#FFFFFF",
},
});
@ -43,6 +64,10 @@ const StandardDarkTheme = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -64,6 +89,10 @@ const PinkTheme = createTheme({
background: {
default: "#FFF9FC",
},
paperBackground: "#F2F3F7",
paperText: "#333647",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#FFFFFF",
},
});
@ -85,6 +114,10 @@ const PinkDarkTheme = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -106,6 +139,10 @@ const BlackWhiteTheme = createTheme({
background: {
default: "#FFFFFF",
},
paperBackground: "#F2F3F7",
paperText: "#333647",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#FFFFFF",
},
});
@ -127,6 +164,10 @@ const OliveTheme = createTheme({
background: {
default: "#F9FBF1",
},
paperBackground: "#F2F3F7",
paperText: "#333647",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#FFFFFF",
},
});
@ -148,6 +189,10 @@ const PurpleTheme = createTheme({
background: {
default: "#FBF8FF",
},
paperBackground: "#F2F3F7",
paperText: "#333647",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#FFFFFF",
},
});
@ -169,6 +214,10 @@ const YellowTheme = createTheme({
background: {
default: "#FFFCF6",
},
paperBackground: "#F2F3F7",
paperText: "#333647",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#FFFFFF",
},
});
@ -190,6 +239,10 @@ const GoldDarkTheme = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -211,6 +264,10 @@ const BlueTheme = createTheme({
background: {
default: "#F5F7FF",
},
paperBackground: "#F2F3F7",
paperText: "#333647",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#FFFFFF",
},
});
@ -232,6 +289,10 @@ const BlueDarkTheme = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -253,6 +314,10 @@ const crutch_FurnitureABC = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -274,6 +339,10 @@ const Design1 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -295,6 +364,10 @@ const Design2 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -316,6 +389,10 @@ const Design3 = createTheme({
background: {
default: "#F5F7FF",
},
paperBackground: "#F2F3F7",
paperText: "#333647",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#FFFFFF",
},
});
@ -337,6 +414,10 @@ const Design4 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -358,6 +439,10 @@ const Design5 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -379,6 +464,10 @@ const Design6 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -400,6 +489,10 @@ const Design7 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -421,6 +514,10 @@ const Design8 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -442,6 +539,10 @@ const Design9 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});
@ -463,6 +564,10 @@ const Design10 = createTheme({
background: {
default: "#333647",
},
paperBackground: "#262835",
paperText: "#ffffff",
paperSecondaryText: "#9A9AAF",
paperBlockBackground: "#31333f",
},
});

2
lib/utils/themes/generic.ts
View File

@ -1,6 +1,8 @@
import { createTheme } from "@mui/material";
import { fontFaces } from "./fontFace";
import "@mui/material/styles";
declare module "@mui/material/Button" {
interface ButtonPropsVariantOverrides {
main: true;

8
public/locales/en.json
View File

@ -56,5 +56,11 @@
"Step": "Step",
"questions are not ready yet": "There are no questions for the audience yet. Please wait",
"Add your image": "Add your image",
"select emoji": "select emoji"
"select emoji": "select emoji",
"quiz time expired": "Quiz time has expired",
"Quiz will become unavailable in": "Quiz will become unavailable in",
"days": "days",
"hours": "hours",
"minutes": "min.",
"seconds": "sec."
}

8
public/locales/ru.json
View File

@ -59,5 +59,11 @@
"select emoji": "выберите смайлик",
"Please complete the phone number": "Пожалуйста, завершите номер телефона",
"Please enter a valid email": "Пожалуйста, введите корректную почту",
"Please enter a valid phone number": "Пожалуйста, введите корректный номер телефона"
"Please enter a valid phone number": "Пожалуйста, введите корректный номер телефона",
"quiz time expired": "Время квиза истекло",
"Quiz will become unavailable in": "Квиз станет недоступен через",
"days": "дней",
"hours": "часов",
"minutes": "мин.",
"seconds": "сек."
}

8
public/locales/uz.json
View File

@ -56,5 +56,11 @@
"Step": "Qadam",
"questions are not ready yet": "Tomoshabinlar uchun hozircha savollar yo'q. Iltimos kuting",
"Add your image": "Rasmingizni qo'shing",
"select emoji": "emoji tanlang"
"select emoji": "emoji tanlang",
"quiz time expired": "Test vaqti tugadi",
"Quiz will become unavailable in": "Test quyidagi vaqtda mavjud bo'lmaydi",
"days": "kun",
"hours": "soat",
"minutes": "daq.",
"seconds": "son."
}

18
src/i18n/i18nWidget.ts
View File

@ -73,6 +73,12 @@ const r = {
"Add your image": "Добавьте своё изображение",
"select emoji": "выберите смайлик",
"Please complete the phone number": "Пожалуйста, заполните номер телефона до конца",
"quiz time expired": "Время квиза истекло",
"Quiz will become unavailable in": "Квиз станет недоступен через",
days: "дней",
hours: "часов",
minutes: "мин.",
seconds: "сек.",
"": "", // Пустой ключ для fallback
},
},
@ -137,6 +143,12 @@ const r = {
"Add your image": "Add your image",
"select emoji": "select emoji",
"Please complete the phone number": "Please complete the phone number",
"quiz time expired": "Quiz time has expired",
"Quiz will become unavailable in": "Quiz will become unavailable in",
days: "days",
hours: "hours",
minutes: "min.",
seconds: "sec.",
"": "", // Пустой ключ для fallback
},
},
@ -201,6 +213,12 @@ const r = {
"Add your image": "Rasmingizni qo'shing",
"select emoji": "emoji tanlang",
"Please complete the phone number": "Iltimos, telefon raqamini to'liq kiriting",
"quiz time expired": "Test vaqti tugadi",
"Quiz will become unavailable in": "Test quyidagi vaqtda mavjud bo'lmaydi",
days: "kun",
hours: "soat",
minutes: "daq.",
seconds: "son.",
"": "", // Пустой ключ для fallback
},
},