From 411675c34450c48cfd80dc17b7e81b107916b3ce Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Sat, 5 Sep 2020 19:43:53 +0100
Subject: [PATCH] Separate component for Event cards
---
.../components/DayIndicatorGrid/index.tsx | 22 +++++++---------
.../Timeline/components/EventGrid/index.tsx | 26 ++++++++++++-------
.../components/EventGrid/style.module.scss | 16 +-----------
.../components/TimelineEventCard/index.tsx | 26 +++++++++++++++++++
.../TimelineEventCard/style.module.scss | 13 ++++++++++
src/components/pages/Timeline/eventsData.ts | 19 ++++++++++++++
src/components/pages/Timeline/index.tsx | 25 +++++++++++++-----
7 files changed, 102 insertions(+), 45 deletions(-)
create mode 100644 src/components/pages/Timeline/components/TimelineEventCard/index.tsx
create mode 100644 src/components/pages/Timeline/components/TimelineEventCard/style.module.scss
create mode 100644 src/components/pages/Timeline/eventsData.ts
diff --git a/src/components/pages/Timeline/components/DayIndicatorGrid/index.tsx b/src/components/pages/Timeline/components/DayIndicatorGrid/index.tsx
index e5ca7c8d7..7ba38e49a 100644
--- a/src/components/pages/Timeline/components/DayIndicatorGrid/index.tsx
+++ b/src/components/pages/Timeline/components/DayIndicatorGrid/index.tsx
@@ -1,21 +1,17 @@
import React from "react";
import styles from "./style.module.scss";
-export interface ModuleHeadingprops {
- numWeeks: number;
- activeDay: Date;
- termStart: Date;
+
+export interface DayIndicatorGridProps {
+ numWeeks: number;
+ activeDay: Date;
+ activeColumn: number;
}
-const DayIndicatorGrid: React.FC<ModuleHeadingprops> = ({
- numWeeks,
- activeDay,
- termStart,
+const DayIndicatorGrid: React.FC<DayIndicatorGridProps> = ({
+ numWeeks,
+ activeDay,
+ activeColumn,
}) => {
- const activeColumn =
- Math.ceil(
- ((activeDay.getTime() - termStart.getTime()) / 86400000 / 7) * 6
- ) + 1;
-
return (
<div
className={styles.dayIndicatorGrid}
diff --git a/src/components/pages/Timeline/components/EventGrid/index.tsx b/src/components/pages/Timeline/components/EventGrid/index.tsx
index 74532e8b3..8974451ad 100644
--- a/src/components/pages/Timeline/components/EventGrid/index.tsx
+++ b/src/components/pages/Timeline/components/EventGrid/index.tsx
@@ -1,11 +1,18 @@
import React from "react";
import styles from "./style.module.scss";
+import { TimelineEvent } from "../..";
+import TimelineEventCard from "../TimelineEventCard";
export interface EventGridProps {
numWeeks: number;
trackHeight: number;
+ events: TimelineEvent[];
}
-const EventGrid: React.FC<EventGridProps> = ({ numWeeks, trackHeight }) => {
+const EventGrid: React.FC<EventGridProps> = ({
+ numWeeks,
+ trackHeight,
+ events,
+}) => {
return (
<div
className={styles.timelineCardGrid}
@@ -14,15 +21,14 @@ const EventGrid: React.FC<EventGridProps> = ({ numWeeks, trackHeight }) => {
gridTemplateRows: `${trackHeight}rem ${trackHeight}rem 0.3125rem repeat(${7}, ${trackHeight}rem ${trackHeight}rem 0.625rem) ${trackHeight}rem ${trackHeight}rem 0.3125rem`,
}}
>
- <div className={styles.timelineEvent} style={{ gridColumn: `1 / 9` }}>
- <span className={styles.eventTitle}>Title of the first event</span>
- </div>
- <div
- className={styles.timelineEvent}
- style={{ gridColumn: `3 / 24`, gridRow: `2` }}
- >
- <span className={styles.eventTitle}>Title of the second event</span>
- </div>
+ {events.map(({ title }, i) => (
+ <TimelineEventCard
+ title={title}
+ startColumn={i + 1}
+ endColumn={i + 8}
+ rowNumber={2 * i}
+ />
+ ))}
</div>
);
};
diff --git a/src/components/pages/Timeline/components/EventGrid/style.module.scss b/src/components/pages/Timeline/components/EventGrid/style.module.scss
index d384862be..ecd72b27b 100644
--- a/src/components/pages/Timeline/components/EventGrid/style.module.scss
+++ b/src/components/pages/Timeline/components/EventGrid/style.module.scss
@@ -3,18 +3,4 @@
display: grid;
grid-area: background;
z-index: 3;
-}
-
-.timelineEvent {
- background: red;
- margin: 0.5rem;
- border-radius: 0.5rem;
- padding: 0.5rem;
- display: flex;
- align-items: center;
-}
-
-.eventTitle {
- color: var(--primary-text-color);
- font-size: 1rem;
-}
+}
\ No newline at end of file
diff --git a/src/components/pages/Timeline/components/TimelineEventCard/index.tsx b/src/components/pages/Timeline/components/TimelineEventCard/index.tsx
new file mode 100644
index 000000000..5c6b07de1
--- /dev/null
+++ b/src/components/pages/Timeline/components/TimelineEventCard/index.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import styles from "./style.module.scss";
+export interface TimelineEventProps {
+ title: string;
+ startColumn: number;
+ endColumn: number;
+ rowNumber: number;
+}
+
+const TimelineEventCard: React.FC<TimelineEventProps> = ({
+ title,
+ startColumn,
+ endColumn,
+ rowNumber,
+}) => {
+ return (
+ <div
+ className={styles.timelineEvent}
+ style={{ gridColumn: `${startColumn} / ${endColumn}`, gridRow: `${rowNumber}` }}
+ >
+ <span className={styles.eventTitle}>{title}</span>
+ </div>
+ );
+};
+
+export default TimelineEventCard;
diff --git a/src/components/pages/Timeline/components/TimelineEventCard/style.module.scss b/src/components/pages/Timeline/components/TimelineEventCard/style.module.scss
new file mode 100644
index 000000000..a8c5c2092
--- /dev/null
+++ b/src/components/pages/Timeline/components/TimelineEventCard/style.module.scss
@@ -0,0 +1,13 @@
+.timelineEvent {
+ background: red;
+ margin: 0.5rem;
+ border-radius: 0.5rem;
+ padding: 0.5rem;
+ display: flex;
+ align-items: center;
+}
+
+.eventTitle {
+ color: var(--primary-text-color);
+ font-size: 1rem;
+}
diff --git a/src/components/pages/Timeline/eventsData.ts b/src/components/pages/Timeline/eventsData.ts
new file mode 100644
index 000000000..895a31eaa
--- /dev/null
+++ b/src/components/pages/Timeline/eventsData.ts
@@ -0,0 +1,19 @@
+import { TimelineEvent } from ".";
+
+
+export const eventsData : TimelineEvent[] = [
+ {
+ title: "Logic Exercise",
+ id: 0,
+ startDate: new Date("2020-10-01"),
+ endDate: new Date("2020-10-08"),
+ moduleCode: "CO140"
+ },
+ {
+ title: "Circuit Analysis",
+ id: 0,
+ startDate: new Date("2020-10-04"),
+ endDate: new Date("2020-10-09"),
+ moduleCode: "CO112"
+ }
+]
\ No newline at end of file
diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx
index e3e625872..ac29254e2 100644
--- a/src/components/pages/Timeline/index.tsx
+++ b/src/components/pages/Timeline/index.tsx
@@ -7,18 +7,23 @@ import WeekRow from "./components/WeekRow";
import ModuleRows from "./components/ModuleRows";
import DayIndicatorGrid from "./components/DayIndicatorGrid";
import EventGrid from "./components/EventGrid";
+import { eventsData } from "./eventsData";
interface TimelineProps {
initSideBar: () => void;
revertSideBar: () => void;
}
-interface Event {
- title: string;
+export interface TimelineEvent {
+ title: string;
+ id: number;
+ moduleCode: string;
+ startDate: Date;
+ endDate: Date;
}
export type ModuleTracks = {
- [index: string]: Event[][];
+ [index: string]: TimelineEvent[][];
};
interface TimelineState {
@@ -44,6 +49,12 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
this.props.revertSideBar();
}
+ dateToColumn(day: Date, termStart: Date) {
+ return (
+ Math.ceil(((day.getTime() - termStart.getTime()) / 86400000 / 7) * 6) + 1
+ );
+ }
+
render() {
const termStart = new Date("2020-09-28");
const activeDay = new Date("2020-10-12");
@@ -68,12 +79,12 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
/>
<DayIndicatorGrid
- numWeeks={numWeeks}
- activeDay={activeDay}
- termStart={termStart}
+ numWeeks={numWeeks}
+ activeDay={activeDay}
+ activeColumn={this.dateToColumn(activeDay, termStart)}
/>
- <EventGrid numWeeks={numWeeks} trackHeight={trackHeight} />
+ <EventGrid numWeeks={numWeeks} trackHeight={trackHeight} events={eventsData}/>
</div>
</div>
);
--
GitLab