Подключил шрифты
This commit is contained in:
parent
4c636c424a
commit
c4d44e3855
@ -1,57 +1,29 @@
|
|||||||
import React, { useEffect, useState } from 'react'
|
import React, {useEffect, useState} from 'react'
|
||||||
import { useDispatch, useSelector } from 'react-redux'
|
import {useSelector} from 'react-redux'
|
||||||
import { selectCurrentCandidate, auth } from '../../redux/outstaffingSlice'
|
import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
|
||||||
import { Link, useHistory, useParams } from 'react-router-dom'
|
import {Link} from 'react-router-dom'
|
||||||
import calendarMale from '../../images/medium_male.png'
|
|
||||||
import rectangle from '../../images/rectangle_secondPage.png'
|
|
||||||
import CalendarComponent from './CalendarComponent'
|
|
||||||
import { currentMonth } from './calendarHelper'
|
|
||||||
import { Footer } from '../Footer/Footer'
|
|
||||||
|
|
||||||
import { fetchReportList } from '../../server/server'
|
import CalendarComponent from './CalendarComponent'
|
||||||
import { getRole } from '../../redux/roleSlice'
|
import {currentMonth} from './calendarHelper'
|
||||||
|
import {Footer} from '../Footer/Footer'
|
||||||
|
|
||||||
|
import rectangle from '../../images/rectangle_secondPage.png'
|
||||||
|
|
||||||
import './calendar.scss'
|
import './calendar.scss'
|
||||||
|
|
||||||
const getDateParamString = ({ paramName, value }) => {
|
const Calendar = ({onSelect}) => {
|
||||||
return value ? `${paramName}=${value}` : ''
|
|
||||||
}
|
|
||||||
|
|
||||||
const Calendar = ({ onSelect }) => {
|
const candidateForCalendar = useSelector(selectCurrentCandidate);
|
||||||
const dispatch = useDispatch()
|
|
||||||
const candidateForCalendar = useSelector(selectCurrentCandidate)
|
|
||||||
const role = useSelector(getRole)
|
|
||||||
const { userId } = useParams()
|
|
||||||
const [month, setMonth] = useState('')
|
|
||||||
const [fromDate, setFromDate] = useState(null)
|
|
||||||
const [toDate, setToDate] = useState(null)
|
|
||||||
|
|
||||||
const history = useHistory()
|
const [month, setMonth] = useState('');
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// fetchReportList({
|
|
||||||
// link: `${
|
|
||||||
// process.env.REACT_APP_API_URL
|
|
||||||
// }/api/reports/index?user_id=${userId}${getDateParamString({
|
|
||||||
// paramName: 'fromDate',
|
|
||||||
// value: fromDate
|
|
||||||
// })}${getDateParamString({
|
|
||||||
// paramName: 'toDate',
|
|
||||||
// value: toDate
|
|
||||||
// })}`,
|
|
||||||
// history,
|
|
||||||
// role,
|
|
||||||
// logout: () => {}
|
|
||||||
// })
|
|
||||||
// }, [])
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setMonth(currentMonth)
|
setMonth(currentMonth)
|
||||||
}, [month])
|
}, [month]);
|
||||||
|
|
||||||
const { name, skillsName, photo } = candidateForCalendar
|
const {name, skillsName, photo} = candidateForCalendar;
|
||||||
|
|
||||||
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '))
|
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className='calendar'>
|
<section className='calendar'>
|
||||||
@ -61,12 +33,12 @@ const Calendar = ({ onSelect }) => {
|
|||||||
</h2>
|
</h2>
|
||||||
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
|
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
|
||||||
<div className='calendar__info'>
|
<div className='calendar__info'>
|
||||||
<img className='calendar__info-img' src={photo} alt='img' />
|
<img className='calendar__info-img' src={photo} alt='img'/>
|
||||||
<h3 className='calendar__info-name'>{abbreviatedName}</h3>
|
<h3 className='calendar__info-name'>{abbreviatedName}</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className='calendar__title'>
|
<div className='calendar__title'>
|
||||||
<h3 className='calendar__title-text'>{skillsName} разработчик</h3>
|
<h3 className='calendar__title-text'>{skillsName} разработчик</h3>
|
||||||
<img className='calendar__title-img' src={rectangle} alt='img' />
|
<img className='calendar__title-img' src={rectangle} alt='img'/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Link to='/report'>
|
<Link to='/report'>
|
||||||
@ -78,15 +50,15 @@ const Calendar = ({ onSelect }) => {
|
|||||||
|
|
||||||
<div className='row'>
|
<div className='row'>
|
||||||
<div className='col-12 col-xl-12'>
|
<div className='col-12 col-xl-12'>
|
||||||
<CalendarComponent onSelect={onSelect} />
|
<CalendarComponent onSelect={onSelect}/>
|
||||||
<p className='calendar__hours'>
|
<p className='calendar__hours'>
|
||||||
{month} : <span> 60 часов </span>
|
{month} : <span> 60 часов </span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer/>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Calendar
|
export default Calendar
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
.calendar {
|
.calendar {
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
|
font-family: 'LabGrotesque', sans-serif;
|
||||||
|
|
||||||
&__profile {
|
&__profile {
|
||||||
color: #282828;
|
color: #282828;
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 3.4em;
|
font-size: 3.4em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -29,7 +29,6 @@
|
|||||||
height: 112px;
|
height: 112px;
|
||||||
|
|
||||||
&-name {
|
&-name {
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -53,7 +52,6 @@
|
|||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
&-text {
|
&-text {
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 2.7em;
|
font-size: 2.7em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -86,7 +84,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__hours {
|
&__hours {
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 2.2em;
|
font-size: 2.2em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -96,7 +93,6 @@
|
|||||||
margin-left: 68px;
|
margin-left: 68px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
|
@ -7,12 +7,13 @@
|
|||||||
padding-right: 54px;
|
padding-right: 54px;
|
||||||
padding-top: 48px;
|
padding-top: 48px;
|
||||||
padding-bottom: 94px;
|
padding-bottom: 94px;
|
||||||
|
font-family: 'LabGrotesque', sans-serif;
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -33,7 +34,6 @@
|
|||||||
|
|
||||||
span {
|
span {
|
||||||
color: #18586e;
|
color: #18586e;
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -62,7 +62,6 @@
|
|||||||
|
|
||||||
p {
|
p {
|
||||||
color: #398208;
|
color: #398208;
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -87,7 +86,6 @@
|
|||||||
border: 1px solid #c4c4c4;
|
border: 1px solid #c4c4c4;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
color: #f9f9f9;
|
color: #f9f9f9;
|
||||||
}
|
}
|
||||||
.outstaffing-block {
|
.outstaffing-block {
|
||||||
|
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -28,6 +29,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__img {
|
&__img {
|
||||||
|
cursor: pointer;
|
||||||
min-width: 260px;
|
min-width: 260px;
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
background: #F1F1F1;
|
background: #F1F1F1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
font-family: 'LabGrotesque', sans-serif;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
font-family: 'LabGrotesque', sans-serif;
|
||||||
|
|
||||||
&__head {
|
&__head {
|
||||||
background: #E1FCCF;
|
background: #E1FCCF;
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
background: #F1F1F1;
|
background: #F1F1F1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
font-family: 'LabGrotesque', sans-serif;
|
||||||
//
|
//
|
||||||
//&__container {
|
//&__container {
|
||||||
// max-width: 1160px;
|
// max-width: 1160px;
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
.calendar {
|
.calendar {
|
||||||
|
font-family: 'LabGrotesque', sans-serif;
|
||||||
.profile__calendar {
|
.profile__calendar {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
import React, { useState } from 'react'
|
import React, {useState} from 'react'
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
import {useSelector, useDispatch} from 'react-redux'
|
||||||
import { fetchPost } from '../../server/server'
|
import {fetchPost} from '../../server/server'
|
||||||
import {useHistory, useParams, Redirect, Link} from 'react-router-dom'
|
import {useHistory, useParams, Redirect, Link} from 'react-router-dom'
|
||||||
import { Loader } from '../Loader/Loader'
|
import {Loader} from '../Loader/Loader'
|
||||||
import {auth} from '../../redux/outstaffingSlice'
|
import {auth} from '../../redux/outstaffingSlice'
|
||||||
import { getReportDate } from '../../redux/reportSlice'
|
import {getReportDate} from '../../redux/reportSlice'
|
||||||
import { getRole } from '../../redux/roleSlice'
|
import {getRole} from '../../redux/roleSlice'
|
||||||
import calendarIcon from '../../images/calendar_icon.png'
|
import calendarIcon from '../../images/calendar_icon.png'
|
||||||
import ellipse from '../../images/ellipse.png'
|
import ellipse from '../../images/ellipse.png'
|
||||||
import remove from '../../images/remove.png'
|
import remove from '../../images/remove.png'
|
||||||
import addIcon from '../../images/addIcon.png'
|
import addIcon from '../../images/addIcon.png'
|
||||||
import { currentMonthAndDay, getReports } from '../Calendar/calendarHelper'
|
import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
|
||||||
import './reportForm.scss'
|
import './reportForm.scss'
|
||||||
import arrow from "../../images/right-arrow.png";
|
import arrow from "../../images/right-arrow.png";
|
||||||
|
|
||||||
@ -19,37 +19,37 @@ const getCreatedDate = (day) => {
|
|||||||
return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
|
return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
|
||||||
} else {
|
} else {
|
||||||
const date = new Date();
|
const date = new Date();
|
||||||
const dd = String(date.getDate()).padStart(2, '0')
|
const dd = String(date.getDate()).padStart(2, '0');
|
||||||
const mm = String(date.getMonth() + 1).padStart(2, '0')
|
const mm = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
const yyyy = date.getFullYear()
|
const yyyy = date.getFullYear();
|
||||||
return `${yyyy}-${mm}-${dd}`
|
return `${yyyy}-${mm}-${dd}`
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const ReportForm = () => {
|
const ReportForm = () => {
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch();
|
||||||
const history = useHistory()
|
const history = useHistory();
|
||||||
const reportDate = useSelector(getReportDate)
|
const reportDate = useSelector(getReportDate);
|
||||||
const role = useSelector(getRole)
|
const role = useSelector(getRole);
|
||||||
|
|
||||||
const [isFetching, setIsFetching] = useState(false)
|
const [isFetching, setIsFetching] = useState(false);
|
||||||
const [reportSuccess, setReportSuccess] = useState(false)
|
const [reportSuccess, setReportSuccess] = useState(false);
|
||||||
|
|
||||||
const [inputs, setInputs] = useState([ { task: '', hours_spent: '', minutes_spent: 0 } ]);
|
const [inputs, setInputs] = useState([{task: '', hours_spent: '', minutes_spent: 0}]);
|
||||||
const [troublesInputValue, setTroublesInputValue] = useState('');
|
const [troublesInputValue, setTroublesInputValue] = useState('');
|
||||||
const [scheduledInputValue, setScheduledInputValue] = useState('');
|
const [scheduledInputValue, setScheduledInputValue] = useState('');
|
||||||
|
|
||||||
const addInput = () => {
|
const addInput = () => {
|
||||||
setInputs((prev) => [...prev, { task: '', hours_spent: '', minutes_spent: 0 }])
|
setInputs((prev) => [...prev, {task: '', hours_spent: '', minutes_spent: 0}])
|
||||||
}
|
};
|
||||||
|
|
||||||
const totalHours = inputs.reduce((a,b) => a + b.hours_spent, 0)
|
const totalHours = inputs.reduce((a, b) => a + b.hours_spent, 0);
|
||||||
|
|
||||||
const deleteInput = (indexRemove) => {
|
const deleteInput = (indexRemove) => {
|
||||||
if (indexRemove !== 0) {
|
if (indexRemove !== 0) {
|
||||||
setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
|
setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className='report-form'>
|
<section className='report-form'>
|
||||||
@ -73,7 +73,7 @@ const ReportForm = () => {
|
|||||||
{reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
|
{reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
|
||||||
</div>
|
</div>
|
||||||
<div className='report-form__task-list'>
|
<div className='report-form__task-list'>
|
||||||
<img src={ellipse} alt='' />
|
<img src={ellipse} alt=''/>
|
||||||
<span>Какие задачи были выполнены?</span>
|
<span>Какие задачи были выполнены?</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -93,37 +93,38 @@ const ReportForm = () => {
|
|||||||
return (
|
return (
|
||||||
<form id={'input'} key={`input__${index}`} className='report-form__task-form'>
|
<form id={'input'} key={`input__${index}`} className='report-form__task-form'>
|
||||||
<div className='report-form__task-number'>
|
<div className='report-form__task-number'>
|
||||||
{index+1}.
|
{index + 1}.
|
||||||
</div>
|
</div>
|
||||||
<div className='report-form__task-input report-form__task-input--description'>
|
<div className='report-form__task-input report-form__task-input--description'>
|
||||||
<input name='text' type='text' onChange={ e => setInputs(inputs.map( (input, inputIndex) => {
|
<input name='text' type='text' onChange={e => setInputs(inputs.map((input, inputIndex) => {
|
||||||
return index === inputIndex
|
return index === inputIndex
|
||||||
? {
|
? {
|
||||||
...input,
|
...input,
|
||||||
task: e.target.value
|
task: e.target.value
|
||||||
}
|
}
|
||||||
: input
|
: input
|
||||||
}))} />
|
}))}/>
|
||||||
</div>
|
</div>
|
||||||
<div className='report-form__task-input report-form__task-input--hours'>
|
<div className='report-form__task-input report-form__task-input--hours'>
|
||||||
<input name='number' type='number' min='1' onChange={ e => setInputs(inputs.map( (input, inputIndex) => {
|
<input name='number' type='number' min='1'
|
||||||
|
onChange={e => setInputs(inputs.map((input, inputIndex) => {
|
||||||
return index === inputIndex
|
return index === inputIndex
|
||||||
? {
|
? {
|
||||||
...input,
|
...input,
|
||||||
hours_spent: Number(e.target.value)
|
hours_spent: Number(e.target.value)
|
||||||
}
|
}
|
||||||
: input
|
: input
|
||||||
}))} />
|
}))}/>
|
||||||
</div>
|
</div>
|
||||||
<div className='report-form__task-remove'>
|
<div className='report-form__task-remove'>
|
||||||
<img onClick={() => deleteInput(index)} src={remove} alt='' />
|
<img onClick={() => deleteInput(index)} src={remove} alt=''/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|
||||||
<div className='report-form__form-add'>
|
<div className='report-form__form-add'>
|
||||||
<img onClick={addInput} src={addIcon} alt='' />
|
<img onClick={addInput} src={addIcon} alt=''/>
|
||||||
<span>Добавить еще </span>
|
<span>Добавить еще </span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -134,15 +135,15 @@ const ReportForm = () => {
|
|||||||
<div className='col-12'>
|
<div className='col-12'>
|
||||||
<div className='report-form__input-box'>
|
<div className='report-form__input-box'>
|
||||||
<div className='report-form__troubles'>
|
<div className='report-form__troubles'>
|
||||||
<img src={ellipse} alt='' />
|
<img src={ellipse} alt=''/>
|
||||||
<span>Какие сложности возникли?</span>
|
<span>Какие сложности возникли?</span>
|
||||||
</div>
|
</div>
|
||||||
<input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)} />
|
<input type='text' value={troublesInputValue} onChange={e => setTroublesInputValue(e.target.value)}/>
|
||||||
<div className='report-form__scheduled'>
|
<div className='report-form__scheduled'>
|
||||||
<img src={ellipse} alt='' />
|
<img src={ellipse} alt=''/>
|
||||||
<span>Что планируется сделать завтра?</span>
|
<span>Что планируется сделать завтра?</span>
|
||||||
</div>
|
</div>
|
||||||
<input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)} />
|
<input type='text' value={scheduledInputValue} onChange={e => setScheduledInputValue(e.target.value)}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -164,19 +165,19 @@ const ReportForm = () => {
|
|||||||
logout: () => dispatch(auth(false))
|
logout: () => dispatch(auth(false))
|
||||||
}).then((res) =>
|
}).then((res) =>
|
||||||
res.json().then((resJSON) => {
|
res.json().then((resJSON) => {
|
||||||
if(res.status === 200) {
|
if (res.status === 200) {
|
||||||
setReportSuccess(true)
|
setReportSuccess(true);
|
||||||
setTimeout(()=> setReportSuccess(false),2000)
|
setTimeout(() => setReportSuccess(false), 2000)
|
||||||
}
|
}
|
||||||
setInputs( () => [] )
|
setInputs(() => []);
|
||||||
setTroublesInputValue('');
|
setTroublesInputValue('');
|
||||||
setScheduledInputValue('');
|
setScheduledInputValue('');
|
||||||
setIsFetching(false)
|
setIsFetching(false);
|
||||||
setInputs(() => [ { task: '', hours_spent: '', minutes_spent: 0 } ]);
|
setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
}}>
|
}}>
|
||||||
{isFetching ? <Loader /> : 'Отправить'}
|
{isFetching ? <Loader/> : 'Отправить'}
|
||||||
</button>
|
</button>
|
||||||
<p className='report-form__footer-text'>
|
<p className='report-form__footer-text'>
|
||||||
Всего за день : <span>{totalHours} часов</span>
|
Всего за день : <span>{totalHours} часов</span>
|
||||||
@ -189,6 +190,6 @@ const ReportForm = () => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
};
|
||||||
|
|
||||||
export default ReportForm
|
export default ReportForm
|
||||||
|
BIN
src/fonts/LabGrotesque-Bold.eot
Normal file
BIN
src/fonts/LabGrotesque-Bold.eot
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Bold.ttf
Normal file
BIN
src/fonts/LabGrotesque-Bold.ttf
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Bold.woff
Normal file
BIN
src/fonts/LabGrotesque-Bold.woff
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Bold.woff2
Normal file
BIN
src/fonts/LabGrotesque-Bold.woff2
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Light.eot
Normal file
BIN
src/fonts/LabGrotesque-Light.eot
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Light.ttf
Normal file
BIN
src/fonts/LabGrotesque-Light.ttf
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Light.woff
Normal file
BIN
src/fonts/LabGrotesque-Light.woff
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Light.woff2
Normal file
BIN
src/fonts/LabGrotesque-Light.woff2
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Medium.eot
Normal file
BIN
src/fonts/LabGrotesque-Medium.eot
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Medium.ttf
Normal file
BIN
src/fonts/LabGrotesque-Medium.ttf
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Medium.woff
Normal file
BIN
src/fonts/LabGrotesque-Medium.woff
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Medium.woff2
Normal file
BIN
src/fonts/LabGrotesque-Medium.woff2
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Regular.eot
Normal file
BIN
src/fonts/LabGrotesque-Regular.eot
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Regular.ttf
Normal file
BIN
src/fonts/LabGrotesque-Regular.ttf
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Regular.woff
Normal file
BIN
src/fonts/LabGrotesque-Regular.woff
Normal file
Binary file not shown.
BIN
src/fonts/LabGrotesque-Regular.woff2
Normal file
BIN
src/fonts/LabGrotesque-Regular.woff2
Normal file
Binary file not shown.
@ -353,3 +353,44 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'LabGrotesque';
|
||||||
|
src: url('LabGrotesque-Regular.eot');
|
||||||
|
src: local('LabGrotesque-Regular'), local('LabGrotesque-Regular'),
|
||||||
|
url('LabGrotesque-Regular.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('LabGrotesque-Regular.woff2') format('woff2'), url('LabGrotesque-Regular.woff') format('woff'),
|
||||||
|
url('LabGrotesque-Regular.ttf') format('truetype');
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'LabGrotesque';
|
||||||
|
src: url('LabGrotesque-Medium.eot');
|
||||||
|
src: local('LabGrotesque-Medium'), local('LabGrotesque-Medium'),
|
||||||
|
url('LabGrotesque-Medium.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('LabGrotesque-Medium.woff2') format('woff2'), url('LabGrotesque-Medium.woff') format('woff'),
|
||||||
|
url('LabGrotesque-Medium.ttf') format('truetype');
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'LabGrotesque';
|
||||||
|
src: url('LabGrotesque-Bold.eot');
|
||||||
|
src: local('LabGrotesque-Bold'), local('LabGrotesque-Bold'),
|
||||||
|
url('LabGrotesque-Bold.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('LabGrotesque-Bold.woff2') format('woff2'), url('LabGrotesque-Bold.woff') format('woff'),
|
||||||
|
url('LabGrotesque-Bold.ttf') format('truetype');
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'LabGrotesque';
|
||||||
|
src: url('LabGrotesque-Light.eot');
|
||||||
|
src: local('LabGrotesque-Light'), local('LabGrotesque-Light'),
|
||||||
|
url('LabGrotesque-Light.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('LabGrotesque-Light.woff2') format('woff2'), url('LabGrotesque-Light.woff') format('woff'),
|
||||||
|
url('LabGrotesque-Light.ttf') format('truetype');
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||||||
import {useSelector} from "react-redux";
|
import {useSelector} from "react-redux";
|
||||||
import {getProfileInfo} from "../redux/outstaffingSlice";
|
import {getProfileInfo} from "../redux/outstaffingSlice";
|
||||||
import {ProfileHeader} from "../components/Profile/ProfileHeader";
|
import {ProfileHeader} from "../components/Profile/ProfileHeader";
|
||||||
import {NavLink} from "react-router-dom";
|
import {Link} from "react-router-dom";
|
||||||
import {Footer} from "../components/Footer/Footer";
|
import {Footer} from "../components/Footer/Footer";
|
||||||
|
|
||||||
import reportsIcon from "../images/reports.png"
|
import reportsIcon from "../images/reports.png"
|
||||||
@ -15,7 +15,7 @@ import rightArrow from "../images/arrowRight.png"
|
|||||||
import '../components/Profile/profile.scss'
|
import '../components/Profile/profile.scss'
|
||||||
|
|
||||||
export const Profile = () => {
|
export const Profile = () => {
|
||||||
const profileInfo = useSelector(getProfileInfo)
|
const profileInfo = useSelector(getProfileInfo);
|
||||||
return(
|
return(
|
||||||
<div className='profile'>
|
<div className='profile'>
|
||||||
<ProfileHeader/>
|
<ProfileHeader/>
|
||||||
@ -23,74 +23,74 @@ export const Profile = () => {
|
|||||||
<h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
|
<h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
|
||||||
<div className='summary__info'>
|
<div className='summary__info'>
|
||||||
<div className='summary__person'>
|
<div className='summary__person'>
|
||||||
<img src={profileInfo.photo} className='summary__avatar' />
|
<img src={profileInfo.photo} className='summary__avatar' alt='avatar'/>
|
||||||
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
|
<p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='profile__items'>
|
<div className='profile__items'>
|
||||||
<NavLink to={'/ProfileCalendar'} className='item'>
|
<Link to={'/ProfileCalendar'} className='item'>
|
||||||
<div className='item__about'>
|
<div className='item__about'>
|
||||||
<img src={reportsIcon} />
|
<img src={reportsIcon} alt='report'/>
|
||||||
<h3>Ваша отчетность</h3>
|
<h3>Ваша отчетность</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className='item__info'>
|
<div className='item__info'>
|
||||||
<p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
|
<p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
|
||||||
<div className='item__infoLink'>
|
<div className='item__infoLink'>
|
||||||
<img src={rightArrow} />
|
<img src={rightArrow} alt='arrow'/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
</Link>
|
||||||
<NavLink to={'/summary'} className='item'>
|
<Link to={'/summary'} className='item'>
|
||||||
<div className='item__about'>
|
<div className='item__about'>
|
||||||
<img src={summaryIcon} />
|
<img src={summaryIcon} alt='summary'/>
|
||||||
<h3>Данные и резюме</h3>
|
<h3>Данные и резюме</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className='item__info'>
|
<div className='item__info'>
|
||||||
<p>Ваше резюме<br/><span>заполнено</span></p>
|
<p>Ваше резюме<br/><span>заполнено</span></p>
|
||||||
<div className='item__infoLink'>
|
<div className='item__infoLink'>
|
||||||
<img src={rightArrow} />
|
<img src={rightArrow} alt='arrow'/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
</Link>
|
||||||
<NavLink to={'/profile'} className='item'>
|
<Link to={'/profile'} className='item'>
|
||||||
<div className='item__about'>
|
<div className='item__about'>
|
||||||
<img src={timerIcon} />
|
<img src={timerIcon} alt='timer'/>
|
||||||
<h3>Трекер времени</h3>
|
<h3>Трекер времени</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className='item__info'>
|
<div className='item__info'>
|
||||||
<p>Сколько времени занимает<br/> выполнение задач</p>
|
<p>Сколько времени занимает<br/> выполнение задач</p>
|
||||||
<div className='item__infoLink'>
|
<div className='item__infoLink'>
|
||||||
<img src={rightArrow} />
|
<img src={rightArrow} alt='arrow'/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
</Link>
|
||||||
<NavLink to={'/profile'} className='item'>
|
<Link to={'/profile'} className='item'>
|
||||||
<div className='item__about'>
|
<div className='item__about'>
|
||||||
<img src={paymentIcon} />
|
<img src={paymentIcon} alt='payment'/>
|
||||||
<h3>Выплаты</h3>
|
<h3>Выплаты</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className='item__info'>
|
<div className='item__info'>
|
||||||
<p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
|
<p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
|
||||||
<div className='item__infoLink'>
|
<div className='item__infoLink'>
|
||||||
<img src={rightArrow} />
|
<img src={rightArrow} alt='arrow'/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
</Link>
|
||||||
<NavLink to={'/profile'} className='item'>
|
<Link to={'/profile'} className='item'>
|
||||||
<div className='item__about'>
|
<div className='item__about'>
|
||||||
<img src={settingIcon} />
|
<img src={settingIcon} alt='settings'/>
|
||||||
<h3>Настройки аккаунта</h3>
|
<h3>Настройки аккаунта</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className='item__info'>
|
<div className='item__info'>
|
||||||
<p>Перейдите чтобы начать<br/> редактирование</p>
|
<p>Перейдите чтобы начать<br/> редактирование</p>
|
||||||
<div className='item__infoLink'>
|
<div className='item__infoLink'>
|
||||||
<img src={rightArrow} />
|
<img src={rightArrow} alt='arrow'/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</NavLink>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer/>
|
<Footer/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
};
|
||||||
|
@ -1,23 +1,23 @@
|
|||||||
import { withAuthRedirect } from './authRedirect'
|
import { withAuthRedirect } from './authRedirect'
|
||||||
|
|
||||||
export const fetchForm = withAuthRedirect(async (link, info) => {
|
// export const fetchForm = withAuthRedirect(async (link, info) => {
|
||||||
try {
|
// try {
|
||||||
const response = await fetch(link, {
|
// const response = await fetch(link, {
|
||||||
method: 'POST',
|
// method: 'POST',
|
||||||
headers: {
|
// headers: {
|
||||||
// 'Access-Control-Request-Headers': 'authorization',
|
// // 'Access-Control-Request-Headers': 'authorization',
|
||||||
Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
|
// Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
|
||||||
Origin: `${process.env.REACT_APP_BASE_URL}`,
|
// Origin: `${process.env.REACT_APP_BASE_URL}`,
|
||||||
'Content-Type': 'application/json'
|
// 'Content-Type': 'application/json'
|
||||||
},
|
// },
|
||||||
body: JSON.stringify(info)
|
// body: JSON.stringify(info)
|
||||||
})
|
// });
|
||||||
|
//
|
||||||
return response
|
// return response
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
console.log('Query error', error)
|
// console.log('Query error', error)
|
||||||
}
|
// }
|
||||||
})
|
// });
|
||||||
|
|
||||||
export const fetchAuth = async ({
|
export const fetchAuth = async ({
|
||||||
username,
|
username,
|
||||||
@ -25,7 +25,7 @@ export const fetchAuth = async ({
|
|||||||
dispatch,
|
dispatch,
|
||||||
catchError
|
catchError
|
||||||
}) => {
|
}) => {
|
||||||
const apiURL = process.env.REACT_APP_API_URL
|
const apiURL = process.env.REACT_APP_API_URL;
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${apiURL}/api/user/login`, {
|
const response = await fetch(`${apiURL}/api/user/login`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@ -39,27 +39,27 @@ export const fetchAuth = async ({
|
|||||||
username,
|
username,
|
||||||
password
|
password
|
||||||
})
|
})
|
||||||
})
|
});
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
catchError()
|
catchError();
|
||||||
return response.statusText
|
return response.statusText
|
||||||
}
|
}
|
||||||
|
|
||||||
response.json().then((resJSON) => {
|
response.json().then((resJSON) => {
|
||||||
localStorage.setItem('auth_token', resJSON.access_token)
|
localStorage.setItem('auth_token', resJSON.access_token);
|
||||||
localStorage.setItem('id', resJSON.id)
|
localStorage.setItem('id', resJSON.id);
|
||||||
localStorage.setItem('cardId', resJSON.card_id)
|
localStorage.setItem('cardId', resJSON.card_id);
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
'access_token_expired_at',
|
'access_token_expired_at',
|
||||||
resJSON.access_token_expired_at
|
resJSON.access_token_expired_at
|
||||||
)
|
);
|
||||||
dispatch(resJSON)
|
dispatch(resJSON)
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error occured: ', error)
|
console.error('Error occured: ', error)
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
export const fetchReportList = withAuthRedirect(async (link) => {
|
export const fetchReportList = withAuthRedirect(async (link) => {
|
||||||
try {
|
try {
|
||||||
@ -72,14 +72,14 @@ export const fetchReportList = withAuthRedirect(async (link) => {
|
|||||||
Authorization: `Bearer ${localStorage.getItem('auth_token')}`
|
Authorization: `Bearer ${localStorage.getItem('auth_token')}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
let data = await response.json()
|
let data = await response.json();
|
||||||
|
|
||||||
return data
|
return data
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('Query error', error)
|
console.log('Query error', error)
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
export const fetchGet = withAuthRedirect(async (link) => {
|
export const fetchGet = withAuthRedirect(async (link) => {
|
||||||
try {
|
try {
|
||||||
@ -88,17 +88,17 @@ export const fetchGet = withAuthRedirect(async (link) => {
|
|||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${localStorage.getItem('auth_token')}`
|
Authorization: `Bearer ${localStorage.getItem('auth_token')}`
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
let data = await response.json()
|
let data = await response.json();
|
||||||
|
|
||||||
return data
|
return data
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('Query error', error)
|
console.log('Query error', error)
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
export const fetchPost = withAuthRedirect(async (link, body) => {
|
export const fetchPost = withAuthRedirect(async (link, body) => {
|
||||||
console.log('i', body)
|
console.log('i', body);
|
||||||
try {
|
try {
|
||||||
const response = await fetch(link, {
|
const response = await fetch(link, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@ -109,10 +109,10 @@ export const fetchPost = withAuthRedirect(async (link, body) => {
|
|||||||
Origin: `${process.env.REACT_APP_BASE_URL}`
|
Origin: `${process.env.REACT_APP_BASE_URL}`
|
||||||
},
|
},
|
||||||
body: JSON.stringify(body)
|
body: JSON.stringify(body)
|
||||||
})
|
});
|
||||||
|
|
||||||
return response
|
return response
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('Query error', error)
|
console.log('Query error', error)
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user