Fixed switch in back

This commit is contained in:
MaxOvs19 2023-05-18 17:42:29 +03:00
parent 61d52fae50
commit 0de6c43fe1
3 changed files with 107 additions and 52 deletions

View File

@ -1,19 +1,23 @@
import moment from 'moment';
import 'moment/locale/ru';
import moment from "moment";
import "moment/locale/ru";
export function calendarHelper(value) {
const startDay = value.clone().startOf('month').startOf('week').startOf('day');
const endDay = value.clone().endOf('month').endOf('week');
const startDay = value
.clone()
.startOf("month")
.startOf("week")
.startOf("day");
const endDay = value.clone().endOf("month").endOf("week");
const day = startDay.clone().subtract(1, 'day');
const day = startDay.clone().subtract(1, "day");
const calendar = [];
while (day.isBefore(endDay, 'day')) {
while (day.isBefore(endDay, "day")) {
calendar.push(
Array(1)
.fill(0)
.map(() => day.add(1, 'day').clone())
.map(() => day.add(1, "day").clone())
);
}
@ -21,48 +25,84 @@ export function calendarHelper(value) {
}
export function getReports(value) {
const startDay = value.clone().startOf('month').startOf('week').startOf('day');
const reportsStart = `${new Date(startDay).getFullYear()}-${new Date(startDay).getMonth() + 1}-${new Date(startDay).getDate()}`
const endDay = value.clone().endOf('month').endOf('week');
const reportsEnd = `${new Date(endDay).getFullYear()}-${new Date(endDay).getMonth() + 1}-${new Date(endDay).getDate()}`
const getReports = `fromDate=${reportsStart}&toDate=${reportsEnd}`
const startDay = value
.clone()
.startOf("month")
.startOf("week")
.startOf("day");
const reportsStart = `${new Date(startDay).getFullYear()}-${
new Date(startDay).getMonth() + 1
}-${new Date(startDay).getDate()}`;
const endDay = value.clone().endOf("month").endOf("week");
const reportsEnd = `${new Date(endDay).getFullYear()}-${
new Date(endDay).getMonth() + 1
}-${new Date(endDay).getDate()}`;
const getReports = `fromDate=${reportsStart}&toDate=${reportsEnd}`;
return getReports;
}
export function getCreatedDate(day) {
if (day) {
return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
return `${new Date(day).getFullYear()}-${correctDay(
new Date(day).getMonth() + 1
)}-${correctDay(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 dd = String(date.getDate()).padStart(2, "0");
const mm = String(date.getMonth() + 1).padStart(2, "0");
const yyyy = date.getFullYear();
return `${yyyy}-${mm}-${dd}`
return `${yyyy}-${mm}-${dd}`;
}
}
export function correctDay(day) {
if (day < 10) {
return `0${day}`;
}
return day;
}
export function currentMonth() {
const currentMonth = moment().format('MMMM');
const currentMonth = moment().format("MMMM");
return currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1);
}
export function currentMonthAndDay(day) {
return day.format('D MMMM');
return day.format("D MMMM");
}
export function getCorrectDate(day) {
const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
return `${new Date(day).getDate()} ${months[new Date(day).getMonth()]} ${new Date(day).getFullYear()} года`
};
const months = [
"января",
"февраля",
"марта",
"апреля",
"мая",
"июня",
"июля",
"августа",
"сентября",
"октября",
"ноября",
"декабря",
];
return `${new Date(day).getDate()} ${
months[new Date(day).getMonth()]
} ${new Date(day).getFullYear()} года`;
}
export function currentMonthAndDayReportPage() {
return moment().format('D MMMM');
return moment().format("D MMMM");
}
export function hourOfNum(number) {
const hours = [' час', ' часа', ' часов'];
const hours = [" час", " часа", " часов"];
const cases = [2, 0, 1, 1, 1, 2];
return hours[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
return hours[
number % 100 > 4 && number % 100 < 20
? 2
: cases[number % 10 < 5 ? number % 10 : 5]
];
}

View File

@ -27,7 +27,7 @@ export const ShortReport = ({}) => {
const [tomorrowTask, setTomorrowTask] = useState([]);
const [totalHours, setTotalHours] = useState(0);
const [loader, setLoader] = useState(false);
const [dateTest, setDateTest] = useState("");
const [dateCreate, setDateCreate] = useState("");
function getReportFromDate(day) {
setLoader(true);
@ -41,7 +41,7 @@ export const ShortReport = ({}) => {
).then((res) => {
let spendTime = 0;
for (const item of res) {
setDateTest(item.created_at);
setDateCreate(item.created_at);
if (item.difficulties) {
setDifficulties((prevArray) => [...prevArray, item.difficulties]);
}
@ -78,7 +78,9 @@ export const ShortReport = ({}) => {
<h2 className="viewReport__title">
Ваши отчеты - <span>просмотр отчета за день</span>
</h2>
<Link to={`../view/${dateTest}`}>Посмотреть подробнее об отчете</Link>
<Link to={`../view/${dateCreate}`}>
Посмотреть подробнее об отчете
</Link>
</div>
<div className="viewReport__bar">

View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Link, Navigate } from "react-router-dom";
import { Link, Navigate, useParams } from "react-router-dom";
import { useSelector } from "react-redux";
import { getReportDate } from "../../redux/reportSlice";
@ -26,13 +26,16 @@ export const ViewReport = () => {
if (localStorage.getItem("role_status") === "18") {
return <Navigate to="/profile" replace />;
}
const reportDate = useSelector(getReportDate);
const reportDate = useSelector(getReportDate); // :D
const dateReport = useParams();
const [testReportDay] = useState(new Date(dateReport.id));
const [taskText, setTaskText] = useState([]);
const [difficulties, setDifficulties] = useState([]);
const [tomorrowTask, setTomorrowTask] = useState([]);
const [totalHours, setTotalHours] = useState(0);
const [reportDay] = useState(new Date(getCreatedDate(reportDate)));
const [reportDay] = useState(new Date(getCreatedDate(reportDate))); ///
const [currentDay] = useState(new Date());
const [loader, setLoader] = useState(false);
@ -46,7 +49,9 @@ export const ViewReport = () => {
"cardId"
)}&date=${day}`
).then((res) => {
console.log(res);
let spendTime = 0;
for (const item of res) {
if (item.difficulties) {
setDifficulties((prevArray) => [...prevArray, item.difficulties]);
@ -69,6 +74,7 @@ export const ViewReport = () => {
setTotalHours(spendTime);
setLoader(false);
});
testReportDay.setDate(testReportDay.getDate() - 1);
}
function nextDay() {
@ -77,13 +83,14 @@ export const ViewReport = () => {
}
function previousDay() {
reportDay.setDate(reportDay.getDate() - 1);
getReportFromDate(getCreatedDate(reportDay));
getReportFromDate(getCreatedDate(testReportDay));
}
useEffect(() => {
getReportFromDate(getCreatedDate(reportDate));
getReportFromDate(dateReport.id);
console.log(dateReport.id);
}, []);
return (
<div className="viewReport">
<ProfileHeader />
@ -106,7 +113,7 @@ export const ViewReport = () => {
</Link>
<div className="viewReport__bar">
<h3 className="viewReport__bar__date">
{getCorrectDate(reportDay)}
{getCorrectDate(dateReport.id)}
</h3>
<p className="viewReport__bar__hours">
Вами потрачено на работу :{" "}
@ -114,30 +121,36 @@ export const ViewReport = () => {
{totalHours} {hourOfNum(totalHours)}
</span>
</p>
{/*<div className='viewReport__bar__progressBar'>*/}
{/* <span></span>*/}
{/*</div>*/}
{/*<p className='viewReport__bar__total'>122 часа из 160</p>*/}
</div>
</div>
<div className="viewReport__switchDate">
<Link></Link>
<div
className="viewReport__switchDate__prev switchDate"
onClick={() => previousDay()}
onClick={() => {
previousDay();
}}
>
<img src={arrowSwitchDate} alt="arrow" />
<Link to={`../view/${getCreatedDate(testReportDay)}`}>
<div className="viewReport__switchDate__prev switchDate">
<img src={arrowSwitchDate} alt="arrow" />
</div>
</Link>
</div>
<p>{getCorrectDate(reportDay)}</p>
<div
className={`viewReport__switchDate__next switchDate ${
getCreatedDate(currentDay) === getCreatedDate(reportDay)
? "disable"
: ""
}`}
onClick={() => nextDay()}
>
<img src={arrowSwitchDate} alt="arrow" />
<p>{getCorrectDate(dateReport.id)}</p>
<div>
<Link to={`../view/${0}`}>
<div
className={`viewReport__switchDate__next switchDate ${
getCreatedDate(currentDay) === getCreatedDate(reportDay)
? "disable"
: ""
}`}
onClick={() => nextDay()}
>
<img src={arrowSwitchDate} alt="arrow" />
</div>
</Link>
</div>
</div>
{loader && <Loader width={75} height={75} />}