fix
This commit is contained in:
Mikola
148
src/pages/Quiz/PassingTests.js
Normal file
148
src/pages/Quiz/PassingTests.js
Normal file
@ -0,0 +1,148 @@
|
||||
import moment from "moment";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { useTimer } from "react-timer-hook";
|
||||
|
||||
import { completedTestSelector } from "@redux/quizSlice";
|
||||
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
|
||||
import { BlockCompletedTest } from "@components/features/quiz/BlockCompletedTest";
|
||||
import { CardIntroduction } from "@components/features/quiz/Card-introduction";
|
||||
import { QuizPassingInformation } from "@components/features/quiz/Quiz-passing-information";
|
||||
import { TaskQuiz } from "@components/features/quiz/Task";
|
||||
|
||||
export const PassingTests = () => {
|
||||
const [startTest, setStartTest] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const completedTest = useSelector(completedTestSelector);
|
||||
const { uuid } = useParams();
|
||||
|
||||
const timer = useTimer({
|
||||
expiryTimestamp: moment(),
|
||||
autoStart: false,
|
||||
onExpire: () => {
|
||||
navigate("/Quiz");
|
||||
}
|
||||
});
|
||||
|
||||
const onCloseWindow = (e) => {
|
||||
e.preventDefault();
|
||||
if (startTest) {
|
||||
let confirmationMessage = "o/";
|
||||
(e || window.e).returnValue = confirmationMessage;
|
||||
return confirmationMessage;
|
||||
}
|
||||
};
|
||||
|
||||
const introduction = [
|
||||
{
|
||||
title: "Зачем?",
|
||||
description:
|
||||
"Тесты itguild предназначены для того, чтобы подтверждать навыки, которые вы указали у себя."
|
||||
},
|
||||
{
|
||||
title: "Почему именно тестирование?",
|
||||
description:
|
||||
"Тесты itguild заменяют первое техническое собеседование по любой вакансии."
|
||||
},
|
||||
{
|
||||
title: "Какие тесты нужно проходить?",
|
||||
description:
|
||||
"Здесь все довольно просто — следует проходить тесты по инструментам и навыкам, которыми вы владеете."
|
||||
}
|
||||
];
|
||||
|
||||
function onSwitchTab(e) {
|
||||
console.log(e, document.visibilityState);
|
||||
if (document.visibilityState === "hidden" && startTest) {
|
||||
alert(
|
||||
"Убедительная просьба не покидать страницу и не переключаться. Рассчитывайте только на свои знания и умения!!!"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("beforeunload", onCloseWindow);
|
||||
window.addEventListener("visibilitychange", onSwitchTab);
|
||||
window.onblur = onSwitchTab;
|
||||
return () => {
|
||||
window.removeEventListener("beforeunload", onCloseWindow);
|
||||
window.removeEventListener("visibilitychange", onSwitchTab);
|
||||
};
|
||||
}, [startTest]);
|
||||
|
||||
return (
|
||||
<div className="passing-tests-page">
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
{/*<HeadBottom />*/}
|
||||
<div className="passing-tests-page__container">
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile-candidate" },
|
||||
{ name: "Тестирование", link: "/Quiz" },
|
||||
{ name: "Прохождение тестов", link: "/Quiz/test" }
|
||||
]}
|
||||
/>
|
||||
<div className="passing-tests-page__title main-title">
|
||||
Тестирование в позиции Junior разработчик
|
||||
</div>
|
||||
<div className="passing-tests-page__passing-information">
|
||||
<QuizPassingInformation
|
||||
timer={timer}
|
||||
setStartTest={setStartTest}
|
||||
uuid={uuid}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!completedTest && (
|
||||
<>
|
||||
{startTest && (
|
||||
<div className="passing-tests-page__block-green">
|
||||
Тестирование началось
|
||||
</div>
|
||||
)}
|
||||
{startTest ? (
|
||||
<TaskQuiz timer={timer} />
|
||||
) : (
|
||||
<div className="passing-tests-page__introduction">
|
||||
{introduction.map((item, i) => (
|
||||
<CardIntroduction
|
||||
description={item.description}
|
||||
title={item.title}
|
||||
key={i}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!startTest && (
|
||||
<div className="passing-tests-page__block-text block-text">
|
||||
ИЛИ <Link to={""}>выполните тестовое задание</Link>, без
|
||||
прохождения тестов
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{completedTest && (
|
||||
<>
|
||||
<div className="passing-tests-page__block-green">
|
||||
Тестирование завершено
|
||||
</div>
|
||||
<BlockCompletedTest />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
{/*<Prompt*/}
|
||||
{/* when={showPrompt}*/}
|
||||
{/* message="Unsaved changes detected, continue?"*/}
|
||||
{/* beforeUnload={true}*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
173
src/pages/Quiz/QuizPage.js
Normal file
173
src/pages/Quiz/QuizPage.js
Normal file
@ -0,0 +1,173 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// import { questionnairesSelector, setQuestionnaires } from "@redux/quizSlice";
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import CategoriesItem from "@components/CategoriesItem/CategoriesItem";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
|
||||
import { CardAvailableTest } from "@components/features/quiz/CardAviableTest";
|
||||
import { SelectedCategory } from "@components/features/quiz/SelectedCategory";
|
||||
|
||||
import AdminImg from "assets/images/partnerProfile/PersonalAdmin.svg";
|
||||
import ArchitectureImg from "assets/images/partnerProfile/PersonalArchitecture.svg";
|
||||
import CopyImg from "assets/images/partnerProfile/PersonalCopy.svg";
|
||||
import DesignImg from "assets/images/partnerProfile/PersonalDesign.svg";
|
||||
import FrontendImg from "assets/images/partnerProfile/PersonalFrontend.svg";
|
||||
import ManageImg from "assets/images/partnerProfile/PersonalMng.svg";
|
||||
import SmmImg from "assets/images/partnerProfile/PersonalSMM.svg";
|
||||
import TestImg from "assets/images/partnerProfile/PersonalTesters.svg";
|
||||
import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg";
|
||||
|
||||
import "./quiz-page.scss";
|
||||
|
||||
export const QuizPage = () => {
|
||||
const [questionnaires, setQuestionnaires] = useState([]);
|
||||
const dispatch = useDispatch();
|
||||
const [personalInfoItems] = useState([
|
||||
{
|
||||
title: "Backend разработчики",
|
||||
link: "/registration-candidate",
|
||||
description:
|
||||
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||
available: true,
|
||||
img: BackEndImg
|
||||
},
|
||||
{
|
||||
title: "Frontend разработчики",
|
||||
link: "/registration-candidate",
|
||||
description:
|
||||
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||
available: true,
|
||||
img: FrontendImg
|
||||
},
|
||||
{
|
||||
title: "Архитектура проектов",
|
||||
link: "/registration-candidate",
|
||||
description: "Потоки данных ER ERP CRM CQRS UML BPMN",
|
||||
available: true,
|
||||
img: ArchitectureImg
|
||||
},
|
||||
{
|
||||
title: "Дизайн проектов",
|
||||
link: "/registration-candidate",
|
||||
description:
|
||||
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||
available: true,
|
||||
img: DesignImg
|
||||
},
|
||||
{
|
||||
title: "Тестирование проектов",
|
||||
link: "/registration-candidate",
|
||||
description: "SQL Postman TestRail Kibana Ручное тестирование",
|
||||
available: false,
|
||||
img: TestImg
|
||||
},
|
||||
{
|
||||
title: "Администрирование проектов",
|
||||
link: "/registration-candidate",
|
||||
description: "DevOps ELK Kubernetes Docker Bash Apache Oracle Git",
|
||||
available: false,
|
||||
img: AdminImg
|
||||
},
|
||||
{
|
||||
title: "Управление проектом",
|
||||
link: "/registration-candidate",
|
||||
description: "Scrum Kanban Agile Miro CustDev",
|
||||
available: false,
|
||||
img: ManageImg
|
||||
},
|
||||
{
|
||||
title: "Копирайтинг проектов",
|
||||
link: "/registration-candidate",
|
||||
description: "Теги Заголовок H1 Дескриптор Абзац Сценарий",
|
||||
available: false,
|
||||
img: CopyImg
|
||||
},
|
||||
{
|
||||
title: "Реклама и SMM",
|
||||
link: "/registration-candidate",
|
||||
description:
|
||||
"Java PHP Python C# React Vue.js NodeJs Golang Ruby JavaScript",
|
||||
available: false,
|
||||
img: SmmImg
|
||||
}
|
||||
]);
|
||||
const userId = localStorage.getItem("id");
|
||||
const [selectedCategory, setSetSelectedCategory] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest(`/user-questionnaire/questionnaires-list?user_id=${userId}`)
|
||||
.then((res) => setQuestionnaires(res))
|
||||
.catch((e) => console.log(e));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="quiz-page">
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
{/*<HeadBottom />*/}
|
||||
<div className="quiz-page__container">
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile-candidate" },
|
||||
{ name: "Тестирование", link: "/Quiz" }
|
||||
]}
|
||||
/>
|
||||
<div className="quiz-page__title main-title">
|
||||
{!selectedCategory ? "Тестирование" : "Замена специализации"}
|
||||
</div>
|
||||
{!selectedCategory && (
|
||||
<>
|
||||
{/*<div className="quiz-page__specialization">*/}
|
||||
{/* <SelectedCategory setSelectedCategory={setSetSelectedCategory} />*/}
|
||||
{/*</div>*/}
|
||||
<div className="quiz-page__block">Доступные тесты</div>
|
||||
<div className="quiz-page__cards-test">
|
||||
{questionnaires.length ? (
|
||||
questionnaires.map((item, index) => (
|
||||
<CardAvailableTest
|
||||
description={item.description}
|
||||
path={item.uuid}
|
||||
status={item.status}
|
||||
title={item.questionnaire_title}
|
||||
passedTest={item.passedTest}
|
||||
key={index}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<h1>Анкет нет</h1>
|
||||
)}
|
||||
</div>
|
||||
<div className="block-text">
|
||||
ИЛИ <Link to={""}>выполните тестовое задание</Link>, без
|
||||
прохождения тестов
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{selectedCategory && (
|
||||
<div className="quiz-page__categories-items">
|
||||
{personalInfoItems.map((item, index) => {
|
||||
return (
|
||||
<CategoriesItem
|
||||
link={item.link}
|
||||
key={index}
|
||||
title={item.title}
|
||||
img={item.img}
|
||||
skills={item.description}
|
||||
available={item.available}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
60
src/pages/Quiz/QuizReportPage.js
Normal file
60
src/pages/Quiz/QuizReportPage.js
Normal file
@ -0,0 +1,60 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import { selectedTest } from "@redux/quizSlice";
|
||||
|
||||
import { apiRequest } from "@api/request";
|
||||
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
|
||||
// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
|
||||
import { AlertResult } from "@components/features/quiz/AlertResult";
|
||||
import { QuizReport } from "@components/features/quiz/QuizReport";
|
||||
|
||||
export const QuizReportPage = () => {
|
||||
const test = useSelector(selectedTest);
|
||||
const params = useParams();
|
||||
|
||||
let navigate = useNavigate();
|
||||
if (!test) {
|
||||
navigate("/Quiz");
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest(
|
||||
`/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}`
|
||||
).then((res) => {
|
||||
setTestInfo(res);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const [testInfo, setTestInfo] = useState({});
|
||||
|
||||
return (
|
||||
<div className="quiz-report-page">
|
||||
<ProfileHeader />
|
||||
<Navigation />
|
||||
{/*<HeadBottom />*/}
|
||||
<div className="quiz-report-page__container">
|
||||
<ProfileBreadcrumbs
|
||||
links={[
|
||||
{ name: "Главная", link: "/profile-candidate" },
|
||||
{ name: "Тестирование", link: "/Quiz" },
|
||||
{ name: "Отчет по тестированию", link: "/Quiz/report" }
|
||||
]}
|
||||
/>
|
||||
<div className="quiz-report-page__title main-title">
|
||||
Отчет по тестированию позиции {testInfo.questionnaire_title}
|
||||
</div>
|
||||
<div className="quiz-report-page__report-quiz">
|
||||
<QuizReport info={testInfo} />
|
||||
</div>
|
||||
<AlertResult info={testInfo} />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
139
src/pages/Quiz/quiz-page.scss
Normal file
139
src/pages/Quiz/quiz-page.scss
Normal file
@ -0,0 +1,139 @@
|
||||
.quiz-page {
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__container {
|
||||
max-width: 1160px;
|
||||
margin: 23px auto 42px auto;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
&__title {
|
||||
margin: 0 0 39px 0;
|
||||
}
|
||||
&__block {
|
||||
background: #e1fccf;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 178%;
|
||||
color: #000000;
|
||||
padding: 20px 51px;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
&__cards-test {
|
||||
display: grid;
|
||||
grid-gap: 29px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
margin-bottom: 29px;
|
||||
@media (max-width: 955px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@media (max-width: 668px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
&__specialization {
|
||||
margin: 0 0 26px 0;
|
||||
}
|
||||
&__categories-items {
|
||||
display: grid;
|
||||
grid-gap: 24px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
margin-bottom: 24px;
|
||||
@media (max-width: 955px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@media (max-width: 668px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
.interjacent-page-quiz {
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__title {
|
||||
margin: 0 0 39px 0;
|
||||
}
|
||||
&__passing-information {
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
&__container {
|
||||
max-width: 1160px;
|
||||
margin: 23px auto 42px auto;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
&__introduction-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0px -25px -50px;
|
||||
margin: 0 auto 54px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.passing-tests-page {
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__container {
|
||||
max-width: 1160px;
|
||||
margin: 23px auto 42px auto;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
&__title {
|
||||
margin: 0 0 39px 0;
|
||||
}
|
||||
&__passing-information {
|
||||
margin: 0 0 29px 0;
|
||||
}
|
||||
&__block-green {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 178%;
|
||||
color: #000000;
|
||||
background: #e1fccf;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
padding: 20px 51px;
|
||||
}
|
||||
&__introduction {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.quiz-report-page {
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__container {
|
||||
max-width: 1160px;
|
||||
margin: 23px auto 42px auto;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
&__title {
|
||||
margin: 0 0 39px 0;
|
||||
}
|
||||
&__report-quiz {
|
||||
margin: 0 0 28px 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user