убрала удвоение шапки и сайдбара(нужна доработка)
This commit is contained in:
parent
ea4c238813
commit
f1abade62b
41
src/App.tsx
41
src/App.tsx
@ -101,20 +101,41 @@ export function useUserAccountFetcher({
|
|||||||
dayjs.locale("ru");
|
dayjs.locale("ru");
|
||||||
|
|
||||||
const routeslink = [
|
const routeslink = [
|
||||||
{ path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
|
|
||||||
{
|
{
|
||||||
path: "/questions/:quizId",
|
path: "/list",
|
||||||
page: <QuestionsPage />,
|
page: <MyQuizzesFull />,
|
||||||
|
header: false,
|
||||||
|
sidebar: false,
|
||||||
|
footer: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/tariffs",
|
||||||
|
page: <Tariffs />,
|
||||||
|
header: true,
|
||||||
|
sidebar: false,
|
||||||
|
footer: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/edit",
|
||||||
|
page: <EditPage />,
|
||||||
header: true,
|
header: true,
|
||||||
sidebar: true,
|
sidebar: true,
|
||||||
|
footer: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/view",
|
||||||
|
page: <ViewPage />,
|
||||||
|
header: false,
|
||||||
|
sidebar: false,
|
||||||
|
footer: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/design",
|
||||||
|
page: <DesignPage />,
|
||||||
|
header: true,
|
||||||
|
sidebar: true,
|
||||||
|
footer: true,
|
||||||
},
|
},
|
||||||
{ path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
|
|
||||||
{ path: "/result", page: <Result />, header: true, sidebar: true },
|
|
||||||
{ path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
|
|
||||||
{ path: "/tariffs", page: <Tariffs />, header: true, sidebar: false },
|
|
||||||
{ path: "/edit", page: <EditPage />, header: true, sidebar: true },
|
|
||||||
{ path: "/view", page: <ViewPage />, header: false, sidebar: false },
|
|
||||||
{ path: "/design", page: <DesignPage />, header: true, sidebar: true },
|
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
|
@ -82,13 +82,13 @@ export const DesignPage = () => {
|
|||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header setMobileSidebar={setMobileSidebar} />
|
{/*<Header setMobileSidebar={setMobileSidebar} />*/}
|
||||||
<Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
|
<Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
|
||||||
{isMobile ? (
|
{/*{isMobile ? (*/}
|
||||||
<SidebarMobile open={mobileSidebar} changePage={changePage} />
|
{/* <SidebarMobile open={mobileSidebar} changePage={changePage} />*/}
|
||||||
) : (
|
{/*) : (*/}
|
||||||
<Sidebar changePage={changePage} />
|
{/* <Sidebar changePage={changePage} />*/}
|
||||||
)}
|
{/*)}*/}
|
||||||
<DesignFilling />
|
<DesignFilling />
|
||||||
{createPortal(<QuizPreview />, document.body)}
|
{createPortal(<QuizPreview />, document.body)}
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -4,13 +4,13 @@ import { useEffect, useState } from "react";
|
|||||||
import type { GetTariffsResponse } from "@model/tariff";
|
import type { GetTariffsResponse } from "@model/tariff";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
Modal,
|
Modal,
|
||||||
Paper,
|
Paper,
|
||||||
Typography,
|
Typography,
|
||||||
useMediaQuery,
|
useMediaQuery,
|
||||||
useTheme,
|
useTheme,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { enqueueSnackbar } from "notistack";
|
import { enqueueSnackbar } from "notistack";
|
||||||
import { Tariff, getMessageFromFetchError } from "@frontend/kitui";
|
import { Tariff, getMessageFromFetchError } from "@frontend/kitui";
|
||||||
@ -18,184 +18,191 @@ import { withErrorBoundary } from "react-error-boundary";
|
|||||||
import { createTariffElements } from "./tariffsUtils/createTariffElements";
|
import { createTariffElements } from "./tariffsUtils/createTariffElements";
|
||||||
|
|
||||||
function TariffPage() {
|
function TariffPage() {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const [tariffs, setTariffs] = useState();
|
const [tariffs, setTariffs] = useState();
|
||||||
const [user, setUser] = useState();
|
const [user, setUser] = useState();
|
||||||
const [discounts, setDiscounts] = useState();
|
const [discounts, setDiscounts] = useState();
|
||||||
const [cartTariffMap, setCartTariffMap] = useState();
|
const [cartTariffMap, setCartTariffMap] = useState();
|
||||||
const [openModal, setOpenModal] = useState({});
|
const [openModal, setOpenModal] = useState({});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const get = async () => {
|
const get = async () => {
|
||||||
const user = await makeRequest({
|
const user = await makeRequest({
|
||||||
method: "GET",
|
method: "GET",
|
||||||
url: "https://squiz.pena.digital/customer/account",
|
url: "https://squiz.pena.digital/customer/account",
|
||||||
});
|
});
|
||||||
const tariffs = await makeRequest<never, GetTariffsResponse>({
|
const tariffs = await makeRequest<never, GetTariffsResponse>({
|
||||||
method: "GET",
|
method: "GET",
|
||||||
url: "https://squiz.pena.digital/strator/tariff?page=1&limit=100",
|
url: "https://squiz.pena.digital/strator/tariff?page=1&limit=100",
|
||||||
});
|
});
|
||||||
const discounts = await makeRequest({
|
const discounts = await makeRequest({
|
||||||
method: "GET",
|
method: "GET",
|
||||||
url: "https://squiz.pena.digital/price/discounts",
|
url: "https://squiz.pena.digital/price/discounts",
|
||||||
});
|
});
|
||||||
setUser(user);
|
setUser(user);
|
||||||
setTariffs(tariffs);
|
setTariffs(tariffs);
|
||||||
setDiscounts(discounts.Discounts);
|
setDiscounts(discounts.Discounts);
|
||||||
};
|
|
||||||
get();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (!user || !tariffs || !discounts) return <LoadingPage />;
|
|
||||||
|
|
||||||
console.log("user ", user);
|
|
||||||
console.log("tariffs ", tariffs);
|
|
||||||
console.log("discounts ", discounts);
|
|
||||||
|
|
||||||
const openModalHC = (tariffInfo: any) => setOpenModal(tariffInfo);
|
|
||||||
const tryBuy = async ({ id, price }: { id: string, price: number }) => {
|
|
||||||
openModalHC({})
|
|
||||||
//Если в корзине что-то было - выкладываем содержимое и запоминаем чо там лежало
|
|
||||||
if (user.cart.length > 0) {
|
|
||||||
outCart(user.cart)
|
|
||||||
}
|
|
||||||
//Если нам хватает денежек - покупаем тариф
|
|
||||||
if (price <= user.wallet.cash) {
|
|
||||||
try {
|
|
||||||
await makeRequest({
|
|
||||||
method: "POST",
|
|
||||||
url: "https://suiz.pena.digital/customer/cart/pay"
|
|
||||||
})
|
|
||||||
} catch (e) {
|
|
||||||
enqueueSnackbar("Произошла ошибка. Попробуйте позже")
|
|
||||||
}
|
|
||||||
//Развращаем товары в корзину
|
|
||||||
inCart()
|
|
||||||
} else {
|
|
||||||
//Деняк не хватило
|
|
||||||
navigate("https://hub.pena.digital/wallet?action=squizpay")
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
get();
|
||||||
|
}, []);
|
||||||
|
|
||||||
const purchasesAmount = user?.wallet.purchasesAmount ?? 0;
|
if (!user || !tariffs || !discounts) return <LoadingPage />;
|
||||||
const isUserNko = user?.status === "nko";
|
|
||||||
const filteredTariffs = tariffs.tariffs.filter((tariff) => {
|
|
||||||
return (
|
|
||||||
tariff.privileges[0].serviceKey === "squiz" &&
|
|
||||||
!tariff.isDeleted &&
|
|
||||||
!tariff.isCustom
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
console.log("user ", user);
|
||||||
|
console.log("tariffs ", tariffs);
|
||||||
|
console.log("discounts ", discounts);
|
||||||
|
|
||||||
|
const openModalHC = (tariffInfo: any) => setOpenModal(tariffInfo);
|
||||||
|
const tryBuy = async ({ id, price }: { id: string; price: number }) => {
|
||||||
|
openModalHC({});
|
||||||
|
//Если в корзине что-то было - выкладываем содержимое и запоминаем чо там лежало
|
||||||
|
if (user.cart.length > 0) {
|
||||||
|
outCart(user.cart);
|
||||||
|
}
|
||||||
|
//Если нам хватает денежек - покупаем тариф
|
||||||
|
if (price <= user.wallet.cash) {
|
||||||
|
try {
|
||||||
|
await makeRequest({
|
||||||
|
method: "POST",
|
||||||
|
url: "https://suiz.pena.digital/customer/cart/pay",
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
enqueueSnackbar("Произошла ошибка. Попробуйте позже");
|
||||||
|
}
|
||||||
|
//Развращаем товары в корзину
|
||||||
|
inCart();
|
||||||
|
} else {
|
||||||
|
//Деняк не хватило
|
||||||
|
navigate("https://hub.pena.digital/wallet?action=squizpay");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const purchasesAmount = user?.wallet.purchasesAmount ?? 0;
|
||||||
|
const isUserNko = user?.status === "nko";
|
||||||
|
const filteredTariffs = tariffs.tariffs.filter((tariff) => {
|
||||||
return (
|
return (
|
||||||
<>
|
tariff.privileges[0].serviceKey === "squiz" &&
|
||||||
<Box
|
!tariff.isDeleted &&
|
||||||
sx={{
|
!tariff.isCustom
|
||||||
justifyContent: "left",
|
|
||||||
mt: "40px",
|
|
||||||
mb: "30px",
|
|
||||||
display: "grid",
|
|
||||||
gap: "40px",
|
|
||||||
gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${isTablet ? "436px" : "360px"
|
|
||||||
}))`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{createTariffElements(
|
|
||||||
filteredTariffs,
|
|
||||||
true,
|
|
||||||
user,
|
|
||||||
discounts,
|
|
||||||
openModalHC,
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
<Modal
|
|
||||||
open={Object.values(openModal).length > 0}
|
|
||||||
onClose={() => setOpenModal({})}
|
|
||||||
>
|
|
||||||
<Paper
|
|
||||||
sx={{
|
|
||||||
position: "absolute" as "absolute",
|
|
||||||
top: "50%",
|
|
||||||
left: "50%",
|
|
||||||
transform: "translate(-50%, -50%)",
|
|
||||||
boxShadow: 24,
|
|
||||||
p: 4,
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
flexDirection: "column"
|
|
||||||
}}>
|
|
||||||
<Typography id="modal-modal-title" variant="h6" component="h2" mb="20px">
|
|
||||||
Вы подтверждаете платёж в сумму {openModal.price} ₽
|
|
||||||
</Typography>
|
|
||||||
<Button variant="contained" onClick={() => tryBuy(openModal)}>купить</Button>
|
|
||||||
</Paper>
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
justifyContent: "left",
|
||||||
|
mt: "40px",
|
||||||
|
mb: "30px",
|
||||||
|
display: "grid",
|
||||||
|
gap: "40px",
|
||||||
|
gridTemplateColumns: `repeat(auto-fit, minmax(300px, ${
|
||||||
|
isTablet ? "436px" : "360px"
|
||||||
|
}))`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{createTariffElements(
|
||||||
|
filteredTariffs,
|
||||||
|
true,
|
||||||
|
user,
|
||||||
|
discounts,
|
||||||
|
openModalHC,
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Modal
|
||||||
|
open={Object.values(openModal).length > 0}
|
||||||
|
onClose={() => setOpenModal({})}
|
||||||
|
>
|
||||||
|
<Paper
|
||||||
|
sx={{
|
||||||
|
position: "absolute" as "absolute",
|
||||||
|
top: "50%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translate(-50%, -50%)",
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
flexDirection: "column",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
id="modal-modal-title"
|
||||||
|
variant="h6"
|
||||||
|
component="h2"
|
||||||
|
mb="20px"
|
||||||
|
>
|
||||||
|
Вы подтверждаете платёж в сумму {openModal.price} ₽
|
||||||
|
</Typography>
|
||||||
|
<Button variant="contained" onClick={() => tryBuy(openModal)}>
|
||||||
|
купить
|
||||||
|
</Button>
|
||||||
|
</Paper>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default withErrorBoundary(TariffPage, {
|
export default withErrorBoundary(TariffPage, {
|
||||||
fallback: (
|
fallback: (
|
||||||
<Typography mt="8px" textAlign="center">
|
<Typography mt="8px" textAlign="center">
|
||||||
Ошибка загрузки тарифов
|
Ошибка загрузки тарифов
|
||||||
</Typography>
|
</Typography>
|
||||||
),
|
),
|
||||||
onError: () => { },
|
onError: () => {},
|
||||||
});
|
});
|
||||||
|
|
||||||
const LoadingPage = () => (
|
const LoadingPage = () => (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
height: "100%",
|
height: "100%",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography sx={{ textAlign: "center" }}>
|
<Typography sx={{ textAlign: "center" }}>
|
||||||
{"Подождите, пожалуйста, идёт загрузка :)"}
|
{"Подождите, пожалуйста, идёт загрузка :)"}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
||||||
const inCart = () => {
|
const inCart = () => {
|
||||||
let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]")
|
let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]");
|
||||||
saveCart.forEach(async (id: string) => {
|
saveCart.forEach(async (id: string) => {
|
||||||
try {
|
try {
|
||||||
await makeRequest({
|
await makeRequest({
|
||||||
method: "PATCH",
|
method: "PATCH",
|
||||||
url: `https://hub.pena.digital/customer/cart?id=${id}`
|
url: `https://hub.pena.digital/customer/cart?id=${id}`,
|
||||||
})
|
});
|
||||||
|
|
||||||
let index = saveCart.indexOf('green');
|
let index = saveCart.indexOf("green");
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
saveCart.splice(index, 1);
|
saveCart.splice(index, 1);
|
||||||
}
|
}
|
||||||
localStorage.setItem("saveCart", JSON.stringify(saveCart))
|
localStorage.setItem("saveCart", JSON.stringify(saveCart));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log("Я не смог добавить тариф в корзину :( " + id)
|
console.log("Я не смог добавить тариф в корзину :( " + id);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
const outCart = (cart: string[]) => {
|
const outCart = (cart: string[]) => {
|
||||||
//Сделаем муторно и подольше, зато при прерывании сессии данные потеряются минимально
|
//Сделаем муторно и подольше, зато при прерывании сессии данные потеряются минимально
|
||||||
cart.forEach(async (id: string) => {
|
cart.forEach(async (id: string) => {
|
||||||
try {
|
try {
|
||||||
await makeRequest({
|
await makeRequest({
|
||||||
method: "DELETE",
|
method: "DELETE",
|
||||||
url: `https://suiz.pena.digital/customer/cart?id=${id}`
|
url: `https://suiz.pena.digital/customer/cart?id=${id}`,
|
||||||
})
|
});
|
||||||
let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]")
|
let saveCart = JSON.parse(localStorage.getItem("saveCart") || "[]");
|
||||||
saveCart = saveCart.push(id)
|
saveCart = saveCart.push(id);
|
||||||
localStorage.setItem("saveCart", JSON.stringify(saveCart))
|
localStorage.setItem("saveCart", JSON.stringify(saveCart));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log("Я не смог удалить из корзины тариф :(")
|
console.log("Я не смог удалить из корзины тариф :(");
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
|
@ -46,7 +46,8 @@ export const createTariffElements = (
|
|||||||
}
|
}
|
||||||
buttonProps={{
|
buttonProps={{
|
||||||
text: "Выбрать",
|
text: "Выбрать",
|
||||||
onClick: () => onclick({id: tariff._id, price: priceBeforeDiscounts / 100}),
|
onClick: () =>
|
||||||
|
onclick({ id: tariff._id, price: priceBeforeDiscounts / 100 }),
|
||||||
}}
|
}}
|
||||||
headerText={tariff.name}
|
headerText={tariff.name}
|
||||||
text={tariff.privileges.map((p) => `${p.name} - ${p.amount}`)}
|
text={tariff.privileges.map((p) => `${p.name} - ${p.amount}`)}
|
||||||
|
@ -1,39 +1,202 @@
|
|||||||
import Header from "@ui_kit/Header/Header";
|
import { Header } from "../../src/pages/startPage/Header";
|
||||||
import Sidebar from "@ui_kit/Sidebar";
|
import Sidebar from "@ui_kit/Sidebar";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import { useTheme, useMediaQuery } from "@mui/material";
|
import { useTheme, useMediaQuery } from "@mui/material";
|
||||||
import HeaderFull from "@ui_kit/Header/HeaderFull";
|
import HeaderFull from "@ui_kit/Header/HeaderFull";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { SidebarMobile } from "./startPage/Sidebar/SidebarMobile";
|
||||||
|
import { setShowConfirmLeaveModal } from "@root/uiTools/actions";
|
||||||
|
import { setCurrentStep } from "@root/quizes/actions";
|
||||||
|
import { useQuizStore } from "@root/quizes/store";
|
||||||
|
import { SmallSwitchQuestionListGraph } from "@ui_kit/Toolbars/SmallSwitchQuestionListGraph";
|
||||||
|
import { PanelSwitchQuestionListGraph } from "@ui_kit/Toolbars/PanelSwitchQuestionListGraph";
|
||||||
|
import { ButtonTestPublication } from "@ui_kit/Toolbars/ButtonTestPublication";
|
||||||
|
import { ButtonRecallQuiz } from "@ui_kit/Toolbars/ButtonRecallQuiz";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { LinkSimple } from "@icons/LinkSimple";
|
||||||
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||||
|
import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";
|
||||||
|
import { useQuestionsStore } from "@root/questions/store";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
sidebar: boolean;
|
sidebar: boolean;
|
||||||
header?: boolean;
|
header?: boolean;
|
||||||
|
footer?: boolean;
|
||||||
page: JSX.Element;
|
page: JSX.Element;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Main({ sidebar, header, page }: Props) {
|
export default function Main({ sidebar, header, footer, page }: Props) {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
const quiz = useCurrentQuiz();
|
||||||
|
const quizConfig = quiz?.config;
|
||||||
|
const { questions } = useQuestionsStore();
|
||||||
|
const currentStep = useQuizStore((state) => state.currentStep);
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||||
|
const isMobileSm = useMediaQuery(theme.breakpoints.down(370));
|
||||||
|
const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100));
|
||||||
|
const isLinkButton = useMediaQuery(theme.breakpoints.down(708));
|
||||||
|
const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
|
||||||
|
const [nextStep, setNextStep] = useState<number>(0);
|
||||||
|
const [openBranchingPage, setOpenBranchingPage] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const openBranchingPageHC = () => {
|
||||||
|
if (!openBranchingPage) {
|
||||||
|
deleteTimeoutedQuestions(questions, quiz);
|
||||||
|
}
|
||||||
|
setOpenBranchingPage((old) => !old);
|
||||||
|
};
|
||||||
|
const isConditionMet =
|
||||||
|
[1].includes(currentStep) && quizConfig.type !== "form";
|
||||||
|
|
||||||
|
const changePage = (index: number) => {
|
||||||
|
if (currentStep === 2) {
|
||||||
|
setNextStep(index);
|
||||||
|
setShowConfirmLeaveModal(true);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setCurrentStep(index);
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{header ? <Header /> : <HeaderFull />}
|
{header ? <Header setMobileSidebar={setMobileSidebar} /> : <HeaderFull />}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
flexDirection: isMobile ? "column" : "row",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{sidebar ? <Sidebar /> : <></>}
|
{sidebar ? (
|
||||||
|
<>
|
||||||
|
{isMobile ? (
|
||||||
|
<SidebarMobile open={mobileSidebar} changePage={changePage} />
|
||||||
|
) : (
|
||||||
|
<Sidebar changePage={changePage} />
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
background: theme.palette.background.default,
|
|
||||||
width: "100%",
|
width: "100%",
|
||||||
padding: isMobile ? "15px" : "25px",
|
|
||||||
height: "calc(100vh - 80px)",
|
height: "calc(100vh - 80px)",
|
||||||
overflow: "auto",
|
padding: isMobile ? "15px" : "25px",
|
||||||
boxSizing: "border-box",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{page}
|
<Box
|
||||||
|
sx={{
|
||||||
|
background: theme.palette.background.default,
|
||||||
|
width: "100%",
|
||||||
|
// padding: isMobile ? "15px" : "25px",
|
||||||
|
// height: "calc(100vh - 80px)",
|
||||||
|
overflow: "auto",
|
||||||
|
boxSizing: "border-box",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</Box>
|
||||||
|
{footer ? (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
padding: isMobile ? "20px 16px" : "20px 20px",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: isMobile
|
||||||
|
? isMobileSm
|
||||||
|
? "center"
|
||||||
|
: "flex-end"
|
||||||
|
: "flex-start",
|
||||||
|
flexDirection: isMobile ? "row-reverse" : "-moz-initial",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "15px",
|
||||||
|
background: "#FFF",
|
||||||
|
borderTop: "#f2f3f7 2px solid",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{isConditionMet &&
|
||||||
|
(isBranchingLogic ? (
|
||||||
|
<SmallSwitchQuestionListGraph
|
||||||
|
openBranchingPage={openBranchingPage}
|
||||||
|
setOpenBranchingPage={openBranchingPageHC}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<PanelSwitchQuestionListGraph
|
||||||
|
openBranchingPage={openBranchingPage}
|
||||||
|
setOpenBranchingPage={openBranchingPageHC}
|
||||||
|
hideText
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{/* Кнопка тестового просмотра */}
|
||||||
|
<ButtonTestPublication />
|
||||||
|
{/* Кнопка отозвать */}
|
||||||
|
<ButtonRecallQuiz />
|
||||||
|
{/* Ссылка */}
|
||||||
|
{quiz?.status === "start" &&
|
||||||
|
(!isLinkButton ? (
|
||||||
|
<Box
|
||||||
|
component={Link}
|
||||||
|
sx={{
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
overflow: "hidden",
|
||||||
|
display: isMobile ? "none" : "block",
|
||||||
|
color: "#7E2AEA",
|
||||||
|
fontSize: "14px",
|
||||||
|
}}
|
||||||
|
target="_blank"
|
||||||
|
to={"https://hbpn.link/" + quiz.qid}
|
||||||
|
>
|
||||||
|
https://hbpn.link/{quiz.qid}
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Box
|
||||||
|
component={Link}
|
||||||
|
sx={{
|
||||||
|
cursor: "pointer",
|
||||||
|
minWidth: "34px",
|
||||||
|
height: "34px",
|
||||||
|
color: "#7E2AEA",
|
||||||
|
fontSize: "14px",
|
||||||
|
display: isMobile ? "none" : "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "Center",
|
||||||
|
background: "#EEE4FC",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
target="_blank"
|
||||||
|
to={"https://hbpn.link/" + quiz.qid}
|
||||||
|
>
|
||||||
|
<LinkSimple />
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
{/* Маленькая кнопка ссылки */}
|
||||||
|
{isMobile && quiz?.status === "start" && (
|
||||||
|
<Box
|
||||||
|
component={Link}
|
||||||
|
sx={{
|
||||||
|
cursor: "pointer",
|
||||||
|
width: "34px",
|
||||||
|
height: "34px",
|
||||||
|
color: "#7E2AEA",
|
||||||
|
fontSize: "14px",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "Center",
|
||||||
|
background: "#EEE4FC",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
target="_blank"
|
||||||
|
to={"https://hbpn.link/" + quiz.qid}
|
||||||
|
>
|
||||||
|
<LinkSimple />
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</>
|
</>
|
||||||
|
@ -157,7 +157,7 @@ export default function EditPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header setMobileSidebar={setMobileSidebar} />
|
{/*<Header setMobileSidebar={setMobileSidebar} />*/}
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
@ -165,11 +165,11 @@ export default function EditPage() {
|
|||||||
position: "relative",
|
position: "relative",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{isMobile ? (
|
{/*{isMobile ? (*/}
|
||||||
<SidebarMobile open={mobileSidebar} changePage={changePage} />
|
{/* <SidebarMobile open={mobileSidebar} changePage={changePage} />*/}
|
||||||
) : (
|
{/*) : (*/}
|
||||||
<Sidebar changePage={changePage} />
|
{/* <Sidebar changePage={changePage} />*/}
|
||||||
)}
|
{/*)}*/}
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
@ -208,102 +208,102 @@ export default function EditPage() {
|
|||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box
|
{/*<Box*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
width: "100%",
|
{/* width: "100%",*/}
|
||||||
padding: isMobile ? "20px 16px" : "20px 20px",
|
{/* padding: isMobile ? "20px 16px" : "20px 20px",*/}
|
||||||
display: "flex",
|
{/* display: "flex",*/}
|
||||||
justifyContent: isMobile
|
{/* justifyContent: isMobile*/}
|
||||||
? isMobileSm
|
{/* ? isMobileSm*/}
|
||||||
? "center"
|
{/* ? "center"*/}
|
||||||
: "flex-end"
|
{/* : "flex-end"*/}
|
||||||
: "flex-start",
|
{/* : "flex-start",*/}
|
||||||
flexDirection: isMobile ? "row-reverse" : "-moz-initial",
|
{/* flexDirection: isMobile ? "row-reverse" : "-moz-initial",*/}
|
||||||
alignItems: "center",
|
{/* alignItems: "center",*/}
|
||||||
gap: "15px",
|
{/* gap: "15px",*/}
|
||||||
background: "#FFF",
|
{/* background: "#FFF",*/}
|
||||||
borderTop: "#f2f3f7 2px solid",
|
{/* borderTop: "#f2f3f7 2px solid",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
>
|
{/*>*/}
|
||||||
{isConditionMet &&
|
{/* {isConditionMet &&*/}
|
||||||
(isBranchingLogic ? (
|
{/* (isBranchingLogic ? (*/}
|
||||||
<SmallSwitchQuestionListGraph
|
{/* <SmallSwitchQuestionListGraph*/}
|
||||||
openBranchingPage={openBranchingPage}
|
{/* openBranchingPage={openBranchingPage}*/}
|
||||||
setOpenBranchingPage={openBranchingPageHC}
|
{/* setOpenBranchingPage={openBranchingPageHC}*/}
|
||||||
/>
|
{/* />*/}
|
||||||
) : (
|
{/* ) : (*/}
|
||||||
<PanelSwitchQuestionListGraph
|
{/* <PanelSwitchQuestionListGraph*/}
|
||||||
openBranchingPage={openBranchingPage}
|
{/* openBranchingPage={openBranchingPage}*/}
|
||||||
setOpenBranchingPage={openBranchingPageHC}
|
{/* setOpenBranchingPage={openBranchingPageHC}*/}
|
||||||
hideText
|
{/* hideText*/}
|
||||||
/>
|
{/* />*/}
|
||||||
))}
|
{/* ))}*/}
|
||||||
{/* Кнопка тестового просмотра */}
|
{/* /!* Кнопка тестового просмотра *!/*/}
|
||||||
<ButtonTestPublication />
|
{/* <ButtonTestPublication />*/}
|
||||||
{/* Кнопка отозвать */}
|
{/* /!* Кнопка отозвать *!/*/}
|
||||||
<ButtonRecallQuiz />
|
{/* <ButtonRecallQuiz />*/}
|
||||||
{/* Ссылка */}
|
{/* /!* Ссылка *!/*/}
|
||||||
{quiz?.status === "start" &&
|
{/* {quiz?.status === "start" &&*/}
|
||||||
(!isLinkButton ? (
|
{/* (!isLinkButton ? (*/}
|
||||||
<Box
|
{/* <Box*/}
|
||||||
component={Link}
|
{/* component={Link}*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
whiteSpace: "nowrap",
|
{/* whiteSpace: "nowrap",*/}
|
||||||
textOverflow: "ellipsis",
|
{/* textOverflow: "ellipsis",*/}
|
||||||
overflow: "hidden",
|
{/* overflow: "hidden",*/}
|
||||||
display: isMobile ? "none" : "block",
|
{/* display: isMobile ? "none" : "block",*/}
|
||||||
color: "#7E2AEA",
|
{/* color: "#7E2AEA",*/}
|
||||||
fontSize: "14px",
|
{/* fontSize: "14px",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
target="_blank"
|
{/* target="_blank"*/}
|
||||||
to={"https://hbpn.link/" + quiz.qid}
|
{/* to={"https://hbpn.link/" + quiz.qid}*/}
|
||||||
>
|
{/* >*/}
|
||||||
https://hbpn.link/{quiz.qid}
|
{/* https://hbpn.link/{quiz.qid}*/}
|
||||||
</Box>
|
{/* </Box>*/}
|
||||||
) : (
|
{/* ) : (*/}
|
||||||
<Box
|
{/* <Box*/}
|
||||||
component={Link}
|
{/* component={Link}*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
cursor: "pointer",
|
{/* cursor: "pointer",*/}
|
||||||
minWidth: "34px",
|
{/* minWidth: "34px",*/}
|
||||||
height: "34px",
|
{/* height: "34px",*/}
|
||||||
color: "#7E2AEA",
|
{/* color: "#7E2AEA",*/}
|
||||||
fontSize: "14px",
|
{/* fontSize: "14px",*/}
|
||||||
display: isMobile ? "none" : "flex",
|
{/* display: isMobile ? "none" : "flex",*/}
|
||||||
justifyContent: "center",
|
{/* justifyContent: "center",*/}
|
||||||
alignItems: "Center",
|
{/* alignItems: "Center",*/}
|
||||||
background: "#EEE4FC",
|
{/* background: "#EEE4FC",*/}
|
||||||
borderRadius: "8px",
|
{/* borderRadius: "8px",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
target="_blank"
|
{/* target="_blank"*/}
|
||||||
to={"https://hbpn.link/" + quiz.qid}
|
{/* to={"https://hbpn.link/" + quiz.qid}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<LinkSimple />
|
{/* <LinkSimple />*/}
|
||||||
</Box>
|
{/* </Box>*/}
|
||||||
))}
|
{/* ))}*/}
|
||||||
{/* Маленькая кнопка ссылки */}
|
{/* /!* Маленькая кнопка ссылки *!/*/}
|
||||||
{isMobile && quiz?.status === "start" && (
|
{/* {isMobile && quiz?.status === "start" && (*/}
|
||||||
<Box
|
{/* <Box*/}
|
||||||
component={Link}
|
{/* component={Link}*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
cursor: "pointer",
|
{/* cursor: "pointer",*/}
|
||||||
width: "34px",
|
{/* width: "34px",*/}
|
||||||
height: "34px",
|
{/* height: "34px",*/}
|
||||||
color: "#7E2AEA",
|
{/* color: "#7E2AEA",*/}
|
||||||
fontSize: "14px",
|
{/* fontSize: "14px",*/}
|
||||||
display: "flex",
|
{/* display: "flex",*/}
|
||||||
justifyContent: "center",
|
{/* justifyContent: "center",*/}
|
||||||
alignItems: "Center",
|
{/* alignItems: "Center",*/}
|
||||||
background: "#EEE4FC",
|
{/* background: "#EEE4FC",*/}
|
||||||
borderRadius: "8px",
|
{/* borderRadius: "8px",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
target="_blank"
|
{/* target="_blank"*/}
|
||||||
to={"https://hbpn.link/" + quiz.qid}
|
{/* to={"https://hbpn.link/" + quiz.qid}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<LinkSimple />
|
{/* <LinkSimple />*/}
|
||||||
</Box>
|
{/* </Box>*/}
|
||||||
)}
|
{/* )}*/}
|
||||||
</Box>
|
{/*</Box>*/}
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
@ -80,12 +80,12 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
|
|||||||
</Link>
|
</Link>
|
||||||
<FormControl fullWidth variant="standard">
|
<FormControl fullWidth variant="standard">
|
||||||
<TextField
|
<TextField
|
||||||
value={quiz.name}
|
// value={quiz.name}
|
||||||
onChange={(e) =>
|
// onChange={(e) =>
|
||||||
updateQuiz(quiz.id, (quiz) => {
|
// updateQuiz(quiz.id, (quiz) => {
|
||||||
quiz.name = e.target.value;
|
// quiz.name = e.target.value;
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
fullWidth
|
fullWidth
|
||||||
id="project-name"
|
id="project-name"
|
||||||
placeholder="Название проекта окно"
|
placeholder="Название проекта окно"
|
||||||
|
Loading…
Reference in New Issue
Block a user