Merge branch 'master' of git.plannaplan.pl:y0rune/frontend
This commit is contained in:
commit
3cf62c8298
@ -7,19 +7,19 @@ import styled from 'styled-components';
|
|||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: calc(100vh - 80px);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const App = () => {
|
export const App = () => {
|
||||||
const [isOpenTransfer, setOpenTransfer] = useState(false);
|
const [isOpenTransfer, setOpenTransfer] = useState(false);
|
||||||
|
|
||||||
|
|
||||||
const handleTransfer = () => {
|
const handleTransfer = () => {
|
||||||
setOpenTransfer(!isOpenTransfer);
|
setOpenTransfer(!isOpenTransfer);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Topbar handleTransfer={handleTransfer} />
|
<Topbar handleTransfer={handleTransfer} />
|
||||||
<Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
|
<Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<Scheduler />
|
<Scheduler />
|
||||||
|
@ -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 Collapse from '@material-ui/core/Collapse';
|
||||||
import ExpandIcon from '../assets/expand.png';
|
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 { coursesContext } from '../contexts/CoursesProvider';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { makeStyles } from '@material-ui/core/styles';
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
|
import { ReactComponent as CloseIcon } from '../assets/close.svg';
|
||||||
|
|
||||||
interface ClassExandIconProps {
|
interface ClassExandIconProps {
|
||||||
isSelected: boolean;
|
isSelected: boolean;
|
||||||
@ -23,6 +24,7 @@ const CourseStyled = styled.div`
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const CourseNameStyled = styled.div`
|
const CourseNameStyled = styled.div`
|
||||||
@ -30,14 +32,18 @@ const CourseNameStyled = styled.div`
|
|||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ClassGroupStyled = styled.div`
|
interface ClassGroupProps{
|
||||||
|
groupType:GroupType;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ClassGroupStyled = styled.div<ClassGroupProps>`
|
||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
padding-bottom: 1px;
|
padding-bottom: 1px;
|
||||||
:hover {
|
:hover {
|
||||||
cursor: pointer;
|
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>`
|
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 {
|
interface CourseCardProps {
|
||||||
onCardClick: (event: MouseEvent) => void;
|
|
||||||
course: Course;
|
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 classes = useStyles();
|
||||||
|
|
||||||
const { addGroup } = useContext(coursesContext)!;
|
const { addGroup, deleteFromBasket } = useContext(coursesContext)!;
|
||||||
|
|
||||||
const onGroupClick = (group: Group, id: number) => addGroup(group, id);
|
const onGroupClick = (group: Group, id: number) => addGroup(group, id);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CourseStyled onClick={onCardClick} id={id}>
|
<CourseStyled>
|
||||||
<CourseNameStyled>{course.name}</CourseNameStyled>
|
<DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
|
||||||
|
<CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
|
||||||
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
|
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
|
||||||
{course.groups.map((group, index) => (
|
{course.groups.sort((a,b)=> b.type.localeCompare(a.type)).map((group, index) => (
|
||||||
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
|
<ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
|
||||||
<p>
|
<p>
|
||||||
{group.time} {group.room} <br></br> {group.lecturer}
|
{group.time} {group.room} <br></br> {group.lecturer}
|
||||||
</p>
|
</p>
|
||||||
</ClassGroupStyled>
|
</ClassGroupStyled>
|
||||||
))}
|
))}
|
||||||
</Collapse>
|
</Collapse>
|
||||||
<div onClick={onCardClick} id={id}>
|
<div onClick={() => setSelected(!isSelected)}>
|
||||||
<ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
|
<ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
|
||||||
</div>
|
</div>
|
||||||
</CourseStyled>
|
</CourseStyled>
|
||||||
|
@ -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 axios from 'axios';
|
||||||
import { Input } from '@material-ui/core';
|
import { Input } from '@material-ui/core';
|
||||||
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
|
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
|
||||||
@ -64,13 +64,10 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
|||||||
}, [input, open, basket]);
|
}, [input, open, basket]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (clearInput) {
|
clearInput && (setInput(''), handleClearInput());
|
||||||
setInput('');
|
|
||||||
handleClearInput();
|
|
||||||
}
|
|
||||||
}, [clearInput]);
|
}, [clearInput]);
|
||||||
|
|
||||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
|
const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
|
||||||
|
|
||||||
const handleClick = () => setOpen(true);
|
const handleClick = () => setOpen(true);
|
||||||
|
|
||||||
@ -83,7 +80,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
|||||||
const name = target.textContent;
|
const name = target.textContent;
|
||||||
|
|
||||||
//porozmawiać z Filipem, żeby odrobinę przerobił endpoint
|
//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);
|
addToBasket(course);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
|
@ -9,8 +9,8 @@ const RightbarStyled = styled.div`
|
|||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: Lato;
|
font-family: Lato;
|
||||||
|
height: 100%;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 85vh;
|
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@ -27,12 +27,24 @@ const RightbarStyled = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
const RightbarTextStyled = styled.div`
|
const RightbarTextStyled = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Rightbar = () => {
|
const SaveButton = styled.div`
|
||||||
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
|
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 { courses, basket } = useContext(coursesContext)!;
|
||||||
|
|
||||||
const getBasketGroups = () => {
|
const getBasketGroups = () => {
|
||||||
@ -42,27 +54,18 @@ export const Rightbar = () => {
|
|||||||
|
|
||||||
const filteredCourses = getBasketGroups();
|
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
|
//need to insert student name from db and course maybe based on current time or from db too
|
||||||
return (
|
return (
|
||||||
<RightbarStyled>
|
<RightbarStyled>
|
||||||
<RightbarTextStyled>
|
<RightbarTextStyled>
|
||||||
Hubert Wrzesiński<br></br>
|
<p>
|
||||||
Semestr zimowy 2020/2021
|
Hubert Wrzesiński<br></br>
|
||||||
|
Semestr zimowy 2020/2021
|
||||||
|
</p>
|
||||||
|
<SaveButton>SAVE</SaveButton>
|
||||||
</RightbarTextStyled>
|
</RightbarTextStyled>
|
||||||
{filteredCourses.map((course, index) => (
|
{filteredCourses.map((course, index) => (
|
||||||
<CourseCard
|
<CourseCard course={course} key={index} />
|
||||||
course={course}
|
|
||||||
key={index}
|
|
||||||
id={index.toString()}
|
|
||||||
onCardClick={onCardClick}
|
|
||||||
isSelected={selectedCardId === index.toString()}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</RightbarStyled>
|
</RightbarStyled>
|
||||||
);
|
);
|
||||||
|
@ -1,32 +1,22 @@
|
|||||||
import React, { useEffect, useRef } from 'react';
|
import React, { useEffect, MouseEvent, useRef } from 'react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { SchedulerEvents } from './SchedulerEvents';
|
import { SchedulerEvents } from './SchedulerEvents';
|
||||||
import { days, hours } from '../constants/index';
|
import { days, hours } from '../constants/index';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components/macro';
|
||||||
|
|
||||||
const SchedulerWrapper = styled.div`
|
const SchedulerWrapper = styled.div`
|
||||||
flex-grow: 3;
|
|
||||||
margin-top: 20px;
|
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
flex-grow: 1;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TableBody = styled.div`
|
const TableBody = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TableRow = styled.div`
|
const TableRow = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const TableCell = styled.div`
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
padding: 10px;
|
|
||||||
text-align: center;
|
|
||||||
flex: 1;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TableHead = styled.div`
|
const TableHead = styled.div`
|
||||||
@ -34,57 +24,53 @@ const TableHead = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TableHeadCell = styled.div`
|
interface TableCellProps {
|
||||||
|
height: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TableCell = styled.div<TableCellProps>`
|
||||||
|
height: ${({ height }) => height}px;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
padding: 10px;
|
display: flex;
|
||||||
text-align: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
font-size: 24px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const T = styled.table`
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Scheduler = () => {
|
export const Scheduler = () => {
|
||||||
const [currentEventsIds, setCurrentEventsIds] = useState<Array<string>>([]);
|
|
||||||
const cellRef = useRef<HTMLDivElement>(null);
|
const cellRef = useRef<HTMLDivElement>(null);
|
||||||
const [cellWidth, setCellWidth] = useState(0);
|
const [cellWidth, setCellWidth] = useState(0);
|
||||||
const [cellTop, setCellTop] = useState(0);
|
const [cellTop, setCellTop] = useState(0);
|
||||||
|
|
||||||
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [wrapperHeight, setWrapperHeight] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
if (cellRef.current) {
|
if (cellRef.current && wrapperRef.current) {
|
||||||
setCellWidth(cellRef.current.getBoundingClientRect().width);
|
setCellWidth(cellRef.current.getBoundingClientRect().width);
|
||||||
setCellTop(cellRef.current.getBoundingClientRect().top);
|
setCellTop(cellRef.current.getBoundingClientRect().top);
|
||||||
|
setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
handleResize();
|
handleResize();
|
||||||
window.addEventListener('resize', 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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<SchedulerWrapper>
|
<SchedulerWrapper ref={wrapperRef}>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
{days.map((day, index) => (
|
{days.map((day, index) => (
|
||||||
<TableHeadCell key={index}>{day}</TableHeadCell>
|
<TableCell height={wrapperHeight / 13} key={index} ref={cellRef}>
|
||||||
|
{day}
|
||||||
|
</TableCell>
|
||||||
))}
|
))}
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
@ -92,15 +78,17 @@ export const Scheduler = () => {
|
|||||||
<TableRow key={indexRow}>
|
<TableRow key={indexRow}>
|
||||||
{[hour, '', '', '', '', ''].map((value, indexCell) =>
|
{[hour, '', '', '', '', ''].map((value, indexCell) =>
|
||||||
indexRow === 0 && indexCell === 1 ? (
|
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>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} />
|
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 13} />
|
||||||
</SchedulerWrapper>
|
</SchedulerWrapper>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
import React, { useContext, useEffect, useState } from 'react';
|
import React, { useContext, useEffect, useState, MouseEvent } from 'react';
|
||||||
import { SchedulerRow } from './SchedulerRow';
|
import { SchedulerRow } from './SchedulerRow';
|
||||||
import { coursesContext } from '../contexts/CoursesProvider';
|
import { coursesContext } from '../contexts/CoursesProvider';
|
||||||
import { Group, Basket } from '../types';
|
import { Group, Basket } from '../types';
|
||||||
import classes from '*.module.css';
|
|
||||||
|
|
||||||
interface SchedulerEventsProps {
|
interface SchedulerEventsProps {
|
||||||
cellTop: number;
|
cellTop: number;
|
||||||
cellWidth: number;
|
cellWidth: number;
|
||||||
|
cellHeight: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) => {
|
export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEventsProps) => {
|
||||||
const { basket } = useContext(coursesContext)!;
|
const { basket } = useContext(coursesContext)!;
|
||||||
|
|
||||||
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
|
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
|
||||||
@ -28,20 +28,21 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function mapGroupTimeToEventRow(basket: Array<Basket>) {
|
function mapGroupTimeToEventRow(basket: Array<Basket>) {
|
||||||
const classes = basket.map(({ classes }) => classes).filter((cl) => cl !== null) as Array<Group>;
|
const classes = basket.map(({ classes, name }) => ({ ...classes, name })) as Array<Group & { name: string }>;
|
||||||
const lectures = basket.map(({ lecture }) => lecture).filter((lec) => lec !== null) as Array<Group>;
|
const lectures = basket.map(({ lecture, name }) => ({ ...lecture, name })) as Array<Group & { name: string }>;
|
||||||
const merged = [...classes, ...lectures];
|
const merged = [...classes, ...lectures];
|
||||||
|
|
||||||
if (merged.length >= 1) {
|
//deleted if statement, maybe it is needed
|
||||||
const groupsMapped = merged.map(({ id, day, lecturer, room, time }) => ({
|
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
|
||||||
id,
|
id,
|
||||||
day,
|
day: day === 5 ? 4 : day,
|
||||||
lecturer,
|
lecturer,
|
||||||
room,
|
room,
|
||||||
eventRow: groupTimeToEventRowMapping[time],
|
eventRow: groupTimeToEventRowMapping[time],
|
||||||
}));
|
name,
|
||||||
setChoosenGroupsMappedToEvents(groupsMapped);
|
type,
|
||||||
}
|
}));
|
||||||
|
setChoosenGroupsMappedToEvents(groupsMapped);
|
||||||
}
|
}
|
||||||
mapGroupTimeToEventRow(basket);
|
mapGroupTimeToEventRow(basket);
|
||||||
}, [basket]);
|
}, [basket]);
|
||||||
@ -51,18 +52,25 @@ export const SchedulerEvents = ({ cellTop, cellWidth }: SchedulerEventsProps) =>
|
|||||||
{[...Array(6)].map((_, index) => (
|
{[...Array(6)].map((_, index) => (
|
||||||
<SchedulerRow
|
<SchedulerRow
|
||||||
key={index}
|
key={index}
|
||||||
groups={choosenGroupsMappedToEvents.filter((group: any) => {
|
groups={choosenGroupsMappedToEvents.filter((group: any) => group.eventRow === index)}
|
||||||
return group.eventRow === index;
|
|
||||||
})}
|
|
||||||
indexRow={index}
|
indexRow={index}
|
||||||
cellTop={
|
cellTop={
|
||||||
index == 3
|
index === 0
|
||||||
? cellTop + (25 + 80 * index)
|
? cellTop + (cellHeight + cellHeight * 2 * index + cellHeight / 4)
|
||||||
: index < 3
|
: index === 1
|
||||||
? cellTop + (12 + 80 * index)
|
? cellTop + (cellHeight + cellHeight * 2 * index)
|
||||||
: cellTop + (25 + 80 * 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}
|
cellWidth={cellWidth}
|
||||||
|
cellHeight={cellHeight}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,32 +1,87 @@
|
|||||||
import React from 'react';
|
import React, { MouseEvent, useEffect, useState } from 'react';
|
||||||
import { Group } from '../types';
|
import { Group, GroupType } from '../types';
|
||||||
import styled from 'styled-components';
|
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 {
|
interface SchedulerEventProps {
|
||||||
eventIndex: number;
|
eventIndex: number;
|
||||||
cellTop: number;
|
cellTop: number;
|
||||||
cellWidth: number;
|
cellWidth: number;
|
||||||
|
cellHeight: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const SchedulerEvent = styled.div<SchedulerEventProps>`
|
const SchedulerEvent = styled.div<SchedulerEventProps>`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: ${(props) => props.cellTop}px;
|
display: flex;
|
||||||
left: ${(props) => props.cellWidth + 5 + props.cellWidth * props.eventIndex}px;
|
top: ${({ cellTop }) => cellTop}px;
|
||||||
width: ${(props) => (props.cellWidth * 2) / 3}px;
|
left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px;
|
||||||
height: 69px;
|
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
|
||||||
background-color: lightblue;
|
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
|
||||||
z-index: 2;
|
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 {
|
interface SchedulerRowProps {
|
||||||
groups: Array<Group>;
|
groups: Array<Group & { name: string }>;
|
||||||
indexRow: number;
|
indexRow: number;
|
||||||
cellTop: number;
|
cellTop: number;
|
||||||
cellWidth: 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 (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -35,11 +90,58 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth }: Scheduler
|
|||||||
eventIndex={eventIndex}
|
eventIndex={eventIndex}
|
||||||
cellTop={cellTop}
|
cellTop={cellTop}
|
||||||
cellWidth={cellWidth}
|
cellWidth={cellWidth}
|
||||||
|
cellHeight={cellHeight}
|
||||||
key={eventIndex}
|
key={eventIndex}
|
||||||
id={`eventRow${indexRow}eventCol${eventIndex}`}
|
id={`eventRow${indexRow}eventCol${eventIndex}`}
|
||||||
>
|
>
|
||||||
{groups.map((group, index) =>
|
{groups.map(
|
||||||
group.day === eventIndex && <div key={index}>{groups[index]?.lecturer}</div>,
|
(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>
|
</SchedulerEvent>
|
||||||
))}
|
))}
|
||||||
|
@ -102,9 +102,9 @@ export default function ({ handleTransfer }: TopbarProps) {
|
|||||||
<TopbarInputStyled>
|
<TopbarInputStyled>
|
||||||
<TopbarInputIconStyled alt="search" src={Search} />
|
<TopbarInputIconStyled alt="search" src={Search} />
|
||||||
<TopbarInputFieldStyled>
|
<TopbarInputFieldStyled>
|
||||||
<Dropdown clearInput={clearInput} handleClearInput={handleClearInput}/>
|
<Dropdown clearInput={clearInput} handleClearInput={handleClearInput} />
|
||||||
</TopbarInputFieldStyled>
|
</TopbarInputFieldStyled>
|
||||||
<TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput}/>
|
<TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput} />
|
||||||
</TopbarInputStyled>
|
</TopbarInputStyled>
|
||||||
<TopbarIconBox>
|
<TopbarIconBox>
|
||||||
<TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} />
|
<TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} />
|
||||||
@ -114,4 +114,4 @@ export default function ({ handleTransfer }: TopbarProps) {
|
|||||||
</TopbarIconBox>
|
</TopbarIconBox>
|
||||||
</Topbar>
|
</Topbar>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
export const days = [
|
export const days = [
|
||||||
"",
|
"",
|
||||||
"poniedziałek",
|
"Poniedziałek",
|
||||||
"wtorek",
|
"Wtorek",
|
||||||
"środa",
|
"Środa",
|
||||||
"czwartek",
|
"Czwartek",
|
||||||
"piątek",
|
"Piątek",
|
||||||
];
|
];
|
||||||
export const hours = [
|
export const hours = [
|
||||||
"8:00",
|
"8:00",
|
||||||
|
@ -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 { Course, Group, Basket, GroupType } from '../types';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
@ -7,11 +7,12 @@ interface CourseContext {
|
|||||||
basket: Array<Basket>;
|
basket: Array<Basket>;
|
||||||
addToBasket: (courses: Basket) => void;
|
addToBasket: (courses: Basket) => void;
|
||||||
addGroup: (group: Group, id: number) => void;
|
addGroup: (group: Group, id: number) => void;
|
||||||
|
deleteFromBasket: (id: number) => void;
|
||||||
}
|
}
|
||||||
export const coursesContext = createContext<CourseContext | null>(null);
|
export const coursesContext = createContext<CourseContext | null>(null);
|
||||||
|
|
||||||
interface CoursesProviderProps {
|
interface CoursesProviderProps {
|
||||||
children: React.ReactNode;
|
children: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||||
@ -21,6 +22,9 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||||||
|
|
||||||
const addToBasket = (course: Basket) => setBasket([...basket, course]);
|
const addToBasket = (course: Basket) => setBasket([...basket, course]);
|
||||||
|
|
||||||
|
const deleteFromBasket = (id: number) => setBasket(basket.filter(course => course.id !== id));
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('BASKET');
|
console.log('BASKET');
|
||||||
console.log(basket);
|
console.log(basket);
|
||||||
@ -52,6 +56,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<coursesContext.Provider value={{ courses, basket, addToBasket, addGroup }}>{children}</coursesContext.Provider>
|
<coursesContext.Provider value={{ courses, basket, addToBasket, addGroup, deleteFromBasket }}>{children}</coursesContext.Provider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -6,8 +6,8 @@ export enum GroupType {
|
|||||||
export interface Basket {
|
export interface Basket {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
lecture: Group | null;
|
lecture?: Group;
|
||||||
classes: Group | null;
|
classes?: Group;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Group {
|
export interface Group {
|
||||||
|
Loading…
Reference in New Issue
Block a user