Подключил шрифты

This commit is contained in:
Дмитрий Савенко 2023-01-09 20:53:23 +03:00
parent 4c636c424a
commit c4d44e3855
28 changed files with 305 additions and 292 deletions

View File

@ -1,57 +1,29 @@
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { selectCurrentCandidate, auth } from '../../redux/outstaffingSlice'
import { Link, useHistory, useParams } 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 React, {useEffect, useState} from 'react'
import {useSelector} from 'react-redux'
import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
import {Link} from 'react-router-dom'
import { fetchReportList } from '../../server/server'
import { getRole } from '../../redux/roleSlice'
import CalendarComponent from './CalendarComponent'
import {currentMonth} from './calendarHelper'
import {Footer} from '../Footer/Footer'
import rectangle from '../../images/rectangle_secondPage.png'
import './calendar.scss'
const getDateParamString = ({ paramName, value }) => {
return value ? `${paramName}=${value}` : ''
}
const Calendar = ({onSelect}) => {
const Calendar = ({ onSelect }) => {
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 candidateForCalendar = useSelector(selectCurrentCandidate);
const history = useHistory()
// 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: () => {}
// })
// }, [])
const [month, setMonth] = useState('');
useEffect(() => {
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 (
<section className='calendar'>
@ -61,12 +33,12 @@ const Calendar = ({ onSelect }) => {
</h2>
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
<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>
</div>
<div className='calendar__title'>
<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>
<Link to='/report'>
@ -78,15 +50,15 @@ const Calendar = ({ onSelect }) => {
<div className='row'>
<div className='col-12 col-xl-12'>
<CalendarComponent onSelect={onSelect} />
<CalendarComponent onSelect={onSelect}/>
<p className='calendar__hours'>
{month} : <span> 60 часов </span>
</p>
</div>
</div>
<Footer />
<Footer/>
</section>
)
}
};
export default Calendar

View File

@ -1,9 +1,9 @@
.calendar {
margin-bottom: 40px;
font-family: 'LabGrotesque', sans-serif;
&__profile {
color: #282828;
font-family: 'GT Eesti Pro Display';
font-size: 3.4em;
font-weight: 700;
font-style: normal;
@ -29,7 +29,6 @@
height: 112px;
&-name {
font-family: 'GT Eesti Pro Display';
font-size: 2em;
font-weight: 400;
font-style: normal;
@ -53,7 +52,6 @@
&__title {
&-text {
font-family: 'GT Eesti Pro Display';
font-size: 2.7em;
font-weight: 700;
font-style: normal;
@ -86,7 +84,6 @@
}
&__hours {
font-family: 'GT Eesti Pro Display';
font-size: 2.2em;
font-weight: 600;
font-style: normal;
@ -96,7 +93,6 @@
margin-left: 68px;
span {
font-family: 'GT Eesti Pro Display';
font-weight: 100;
font-style: normal;
letter-spacing: normal;

View File

@ -7,12 +7,13 @@
padding-right: 54px;
padding-top: 48px;
padding-bottom: 94px;
font-family: 'LabGrotesque', sans-serif;
&__header {
display: flex;
h3 {
font-family: 'GT Eesti Pro Display';
font-size: 2.5em;
font-weight: 400;
font-style: normal;
@ -33,7 +34,6 @@
span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-size: 1.6em;
font-weight: 500;
font-style: normal;
@ -62,7 +62,6 @@
p {
color: #398208;
font-family: 'GT Eesti Pro Display';
font-size: 25px;
font-weight: 400;
font-style: normal;
@ -87,7 +86,6 @@
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-top: 20px;
font-family: 'GT Eesti Pro Display';
font-size: 1.2em;
font-weight: 100;
font-style: normal;

View File

@ -3,6 +3,7 @@
color: #f9f9f9;
}
.outstaffing-block {
margin-top: 60px;
display: flex;
flex-direction: column;
@ -28,6 +29,7 @@
}
&__img {
cursor: pointer;
min-width: 260px;
min-height: 120px;
background-color: #f9f9f9;

View File

@ -2,6 +2,7 @@
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
&__title {
font-weight: 700;

View File

@ -2,6 +2,7 @@
width: 100%;
display: flex;
flex-direction: column;
font-family: 'LabGrotesque', sans-serif;
&__head {
background: #E1FCCF;

View File

@ -2,6 +2,7 @@
background: #F1F1F1;
height: 100%;
min-height: 100vh;
font-family: 'LabGrotesque', sans-serif;
//
//&__container {
// max-width: 1160px;

View File

@ -1,5 +1,5 @@
.calendar {
font-family: 'LabGrotesque', sans-serif;
.profile__calendar {
margin-top: 20px;
}

View File

@ -1,16 +1,16 @@
import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { fetchPost } from '../../server/server'
import React, {useState} from 'react'
import {useSelector, useDispatch} from 'react-redux'
import {fetchPost} from '../../server/server'
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 { getReportDate } from '../../redux/reportSlice'
import { getRole } from '../../redux/roleSlice'
import {getReportDate} from '../../redux/reportSlice'
import {getRole} from '../../redux/roleSlice'
import calendarIcon from '../../images/calendar_icon.png'
import ellipse from '../../images/ellipse.png'
import remove from '../../images/remove.png'
import addIcon from '../../images/addIcon.png'
import { currentMonthAndDay, getReports } from '../Calendar/calendarHelper'
import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
import './reportForm.scss'
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()}`
} else {
const date = new Date();
const dd = String(date.getDate()).padStart(2, '0')
const mm = String(date.getMonth() + 1).padStart(2, '0')
const yyyy = date.getFullYear()
const dd = String(date.getDate()).padStart(2, '0');
const mm = String(date.getMonth() + 1).padStart(2, '0');
const yyyy = date.getFullYear();
return `${yyyy}-${mm}-${dd}`
}
}
};
const ReportForm = () => {
const dispatch = useDispatch()
const history = useHistory()
const reportDate = useSelector(getReportDate)
const role = useSelector(getRole)
const dispatch = useDispatch();
const history = useHistory();
const reportDate = useSelector(getReportDate);
const role = useSelector(getRole);
const [isFetching, setIsFetching] = useState(false)
const [reportSuccess, setReportSuccess] = useState(false)
const [isFetching, setIsFetching] = 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 [scheduledInputValue, setScheduledInputValue] = useState('');
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) => {
if (indexRemove !== 0) {
setInputs((prev) => prev.filter((el, index) => index !== indexRemove))
}
}
};
return (
<section className='report-form'>
@ -73,7 +73,7 @@ const ReportForm = () => {
{reportDate ? currentMonthAndDay(reportDate) : getCreatedDate()}
</div>
<div className='report-form__task-list'>
<img src={ellipse} alt='' />
<img src={ellipse} alt=''/>
<span>Какие задачи были выполнены?</span>
</div>
</div>
@ -93,37 +93,38 @@ const ReportForm = () => {
return (
<form id={'input'} key={`input__${index}`} className='report-form__task-form'>
<div className='report-form__task-number'>
{index+1}.
{index + 1}.
</div>
<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
? {
...input,
task: e.target.value
}
: input
}))} />
}))}/>
</div>
<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
? {
...input,
hours_spent: Number(e.target.value)
}
: input
}))} />
}))}/>
</div>
<div className='report-form__task-remove'>
<img onClick={() => deleteInput(index)} src={remove} alt='' />
<img onClick={() => deleteInput(index)} src={remove} alt=''/>
</div>
</form>
)
})}
<div className='report-form__form-add'>
<img onClick={addInput} src={addIcon} alt='' />
<img onClick={addInput} src={addIcon} alt=''/>
<span>Добавить еще </span>
</div>
</div>
@ -134,15 +135,15 @@ const ReportForm = () => {
<div className='col-12'>
<div className='report-form__input-box'>
<div className='report-form__troubles'>
<img src={ellipse} alt='' />
<img src={ellipse} alt=''/>
<span>Какие сложности возникли?</span>
</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'>
<img src={ellipse} alt='' />
<img src={ellipse} alt=''/>
<span>Что планируется сделать завтра?</span>
</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>
@ -164,19 +165,19 @@ const ReportForm = () => {
logout: () => dispatch(auth(false))
}).then((res) =>
res.json().then((resJSON) => {
if(res.status === 200) {
setReportSuccess(true)
setTimeout(()=> setReportSuccess(false),2000)
if (res.status === 200) {
setReportSuccess(true);
setTimeout(() => setReportSuccess(false), 2000)
}
setInputs( () => [] )
setInputs(() => []);
setTroublesInputValue('');
setScheduledInputValue('');
setIsFetching(false)
setInputs(() => [ { task: '', hours_spent: '', minutes_spent: 0 } ]);
setIsFetching(false);
setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
})
)
}}>
{isFetching ? <Loader /> : 'Отправить'}
{isFetching ? <Loader/> : 'Отправить'}
</button>
<p className='report-form__footer-text'>
Всего за день : <span>{totalHours} часов</span>
@ -189,6 +190,6 @@ const ReportForm = () => {
</div>
</section>
)
}
};
export default ReportForm

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -353,3 +353,44 @@
font-weight: bold;
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;
}

View File

@ -2,7 +2,7 @@ import React from 'react';
import {useSelector} from "react-redux";
import {getProfileInfo} from "../redux/outstaffingSlice";
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 reportsIcon from "../images/reports.png"
@ -15,7 +15,7 @@ import rightArrow from "../images/arrowRight.png"
import '../components/Profile/profile.scss'
export const Profile = () => {
const profileInfo = useSelector(getProfileInfo)
const profileInfo = useSelector(getProfileInfo);
return(
<div className='profile'>
<ProfileHeader/>
@ -23,74 +23,74 @@ export const Profile = () => {
<h2 className='profile__title'>Добрый день, <span>{profileInfo.fio}</span></h2>
<div className='summary__info'>
<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>
</div>
</div>
<div className='profile__items'>
<NavLink to={'/ProfileCalendar'} className='item'>
<Link to={'/ProfileCalendar'} className='item'>
<div className='item__about'>
<img src={reportsIcon} />
<img src={reportsIcon} alt='report'/>
<h3>Ваша отчетность</h3>
</div>
<div className='item__info'>
<p><span>У вас 122 часа</span><br/> отработанных в этом месяце</p>
<div className='item__infoLink'>
<img src={rightArrow} />
<img src={rightArrow} alt='arrow'/>
</div>
</div>
</NavLink>
<NavLink to={'/summary'} className='item'>
</Link>
<Link to={'/summary'} className='item'>
<div className='item__about'>
<img src={summaryIcon} />
<img src={summaryIcon} alt='summary'/>
<h3>Данные и резюме</h3>
</div>
<div className='item__info'>
<p>Ваше резюме<br/><span>заполнено</span></p>
<div className='item__infoLink'>
<img src={rightArrow} />
<img src={rightArrow} alt='arrow'/>
</div>
</div>
</NavLink>
<NavLink to={'/profile'} className='item'>
</Link>
<Link to={'/profile'} className='item'>
<div className='item__about'>
<img src={timerIcon} />
<img src={timerIcon} alt='timer'/>
<h3>Трекер времени</h3>
</div>
<div className='item__info'>
<p>Сколько времени занимает<br/> выполнение задач</p>
<div className='item__infoLink'>
<img src={rightArrow} />
<img src={rightArrow} alt='arrow'/>
</div>
</div>
</NavLink>
<NavLink to={'/profile'} className='item'>
</Link>
<Link to={'/profile'} className='item'>
<div className='item__about'>
<img src={paymentIcon} />
<img src={paymentIcon} alt='payment'/>
<h3>Выплаты</h3>
</div>
<div className='item__info'>
<p>У вас <span>подтвержден</span><br/> статус самозанятого</p>
<div className='item__infoLink'>
<img src={rightArrow} />
<img src={rightArrow} alt='arrow'/>
</div>
</div>
</NavLink>
<NavLink to={'/profile'} className='item'>
</Link>
<Link to={'/profile'} className='item'>
<div className='item__about'>
<img src={settingIcon} />
<img src={settingIcon} alt='settings'/>
<h3>Настройки аккаунта</h3>
</div>
<div className='item__info'>
<p>Перейдите чтобы начать<br/> редактирование</p>
<div className='item__infoLink'>
<img src={rightArrow} />
<img src={rightArrow} alt='arrow'/>
</div>
</div>
</NavLink>
</Link>
</div>
</div>
<Footer/>
</div>
)
}
};

View File

@ -1,23 +1,23 @@
import { withAuthRedirect } from './authRedirect'
export const fetchForm = withAuthRedirect(async (link, info) => {
try {
const response = await fetch(link, {
method: 'POST',
headers: {
// 'Access-Control-Request-Headers': 'authorization',
Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
Origin: `${process.env.REACT_APP_BASE_URL}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(info)
})
return response
} catch (error) {
console.log('Query error', error)
}
})
// export const fetchForm = withAuthRedirect(async (link, info) => {
// try {
// const response = await fetch(link, {
// method: 'POST',
// headers: {
// // 'Access-Control-Request-Headers': 'authorization',
// Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
// Origin: `${process.env.REACT_APP_BASE_URL}`,
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(info)
// });
//
// return response
// } catch (error) {
// console.log('Query error', error)
// }
// });
export const fetchAuth = async ({
username,
@ -25,7 +25,7 @@ export const fetchAuth = async ({
dispatch,
catchError
}) => {
const apiURL = process.env.REACT_APP_API_URL
const apiURL = process.env.REACT_APP_API_URL;
try {
const response = await fetch(`${apiURL}/api/user/login`, {
method: 'POST',
@ -39,27 +39,27 @@ export const fetchAuth = async ({
username,
password
})
})
});
if (!response.ok) {
catchError()
catchError();
return response.statusText
}
response.json().then((resJSON) => {
localStorage.setItem('auth_token', resJSON.access_token)
localStorage.setItem('id', resJSON.id)
localStorage.setItem('cardId', resJSON.card_id)
localStorage.setItem('auth_token', resJSON.access_token);
localStorage.setItem('id', resJSON.id);
localStorage.setItem('cardId', resJSON.card_id);
localStorage.setItem(
'access_token_expired_at',
resJSON.access_token_expired_at
)
);
dispatch(resJSON)
})
} catch (error) {
console.error('Error occured: ', error)
}
}
};
export const fetchReportList = withAuthRedirect(async (link) => {
try {
@ -72,14 +72,14 @@ export const fetchReportList = withAuthRedirect(async (link) => {
Authorization: `Bearer ${localStorage.getItem('auth_token')}`
}
}
)
let data = await response.json()
);
let data = await response.json();
return data
} catch (error) {
console.log('Query error', error)
}
})
});
export const fetchGet = withAuthRedirect(async (link) => {
try {
@ -88,17 +88,17 @@ export const fetchGet = withAuthRedirect(async (link) => {
headers: {
Authorization: `Bearer ${localStorage.getItem('auth_token')}`
}
})
let data = await response.json()
});
let data = await response.json();
return data
} catch (error) {
console.log('Query error', error)
}
})
});
export const fetchPost = withAuthRedirect(async (link, body) => {
console.log('i', body)
console.log('i', body);
try {
const response = await fetch(link, {
method: 'POST',
@ -109,10 +109,10 @@ export const fetchPost = withAuthRedirect(async (link, body) => {
Origin: `${process.env.REACT_APP_BASE_URL}`
},
body: JSON.stringify(body)
})
});
return response
} catch (error) {
console.log('Query error', error)
}
})
});