Переписываю спорные решения
Фикс отправки отчета, проверка на массив в map в Description.js
This commit is contained in:
114
src/pages/SingleReportPage/SingleReportPage.js
Normal file
114
src/pages/SingleReportPage/SingleReportPage.js
Normal file
@ -0,0 +1,114 @@
|
||||
import React from 'react'
|
||||
import { WithLogout } from '../../hoc/withLogout'
|
||||
import arrowLeft from '../../images/right-arrow.png'
|
||||
|
||||
import SVG from 'react-inlinesvg'
|
||||
|
||||
import dateArrowIcon from '../../images/dateArrow.svg'
|
||||
import calendarIcon from '../../images/calendar.svg'
|
||||
|
||||
import { TaskItem } from '../../components/TaskItem/TaskItem'
|
||||
|
||||
import './singleReportPage.scss'
|
||||
import {useNavigate} from "react-router";
|
||||
import {LogoutButton} from "../../components/LogoutButton/LogoutButton";
|
||||
|
||||
const tasks = [
|
||||
{
|
||||
index: 1,
|
||||
text: 'Задача «67 – Навигационная система – Главное меню – Обновить иконки» заблокирована из-за отсутствия новых иконок',
|
||||
hours: 3
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
text: 'Задача «83 – Навигационная система – Поиск по почтовому индексу – Добавить экран поиска по почтовому индексу» не может быть завершена, т.к. работа над задачей «82 – Навигационная система – Разработать модуль поиска по почтовому индексу» ещё не начата',
|
||||
hours: 3
|
||||
}
|
||||
];
|
||||
|
||||
const SingleReportPage = () => {
|
||||
|
||||
const navigate= useNavigate();
|
||||
|
||||
return (
|
||||
|
||||
<div className='single-report-page'>
|
||||
<div onClick={()=> {navigate(-1)}} className='single-report-page__back'>
|
||||
<div className='single-report-page__back-arrow'>
|
||||
<img src={arrowLeft} alt='arrowLeft'/>
|
||||
</div>
|
||||
<div className='single-report-page__back-text'>
|
||||
Вернуться к списку
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='single-report-page__title'>
|
||||
<div className='single-report-page__title-text'>Отчет за день</div>
|
||||
<div className='single-report-page__title-date'>
|
||||
<div className='single-report-page__title-date--prev'>
|
||||
<button>
|
||||
<SVG src={dateArrowIcon} />
|
||||
</button>
|
||||
</div>
|
||||
<div className='single-report-page__title-date--actual'>
|
||||
<SVG src={calendarIcon} />
|
||||
<p>15 июня</p>
|
||||
</div>
|
||||
<div className='single-report-page__title-date--next single-report-page__title-date--enabled'>
|
||||
<button>
|
||||
<SVG src={dateArrowIcon} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='single-report-page__tasks'>
|
||||
<div className='single-report-page__tasks-title'>
|
||||
<div className='single-report-page__marker'></div>
|
||||
<h3>Какие задачи были выполнены?</h3>
|
||||
</div>
|
||||
{tasks.map((task) => {
|
||||
return (
|
||||
<div className='single-report-page__tasks-item'>
|
||||
<TaskItem {...task} />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className='single-report-page__troubles'>
|
||||
<div className='single-report-page__troubles-title'>
|
||||
<div className='single-report-page__marker'></div>
|
||||
<h3>Какие сложности возникли?</h3>
|
||||
</div>
|
||||
<div className='single-report-page__troubles-item'>
|
||||
91 – Навигационная система – Поиск адреса – Разобраться, почему
|
||||
находятся несколько пересечений Невского пр. и Казанской ул.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='single-report-page__scheduled'>
|
||||
<div className='single-report-page__scheduled-title'>
|
||||
<div className='single-report-page__marker'></div>
|
||||
<h3>Что планируется сделать завтра?</h3>
|
||||
</div>
|
||||
<div className='single-report-page__scheduled-item'>
|
||||
91 – Навигационная система – Поиск адреса – Разобраться, почему
|
||||
находятся несколько пересечений Невского пр. и Казанской ул.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='single-report-page__footer'>
|
||||
<div className='single-report-page__footer-rectangle'></div>
|
||||
<div className='single-report-page__hours'>
|
||||
<div className='single-report-page__hours-value'></div>
|
||||
<div className='single-report-page__hours-text'></div>
|
||||
</div>
|
||||
</div>
|
||||
<LogoutButton />
|
||||
</div>
|
||||
|
||||
)
|
||||
};
|
||||
|
||||
export default SingleReportPage
|
122
src/pages/SingleReportPage/singleReportPage.scss
Normal file
122
src/pages/SingleReportPage/singleReportPage.scss
Normal file
@ -0,0 +1,122 @@
|
||||
.single-report-page {
|
||||
padding: 4.6rem 20px 0;
|
||||
font-family: 'GT Eesti Pro Display', sans-serif;
|
||||
&__back {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
&-text {
|
||||
margin-left: 3.1rem;
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
letter-spacing: normal;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 3rem;
|
||||
|
||||
&-text {
|
||||
color: #282828;
|
||||
font-size: 33px;
|
||||
font-weight: 700;
|
||||
line-height: 48.74px;
|
||||
text-align: left;
|
||||
letter-spacing: 0.56px;
|
||||
}
|
||||
|
||||
&-date {
|
||||
margin-top: 0.2rem;
|
||||
margin-left: 3rem;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&--prev {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
&--actual {
|
||||
width: 125px;
|
||||
height: 42px;
|
||||
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c4c4c4;
|
||||
background-color: #f0f7e0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 0 65px;
|
||||
|
||||
p {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 0;
|
||||
color: #000000;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
background-color: #54b611;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__marker {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #18586e;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
|
||||
&__tasks,
|
||||
&__troubles,
|
||||
&__scheduled {
|
||||
margin-top: 3.7rem;
|
||||
&-title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
h3 {
|
||||
color: #18586e;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
margin-top: 2.4rem;
|
||||
width: 580px;
|
||||
color: #000000;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user