Fixed img in components
This commit is contained in:
MaxOvs19
@ -1,78 +0,0 @@
|
||||
import React, {useEffect, useState} from 'react'
|
||||
import {useSelector} from 'react-redux'
|
||||
import {Link, Navigate, useNavigate} from 'react-router-dom'
|
||||
|
||||
import CalendarComponent from './CalendarComponent'
|
||||
import {currentMonth} from './calendarHelper'
|
||||
import {Footer} from '../Footer/Footer'
|
||||
import {LogoutButton} from "../LogoutButton/LogoutButton";
|
||||
|
||||
import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
|
||||
|
||||
import rectangle from '../../images/rectangle_secondPage.png'
|
||||
|
||||
import './calendar.scss'
|
||||
import {urlForLocal} from "../../helper";
|
||||
|
||||
|
||||
const Calendar = () => {
|
||||
if(localStorage.getItem('role_status') !== '18') {
|
||||
return <Navigate to="/profile" replace/>
|
||||
}
|
||||
|
||||
const candidateForCalendar = useSelector(selectCurrentCandidate);
|
||||
|
||||
const [month, setMonth] = useState('');
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
setMonth(currentMonth)
|
||||
}, [month]);
|
||||
|
||||
const {name, skillsName, photo} = candidateForCalendar;
|
||||
|
||||
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));
|
||||
|
||||
return (
|
||||
<div className='container'>
|
||||
<section className='calendar'>
|
||||
<div className='row'>
|
||||
<div className='calendar__header'>
|
||||
<h2 className='calendar__profile'>
|
||||
Добрый день, <span>Александр !</span>
|
||||
</h2>
|
||||
<LogoutButton />
|
||||
</div>
|
||||
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
|
||||
<div className='calendar__info'>
|
||||
{photo && <img className='calendar__info-img' src={urlForLocal(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'/>
|
||||
</div>
|
||||
<div>
|
||||
<Link to='/report'>
|
||||
<button className='calendar__btn'>Заполнить отчет за день</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
<div className='col-12 col-xl-12'>
|
||||
<CalendarComponent onSelect={() => { navigate('/report/0') }}/>
|
||||
<p className='calendar__hours'>
|
||||
{month} : <span> 60 часов </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default Calendar
|
||||
88
src/components/Calendar/Calendar.jsx
Normal file
88
src/components/Calendar/Calendar.jsx
Normal file
@ -0,0 +1,88 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { Link, Navigate, useNavigate } from "react-router-dom";
|
||||
|
||||
import CalendarComponent from "./CalendarComponent";
|
||||
import { currentMonth } from "./calendarHelper";
|
||||
import { Footer } from "../Footer/Footer";
|
||||
import { LogoutButton } from "../LogoutButton/LogoutButton";
|
||||
import { urlForLocal } from "../../helper";
|
||||
import { selectCurrentCandidate } from "../../redux/outstaffingSlice";
|
||||
|
||||
import rectangle from "../../images/rectangle_secondPage.png";
|
||||
|
||||
import "./calendar.scss";
|
||||
|
||||
const Calendar = () => {
|
||||
if (localStorage.getItem("role_status") !== "18") {
|
||||
return <Navigate to="/profile" replace />;
|
||||
}
|
||||
|
||||
const candidateForCalendar = useSelector(selectCurrentCandidate);
|
||||
|
||||
const [month, setMonth] = useState("");
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
setMonth(currentMonth);
|
||||
}, [month]);
|
||||
|
||||
const { name, skillsName, photo } = candidateForCalendar;
|
||||
|
||||
const abbreviatedName = name && name.substring(0, name.lastIndexOf(" "));
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<section className="calendar">
|
||||
<div className="row">
|
||||
<div className="calendar__header">
|
||||
<h2 className="calendar__profile">
|
||||
Добрый день, <span>Александр !</span>
|
||||
</h2>
|
||||
<LogoutButton />
|
||||
</div>
|
||||
<div className="col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row">
|
||||
<div className="calendar__info">
|
||||
{photo && (
|
||||
<img
|
||||
className="calendar__info-img"
|
||||
src={urlForLocal(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" />
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/report">
|
||||
<button className="calendar__btn">
|
||||
Заполнить отчет за день
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12 col-xl-12">
|
||||
<CalendarComponent
|
||||
onSelect={() => {
|
||||
navigate("/report/0");
|
||||
}}
|
||||
/>
|
||||
<p className="calendar__hours">
|
||||
{month} : <span> 60 часов </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Calendar;
|
||||
@ -1,92 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import ellipse from '../../images/ellipse.png'
|
||||
import rectangle from '../../images/rectangle__calendar.png'
|
||||
import calendarIcon from '../../images/calendar_icon.png'
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/ru'
|
||||
import { calendarHelper, currentMonthAndDay, } from './calendarHelper'
|
||||
|
||||
import './calendarComponent.scss'
|
||||
|
||||
const CalendarComponent = ({ onSelect }) => {
|
||||
const [value, setValue] = useState(moment())
|
||||
const [calendar, setCalendar] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
setCalendar(calendarHelper(value))
|
||||
}, [value])
|
||||
|
||||
function beforeToday(day) {
|
||||
return day.isBefore(new Date(), 'day')
|
||||
}
|
||||
|
||||
function isToday(day) {
|
||||
return day.isSame(new Date(), 'day')
|
||||
}
|
||||
|
||||
function dayStyles(day) {
|
||||
if (beforeToday(day)) return `before`
|
||||
if (isToday(day)) return `today`
|
||||
if (day.day() === 6 || day.day() === 0) return `selected`
|
||||
return ''
|
||||
}
|
||||
|
||||
function prevMonth() {
|
||||
return value.clone().subtract(1, 'month')
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
return value.clone().add(1, 'month');
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='calendar-component'>
|
||||
<div className='calendar-component__header'>
|
||||
<h3>Мои отчеты</h3>
|
||||
<div className='calendar-component__header-box'>
|
||||
<img src={ellipse} alt='' />
|
||||
<span onClick={() => setValue(prevMonth())}>{prevMonth().format('MMMM')}</span>
|
||||
</div>
|
||||
<div className='calendar-component__header-box'>
|
||||
<img src={ellipse} alt='' />
|
||||
<span onClick={() => setValue(nextMonth())}>{nextMonth().format('MMMM')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='calendar-component__rectangle'>
|
||||
<img src={rectangle} alt='' />
|
||||
</div>
|
||||
|
||||
<div className='calendar-component__body'>
|
||||
<div>
|
||||
<p>Пн</p>
|
||||
<p>Вт</p>
|
||||
<p>Ср</p>
|
||||
<p>Чт</p>
|
||||
<p>Пт</p>
|
||||
<p>Сб</p>
|
||||
<p>Вс</p>
|
||||
</div>
|
||||
|
||||
<div className='calendar-component__form'>
|
||||
{calendar.map((week) =>
|
||||
week.map((day) => (
|
||||
<button
|
||||
onClick={() => { setValue(day); onSelect(day) }}
|
||||
key={day}
|
||||
className={dayStyles(day)}
|
||||
name={day.format('dddd')}
|
||||
id='btn'
|
||||
>
|
||||
<img className={'calendar__icon'} src={calendarIcon} alt='' />
|
||||
{currentMonthAndDay(day)}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CalendarComponent
|
||||
101
src/components/Calendar/CalendarComponent.jsx
Normal file
101
src/components/Calendar/CalendarComponent.jsx
Normal file
@ -0,0 +1,101 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { calendarHelper, currentMonthAndDay } from "./calendarHelper";
|
||||
|
||||
import ellipse from "../../images/ellipse.png";
|
||||
import rectangle from "../../images/rectangle__calendar.png";
|
||||
import calendarIcon from "../../images/calendar_icon.png";
|
||||
|
||||
import moment from "moment";
|
||||
import "moment/locale/ru";
|
||||
|
||||
import "./calendarComponent.scss";
|
||||
|
||||
const CalendarComponent = ({ onSelect }) => {
|
||||
const [value, setValue] = useState(moment());
|
||||
const [calendar, setCalendar] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
setCalendar(calendarHelper(value));
|
||||
}, [value]);
|
||||
|
||||
function beforeToday(day) {
|
||||
return day.isBefore(new Date(), "day");
|
||||
}
|
||||
|
||||
function isToday(day) {
|
||||
return day.isSame(new Date(), "day");
|
||||
}
|
||||
|
||||
function dayStyles(day) {
|
||||
if (beforeToday(day)) return `before`;
|
||||
if (isToday(day)) return `today`;
|
||||
if (day.day() === 6 || day.day() === 0) return `selected`;
|
||||
return "";
|
||||
}
|
||||
|
||||
function prevMonth() {
|
||||
return value.clone().subtract(1, "month");
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
return value.clone().add(1, "month");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="calendar-component">
|
||||
<div className="calendar-component__header">
|
||||
<h3>Мои отчеты</h3>
|
||||
<div className="calendar-component__header-box">
|
||||
<img src={ellipse} alt="" />
|
||||
<span onClick={() => setValue(prevMonth())}>
|
||||
{prevMonth().format("MMMM")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="calendar-component__header-box">
|
||||
<img src={ellipse} alt="" />
|
||||
<span onClick={() => setValue(nextMonth())}>
|
||||
{nextMonth().format("MMMM")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="calendar-component__rectangle">
|
||||
<img src={rectangle} alt="" />
|
||||
</div>
|
||||
|
||||
<div className="calendar-component__body">
|
||||
<div>
|
||||
<p>Пн</p>
|
||||
<p>Вт</p>
|
||||
<p>Ср</p>
|
||||
<p>Чт</p>
|
||||
<p>Пт</p>
|
||||
<p>Сб</p>
|
||||
<p>Вс</p>
|
||||
</div>
|
||||
|
||||
<div className="calendar-component__form">
|
||||
{calendar.map((week) =>
|
||||
week.map((day) => (
|
||||
<button
|
||||
onClick={() => {
|
||||
setValue(day);
|
||||
onSelect(day);
|
||||
}}
|
||||
key={day}
|
||||
className={dayStyles(day)}
|
||||
name={day.format("dddd")}
|
||||
id="btn"
|
||||
>
|
||||
<img className={"calendar__icon"} src={calendarIcon} alt="" />
|
||||
{currentMonthAndDay(day)}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CalendarComponent;
|
||||
@ -1,6 +1,6 @@
|
||||
.calendar {
|
||||
margin-bottom: 40px;
|
||||
font-family: 'LabGrotesque', sans-serif;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
@ -85,7 +85,7 @@
|
||||
);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-family: 'Muller';
|
||||
font-family: "Muller";
|
||||
font-size: 1.6em;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
|
||||
@ -210,12 +210,6 @@
|
||||
padding: 28px 10px 48px 10px;
|
||||
|
||||
&__header {
|
||||
//h3 {
|
||||
// position: absolute;
|
||||
// top: -10%;
|
||||
// left: 25%;
|
||||
//}
|
||||
|
||||
&-box {
|
||||
margin-left: 20px;
|
||||
}
|
||||
@ -233,101 +227,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
//@media (max-width: 768px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 70px;
|
||||
// height: 40px;
|
||||
//
|
||||
// img {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
//@media (max-width: 540.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 68px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 520.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 66px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 500.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 64px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 480.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 60px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 460.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 56px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 440.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 52px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 428.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 50px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 414.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 49px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 395.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 46px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 350.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 44px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 349.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 42px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media (max-width: 346.98px) {
|
||||
// .calendar-component__form > button {
|
||||
// width: 40px;
|
||||
// height: 40px;
|
||||
// }
|
||||
//}
|
||||
|
||||
.calendar__icon {
|
||||
margin-right: 10px;
|
||||
margin-top: -4px;
|
||||
|
||||
Reference in New Issue
Block a user