Skip to content

P
planner-team-one
Commit 0577363c authored by Ermolaev Timur's avatar Ermolaev Timur
Browse files
Options

#24 Реализована большая часть функционала месячного календаря

parent a186c639
Show whitespace changes
Inline Side-by-side
Showing with 377 additions and 1 deletion
planner-front/src/App.js
View file @ 0577363c
...@@ -5,6 +5,7 @@ import AppToolbar from "./components/UI/AppToolBar/AppToolBar"; ...@@ -5,6 +5,7 @@ import AppToolbar from "./components/UI/AppToolBar/AppToolBar";
import MyTasks from './containers/MyTasks/MyTasks'; import MyTasks from './containers/MyTasks/MyTasks';
import Login from './containers/Login/Login'; import Login from './containers/Login/Login';
import Register from './containers/Register/Register'; import Register from './containers/Register/Register';
import MonthCalendar from './containers/MonthCalendar/MonthCalendar';
const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => { const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
const user = useSelector(state => state.users?.user); const user = useSelector(state => state.users?.user);
...@@ -53,7 +54,7 @@ const App = () => { ...@@ -53,7 +54,7 @@ const App = () => {
isAllowed={user} isAllowed={user}
redirectUrl={"/sign-in"} redirectUrl={"/sign-in"}
> >
<h1>month page</h1> <MonthCalendar>month page</MonthCalendar>
</ProtectedRoute> </ProtectedRoute>
}/> }/>
......
planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js 0 → 100644
View file @ 0577363c
import { Grid, TextField } from "@mui/material";
import { useEffect, useState } from "react";
const exampleTasks=[
{
user:"first",
title:"задача1",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"26.12.2022 20:00:00",
dateTimeDue:"27.10.2022 14:20:00",
id:1,
dateCreated:"26.10.2022"
}, {
user:"first",
title:"задача2",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"1.12.2022 9:00:00",
dateTimeDue:"27.10.2022 15:20:00",
id:1,
dateCreated:"26.10.2022"
},{
user:"first",
title:"задача3",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"5.12.2022 16:00:00",
dateTimeDue:"27.10.2022 14:20:00",
id:1,
dateCreated:"26.10.2022"
},{
user:"first",
title:"задача на 4 xfcf",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:"5.11.2022 16:00:00",
dateTimeDue:"5.11.2022 21:20:00",
id:1,
dateCreated:"26.10.2022"
}
]
function MonthCalendarBody({month, year}) {
const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '6:00'])
const [daysInMonth, setDaysInMonth] = useState([])
const [tasksForCell, setTasksForCell] = useState([])
useEffect(()=>{
setNewMonthDays(month, year)
setNewTasksWithInfoForCell(exampleTasks, month, year)
}, [month, year])
const getDaysInMonth = (month, year) => {
return new Date(year, month + 1, 0).getDate();
}
const getDayOfWeekString = (day) => {
return ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][day];
}
const getDayOfWeekNumber = (month, year, day) => {
return new Date(year, month, day).getDay()
}
const setNewTasksWithInfoForCell = (tasks, month, year) => {
const newArr = tasks.map((task)=>{
const dateStart = task.dateTimeStart.split(' ')[0]
const timeStart = task.dateTimeStart.split(' ')[1]
const timeEnd = task.dateTimeDue.split(' ')[1]
const dayStart = parseInt(dateStart.split('.')[0])
const dayOfWeekStartNumber = getDayOfWeekNumber(month, year, dayStart)
const dayOfWeekStartString = getDayOfWeekString(dayOfWeekStartNumber)
const monthStartNumber = parseInt(dateStart.split('.')[1])
const yearStartNumber = parseInt(dateStart.split('.')[2])
const timeStartHour = parseInt(timeStart.split(':')[0])
const timeEndHour = parseInt(timeEnd.split(':')[0])
return {...task,
startDay: dayStart,
startDayOfWeek: dayOfWeekStartString,
startHour: timeStartHour,
startMonth: monthStartNumber,
startYear: yearStartNumber,
endHour: timeEndHour,
}
})
setTasksForCell(newArr)
}
const createTaskInCellHandler = (month, year, dayOfWeek, dayNumber, dayHour) => {
const newTasks = [...tasksForCell]
const newTask = {
user:"first",
title:"Новая",
description:"описание задачи11111",
priority:"A",
author:"Ivan",
executor:"Arman",
dateTimeStart:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0])}:00:00`,
dateTimeDue:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0]) + 1}:00:00`,
}
newTasks.push(newTask)
exampleTasks.push(newTask)
setNewTasksWithInfoForCell(newTasks, month, year)
}
const getTaskInDayCell = (tasks, day, hours, month, year) => {
const task = tasks.find(task=> {
if (year === task.startYear) {
if (month + 1 === task.startMonth) {
if (day.dayNumber === task.startDay && task.startDayOfWeek === day.dayOfWeek ) {
if ((task.endHour <= parseInt(hours.split(':')[0]) || task.startHour <= parseInt(hours.split(':')[0])) && (task.endHour >= parseInt(hours.split(':')[0]))) {
return task
}
}
}
}
})
return task
}
const setNewMonthDays = (month, year) => {
const newDaysInMonth = []
for (let i = 1; i <= getDaysInMonth(month, year); i++) {
const dayOfWeekNumber = getDayOfWeekNumber(month, year, i)
newDaysInMonth.push({dayNumber: i, dayOfWeek: getDayOfWeekString(dayOfWeekNumber)})
}
setDaysInMonth(newDaysInMonth)
}
const onChangeCellTaskTitle = (e, id) => {
const {name, value} = e.target;
}
return (
<>
<Grid
container
align='center'
sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
>
<Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
{' '}
</Grid>
<Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
{' '}
</Grid>
{hoursInDay.map((hours, i)=>{
return (
<Grid key={i} item xs={1.2222} sx={{borderRight: '1px solid black'}}>
{hours}
</Grid>
)
})}
</Grid>
{daysInMonth.map((day, i)=>{
return (
<Grid
key={i}
container
align='center'
sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
>
<Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
{day.dayNumber}
</Grid>
<Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
{day.dayOfWeek}
</Grid>
{hoursInDay.map((hours, i)=>{
const task = getTaskInDayCell(tasksForCell, day, hours, month, year)
return (
<Grid
key={i}
item xs={1.2222}
sx={{borderRight: '1px solid black'}}
onClick={()=>{createTaskInCellHandler(month, year, day.dayOfWeek, day.dayNumber, hours)}}>
{ task ?
<Grid key={i} sx={{backgroundColor: 'lightgreen'}}>
<TextField
id={task.title}
variant="standard"
value={task.title}
name='title'
onChange={(e)=>{onChangeCellTaskTitle(e)}}></TextField>
</Grid> : null}
</Grid>
)
})}
</Grid>
)
})}
</>
);
}
export default MonthCalendarBody;
\ No newline at end of file
planner-front/src/components/MonthCalendarHeader/MonthCalendarHeader.js 0 → 100644
View file @ 0577363c
import { AppBar, FormControl, InputLabel, MenuItem, Select, Toolbar, Typography } from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import { Box } from '@mui/system';
const arrowClass = {
borderRadius: '50%',
cursor: 'pointer',
transition: '0.5s',
"&:hover": {
background: 'rgb(48, 154, 252, 0.65)',
transition: '0.5s',
transform: 'scale(1.2)'
}
}
function MonthCalendarHeader({month, getCurrentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year}) {
return (
<>
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<Box
sx={{
flexGrow: 1,
display: 'flex',
alignItems: 'center',
gap: '10px'
}}
>
<ArrowBackIcon
onClick={()=>{decrementMonth()}}
sx={arrowClass}
/>
<Box sx={{ flexBasis: '150px' }}>
<Typography
variant="h6"
sx={{
display: 'flex',
justifyContent: 'center',
}}
>
{getCurrentMonthString(month)}
</Typography>
<Typography align='center'>{year}</Typography>
</Box>
<ArrowForwardIcon
sx={arrowClass}
onClick={()=>{incrementMonth()}}
/>
</Box>
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="worker-select-label">Сотрудник</InputLabel>
<Select
labelId="worker-select-label"
id="worker-select"
value={worker}
onChange={(e)=>{onChangeWorkerHandler(e)}}
label="Worker"
>
<MenuItem value="">
<em>-- Выберите сотрудника --</em>
</MenuItem>
<MenuItem value={"Василий"}>Василий</MenuItem>
<MenuItem value={"Никита"}>Никита</MenuItem>
<MenuItem value={"Артем"}>Артем</MenuItem>
</Select>
</FormControl>
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="calendar-type-label">Календарь</InputLabel>
<Select
labelId="calendar-type-label"
id="calendar-type"
value={calendarType}
onChange={(e)=>{onChangeCalendarTypeHandler(e)}}
label="Type"
>
<MenuItem value={"Месяц"}>Месяц</MenuItem>
<MenuItem value={"Неделя"}>Неделя</MenuItem>
</Select>
</FormControl>
</Toolbar>
</AppBar>
</Box>
</>
);
}
export default MonthCalendarHeader;
\ No newline at end of file
planner-front/src/containers/MonthCalendar/MonthCalendar.js 0 → 100644
View file @ 0577363c
import { Container } from '@mui/material';
import { useEffect, useState } from 'react';
import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
function MonthCalendar() {
const [month, setMonth] = useState('')
const [year, setYear] = useState('')
const [worker, setWorker] = useState('');
const [calendarType, setCalendarType] = useState('Месяц');
useEffect(()=>{
setMonth(new Date().getMonth())
setYear(new Date().getFullYear())
},[])
const onChangeWorkerHandler = (event) => {
setWorker(event.target.value);
};
const onChangeCalendarTypeHandler = (event) => {
setCalendarType(event.target.value);
};
const getCurrentMonthString = (month) => {
return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][month];
}
const incrementMonth = () => {
setMonth((prevState)=>{
if (prevState + 1 === 12 ) {
setYear(prevState=>prevState+1)
return 0
}
return prevState + 1
})
}
const decrementMonth = () => {
setMonth((prevState)=>{
if (prevState - 1 === -1) {
setYear(prevState=>prevState-1)
return 11
}
return prevState - 1
})
}
return (
<>
<Container>
<MonthCalendarHeader
month={month}
year={year}
getCurrentMonthString={getCurrentMonthString}
decrementMonth={decrementMonth}
incrementMonth={incrementMonth}
onChangeCalendarTypeHandler={onChangeCalendarTypeHandler}
onChangeWorkerHandler={onChangeWorkerHandler}
worker={worker}
calendarType={calendarType}
/>
<MonthCalendarBody
month={month}
year={year}
/>
</Container>
</>
);
}
export default MonthCalendar;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment