From b512115444847b6738b6a62f4f79d75b115f45bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=A1=D0=B0=D1=80=D0=B0?= =?UTF-8?q?=D0=BF=D1=83=D0=BB=D0=BE=D0=B2?= Date: Wed, 17 May 2023 00:36:03 +1000 Subject: [PATCH] completed PsychTest page --- ...er_options_alter_user_about_me_and_more.py | 1 - pairent_backend/pairent_app/models.py | 1 - pairent_backend/pairent_app/views.py | 25 ++- .../src/components/PsychTestForm/index.jsx | 116 ++++++++++++ .../PsychTestForm/styles/PsychTestForm.css | 25 +++ .../src/components/PsychTestHeader/index.jsx | 14 ++ .../styles/PsychTestHeader.css | 22 +++ .../components/PsychTestQuestion/index.jsx | 100 +++++----- .../styles/PsychTestQuestion.css | 68 +++++++ .../src/pages/PsychTest/index.jsx | 175 +----------------- 10 files changed, 316 insertions(+), 231 deletions(-) create mode 100644 pairent_frontend_react/src/components/PsychTestForm/index.jsx create mode 100644 pairent_frontend_react/src/components/PsychTestForm/styles/PsychTestForm.css create mode 100644 pairent_frontend_react/src/components/PsychTestHeader/index.jsx create mode 100644 pairent_frontend_react/src/components/PsychTestHeader/styles/PsychTestHeader.css create mode 100644 pairent_frontend_react/src/components/PsychTestQuestion/styles/PsychTestQuestion.css diff --git a/pairent_backend/pairent_app/migrations/0006_alter_user_options_alter_user_about_me_and_more.py b/pairent_backend/pairent_app/migrations/0006_alter_user_options_alter_user_about_me_and_more.py index 67bf6f4..982d074 100644 --- a/pairent_backend/pairent_app/migrations/0006_alter_user_options_alter_user_about_me_and_more.py +++ b/pairent_backend/pairent_app/migrations/0006_alter_user_options_alter_user_about_me_and_more.py @@ -97,7 +97,6 @@ class Migration(migrations.Migration): ('tenth_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на десятый вопрос')), ('eleventh_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на одиннадцатый вопрос')), ('twelfth_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на двенадцатый вопрос')), - ('thirteenth_question', models.IntegerField(validators=[django.core.validators.MaxValueValidator(5)], verbose_name='Ответ на тринадцатый вопрос')), ('users', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='pairent_app.user', verbose_name='Пользователь')), ], ), diff --git a/pairent_backend/pairent_app/models.py b/pairent_backend/pairent_app/models.py index 6e7f33b..6f9f031 100644 --- a/pairent_backend/pairent_app/models.py +++ b/pairent_backend/pairent_app/models.py @@ -122,7 +122,6 @@ class PsychTestAnswers(models.Model): tenth_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на десятый вопрос") eleventh_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на одиннадцатый вопрос") twelfth_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на двенадцатый вопрос") - thirteenth_question = models.IntegerField(validators=[MaxValueValidator(5)], verbose_name="Ответ на тринадцатый вопрос") class Meta: verbose_name = "Ответ на психологический тест" diff --git a/pairent_backend/pairent_app/views.py b/pairent_backend/pairent_app/views.py index e773b32..eb24614 100644 --- a/pairent_backend/pairent_app/views.py +++ b/pairent_backend/pairent_app/views.py @@ -98,19 +98,18 @@ class PsychTestAddResultViewSet(viewsets.ViewSet): results = request.data PsychTestAnswers.objects.create( user=user, - first_question=results['first'], - second_question=results['second'], - third_question=results['third'], - fourth_question=results['fourth'], - fifth_question=results['fifth'], - sixth_question=results['sixth'], - seventh_question=results['seventh'], - eighth_question=results['eighth'], - nineth_question=results['nineth'], - tenth_question=results['tenth'], - eleventh_question=results['eleventh'], - twelfth_question=results['twelfth'], - thirteenth_question=results['thirteenth'] + first_question=results[0], + second_question=results[1], + third_question=results[2], + fourth_question=results[3], + fifth_question=results[4], + sixth_question=results[5], + seventh_question=results[6], + eighth_question=results[7], + nineth_question=results[8], + tenth_question=results[9], + eleventh_question=results[10], + twelfth_question=results[11] ) return Response({'successfully': 'results post'}) diff --git a/pairent_frontend_react/src/components/PsychTestForm/index.jsx b/pairent_frontend_react/src/components/PsychTestForm/index.jsx new file mode 100644 index 0000000..fc31af8 --- /dev/null +++ b/pairent_frontend_react/src/components/PsychTestForm/index.jsx @@ -0,0 +1,116 @@ +import PsychTestQuestion from "../PsychTestQuestion"; +import React, { useState } from "react"; +import PsychTestAddResult from "../../API/PsychTestAddResult"; +import { useNavigate } from "react-router-dom"; +import "./styles/PsychTestForm.css"; + +const PsychTestForm = () => { + const [isValid, setIsValid] = useState(true); + const navigate = useNavigate(); + const [answers, setAnswers] = useState(new Array(12)); + + const answerChangeHandler = (answer, account) => { + answers[account] = answer; + setAnswers(answers); + }; + + const submitHandler = async (event) => { + event.preventDefault(); + let isTrue = true; + for (let i = 0; i < 12; i++) { + if (answers[i] == undefined) { + setIsValid(false); + isTrue = false; + } + } + if (isTrue) { + await PsychTestAddResult.addById(1, answers); // 1 - это id пользователя TODO: приделать логин систему + navigate("/"); + } + }; + + return ( +
+ + + + + + + + + + + + + {isValid && ( +
+ +
+ )} + {!isValid && ( +
+ +

+ Вы не ответили на один из вопросов +

+
+ )} + {/* */} + + ); +}; + +export default PsychTestForm; diff --git a/pairent_frontend_react/src/components/PsychTestForm/styles/PsychTestForm.css b/pairent_frontend_react/src/components/PsychTestForm/styles/PsychTestForm.css new file mode 100644 index 0000000..7fe4f4d --- /dev/null +++ b/pairent_frontend_react/src/components/PsychTestForm/styles/PsychTestForm.css @@ -0,0 +1,25 @@ +.form { + position: relative; +} + +.btn-box { + display: flex; + flex-direction: column; + align-items: center; +} + +.btn-box__form-btn { + background-color: #007eff; + width: 192px; + height: 33px; + border-radius: 12px; + font-size: 14px; + color: white; + font-weight: 500; + margin-bottom: 10px; +} + +.btn-box__text { + color: red; + padding-left: 37.5px; +} diff --git a/pairent_frontend_react/src/components/PsychTestHeader/index.jsx b/pairent_frontend_react/src/components/PsychTestHeader/index.jsx new file mode 100644 index 0000000..2318911 --- /dev/null +++ b/pairent_frontend_react/src/components/PsychTestHeader/index.jsx @@ -0,0 +1,14 @@ +import "./styles/PsychTestHeader.css"; + +const PsychTestHeader = () => { + return ( +
+ +

Тест на совместимость

+
+ ); +}; + +export default PsychTestHeader; diff --git a/pairent_frontend_react/src/components/PsychTestHeader/styles/PsychTestHeader.css b/pairent_frontend_react/src/components/PsychTestHeader/styles/PsychTestHeader.css new file mode 100644 index 0000000..785d55d --- /dev/null +++ b/pairent_frontend_react/src/components/PsychTestHeader/styles/PsychTestHeader.css @@ -0,0 +1,22 @@ +.header { + display: flex; + padding-left: 40px; + padding-top: 14px; + align-items: center; + margin-bottom: 55px; +} + +.header__title { + font-size: 20px; +} + +.header__btn { + color: #bababa; + font-size: 15px; + width: 180px; + height: 36px; + background-color: white; + border: 1px solid #cccccc; + border-radius: 12px; + margin-right: 13px; +} diff --git a/pairent_frontend_react/src/components/PsychTestQuestion/index.jsx b/pairent_frontend_react/src/components/PsychTestQuestion/index.jsx index ecf9def..2637e8b 100644 --- a/pairent_frontend_react/src/components/PsychTestQuestion/index.jsx +++ b/pairent_frontend_react/src/components/PsychTestQuestion/index.jsx @@ -1,57 +1,63 @@ import React, { useState } from "react"; +import "./styles/PsychTestQuestion.css"; const PsychTestQuestion = (props) => { const answerChangeHandler = (event) => { props.onChangeAnswer(event.target.value, event.target.name); }; return ( -
- - - - - - +
+
{+props.account + 1}
+

{props.name}

+
+

Не важно

+ + + + + +

Очень важно

+
); }; diff --git a/pairent_frontend_react/src/components/PsychTestQuestion/styles/PsychTestQuestion.css b/pairent_frontend_react/src/components/PsychTestQuestion/styles/PsychTestQuestion.css new file mode 100644 index 0000000..5519ec7 --- /dev/null +++ b/pairent_frontend_react/src/components/PsychTestQuestion/styles/PsychTestQuestion.css @@ -0,0 +1,68 @@ +.question { + padding-top: 4px; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + margin: 0 auto; + width: 799px; + min-height: 151px; + border-bottom: 1px solid #cccccc; + margin-bottom: 34.5px; +} + +.question__account { + color: #cccccc; + position: absolute; + top: 0px; + left: 0; + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border: 2px solid #cccccc; + border-radius: 100px; +} + +.question__answers input { + width: 16px; + height: 16px; +} + +.question__title { + margin-bottom: 80px; + text-align: center; + width: 638px; + font-size: 16px; + margin-right: 0; +} + +.question__answers { + display: flex; + margin-bottom: 29.5px; +} + +.question__answers p, +span { + font-size: 14px; +} + +.question__answer { + position: relative; +} + +.question__answer span { + position: absolute; + top: -17px; + left: 3.5px; +} + +.question__answers input, +p { + margin-right: 32px; +} + +.question__answers *:last-child { + margin-right: 0; +} diff --git a/pairent_frontend_react/src/pages/PsychTest/index.jsx b/pairent_frontend_react/src/pages/PsychTest/index.jsx index eb7539e..9661156 100644 --- a/pairent_frontend_react/src/pages/PsychTest/index.jsx +++ b/pairent_frontend_react/src/pages/PsychTest/index.jsx @@ -1,175 +1,12 @@ -import PsychTestQuestion from "../../components/PsychTestQuestion"; -import React, { useState } from "react"; -import PsychTestAddResult from "../../API/PsychTestAddResult"; -import { useNavigate } from "react-router-dom"; +import PsychTestForm from "../../components/PsychTestForm"; +import PsychTestHeader from "../../components/PsychTestHeader"; const PsychTest = () => { - const navigate = useNavigate(); - const [answers, setAnswers] = useState({ - first: 0, - second: 0, - third: 0, - fourth: 0, - fifth: 0, - sixth: 0, - seventh: 0, - eighth: 0, - nineth: 0, - tenth: 0, - eleventh: 0, - twelfth: 0, - thirteenth: 0, - }); - - // TODO: Может как-то изменить, а то я сидел и тупил только не ругайте - const answerChangeHandler = (answer, account) => { - if (account == "first") { - setAnswers((previous) => ({ - ...previous, - first: answer, - })); - } else if (account == "second") { - setAnswers((previous) => ({ - ...previous, - second: answer, - })); - } else if (account == "third") { - setAnswers((previous) => ({ - ...previous, - third: answer, - })); - } else if (account == "fourth") { - setAnswers((previous) => ({ - ...previous, - fourth: answer, - })); - } else if (account == "fifth") { - setAnswers((previous) => ({ - ...previous, - fifth: answer, - })); - } else if (account == "sixth") { - setAnswers((previous) => ({ - ...previous, - sixth: answer, - })); - } else if (account == "seventh") { - setAnswers((previous) => ({ - ...previous, - seventh: answer, - })); - } else if (account == "eight") { - setAnswers((previous) => ({ - ...previous, - eight: answer, - })); - } else if (account == "nineth") { - setAnswers((previous) => ({ - ...previous, - nineth: answer, - })); - } else if (account == "tenth") { - setAnswers((previous) => ({ - ...previous, - tenth: answer, - })); - } else if (account == "eleventh") { - setAnswers((previous) => ({ - ...previous, - eleventh: answer, - })); - } else if (account == "twelfth") { - setAnswers((previous) => ({ - ...previous, - twelfth: answer, - })); - } else if (account == "thirteenth") { - setAnswers((previous) => ({ - ...previous, - thirteenth: answer, - })); - } - }; - - const submitHandler = async (event) => { - event.preventDefault(); - const result = await PsychTestAddResult.addById(1, answers); // 1 - это id пользователя - console.log(result); - navigate("/"); - }; - return ( -
-

Название теста

-
- - - - - - - - - - - - - - - -
+ <> + + + ); };