color croups and lectures

This commit is contained in:
wrzesinski-hubert 2020-09-28 20:16:54 +02:00
parent 45a226b4b8
commit 12d50c790b
4 changed files with 44 additions and 16 deletions

View File

@ -1,7 +1,7 @@
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';
@ -32,7 +32,11 @@ 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 {
@ -40,6 +44,7 @@ const ClassGroupStyled = styled.div`
transition: 1s;
background-color: #8bc8fb;
}
background-color:${({groupType})=>groupType === "CLASS" ? "purple" : "red"}
`;
const ClassExandIconStyled = styled.img<ClassExandIconProps>`
@ -97,8 +102,8 @@ export const CourseCard = ({ course }: CourseCardProps) => {
<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>

View File

@ -27,9 +27,23 @@ const RightbarStyled = styled.div`
}
`;
const RightbarTextStyled = styled.div`
display: flex;
flex-direction: column;
border-bottom: 1px solid;
`;
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)!;
@ -44,14 +58,14 @@ export const Rightbar = () => {
return (
<RightbarStyled>
<RightbarTextStyled>
Hubert Wrzesiński<br></br>
Semestr zimowy 2020/2021
<p>
Hubert Wrzesiński<br></br>
Semestr zimowy 2020/2021
</p>
<SaveButton>SAVE</SaveButton>
</RightbarTextStyled>
{filteredCourses.map((course, index) => (
<CourseCard
course={course}
key={index}
/>
<CourseCard course={course} key={index} />
))}
</RightbarStyled>
);

View File

@ -33,13 +33,14 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
const merged = [...classes, ...lectures];
//deleted if statement, maybe it is needed
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name }) => ({
const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
id,
day: day === 5 ? 4 : day,
lecturer,
room,
eventRow: groupTimeToEventRowMapping[time],
name,
type,
}));
setChoosenGroupsMappedToEvents(groupsMapped);
}

View File

@ -1,5 +1,5 @@
import React, { MouseEvent, useEffect, useState } from 'react';
import { Group } from '../types';
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';
@ -35,17 +35,24 @@ const SchedulerEvent = styled.div<SchedulerEventProps>`
z-index: 2;
`;
const Classes = styled.div<SchedulerEventProps>`
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);
/* 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" ? "purple" : "red"}
`;
interface SchedulerRowProps {
@ -61,6 +68,8 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
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);
@ -90,8 +99,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
group.day === eventIndex && (
<>
<Classes
eventIndex={eventIndex}
cellTop={cellTop}
groupType={group.type}
cellWidth={cellWidth}
cellHeight={cellHeight}
id={`eventRow${indexRow}eventCol${eventIndex}${index}`}