y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

styled table and card

Browse Source
This commit is contained in:
Maciek Głowacki 2020-11-26 01:53:07 +01:00
parent d384b248e5
commit 3f0aaf42ca
5 changed files with 127 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/CourseCard.tsx
View File

@ -1,9 +1,9 @@
import React, { useState, useContext } from 'react'; import React, { useState, useContext } from 'react';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import { ReactComponent as Expand } from '../assets/expand.svg'; import { ReactComponent as Expand } from '../assets/expand.svg';
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, { css } from 'styled-components';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import { ReactComponent as Bin } from '../assets/bin.svg'; import { ReactComponent as Bin } from '../assets/bin.svg';
import DeleteIcon from '@material-ui/icons/Delete'; import DeleteIcon from '@material-ui/icons/Delete';
@ -12,7 +12,7 @@ const CourseCardWrapper = styled.div`
position: relative; position: relative;
display: flex; display: flex;
min-height: 40px; min-height: 40px;
background-color: rgb(166, 226, 208); background-color: #b5d2e0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
@ -51,7 +51,7 @@ const CourseName = styled.div`
const ClassGroupStyled = styled.div` const ClassGroupStyled = styled.div`
position: relative; position: relative;
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 5px;
:hover { :hover {
cursor: pointer; cursor: pointer;
background-color: #9ed3ff; background-color: #9ed3ff;
@ -74,16 +74,40 @@ const ExpandIcon = styled(Expand)<ExpandIconProps>`
transform: ${({ selected }) => (selected ? 'scaleY(-1);' : 'scaleY(1);')}; transform: ${({ selected }) => (selected ? 'scaleY(-1);' : 'scaleY(1);')};
`; `;
const TypeClass = styled.div` type StyledGroupTypeProps = {
groupType: GroupType;
};
const StyledGroupType = styled.div<StyledGroupTypeProps>`
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
border-radius: 15px; border-radius: 15px;
background-color: #00506b; background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
border: 2px solid white; border: 2px solid white;
min-width: 45px; min-width: 45px;
top: 5px; top: 5px;
left: 5px; left: 5px;
color: white; color: black;
`;
const FlexboxWrapper = styled.div`
display: flex;
flex-direction: column;
`;
type FlexItemProps = {
justifyContent?: string;
};
const FlexItem = styled.div<FlexItemProps>`
display: flex;
font-size: 14px;
font-weight: 600;
${({ justifyContent }) =>
justifyContent &&
css`
justify-content: ${justifyContent};
`}
`; `;
const useStyles = makeStyles({ const useStyles = makeStyles({
@ -120,18 +144,35 @@ export const CourseCard = ({ course }: CourseCardProps) => {
return ( return (
<CourseCardWrapper> <CourseCardWrapper>
<TitleWrapper> <TitleWrapper onClick={() => setSelected(!isSelected)}>
<BinIcon onClick={() => deleteFromBasket(course.id)}></BinIcon> <BinIcon
onClick={(e) => {
e.stopPropagation();
deleteFromBasket(course.id);
setSelected(false);
}}
></BinIcon>
<CourseName onClick={() => setSelected(!isSelected)}>{course.name}</CourseName> <CourseName onClick={() => setSelected(!isSelected)}>{course.name}</CourseName>
<ExpandIcon onClick={() => setSelected(!isSelected)} selected={isSelected} /> <ExpandIcon onClick={() => setSelected(!isSelected)} selected={isSelected} />
</TitleWrapper> </TitleWrapper>
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit> <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
{groups.map((group, index) => ( {groups.map((group, index) => (
<ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}> <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
<TypeClass>{group.type === 'CLASS' ? 'ĆW' : 'WYK'}</TypeClass> <StyledGroupType groupType={group.type}>{group.type === 'CLASS' ? 'ĆW' : 'WYK'}</StyledGroupType>
<p> <FlexboxWrapper>
{group.time} {group.room} <br></br> {group.lecturer} {group.lecturer.replace('UAM', '').length >= 32 ? (
</p> <FlexItem style={{ justifyContent: 'center', marginLeft: '40px' }}>
{group.lecturer.replace('UAM', '')}
</FlexItem>
) : (
<FlexItem style={{ justifyContent: 'center', marginLeft: '10px' }}>
{group.lecturer.replace('UAM', '')}
</FlexItem>
)}
<FlexItem style={{ justifyContent: 'center', margin: '0 50px' }}>
<span>{/*group.time*/}</span> <span> Sala: {group.room}</span>
</FlexItem>
</FlexboxWrapper>
</ClassGroupStyled> </ClassGroupStyled>
))} ))}
</Collapse> </Collapse>

26
src/components/Rightbar.tsx
View File

@ -4,10 +4,8 @@ import { coursesContext } from '../contexts/CoursesProvider';
import styled from 'styled-components'; import styled from 'styled-components';
import { debounce } from '../utils/index'; import { debounce } from '../utils/index';
const RightbarStyled = styled.div` const RightbarWrapper = styled.div`
padding-top: 10px; padding: 15px;
padding-left: 15px;
padding-right: 15px;
text-align: center; text-align: center;
height: 100%; height: 100%;
width: 350px; width: 350px;
@ -32,15 +30,21 @@ const SaveButton = styled.div`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
user-select: none; user-select: none;
background-color: #244a7c; background-color: #43a047;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
height: 40px; height: 40px;
margin-bottom: 10px; margin-bottom: 10px;
&:hover { &:hover {
color: white; color: #ffffff;
box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
} }
box-shadow: 6px 6px 6px -2px rgba(0, 0, 0, 0.59);
&:active {
background-color: #54c457;
}
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.24);
`; `;
export const Rightbar = () => { export const Rightbar = () => {
@ -50,11 +54,11 @@ export const Rightbar = () => {
const handleSave = debounce(() => saveBasket(), 500); const handleSave = debounce(() => saveBasket(), 500);
return ( return (
<RightbarStyled> <RightbarWrapper>
<SaveButton onClick={handleSave}>ZAPISZ</SaveButton> <SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
{basketCourses.map((course, index) => ( {basketCourses.map((course) => (
<CourseCard course={course} key={index} /> <CourseCard course={course} key={course.id} />
))} ))}
</RightbarStyled> </RightbarWrapper>
); );
}; };

101
src/components/Scheduler.tsx
View File

@ -43,9 +43,9 @@ interface TableCellProps {
} }
const TableCell = styled.div<TableCellProps>` const TableCell = styled.div<TableCellProps>`
border-width: ${({ isHourColumn }) => !isHourColumn && '2px'}; border-width: ${({ isHourColumn }) => !isHourColumn && '1px'};
border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'}; border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'};
border-color: rgb(242, 243, 245); border-color: rgb(235, 235, 235);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: ${({ isHourColumn }) => (isHourColumn ? 'flex-end' : 'center')}; justify-content: ${({ isHourColumn }) => (isHourColumn ? 'flex-end' : 'center')};
@ -56,13 +56,12 @@ const TableCell = styled.div<TableCellProps>`
user-select: none; user-select: none;
border-collapse: collapse; border-collapse: collapse;
:nth-child(2) { :nth-child(2) {
border-left: 2px solid rgb(242, 243, 245); border-left: 1px solid rgb(235, 235, 235);
} }
font-weight: bold; font-weight: bold;
`; `;
export const Scheduler = () => { export const Scheduler = () => {
const cellRef = useRef<HTMLDivElement>(null); const cellRef = useRef<HTMLDivElement>(null);
const [cellWidth, setCellWidth] = useState(0); const [cellWidth, setCellWidth] = useState(0);
const [cellHeight, setCellHeight] = useState(0); const [cellHeight, setCellHeight] = useState(0);
@ -80,52 +79,52 @@ export const Scheduler = () => {
}, []); }, []);
return ( return (
<SchedulerWrapper> <SchedulerWrapper>
<TableHead> <TableHead>
{days.map((day, indexCell) => {days.map((day, indexCell) =>
indexCell === 0 ? ( indexCell === 0 ? (
<TableCell isHourColumn={true} key={indexCell}> <TableCell isHourColumn={true} key={indexCell}>
{day} {day}
</TableCell> </TableCell>
) : ( ) : (
<TableCell style={{ borderStyle: 'none none solid none' }} key={indexCell}> <TableCell style={{ borderStyle: 'none none solid none' }} key={indexCell}>
{day} {day}
</TableCell> </TableCell>
), ),
)} )}
</TableHead> </TableHead>
<TableBody> <TableBody>
{hours.map((hour, indexRow) => ( {hours.map((hour, indexRow) => (
<TableRow key={indexRow}> <TableRow key={indexRow}>
{[hour, '', '', '', '', ''].map((value, indexCell) => {[hour, '', '', '', '', ''].map((value, indexCell) =>
indexCell === 0 ? ( indexCell === 0 ? (
<TableCell isHourColumn={true} cellHeight={cellHeight} key={`${indexRow}${indexCell}`}> <TableCell isHourColumn={true} cellHeight={cellHeight} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : indexRow === 0 && indexCell === 1 ? ( ) : indexRow === 0 && indexCell === 1 ? (
<TableCell ref={cellRef} key={`${indexRow}${indexCell}`}> <TableCell ref={cellRef} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : indexRow === 23 ? ( ) : indexRow === 23 ? (
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}> <TableCell style={{ borderBottom: '1px solid rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : indexRow === 5 ? ( ) : indexRow === 5 ? (
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}> <TableCell style={{ borderBottom: '1px solid rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : indexRow % 2 !== 0 ? ( ) : indexRow % 2 !== 0 ? (
<TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}> <TableCell style={{ borderBottom: '1px solid rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : ( ) : (
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell> <TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
), ),
)} )}
</TableRow> </TableRow>
))} ))}
<SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} /> <SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
</TableBody> </TableBody>
</SchedulerWrapper> </SchedulerWrapper>
); );
}; };

15
src/components/SchedulerRow.tsx
View File

@ -1,6 +1,6 @@
import React, { Fragment, MouseEvent, useState, useEffect, useRef } from 'react'; import React, { Fragment, MouseEvent, useState, useEffect, useRef } from 'react';
import { GroupType, SchedulerEvent } from '../types'; import { GroupType, SchedulerEvent } from '../types';
import styled from 'styled-components/macro'; import styled, { css } from 'styled-components/macro';
import Popover from '@material-ui/core/Popover'; import Popover from '@material-ui/core/Popover';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import { MONDAY_TO_FRIDAY } from '../constants'; import { MONDAY_TO_FRIDAY } from '../constants';
@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) =>
); );
const PopoverSpan = styled.span` const PopoverSpan = styled.span`
font-weight: 'bold'; font-weight: bold;
margin-right: 2px; margin-right: 2px;
`; `;
@ -67,7 +67,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
`; `;
const threeStyles = () => { const threeStyles = () => {
return ` return css`
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 70px;`; max-width: 70px;`;
@ -121,7 +121,6 @@ const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => { export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => {
const classes = useStyles(); const classes = useStyles();
const groupsPerDay = getGroupsPerDay(groups); const groupsPerDay = getGroupsPerDay(groups);
console.log('groups: ', groups);
const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null); const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
const [popoverId, setPopoverId] = useState<string | null>(null); const [popoverId, setPopoverId] = useState<string | null>(null);
//looks weird //looks weird
@ -202,16 +201,16 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
<PopoverSpan>Prowadzący:</PopoverSpan> {groups[index].lecturer} <PopoverSpan>Prowadzący:</PopoverSpan> {groups[index].lecturer}
</p> </p>
<p style={{ margin: '2px 0 2px 0' }}> <p style={{ margin: '2px 0 2px 0' }}>
<span style={{ fontWeight: 'bold', marginRight: '2px' }}>Sala zajęć</span>: {groups[index].room} <PopoverSpan>Sala zajęć</PopoverSpan>: {groups[index].room}
</p> </p>
<p style={{ margin: '2px 0 2px 0' }}> <p style={{ margin: '2px 0 2px 0' }}>
<span style={{ fontWeight: 'bold', marginRight: '2px' }}>Kod przedmiotu: </span>ACB129 <PopoverSpan>Kod przedmiotu: </PopoverSpan>ACB129
</p> </p>
<p style={{ margin: '2px 0 2px 0' }}> <p style={{ margin: '2px 0 2px 0' }}>
<span style={{ fontWeight: 'bold', marginRight: '2px' }}>Kod grupy: </span>FVJ753 <PopoverSpan>Kod grupy: </PopoverSpan>FVJ753
</p> </p>
<p style={{ margin: '2px 0 2px 0' }}> <p style={{ margin: '2px 0 2px 0' }}>
<span style={{ fontWeight: 'bold', marginRight: '2px' }}>Punkty ECTS:</span> 2 <PopoverSpan>Punkty ECTS:</PopoverSpan> 2
</p> </p>
</div> </div>
</Popover> </Popover>

2
src/contexts/CoursesProvider.tsx
View File

@ -134,11 +134,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
const fetchCourses = async () => { const fetchCourses = async () => {
try { try {
console.log('env is: ', process.env.REACT_APP_API_URL);
const { data: courses } = await axiosInstance.get<Array<Course>>( const { data: courses } = await axiosInstance.get<Array<Course>>(
`${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`, `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
); );
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1)); const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
console.log('courses: ', courses);
setCourses(sortedCourses); setCourses(sortedCourses);
} catch (e) { } catch (e) {
console.log(e); console.log(e);