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

table and events finally working :')

Browse Source
This commit is contained in:
Maciek Głowacki 2020-11-19 21:57:34 +01:00
parent 49341b025b
commit 96ed785c29
3 changed files with 71 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/Scheduler.tsx
View File

@ -8,7 +8,7 @@ const SchedulerWrapper = styled.div`
border-collapse: collapse; border-collapse: collapse;
flex: 1; flex: 1;
background-color: white; background-color: white;
padding: 5px 15px 5px 5px; padding: 10px 40px 25px 10px;
border-radius: 5px; border-radius: 5px;
margin-right: 20px; margin-right: 20px;
flex-direction: column; flex-direction: column;
@ -18,96 +18,84 @@ const SchedulerWrapper = styled.div`
`; `;
const TableBody = styled.div` const TableBody = styled.div`
position: relative;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% * 25 / 26);
`; `;
const TableRow = styled.div` const TableRow = styled.div`
display: flex; display: flex;
height: 100%;
`; `;
const TableHead = styled.div` const TableHead = styled.div`
display: flex; display: flex;
width: 100%; width: 100%;
height: calc(100% / 26);
`; `;
interface TableCellProps { interface TableCellProps {
height: number; cellHeight?: number;
isHourColumn?: boolean; isHourColumn?: boolean;
} }
const TableCell = styled.div<TableCellProps>` const TableCell = styled.div<TableCellProps>`
height: ${({ height }) => height}px;
border-width: ${({ isHourColumn }) => !isHourColumn && '2px'}; border-width: ${({ isHourColumn }) => !isHourColumn && '2px'};
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(242, 243, 245);
margin-top: ${({ isHourColumn, height }) => isHourColumn ? -(height / 2) : 0}px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: ${({ isHourColumn }) => isHourColumn ? 'flex-end' : 'center'}; justify-content: ${({ isHourColumn }) => (isHourColumn ? 'flex-end' : 'center')};
flex: ${({ isHourColumn }) => isHourColumn ? '1' : '5'}; flex: ${({ isHourColumn }) => (isHourColumn ? '1' : '5')};
margin-right: ${({ isHourColumn }) => isHourColumn ? '10px' : '0px'}; margin-right: ${({ isHourColumn }) => (isHourColumn ? '10px' : '0px')};
font-size: 0.75vw; margin-top: ${({ isHourColumn, cellHeight }) => (isHourColumn ? `-${cellHeight}px` : '0px')};
font-size: 0.75vw;
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: 2px solid rgb(242, 243, 245);
} }
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 [cellTop, setCellTop] = useState(0); const [cellTop, setCellTop] = useState(0);
const [cellHeight, setCellHeight] = useState(0);
const wrapperRef = useRef<HTMLDivElement>(null); console.log('cell height: ', cellHeight);
const [wrapperHeight, setWrapperHeight] = useState(0);
const [, updateState] = useState<any>();
const forceUpdate = useCallback(() => updateState({}), []);
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
if (cellRef.current) { if (cellRef.current) {
setCellWidth(cellRef.current.getBoundingClientRect().width); setCellWidth(cellRef.current.getBoundingClientRect().width);
setCellTop(cellRef.current.getBoundingClientRect().top); setCellTop(cellRef.current.getBoundingClientRect().top);
cellRef.current.style.backgroundColor = "blue"; setCellHeight(cellRef.current.getBoundingClientRect().height);
console.log("XDDD") cellRef.current.style.backgroundColor = 'blue';
} }
}; };
handleResize(); handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []); }, []);
useEffect(() => {
const handleWrapperResize = () => {
if (wrapperRef.current) {
setWrapperHeight(wrapperRef.current.getBoundingClientRect().height);
}
}
window.addEventListener('resize', handleWrapperResize);
return () => window.removeEventListener('resize', handleWrapperResize);
}, [])
return ( return (
<> <>
<SchedulerWrapper ref={wrapperRef}> <SchedulerWrapper>
<TableHead> <TableHead>
{days.map((day, indexCell) => {days.map((day, indexCell) =>
indexCell === 0 ? ( indexCell === 0 ? (
<TableCell height={wrapperHeight / 26} isHourColumn={true} key={indexCell} > <TableCell isHourColumn={true} key={indexCell}>
{day} {day}
</TableCell> </TableCell>
) : ( ) : (
<TableCell height={wrapperHeight / 26} 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>
@ -115,32 +103,31 @@ export const Scheduler = () => {
<TableRow key={indexRow}> <TableRow key={indexRow}>
{[hour, '', '', '', '', ''].map((value, indexCell) => {[hour, '', '', '', '', ''].map((value, indexCell) =>
indexCell === 0 ? ( indexCell === 0 ? (
<TableCell height={wrapperHeight / 26} isHourColumn={true} key={`${indexRow}${indexCell}`}> <TableCell isHourColumn={true} cellHeight={cellHeight} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>)
: (indexRow === 0 && indexCell === 1) ? (<TableCell height={wrapperHeight / 26} ref={cellRef} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : indexRow === 23 ? ( ) : indexRow === 0 && indexCell === 1 ? (
<TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}> <TableCell ref={cellRef} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : indexCell === 5 ? ( ) : indexRow === 23 ? (
<TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}> <TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value} {value}
</TableCell> </TableCell>
) : indexRow % 2 !== 0 ? ( ) : indexCell === 5 ? (
<TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}> <TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
{value} ) : indexRow % 2 !== 0 ? (
</TableCell> <TableCell style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
) : <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}> {value}
{value} </TableCell>
</TableCell> ) : (
<TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
),
)} )}
</TableRow> </TableRow>
))} ))}
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={cellHeight} />
</TableBody> </TableBody>
<SchedulerEvents cellTop={cellTop} cellWidth={cellWidth} cellHeight={wrapperHeight / 26} />
</SchedulerWrapper> </SchedulerWrapper>
</> </>
); );

27
src/components/SchedulerEvents.tsx
View File

@ -14,10 +14,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`); console.log(`values: cellTop: ${cellTop}, cellWidth: ${cellWidth}, cellHeight: ${cellHeight}`);
const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]); const [choosenGroupsMappedToEvents, setChoosenGroupsMappedToEvents] = useState<any>([]);
interface GroupTimeToEventRowMapping { const groupTimeToEventRowMapping: { [time: string]: number } = {
[time: string]: number;
}
const groupTimeToEventRowMapping: GroupTimeToEventRowMapping = {
'8.15': 0, '8.15': 0,
'10.00': 1, '10.00': 1,
'11.45': 2, '11.45': 2,
@ -56,18 +53,18 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
indexRow={index} indexRow={index}
cellTop={ cellTop={
index === 0 index === 0
? cellTop + cellHeight/2 ? cellHeight / 2
: index === 1 : index === 1
? cellTop + (cellHeight + cellHeight * 2 * index) ? cellHeight * 4
: index === 2 : index === 2
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2) ? cellHeight * 7.5
: index === 3 : index === 3
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight / 2) ? cellHeight * 11.5
: index === 4 : index === 4
? cellTop + (cellHeight + cellHeight * 2 * index - cellHeight) ? cellHeight * 15
: index === 5 : index === 5
? cellTop + (cellHeight + cellHeight * 2 * index - (cellHeight * 3) / 2) ? cellHeight * 18.5
: 0 : 0
} }
cellWidth={cellWidth} cellWidth={cellWidth}
cellHeight={cellHeight} cellHeight={cellHeight}

26
src/components/SchedulerRow.tsx
View File

@ -18,38 +18,38 @@ const useStyles = makeStyles((theme: Theme) =>
}), }),
); );
interface SchedulerEventProps { interface ClassesWrapperProps {
eventIndex: number; eventIndex: number;
cellTop: number; cellTop: number;
cellWidth: number; cellWidth: number;
cellHeight: number; cellHeight: number;
} }
const SchedulerEvent = styled.div<SchedulerEventProps>` const ClassesWrapper = styled.div<ClassesWrapperProps>`
position: absolute; position: absolute;
display: flex; display: flex;
top: ${({ cellTop }) => cellTop}px; top: ${({ cellTop }) => cellTop}px;
left: ${({ cellWidth, eventIndex }) => cellWidth + 5 + cellWidth * eventIndex}px; left: ${({ cellWidth, eventIndex }) => (cellWidth * 1) / 5 + 15 + cellWidth * eventIndex}px;
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; width: ${({ cellWidth }) => cellWidth - 10}px;
height: ${({ cellHeight }) => cellHeight * 3}px; height: ${({ cellHeight }) => cellHeight * 3}px;
z-index: 2; z-index: 2;
padding-left: 10px;
`; `;
interface ClassesProps { interface ClassesProps {
cellWidth: number;
cellHeight: number; cellHeight: number;
groupType: GroupType; groupType: GroupType;
} }
const Classes = styled.div<ClassesProps>` const Classes = styled.div<ClassesProps>`
display: flex; display: flex;
flex: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 2; z-index: 2;
border-radius: 10px; border-radius: 10px;
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; height: ${({ cellHeight }) => cellHeight * 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 2}px; margin-right: 5px;
padding-left: 10px;
text-align: left; text-align: left;
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')}; background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59); box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
@ -84,7 +84,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
return ( return (
<div> <div>
{[...Array(5)].map((_, eventIndex) => ( {[...Array(5)].map((_, eventIndex) => (
<SchedulerEvent <ClassesWrapper
eventIndex={eventIndex} eventIndex={eventIndex}
cellTop={cellTop} cellTop={cellTop}
cellWidth={cellWidth} cellWidth={cellWidth}
@ -97,8 +97,10 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
group.day === eventIndex && ( group.day === eventIndex && (
<> <>
<Classes <Classes
onClick={() => {
console.log('group: ', group);
}}
groupType={group.type} groupType={group.type}
cellWidth={cellWidth}
cellHeight={cellHeight} cellHeight={cellHeight}
id={`eventRow${indexRow}eventCol${eventIndex}${index}`} id={`eventRow${indexRow}eventCol${eventIndex}${index}`}
key={index} key={index}
@ -109,7 +111,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
> >
<div> <div>
<p style={{ fontWeight: 700 }}>{groups[index].name}</p> <p style={{ fontWeight: 700 }}>{groups[index].name}</p>
<p >{groups[index].room}</p> <p>{groups[index].room}</p>
</div> </div>
</Classes> </Classes>
<Popover <Popover
@ -140,7 +142,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
</> </>
), ),
)} )}
</SchedulerEvent> </ClassesWrapper>
))} ))}
</div> </div>
); );