Merge from plan-hisotry

src/components/Administrator.tsx

@@ -0,0 +1,209 @@
+import { format } from 'date-fns';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components/macro';
+import { axiosInstance } from '../utils/axiosInstance';
+import { useSnackbar } from 'notistack';
+import CloseIcon from '@material-ui/icons/Close';
+import { SyncLoader } from 'react-spinners';
+
+const StyledCloseIcon = styled(CloseIcon)`
+  color: #000000;
+  &:hover {
+    color: white;
+    cursor: pointer;
+  }
+`;
+
+const SaveButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  background-color: #c7a424;
+  border: none;
+  font-weight: bold;
+  cursor: pointer;
+  height: 40px;
+  &:hover {
+    color: #ffffff;
+    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
+  }
+
+  width: 150px;
+`;
+const AdministratorWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  height: 100vh;
+`;
+
+const Wrap = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const LogoWrapper = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Text = styled.div`
+  font-family: 'Roboto', sans-serif;
+  font-size: 5rem;
+  user-select: none;
+`;
+
+const Logo = styled.img`
+  width: 400px;
+  height: 400px;
+`;
+
+const Form = styled.form`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  input {
+    padding: 5px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 210px;
+  }
+`;
+
+export const Administrator = () => {
+  const { enqueueSnackbar } = useSnackbar();
+  const { closeSnackbar } = useSnackbar();
+
+  const today = new Date();
+  const dd = String(today.getDate()).padStart(2, '0');
+  const mm = String(today.getMonth() + 1).padStart(2, '0');
+  const yyyy = today.getFullYear();
+
+  const date = yyyy + '-' + mm + '-' + dd;
+
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [startFirstDate, setStartFirstDate] = useState<Date | null>(null);
+  const [endFirstDate, setEndFirstDate] = useState<Date | null>(null);
+  const [startSecondDate, setStartSecondDate] = useState<Date | null>(null);
+  const [endSecondDate, setEndSecondDate] = useState<Date | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (startFirstDate !== null) {
+      console.log(format(startFirstDate, 'dd.MM.yyyy'));
+    }
+  }, [startFirstDate]);
+
+  const uploadFile = async (event: React.FormEvent<HTMLFormElement>) => {
+    const action = (key: any) => (
+      <>
+        <StyledCloseIcon
+          onClick={() => {
+            closeSnackbar(key);
+          }}
+        ></StyledCloseIcon>
+      </>
+    );
+    event.preventDefault();
+    const formData = new FormData();
+    formData.append('file', selectedFile as Blob);
+    if (startFirstDate !== null) {
+      formData.append('firstTourBegin', format(startFirstDate, 'dd.MM.yyyy'));
+    }
+    if (endFirstDate !== null) {
+      formData.append('firstTourEnd', format(endFirstDate, 'dd.MM.yyyy'));
+    }
+    if (startSecondDate !== null) {
+      formData.append('secondTourBegin', format(startSecondDate, 'dd.MM.yyyy'));
+    }
+    if (endSecondDate !== null) {
+      formData.append('secondTourEnd', format(endSecondDate, 'dd.MM.yyyy'));
+    }
+
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
+
+    try {
+      setLoading(true);
+      const response = await axiosInstance.post(
+        `${process.env.REACT_APP_API_URL}/api/v1/configurator/config/`,
+        formData,
+        config,
+      );
+      enqueueSnackbar('Plan został zapisany', {
+        variant: 'success',
+        action,
+      });
+      console.log(response);
+    } catch (e) {
+      enqueueSnackbar('Zapisywanie planu nie powiodło się', {
+        variant: 'error',
+        action,
+      });
+      console.log(e);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <AdministratorWrapper>
+      <Wrap>
+        <LogoWrapper>
+          <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
+          <Text> plan na plan </Text>
+        </LogoWrapper>
+        <Form onSubmit={uploadFile}>
+          <div>
+            <div>Start pierwszej tury:</div>{' '}
+            <div>
+              <input type="date" min={date} onChange={(e) => setStartFirstDate(e.target.valueAsDate)} />
+            </div>
+            <div>Koniec pierwszej tury:</div>{' '}
+            <div>
+              <input type="date" min={date} onChange={(e) => setEndFirstDate(e.target.valueAsDate)} />
+            </div>
+          </div>
+          <div>
+            <div>Start drugiej tury:</div>{' '}
+            <div>
+              <input type="date" min={date} onChange={(e) => setStartSecondDate(e.target.valueAsDate)} />
+            </div>
+          </div>
+          <div>
+            <div>Koniec drugiej tury:</div>{' '}
+            <div>
+              <input type="date" min={date} onChange={(e) => setEndSecondDate(e.target.valueAsDate)} />
+            </div>
+          </div>
+          <div>
+            <input
+              type="file"
+              onChange={(e) => {
+                if (e.target.files && e.target.files[0]) {
+                  const file = e.target.files[0];
+                  setSelectedFile(file);
+                }
+              }}
+            />
+          </div>
+          <div>
+            <SaveButton type="submit">{loading === false ? 'Zapisz' : <SyncLoader />} </SaveButton>
+          </div>
+        </Form>
+      </Wrap>
+    </AdministratorWrapper>
+  );
+};

src/components/App.tsx

@@ -1,14 +1,15 @@
-import React, { ElementType, useContext, useEffect, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import Topbar from './Topbar';
 import { Transfer } from './Transfer';
-import { Admin } from './Admin';
+import { Deanery } from './DeaneryPanel';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
+import { Administrator } from './Administrator';
 import styled from 'styled-components';
-import { coursesContext } from '../contexts/CoursesProvider';
 import LoadingOverlay from 'react-loading-overlay';
 import { SyncLoader } from 'react-spinners';
 import { CASContext } from '../contexts/CASProvider';
+import { coursesContext } from '../contexts/CoursesProvider';
 const Wrapper = styled.div`
   display: flex;
   height: calc(100vh - 80px);
@@ -19,33 +20,38 @@ const Wrapper = styled.div`
 `;
 
 export const App = () => {
-  const { isDataLoading } = useContext(coursesContext)!;
-  const { isFetchingToken, user, role } = useContext(CASContext)!;
+  const { role } = useContext(CASContext)!;
   const [isOpenTransfer, setOpenTransfer] = useState(false);
 
+  const { selectSchedulerEvents } = useContext(coursesContext)!;
+  const schedulerEvents = selectSchedulerEvents();
+
   const handleTransfer = () => {
     setOpenTransfer(!isOpenTransfer);
   };
 
   const userPrivilige = localStorage.getItem('userPrivilige');
-  console.log('role of that user is: ', role);
-  useEffect(() => {
-    console.log('is fetching token: ', isFetchingToken);
-  }, [isFetchingToken]);
   return (
     <>
       <LoadingOverlay active={role === undefined} spinner={<SyncLoader />}>
-        <Topbar handleTransfer={handleTransfer} />
-        <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
-        <Wrapper>
-          {userPrivilige === 'STUDENT' && (
+        {userPrivilige !== 'ADMIN' && (
             <>
-              <Scheduler />
-              <Rightbar />
+              <Topbar handleTransfer={handleTransfer} />
+              <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
+              <Wrapper>
+                {userPrivilige === 'STUDENT' && (
+                  <>
+                    <Scheduler schedulerEvents={schedulerEvents} />
+                    <Rightbar />
+                  </>
+                )}
+                {userPrivilige === 'DEANERY' && <Deanery schedulerEvents={schedulerEvents} />}
+              </Wrapper>
             </>
-          )}{' '}
-          {userPrivilige === 'DEANERY' && <Admin />}
-        </Wrapper>
+          )}
+        {userPrivilige === 'ADMIN' && (
+            <Administrator></Administrator>
+        )}
       </LoadingOverlay>
     </>
   );

src/components/CourseCard.tsx

@@ -161,9 +161,8 @@ export const CourseCard = ({ course }: CourseCardProps) => {
   const basketCourseGroups = useMemo(() => selectBasketCourseGroups(course.id), []);
   const [previous, setPrevious] = useState(basketCourseGroups);
 
-  console.log('course is: ', course);
   const onGroupClick = (group: Group, courseId: number) => {
-    setPrevious((prev) => (group.type === GroupType.CLASS ? { ...prev, classes: group } : { ...prev, lecture: group }));
+    setPrevious((prev) => (group.type === GroupType.CLASS ? { ...prev, classes: group, prev:"classes" } : { ...prev, lecture: group,prev:"lecture" }));
     changeGroupInBasket(group, courseId);
   };
 
@@ -188,22 +187,17 @@ export const CourseCard = ({ course }: CourseCardProps) => {
             onClick={() => onGroupClick(group, course.id)}
             onMouseEnter={() => {
               if (group.type === GroupType.CLASS) {
-                changeGroupInBasket(group, course.id);
+                changeGroupInBasket({classes: group,lecture:previous.lecture}, course.id);
               }
               if (group.type === GroupType.LECTURE) {
-                changeGroupInBasket(group, course.id);
+                changeGroupInBasket({lecture: group,classes:previous.classes}, course.id);
               }
             }}
             onMouseLeave={() => {
               if (hoveredGroup) {
-                if (hoveredGroup.type === GroupType.CLASS && previous.classes !== undefined) {
-                  changeGroupInBasket(previous.classes, course.id);
-                }
-                if (hoveredGroup.type === GroupType.LECTURE && previous.lecture !== undefined) {
-                  changeGroupInBasket(previous.lecture, course.id);
-                }
-                changeHoveredGroup(null);
+                changeGroupInBasket(previous, course.id);            
               }
+              changeHoveredGroup(null);
             }}
           >
             <StyledGroupType groupType={group.type}>{group.type === 'CLASS' ? 'ĆW' : 'WYK'}</StyledGroupType>

src/components/DeaneryPanel.tsx

@@ -1,10 +1,13 @@
-import React, { useState, MouseEvent } from 'react';
+import React, { useState, MouseEvent,useContext } from 'react';
 import styled from 'styled-components/macro';
 import Plan from '../assets/plan.svg';
 import History from '../assets/history.svg';
 import Statistics from '../assets/statistics.svg';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
+import { SchedulerHistory } from './SchedulerHistory';
+import { coursesContext } from '../contexts/CoursesProvider';
+import { SchedulerEvent } from '../types';
 
 const LeftSide = styled.div`
   height: 100%;
@@ -13,7 +16,7 @@ const LeftSide = styled.div`
   flex-direction: column;
   background-color: white;
   text-align: center;
-  border-radius:5px;
+  border-radius: 5px;
 `;
 
 const Wrap = styled.div`
@@ -45,11 +48,11 @@ const LeftPanelElement = styled.div<LeftPanelElement>`
   cursor: pointer;
   box-shadow: ${({ isCurrentTab }) => (isCurrentTab === true ? `inset 0px 0px 11px 0px rgba(0,0,0,0.30)` : '')};
   border-bottom: 1px solid #979797;
-  :first-child{
-    border-radius:0px 5px 0px 0px;
+  :first-child {
+    border-radius: 0px 5px 0px 0px;
   }
-  :last-child{
-    border-radius:0px 0px 5px 0px;
+  :last-child {
+    border-radius: 0px 0px 5px 0px;
   }
 `;
 
@@ -94,11 +97,19 @@ const Icon = styled.img`
   margin: 5px;
 `;
 
-export const Admin = () => {
+interface Deanery {
+  schedulerEvents: Array<SchedulerEvent>;
+}
+
+export const Deanery = ({ schedulerEvents }: Deanery) => {
   const [currentTab, setCurrentTab] = useState<null | number>(1);
+  const { getNewestStudentTimetable,userID } = useContext(coursesContext)!;
+  const { selectHistorySchedulerEvents } = useContext(coursesContext)!;
+  const schedulerHistoryEvents = selectHistorySchedulerEvents();
 
   const handleClick = (e: MouseEvent<HTMLDivElement>) => {
     setCurrentTab(Number(e.currentTarget.id));
+    getNewestStudentTimetable(userID);
   };
 
   return (
@@ -120,11 +131,11 @@ export const Admin = () => {
       <Wrapper>
         {currentTab === 1 ? (
           <>
-            <Scheduler />
+            <Scheduler schedulerEvents={schedulerEvents}/>
             <Rightbar />
           </>
         ) : currentTab === 2 ? (
-          <HistoryDiv />
+          <SchedulerHistory schedulerHistoryEvents={schedulerHistoryEvents}/>
         ) : currentTab === 3 ? (
           <StatsDiv />
         ) : (

src/components/Dropdown.tsx

@@ -50,7 +50,7 @@ interface DropdownProps {
 }
 
 export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: DropdownProps) => {
-  const { courses, selectBasketNames, addCourseToBasket, changeStudent } = useContext(coursesContext)!;
+  const { courses, selectBasketNames, addCourseToBasket, changeStudent, getStudentTimetablesHistory } = useContext(coursesContext)!;
   const { students, changeSelectedStudent } = useContext(studentsContext)!;
   const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
   const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
@@ -67,10 +67,10 @@ export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: D
 
   const onUserClick = (event: MouseEvent) => {
     const target = event.currentTarget;
-    console.log('target: ', target);
     //to be moved to students provider
     changeStudent(target.id);
     changeSelectedStudent(Number(target.id));
+    
     handleCloseDropdown();
   };
 

src/components/Scheduler.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 import { useState } from 'react';
 import { SchedulerEvents } from './SchedulerEvents';
 import { days, hours } from '../constants/index';
 import styled from 'styled-components/macro';
+import { SchedulerEvent } from '../types';
 
 const SchedulerWrapper = styled.div`
   border-collapse: collapse;
@@ -61,7 +62,11 @@ const TableCell = styled.div<TableCellProps>`
   font-weight: bold;
 `;
 
-export const Scheduler = () => {
+interface SchedulerProps {
+  schedulerEvents: Array<SchedulerEvent>;
+}
+
+export const Scheduler = ({ schedulerEvents }: SchedulerProps) => {
   const cellRef = useRef<HTMLDivElement>(null);
   const [cellWidth, setCellWidth] = useState(0);
   const [cellHeight, setCellHeight] = useState(0);
@@ -123,7 +128,7 @@ export const Scheduler = () => {
             )}
           </TableRow>
         ))}
-        <SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
+        <SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} schedulerEvents={schedulerEvents} />
       </TableBody>
     </SchedulerWrapper>
   );

src/components/SchedulerEvents.tsx

@@ -3,15 +3,15 @@ import { SchedulerRow } from './SchedulerRow';
 import { coursesContext } from '../contexts/CoursesProvider';
 import { selectGroupsToShow } from '../utils/index';
 import { ROWS_COUNT } from '../constants';
+import { SchedulerEvent } from '../types';
+
 interface SchedulerEventsProps {
   cellWidth: number;
   cellHeight: number;
+  schedulerEvents: Array<SchedulerEvent>;
 }
 
-export const SchedulerEvents = ({ cellWidth, cellHeight }: SchedulerEventsProps) => {
-  const { selectSchedulerEvents } = useContext(coursesContext)!;
-
-  const schedulerEvents = selectSchedulerEvents();
+export const SchedulerEvents = ({ cellWidth, cellHeight,schedulerEvents }: SchedulerEventsProps) => {
 
   return (
     <div>

src/components/SchedulerHistory.tsx

@@ -0,0 +1,54 @@
+import React, { useContext, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { coursesContext } from '../contexts/CoursesProvider';
+import { SchedulerEvent } from '../types';
+import { Scheduler } from './Scheduler';
+import { SchedulerHistoryNavigation } from './SchedulerHistoryNavigation';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+interface SchedulerHistoryProps {
+  schedulerHistoryEvents: Array<SchedulerEvent>;
+}
+
+export const SchedulerHistory = ({schedulerHistoryEvents}:SchedulerHistoryProps) => {
+  const { timetableHistory, setHistoryBasketFromHistoryGroups } = useContext(coursesContext)!;
+  const [currentTimetable, setCurrentTimetable] = useState(timetableHistory.length===0 ? 0 : timetableHistory.length - 1);
+  let commisionDate = timetableHistory[currentTimetable]?.commisionDate;
+
+  const SubstractCurrentTimetable = (value: number) => {
+    if (currentTimetable > 0) {
+      setCurrentTimetable((currentTimetable) => currentTimetable + value);
+    }
+  };
+
+  const AddCurrentTimetable = (value: number) => {
+    if (currentTimetable < timetableHistory.length - 1) {
+      setCurrentTimetable((currentTimetable) => currentTimetable + value);
+    }
+  };
+
+  useEffect(() => {
+    const timetable = timetableHistory[currentTimetable];
+    if (timetable) {
+      const { groups } = timetable;
+      setHistoryBasketFromHistoryGroups(groups);
+    }
+    else{
+      setHistoryBasketFromHistoryGroups([]);
+    }
+  }, [currentTimetable,timetableHistory]);
+
+  return (
+    <Wrapper>
+      {timetableHistory.length > 0 && (
+        <SchedulerHistoryNavigation commisionDate={commisionDate} SubstractCurrentTimetable={SubstractCurrentTimetable} AddCurrentTimetable={AddCurrentTimetable} />
+      )}
+      <Scheduler schedulerEvents={schedulerHistoryEvents}/>
+    </Wrapper>
+  );
+};

src/components/SchedulerHistoryNavigation.tsx

@@ -0,0 +1,91 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { coursesContext } from '../contexts/CoursesProvider';
+import RightArrow  from '../assets/right-arrow.svg';
+import LeftArrow  from '../assets/left-arrow.svg';
+
+type ButtonProps = {
+  direction: 'left' | 'right';
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top:-15px;
+`;
+
+const StyledButton = styled.div<ButtonProps>`
+cursor:pointer;
+user-select: none;
+margin:10px;
+border-radius:5px;
+  border-radius: 15px;
+  background-color: #9ed3ff;
+  border: 2px solid white;
+  min-width: 45px;
+  color: black;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding: 12px;
+  :hover{
+  background-color:#85c8ff;
+}
+  transition: color 0.3s, background-color 0.3s;
+`;
+
+const StyledArrow = styled.img`
+width:20px;
+`;
+
+
+const StyledDate = styled.div`
+user-select: none;
+margin:10px;
+border-radius:5px;
+  border-radius: 15px;
+  background-color: #FFDC61;
+  border: 2px solid white;
+  min-width: 45px;
+  text-align:center;
+  color: black;
+  padding: 10px;
+`;
+
+type SchedulerHistoryNavigationProps = {
+  commisionDate?: Date;
+  SubstractCurrentTimetable: (value: number) => void;
+  AddCurrentTimetable: (value: number) => void;
+};
+
+export const SchedulerHistoryNavigation = ({
+  commisionDate,
+  SubstractCurrentTimetable,
+  AddCurrentTimetable,
+}: SchedulerHistoryNavigationProps) => {
+
+  return (
+    <Wrapper>
+      <StyledButton
+        direction="left"
+        onClick={() => {
+          console.log('left clicked');
+          SubstractCurrentTimetable(-1);
+        }}
+      >
+        <StyledArrow src={LeftArrow}></StyledArrow>
+      </StyledButton>
+      <StyledDate>{commisionDate}</StyledDate>
+      <StyledButton
+        direction="right"
+        onClick={() => {
+          console.log('right clicked');
+          AddCurrentTimetable(1);
+        }}
+      >
+        <StyledArrow src={RightArrow}></StyledArrow>
+      </StyledButton>
+    </Wrapper>
+  );
+};

src/components/SchedulerRow.tsx

@@ -146,14 +146,10 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
   };
 
   const handlePopoverClose = (e: MouseEvent<any>) => {
-    console.log('current target:', e.currentTarget);
-    console.log(' target:', e.target);
     setPopoverId(null);
     setAnchorEl(null);
-    console.log('click awayyy');
   };
   useEffect(() => {
-    console.log('anchorEl: ', anchorEl);
   }, [anchorEl]);
   const open = Boolean(anchorEl);
   const id = open ? 'simple-popover' : undefined;