color croups and lectures
This commit is contained in:
parent
45a226b4b8
commit
12d50c790b
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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}`}
|
||||
|
Loading…
Reference in New Issue
Block a user