Merge branch 'master' of git.plannaplan.pl:y0rune/frontend

2020-10-01 18:19:04 +02:00
parent f622ab66bd 8b812dcbed
commit 3cf62c8298
11 changed files with 252 additions and 134 deletions
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7,12 +7,12 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  display: flex;
+  height: calc(100vh - 80px);
 `;

 export const App = () => {
  const [isOpenTransfer, setOpenTransfer] = useState(false);

-
  const handleTransfer = () => {
    setOpenTransfer(!isOpenTransfer);
  };
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -1,10 +1,11 @@
-import React, { useContext, MouseEvent } from 'react';
+import React, { useState, useContext, MouseEvent } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import ExpandIcon from '../assets/expand.png';
-import { Course, Group } from '../types/index';
+import { Course, Group, GroupType } from '../types/index';
 import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
+import { ReactComponent as CloseIcon } from '../assets/close.svg';

 interface ClassExandIconProps {
  isSelected: boolean;
@@ -23,6 +24,7 @@ const CourseStyled = styled.div`
  border-radius: 10px;
  cursor: pointer;
  align-items: stretch;
+  position: relative;
 `;

 const CourseNameStyled = styled.div`
@@ -30,14 +32,18 @@ const CourseNameStyled = styled.div`
  padding-bottom: 10px;
 `;

-const ClassGroupStyled = styled.div`
+interface ClassGroupProps{
+  groupType:GroupType;
+}
+
+const ClassGroupStyled = styled.div<ClassGroupProps>`
  padding-top: 1px;
  padding-bottom: 1px;
  :hover {
    cursor: pointer;
-    transition: 1s;
-    background-color: #8bc8fb;
  }
+    outline-offset: -5px;
+    outline:${({groupType})=>groupType === "CLASS" ? "2px solid #5642AA" : "2px solid #866DF7"};
 `;

 const ClassExandIconStyled = styled.img<ClassExandIconProps>`
@@ -67,33 +73,43 @@ const useStyles = makeStyles({
  },
 });

+const DeleteFromBasketIcon = styled(CloseIcon)`
+  width: 20px;
+  cursor: pointer;
+  position: absolute;
+  left: 235px;
+  top: -10px;
+  &:hover {
+    fill: #d3d3d3;
+  }
+`;
+
 interface CourseCardProps {
-  onCardClick: (event: MouseEvent) => void;
  course: Course;
-  id: string;
-  isSelected: boolean;
 }

-export const CourseCard = ({ onCardClick, course, id, isSelected }: CourseCardProps) => {
+export const CourseCard = ({ course }: CourseCardProps) => {
+  const [isSelected, setSelected] = useState(false);
  const classes = useStyles();

-  const { addGroup } = useContext(coursesContext)!;
+  const { addGroup, deleteFromBasket } = useContext(coursesContext)!;

  const onGroupClick = (group: Group, id: number) => addGroup(group, id);

  return (
-    <CourseStyled onClick={onCardClick} id={id}>
-      <CourseNameStyled>{course.name}</CourseNameStyled>
+    <CourseStyled>
+      <DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
+      <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
      <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
-        {course.groups.map((group, index) => (
-          <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
+        {course.groups.sort((a,b)=> b.type.localeCompare(a.type)).map((group, index) => (
+          <ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
            <p>
              {group.time} {group.room} <br></br> {group.lecturer}
            </p>
          </ClassGroupStyled>
        ))}
      </Collapse>
-      <div onClick={onCardClick} id={id}>
+      <div onClick={() => setSelected(!isSelected)}>
        <ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
      </div>
    </CourseStyled>
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect, MouseEvent } from 'react';
+import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react';
 import axios from 'axios';
 import { Input } from '@material-ui/core';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
@@ -64,13 +64,10 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
  }, [input, open, basket]);

  useEffect(() => {
-    if (clearInput) {
-      setInput('');
-      handleClearInput();
-    }
+    clearInput && (setInput(''), handleClearInput());
  }, [clearInput]);

-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);

  const handleClick = () => setOpen(true);

@@ -83,7 +80,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
      const name = target.textContent;

      //porozmawiać z Filipem, żeby odrobinę przerobił endpoint
-      const course: Basket = { name: name.trim(), id: parseInt(id), lecture: null, classes: null };
+      const course: Basket = { name: name.trim(), id: parseInt(id) };

      addToBasket(course);
      setOpen(false);
--- a/src/components/Rightbar.tsx
+++ b/src/components/Rightbar.tsx
@@ -9,8 +9,8 @@ const RightbarStyled = styled.div`
  padding-right: 15px;
  text-align: center;
  font-family: Lato;
+  height: 100%;
  width: 300px;
-  height: 85vh;
  overflow-y: scroll;
  ::-webkit-scrollbar-track {
    border-radius: 10px;
@@ -27,12 +27,24 @@ const RightbarStyled = styled.div`
  }
 `;
 const RightbarTextStyled = styled.div`
+  display: flex;
+  flex-direction: column;
  border-bottom: 1px solid;
 `;

-export const Rightbar = () => {
-  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
+const SaveButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgb(100, 181, 246) !important;
+  border-radius: 10px;
+  cursor: pointer;
+  height: 40px;
+  background-color: red;
+  margin-bottom: 10px;
+`;

+export const Rightbar = () => {
  const { courses, basket } = useContext(coursesContext)!;

  const getBasketGroups = () => {
@@ -42,27 +54,18 @@ export const Rightbar = () => {

  const filteredCourses = getBasketGroups();

-  //działa clunky
-  const onCardClick = (event: MouseEvent) => {
-    const target = event.currentTarget;
-    selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
-  };
-
  //need to insert student name from db and course maybe based on current time or from db too
  return (
    <RightbarStyled>
      <RightbarTextStyled>
+        <p>
          Hubert Wrzesiński<br></br>
          Semestr zimowy 2020/2021
+        </p>
+        <SaveButton>SAVE</SaveButton>
      </RightbarTextStyled>
      {filteredCourses.map((course, index) => (
-        <CourseCard
-          course={course}
-          key={index}
-          id={index.toString()}
-          onCardClick={onCardClick}
-          isSelected={selectedCardId === index.toString()}
-        />
+        <CourseCard course={course} key={index} />
      ))}
    </RightbarStyled>
  );
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@@ -1,32 +1,22 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, MouseEvent, useRef } from 'react';
 import { useState } from 'react';
 import { SchedulerEvents } from './SchedulerEvents';
 import { days, hours } from '../constants/index';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';

 const SchedulerWrapper = styled.div`
-  flex-grow: 3;
-  margin-top: 20px;
  border-collapse: collapse;
+  flex-grow: 1;
 `;

 const TableBody = styled.div`
  width: 100%;
-  height: 100%;
  display: flex;
  flex-direction: column;
 `;

 const TableRow = styled.div`
  display: flex;
-  flex-direction: row;
-`;
-
-const TableCell = styled.div`
-  border: 1px solid #ddd;
-  padding: 10px;
-  text-align: center;
-  flex: 1;
 `;

 const TableHead = styled.div`
@@ -34,57 +24,53 @@ const TableHead = styled.div`
  width: 100%;
 `;

-const TableHeadCell = styled.div`
+interface TableCellProps {
+  height: number;
+}
+
+const TableCell = styled.div<TableCellProps>`
+  height: ${({ height }) => height}px;
  border: 1px solid #ddd;
-  padding: 10px;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
  flex: 1;
+  font-size: 24px;
+`;
+
+const T = styled.table`
+  width: 100%;
+  height: 100%;
 `;

 export const Scheduler = () => {
-  const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
  const cellRef = useRef<HTMLDivElement>(null);
  const [cellWidth, setCellWidth] = useState(0);
  const [cellTop, setCellTop] = useState(0);

+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [wrapperHeight, setWrapperHeight] = useState(0);
+
  useEffect(() => {
    const handleResize = () => {
-      if (cellRef.current) {
+      if (cellRef.current && wrapperRef.current) {
        setCellWidth(cellRef.current.getBoundingClientRect().width);
        setCellTop(cellRef.current.getBoundingClientRect().top);
+        setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
      }
    };
    handleResize();
    window.addEventListener('resize', handleResize);
  }, []);

-  useEffect(() => {
-    const displayEvents = () => {
-      currentEventsIds.map((eventId: string) => {
-        const event = document.getElementById(eventId);
-        if (event) {
-          event.style.display = 'block';
-        }
-      });
-    };
-    displayEvents();
-  }, [currentEventsIds]);
-
-  // const handleClick = (e: React.MouseEvent) => {
-  //   const cellId = e.currentTarget.id;
-  //   const column = cellId.slice(0, 1);
-  //   const row = cellId.slice(1);
-  //   const eventId = `eventCol${column}eventRow${Math.floor(parseInt(row) / 2)}`;
-
-  //   setCurrentEventsIds((currentEventsIds) => [...currentEventsIds, eventId]);
-  // };
-
  return (
    <>
-      <SchedulerWrapper>
+      <SchedulerWrapper ref={wrapperRef}>
        <TableHead>
          {days.map((day, index) => (
-            <TableHeadCell key={index}>{day}</TableHeadCell>
+            <TableCell height={wrapperHeight / 13} key={index} ref={cellRef}>
+              {day}
+            </TableCell>
          ))}
        </TableHead>
        <TableBody>
@@ -92,15 +78,17 @@ export const Scheduler = () => {
            <TableRow key={indexRow}>
              {[hour, '', '', '', '', ''].map((value, indexCell) =>
                indexRow === 0 && indexCell === 1 ? (
-                  <TableCell key={`${indexRow}${indexCell}`} ref={cellRef}></TableCell>
+                  <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}></TableCell>
                ) : (
-                  <TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
+                  <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
+                    {value}
+                  </TableCell>
                ),
              )}
            </TableRow>
          ))}
        </TableBody>
-        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
+        <SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
      </SchedulerWrapper>
    </>
  );
--- a/src/components/SchedulerEvents.tsx
+++ b/src/components/SchedulerEvents.tsx
@@ -1,15 +1,15 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, MouseEvent } from 'react';
 import { SchedulerRow } from './SchedulerRow';
 import { coursesContext } from '../contexts/CoursesProvider';
 import { Group, Basket } from '../types';
-import classes from '*.module.css';

 interface SchedulerEventsProps {
  cellTop: number;
  cellWidth: number;
+  cellHeight: number;
 }

-export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
+export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
  const { basket } = useContext(coursesContext)!;

  const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
@@ -28,21 +28,22 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>

  useEffect(() => {
    function mapGroupTimeToEventRow(basket: Array<Basket>) {
-      const classes = basket.map(({ classes }) => classes).filter((cl) => cl !== null) as Array<Group>;
-      const lectures = basket.map(({ lecture }) => lecture).filter((lec) => lec !== null) as Array<Group>;
+      const classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array<Group & { name: string }>;
+      const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) as Array<Group & { name: string }>;
      const merged = [...classes, ...lectures];

-      if (merged.length >= 1) {
-        const groupsMapped = merged.map(({ id, day, lecturer, room, time }) => ({
+      //deleted if statement, maybe it is needed
+      const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
        id,
-          day,
+        day: day === 5 ? 4 : day,
        lecturer,
        room,
        eventRow: groupTimeToEventRowMapping[time],
+        name,
+        type,
      }));
      setChoosenGroupsMappedToEvents(groupsMapped);
    }
-    }
    mapGroupTimeToEventRow(basket);
  }, [basket]);

@@ -51,18 +52,25 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
      {[...Array(6)].map((_, index) => (
        <SchedulerRow
          key={index}
-          groups={choosenGroupsMappedToEvents.filter((group: any) => {
-            return group.eventRow === index;
-          })}
+          groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)}
          indexRow={index}
          cellTop={
-            index == 3
-              ? cellTop + (25 + 80 * index)
-              : index < 3
-              ? cellTop + (12 + 80 * index)
-              : cellTop + (25 + 80 * index)
+            index === 0
+              ? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4)
+              : index === 1
+              ? cellTop + (cellHeight + cellHeight * 2 * index)
+              : index === 2
+              ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
+              : index === 3
+              ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 4)
+              : index === 4
+              ? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2)
+              : index === 5
+              ? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 4)
+              : 0
          }
          cellWidth={cellWidth}
+          cellHeight={cellHeight}
        />
      ))}
    </div>
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@@ -1,32 +1,87 @@
-import React from 'react';
-import { Group } from '../types';
-import styled from 'styled-components';
+import React, { MouseEvent, useEffect, useState } from 'react';
+import { Group, GroupType } from '../types';
+import styled from 'styled-components/macro';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    popover: {
+      pointerEvents: 'none',
+    },
+    paper: {
+      padding: theme.spacing(1),
+      marginLeft: 5,
+      textAlign: 'center',
+    },
+  }),
+);

 interface SchedulerEventProps {
  eventIndex: number;
  cellTop: number;
  cellWidth: number;
+  cellHeight: number;
 }

 const SchedulerEvent = styled.div<SchedulerEventProps>`
  position: absolute;
-  top: ${(props) => props.cellTop}px;
-  left: ${(props) => props.cellWidth + 5 + props.cellWidth * props.eventIndex}px;
-  width: ${(props) => (props.cellWidth * 2) / 3}px;
-  height: 69px;
-  background-color: lightblue;
+  display: flex;
+  top: ${({ cellTop }) => cellTop}px;
+  left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
+  width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
+  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
  z-index: 2;
 `;

+interface ClassesProps{
+  cellWidth: number;
+  cellHeight: number;
+  groupType: GroupType;
+}
+
+const Classes = styled.div<ClassesProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  border-radius: 10px;
+  /* background-color: rgb(100, 181, 246); */
+  width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
+  height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
+  margin-right: 5px;
+  text-align: center;
+  background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"}
+`;
+
 interface SchedulerRowProps {
-  groups: Array<Group>;
+  groups: Array<Group & { name: string }>;
  indexRow: number;
  cellTop: number;
  cellWidth: number;
+  cellHeight: number;
 }

-export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: SchedulerRowProps) => {
+export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight }: SchedulerRowProps) => {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
+  const [popoverId, setPopoverId] = useState<string | null>(null);

+  console.log("123s"+JSON.stringify(groups));
+
+  //looks weird
+  const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
+    setAnchorEl(event.currentTarget);
+    setPopoverId(event.currentTarget.id);
+  };
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+    setPopoverId(null);
+  };
+
+  const open = Boolean(anchorEl);

  return (
    <>
@@ -35,11 +90,58 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: Scheduler
          eventIndex={eventIndex}
          cellTop={cellTop}
          cellWidth={cellWidth}
+          cellHeight={cellHeight}
          key={eventIndex}
          id={`eventRow${indexRow}eventCol${eventIndex}`}
        >
-          {groups.map((group, index) =>
-            group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>,
+          {groups.map(
+            (group, index) =>
+              group.day === eventIndex && (
+                <>
+                  <Classes
+                    groupType={group.type}
+                    cellWidth={cellWidth}
+                    cellHeight={cellHeight}
+                    id={`eventRow${indexRow}eventCol${eventIndex}${index}`}
+                    key={index}
+                    aria-owns={open ? `mouse-over-popover` : undefined}
+                    aria-haspopup="true"
+                    onMouseEnter={(e) => handlePopoverOpen(e)}
+                    onMouseLeave={handlePopoverClose}
+                  >
+                    <p>
+                      {groups[index].name}
+                      <br></br>
+                      {groups[index].room}
+                    </p>
+                  </Classes>
+                  <Popover
+                    id={`mouse-over-popover`}
+                    className={classes.popover}
+                    classes={{
+                      paper: classes.paper,
+                    }}
+                    open={popoverId === `eventRow${indexRow}eventCol${eventIndex}${index}`}
+                    anchorEl={anchorEl}
+                    anchorOrigin={{
+                      vertical: 'top',
+                      horizontal: 'right',
+                    }}
+                    transformOrigin={{
+                      vertical: 'center',
+                      horizontal: 'left',
+                    }}
+                    onClose={handlePopoverClose}
+                    disableRestoreFocus
+                  >
+                    <Typography>
+                      <p>{groups[index].name}</p>
+                      <p>{groups[index].lecturer}</p>
+                      <p>{groups[index].room}</p>
+                    </Typography>
+                  </Popover>
+                </>
+              ),
          )}
        </SchedulerEvent>
      ))}
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@@ -114,4 +114,4 @@ export default function ({ handleTransfer }: TopbarProps) {
      </TopbarIconBox>
    </Topbar>
  );
-};
+}
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,10 +1,10 @@
 export const days = [
  "",
-  "poniedziałek",
-  "wtorek",
-  "środa",
-  "czwartek",
-  "piątek",
+  "Poniedziałek",
+  "Wtorek",
+  "Środa",
+  "Czwartek",
+  "Piątek",
 ];
 export const hours = [
  "8:00",
--- a/src/contexts/CoursesProvider.tsx
+++ b/src/contexts/CoursesProvider.tsx
@@ -1,4 +1,4 @@
-import React, { useState, createContext, useEffect } from 'react';
+import React, { useState, createContext, useEffect, ReactNode } from 'react';
 import { Course, Group, Basket, GroupType } from '../types';
 import axios from 'axios';

@@ -7,11 +7,12 @@ interface CourseContext {
  basket: Array<Basket>;
  addToBasket: (courses: Basket) => void;
  addGroup: (group: Group, id: number) => void;
+  deleteFromBasket: (id: number) => void;
 }
 export const coursesContext = createContext<CourseContext | null>(null);

 interface CoursesProviderProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }

 export const CoursesProvider = ({ children }: CoursesProviderProps) => {
@@ -21,6 +22,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {

  const addToBasket = (course: Basket) => setBasket([...basket, course]);

+  const deleteFromBasket = (id: number) => setBasket(basket.filter(course => course.id !== id));
+
+
  useEffect(() => {
    console.log('BASKET');
    console.log(basket);
@@ -52,6 +56,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
  }, []);

  return (
-    <coursesContext.Provider value={{ courses, basket, addToBasket, addGroup }}>{children}</coursesContext.Provider>
+    <coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket }}>{children}</coursesContext.Provider>
  );
 };
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -6,8 +6,8 @@ export enum GroupType {
 export interface Basket {
  id: number;
  name: string;
-  lecture: Group | null;
-  classes: Group | null;
+  lecture?: Group;
+  classes?: Group;
 }

 export interface Group {