Merge branch 'task-29-feature/create-switch-hours' into 'development'

Task 29 feature/create switch hours

See merge request !15

planner-api/src/models/Task.ts

@@ -36,6 +36,11 @@ import {
     description!: string
     @CreateDateColumn({ name: 'created_at', type: Date, default: new Date() })
     createdAt!: Date;
+    @Column({ name: 'dateTimeStart', type: Date,nullable: true })
+    dateTimeStart!: Date | null;
+    @Column({ name: 'dateTimeDue', type: Date,nullable: true })
+    dateTimeDue!: Date | null;
+
     @Column({
         type: "enum",
         enum: ["opened", "done" , "failed"],

planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js

 import { Grid, TextField } from "@mui/material";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
-const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange}) => {
+const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange, hourFormat}) => {
 
   const getTaskInDayCell = (tasks, day, hours) => {
-    const task = tasks.find(task=> {
+    const hour = parseInt(hours.split(':')[0])
+    let hourDiffEnd
+    let hourDiffStart
+    if (hourFormat) {
+      hourDiffEnd = hour + 1
+    } else {
+      hourDiffEnd = hour + 2
+    }
+    if (hourFormat) {
+      hourDiffStart = hour - 1
+    } else {
+      hourDiffStart = hour - 2
+    }
+    const tasksCell = tasks.filter(task=> {
     if (year === task.infoForCell.startYear) {
       if (month + 1 === task.infoForCell.startMonth) {
         if (day.dayNumber === task.infoForCell.startDay) {
-          if ((task.infoForCell.endHour <= parseInt(hours.split(':')[0]) || task.infoForCell.startHour <= parseInt(hours.split(':')[0])) && (task.infoForCell.endHour > parseInt(hours.split(':')[0]))) {
-            return task
+          if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))  
+          || (task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hourDiffEnd)
+          || (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
+              return task
           }
         }
       }      
     }
     })
-    return task
+    return tasksCell
   }
   
-  let task = getTaskInDayCell(tasks, day, hours)
+  const tasksCell = getTaskInDayCell(tasks, day, hours)
 
   return (<> 
-      {task ? 
-      <Grid  sx={{backgroundColor: 'lightgreen'}}>
+      {tasksCell.length ? tasksCell.map((task, i)=>
+      {
+      return (
+      <Grid  key={task.id} sx={{backgroundColor: 'lightgreen'}}>
         <TextField 
         id={task.title} 
         variant="standard" 
@@ -31,8 +48,8 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange}
         onClick={(e)=>{e.stopPropagation(); setCurrentTask(task)}}
         onChange={onChange}>
         </TextField>
-      </Grid>
-      : null }
+      </Grid>)}
+      ) : null }
   </>)
 };
 

planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js

+import { FormControlLabel, Switch } from "@mui/material";
 import { useEffect, useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
 import CalendarTask from "./CalendarTask/CalendarTask";
 
-function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, setCurrentTask}) {
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, setCurrentTask, hourFormat, setHourFormat}) {
   
-  const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '6:00'])
+  const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'])
   const [daysInMonth, setDaysInMonth] = useState([])
   const [cellSizes, setCellSizes] = useState({})
-
   useEffect(()=>{
     const cells = hoursInDay.length
-    const xs = 11/cells
+    const xs = 10.8/cells
     setCellSizes(()=>{
-      return {smallCell: 0.5, standarCell: xs}
+      return {smallCell: 0.6, standarCell: xs}
     })
   }, [])
 
+  useEffect(()=>{
+    if (hourFormat) {
+      const arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00','22:00']
+      const cells = arr.length
+      const xs = 10.8/cells
+      setCellSizes(()=>{
+        return {smallCell: 0.6, standarCell: xs}
+      })
+      setHoursInDay(()=>arr)
+    } else {
+      const arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
+      const cells = arr.length
+      const xs = 10.8/cells
+      setCellSizes(()=>{
+        return {smallCell: 0.6, standarCell: xs}
+      })
+      setHoursInDay(()=>arr)
+    }
+  }, [hourFormat])
+
   useEffect(()=>{
     setNewMonthDays()
   }, [month])
@@ -46,9 +66,14 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
   return (
     <>
     <CalendarRow
-      >
-        <CalendarSmallCell xs={cellSizes.smallCell} />
-        <CalendarSmallCell xs={cellSizes.smallCell}/>
+            >
+        <CalendarSmallCell xs={1.2}> 
+         <FormControlLabel
+            control={<Switch color="primary" checked={hourFormat} onChange={()=>{setHourFormat(()=>!hourFormat)}}/>}
+            label="1 час"
+            labelPlacement="end"
+          />
+        </CalendarSmallCell>
         {hoursInDay.map((hours, i)=>{
           return (
             <CalendarStandartCell key={i} xs={cellSizes.standarCell}>
@@ -79,6 +104,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
                       tasks={tasks}
                       day={day}
                       hours={hours}
+                      hourFormat={hourFormat}
                     />
                 </CalendarStandartCell>
                 ) 

planner-front/src/containers/MonthCalendar/MonthCalendar.js

@@ -9,6 +9,7 @@ function MonthCalendar() {
   const dispatch = useDispatch();
   const { tasks } = useSelector(state => state.tasks);
 
+  const [hourFormat, setHourFormat] = useState(false);
   const [month, setMonth] = useState('')
   const [year, setYear] = useState('')
   const [worker, setWorker] = useState('');
@@ -53,18 +54,29 @@ function MonthCalendar() {
     })
   }
 
-  function dateToISOButLocal(date) {
-    return date.toLocaleString('sv').replace(' ', 'T');
-}
+  function dateToISOLikeButLocal(date) {
+    const offsetMs = date.getTimezoneOffset() * 60 * 1000;
+    const msLocal =  date.getTime() - offsetMs;
+    const dateLocal = new Date(msLocal);
+    const iso = dateLocal.toISOString();
+    return iso;
+  }
 
   const createTaskInCellHandler = (dayNumber, dayHour) => {
     const hour = parseInt(dayHour.split(':')[0])
+    let hourDue
+    if (hourFormat) {
+      hourDue = hour + 0
+    } else {
+      hourDue = hour + 1
+    }
     const newTask = {
       title:"Задача",
       description:"описание",
-      dateTimeStart: dateToISOButLocal(new Date(year, month, dayNumber, hour)),
-      dateTimeDue: dateToISOButLocal(new Date(year, month, dayNumber, hour + 2)),
+      dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
+      dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
     }
+    console.log(newTask)
     dispatch(addTask(newTask))
     setCurrentTask((newTask))
   }
@@ -97,6 +109,8 @@ function MonthCalendar() {
         createTaskInCellHandler={createTaskInCellHandler}
         onChangeCellTaskTitle={onChangeCellTaskTitle}
         setCurrentTask={setCurrentTask}
+        hourFormat={hourFormat} 
+        setHourFormat={setHourFormat}
       />
     </Container>
     </>

planner-front/src/store/reducers/tasksReducer.js

@@ -22,12 +22,16 @@ const tasksReduсer = (state = initialState, action) => {
               const yearStartNumber =  parseInt(dateStart.split('-')[0])
               const timeStartHour = parseInt(timeStart.split(':')[0])
               const timeEndHour = parseInt(timeEnd.split(':')[0])
+              const timeStartMinute = parseInt(timeStart.split(':')[1])
+              const timeEndMinute = parseInt(timeEnd.split(':')[1])
               newArr.push({...task, infoForCell: { 
                 startDay: dayStart, 
                 startHour: timeStartHour, 
                 startMonth: monthStartNumber,
                 startYear: yearStartNumber,
+                startMinute: timeStartMinute,
                 endHour: timeEndHour,
+                endMinute: timeEndMinute,
                 }
               } )
             }