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

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 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 CalendarComponent from './CalendarComponent'
import {currentMonth} from './calendarHelper' import {currentMonth} from './calendarHelper'
import {Footer} from '../Footer/Footer' import {Footer} from '../Footer/Footer'
import { fetchReportList } from '../../server/server' import rectangle from '../../images/rectangle_secondPage.png'
import { getRole } from '../../redux/roleSlice'
import './calendar.scss' 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 history = useHistory() const candidateForCalendar = useSelector(selectCurrentCandidate);
// useEffect(() => { const [month, setMonth] = useState('');
// 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'>
@ -87,6 +59,6 @@ const Calendar = ({ onSelect }) => {
<Footer/> <Footer/>
</section> </section>
) )
} };
export default Calendar export default Calendar

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

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

View File

@ -19,21 +19,21 @@ 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('');
@ -41,15 +41,15 @@ const ReportForm = () => {
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'>
@ -106,7 +106,8 @@ const ReportForm = () => {
}))}/> }))}/>
</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,
@ -165,13 +166,13 @@ const ReportForm = () => {
}).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}]);
}) })
) )
@ -189,6 +190,6 @@ const ReportForm = () => {
</div> </div>
</section> </section>
) )
} };
export default ReportForm 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-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;
}

View File

@ -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>
) )
} };

View File

@ -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)
} }
}) });