From 43a63959679afe43269160ad48f8b4cc3bd15e2d Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Sat, 5 Sep 2020 02:10:48 +0100
Subject: [PATCH] Synchronise grid with number of tracks
---
src/components/pages/ModuleList/index.tsx | 11 +--
.../Timeline/components/WeekHeading/index.tsx | 1 +
src/components/pages/Timeline/index.tsx | 85 ++++++++++++++-----
.../pages/Timeline/style.module.scss | 4 +-
4 files changed, 69 insertions(+), 32 deletions(-)
diff --git a/src/components/pages/ModuleList/index.tsx b/src/components/pages/ModuleList/index.tsx
index 097a8ee51..b5d4bd285 100644
--- a/src/components/pages/ModuleList/index.tsx
+++ b/src/components/pages/ModuleList/index.tsx
@@ -3,17 +3,8 @@ import styles from "./style.module.scss";
import Row from "react-bootstrap/Row";
import classNames from "classnames";
-import logicIllustration from "assets/images/logic-illustration.svg";
-import discreteIllustration from "assets/images/discrete-illustration.svg";
-import systemsIllustration from "assets/images/systems-illustration.svg";
-import methodsIllustration from "assets/images/methods-illustration.svg";
-import graphIllustration from "assets/images/graph-illustration.svg";
-import javaIllustration from "assets/images/java-illustration.png";
-import reasoningIllustration from "assets/images/reasoning-illustration.png";
-import architectureIllustration from "assets/images/architecture-illustration.png";
-import databaseIllustration from "assets/images/database-illustration.png";
-import ModuleCard, { Term, ProgressStatus } from "components/atoms/ModuleCard";
+import ModuleCard from "components/atoms/ModuleCard";
import Dandruff from "components/molecules/Dandruff";
import { modulesList } from "./list";
diff --git a/src/components/pages/Timeline/components/WeekHeading/index.tsx b/src/components/pages/Timeline/components/WeekHeading/index.tsx
index bb806839d..47d18c64d 100644
--- a/src/components/pages/Timeline/components/WeekHeading/index.tsx
+++ b/src/components/pages/Timeline/components/WeekHeading/index.tsx
@@ -46,6 +46,7 @@ const WeekHeading: React.FC<WeekHeadingProps> = ({
activeDay.getTime() === dateRangeStart.getTime() + i * 86400000;
return (
<div
+ key={day}
className={isActive ? styles.activeDay : styles.dayIndicator}
>
{day}
diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx
index 7bd541342..531d998d0 100644
--- a/src/components/pages/Timeline/index.tsx
+++ b/src/components/pages/Timeline/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
import styles from "./style.module.scss";
import TermSwitcher from "./components/TermSwitcher";
@@ -11,25 +11,78 @@ interface TimelineProps {
revertSideBar: () => void;
}
-class Timeline extends React.Component<TimelineProps, {}> {
+interface Event {
+ title: string;
+}
+
+type ModuleTracks = {
+ [index: string]: Event[][];
+};
+
+interface TimelineState {
+ moduleTracks: ModuleTracks;
+}
+class Timeline extends React.Component<TimelineProps, TimelineState> {
+ constructor(props: TimelineProps) {
+ super(props);
+ this.state = { moduleTracks: {} };
+ }
+
componentDidMount() {
this.props.initSideBar();
+ let moduleTracks: ModuleTracks = {};
+ modulesList.forEach(({ code }) => {
+ moduleTracks[code] = [[], []];
+ });
+ this.setState({ moduleTracks: moduleTracks });
}
componentWillUnmount() {
this.props.revertSideBar();
- }
-
- addDays(date: Date, days: number) {
- var result = new Date(date);
- result.setDate(result.getDate() + days);
- return result;
- }
+ }
+
+ addDays(date: Date, days: number) {
+ let result = new Date(date);
+ result.setDate(result.getDate() + days);
+ return result;
+ }
render() {
const termStart = new Date("2020-09-28");
const activeDay = new Date("2020-10-07");
const numWeeks = 12;
+ const trackHeight = 4.25;
+
+ let timelineBackgrounds: ReactElement[] = [];
+ let moduleHeadings: ReactElement[] = [];
+
+ for (let i = 0; i < modulesList.length; i++) {
+ const code = modulesList[i].code;
+ const tracks = this.state.moduleTracks[code];
+ if (tracks) {
+ const height = tracks.length * trackHeight;
+ for (let j = 0; j < numWeeks; j++) {
+ timelineBackgrounds.push(
+ <div
+ key={code + j}
+ style={{ height: `${height}rem` }}
+ className={styles.timelineBackground}
+ >
+
+ </div>
+ );
+ }
+ moduleHeadings.push(
+ <div
+ key={code}
+ className={styles.moduleHeading}
+ style={{ height: `${height}rem` }}
+ >
+ <ModuleHeading moduleCode={code} title={modulesList[i].title} />
+ </div>
+ );
+ }
+ }
return (
<div className={styles.timelineContainer}>
<MyBreadcrumbs />
@@ -39,7 +92,7 @@ class Timeline extends React.Component<TimelineProps, {}> {
</div>
<div className={styles.timelineWeekRow}>
{[...Array(numWeeks)].map((_, i) => (
- <div className={styles.weekHeading}>
+ <div className={styles.weekHeading} key={i}>
<WeekHeading
weekNumber={i + 1}
dateRangeStart={this.addDays(termStart, i * 7)}
@@ -49,17 +102,9 @@ class Timeline extends React.Component<TimelineProps, {}> {
</div>
))}
</div>
- <div className={styles.timelineModuleColumn}>
- {modulesList.map((module) => (
- <div className={styles.moduleHeading}>
- <ModuleHeading moduleCode={module.code} title={module.title} />
- </div>
- ))}
- </div>
+ <div className={styles.timelineModuleColumn}>{moduleHeadings}</div>
<div className={styles.timelineWeekBackground}>
- {[...Array(numWeeks)].map(() => {
- return <div className={styles.timelineBackground}> </div>;
- })}
+ {timelineBackgrounds}
</div>
</div>
</div>
diff --git a/src/components/pages/Timeline/style.module.scss b/src/components/pages/Timeline/style.module.scss
index 9034dd5e4..a89b8f934 100644
--- a/src/components/pages/Timeline/style.module.scss
+++ b/src/components/pages/Timeline/style.module.scss
@@ -71,7 +71,7 @@
grid-auto-flow: row;
grid-template-columns: repeat(12, 15rem);
grid-gap: 0.625rem;
- padding-right: 0.625rem;
+ padding-right: 0.625rem;
top: 0;
position: sticky;
}
@@ -104,5 +104,5 @@
.timelineBackground {
background-color: var(--primary-button);
- border-radius: 0.5rem;
+ border-radius: 0.5rem;
}
--
GitLab