apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/Calendar/Calendar.js
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 {useSelector} from 'react-redux'
import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
import {Link} from 'react-router-dom'
import CalendarComponent from './CalendarComponent'
import {currentMonth} from './calendarHelper'
import {Footer} from '../Footer/Footer'
import { fetchReportList } from '../../server/server'
import { getRole } from '../../redux/roleSlice'
import rectangle from '../../images/rectangle_secondPage.png'
import './calendar.scss'
const getDateParamString = ({ paramName, value }) => {
return value ? `${paramName}=${value}` : ''
}
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(() => {
// 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'>
@ -87,6 +59,6 @@ const Calendar = ({ onSelect }) => {
<Footer/>
</section>
)
}
};
export default Calendar

6
src/components/Calendar/calendar.scss
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;

6
src/components/Calendar/calendarComponent.scss
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;

2
src/components/OutstaffingBlock/outstaffingBlock.scss
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;

1
src/components/Profile/profile.scss
View File

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

1
src/components/Profile/profileHeader.scss
View File

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

1
src/components/Profile/summary.scss
View File

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

2
src/components/ProfileCalendar/profileCalendar.scss
View File

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

37
src/components/ReportForm/ReportForm.js
View File

@ -19,21 +19,21 @@ 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 [troublesInputValue, setTroublesInputValue] = useState('');
@ -41,15 +41,15 @@ const ReportForm = () => {
const addInput = () => {
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'>
@ -106,7 +106,8 @@ const ReportForm = () => {
}))}/>
</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,
@ -165,13 +166,13 @@ const ReportForm = () => {
}).then((res) =>
res.json().then((resJSON) => {
if (res.status === 200) {
setReportSuccess(true)
setReportSuccess(true);
setTimeout(() => setReportSuccess(false), 2000)
}
setInputs( () => [] )
setInputs(() => []);
setTroublesInputValue('');
setScheduledInputValue('');
setIsFetching(false)
setIsFetching(false);
setInputs(() => [{task: '', hours_spent: '', minutes_spent: 0}]);
})
)
@ -189,6 +190,6 @@ const ReportForm = () => {
</div>
</section>
)
}
};
export default ReportForm

BIN
src/fonts/LabGrotesque-Bold.eot Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Bold.woff Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Light.eot Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Light.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Light.woff Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Light.woff2 Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Medium.eot Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Medium.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Medium.woff Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Regular.eot Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Regular.woff Normal file
View File

Binary file not shown.

BIN
src/fonts/LabGrotesque-Regular.woff2 Normal file
View File

Binary file not shown.

41
src/fonts/stylesheet.css
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;
}

48
src/pages/Profile.js
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>
)
}
};

70
src/server/server.js
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)
}
})
});