Add room number to calendar entries

Author: pvandyken

components/schedule/day.tsx

@@ -13,6 +13,7 @@ interface DayProps {
         duration: string;
         color?: string;
         link?: string;
+        room?: string | string[];
         widthFactor?: number;
         position?: number;
     }[]
@@ -23,7 +24,7 @@ export const Day = (props: DayProps) => {
     const dateString = formatDate(props.date);
     const events = props.events.map((event, i) => {
         return <Event
-            key={i} 
+            key={i}
             name={event.name}
             time={event.time}
             dayStartTime={props.startTime}
@@ -34,6 +35,7 @@ export const Day = (props: DayProps) => {
             padding={10}
             color={event.color}
             link={event.link}
+            room={event.room}
         />
     });
 

components/schedule/event.tsx

@@ -9,6 +9,7 @@ interface EventProps {
     padding: number;
     link?: string;
     color?: string;
+    room?: string | string[];
 }
 
 const colorLookup = {
@@ -34,6 +35,8 @@ export const Event = (props: EventProps) => {
     const leftPadding = left ? 2 : 0;
     const rightPadding = right ? 2 : 0;
 
+    const room_str = props.room ? getRoomStr(props.room) : null;
+
     const el = (
         <div
             className="event"
@@ -47,6 +50,10 @@ export const Event = (props: EventProps) => {
         >
             <p className="event-name">{props.name}</p>
             <p className="event-time">{to12Hr(props.time)}</p>
+            {
+                room_str ? <p className="event-room">{room_str}</p>: null
+            }
+
             {
                 props.link ? <p className="event-more-info">more info</p> : null
             }
@@ -72,4 +79,27 @@ const to12Hr = (time: string) => {
     const hrMin = time.split(":");
     const hr = (Number(hrMin[0]) - 1) % 12 + 1;
     return `${hr}:${hrMin[1]}`;
+}
+
+const getRoomStr = (room: string | string[]) => {
+    if (room instanceof Array) {
+        return join_br(room);
+    }
+    return <>{room}</>;
+}
+
+const join_br = (items: string[]) => {
+    const firstline = items[0];
+    const rest = items.slice(1);
+    return (
+        <>
+            {firstline}
+            {rest.map(line => (
+                <>
+                    <br />
+                    {line}
+                </>
+            ))}
+        </>
+    )
 }

config.yaml

@@ -56,108 +56,154 @@ schedule:
     - name: Breakfast
       time: "8:00"
       duration: "1:00"
+      room: WIRB 4190
     - name: Welcome & Project Pitches
       time: "9:00"
       duration: "1:30"
+      room:
+        - WIRB 1170
+        - Zoom Room 1
     - name: Hacking
       time: "10:30"
       duration: "1:30"
       color: red
+      room: WIRB 1130
     - name: Lunch
       time: "12:00"
       duration: "1:30"
+      room: WIRB 4190
     - name: MRI Data in Python
       time: "13:30"
       duration: "1:00"
       color: "#1f331e"
       link: "#python"
       priority: 1
+      room:
+        - WIRB 1110
+        - Zoom Room 1
     - name: Intro to Datalad
       time: "14:30"
       duration: "1:30"
       color: "#1f331e"
       link: "#datalad"
       priority: 1
+      room:
+        - WIRB 1160
+        - Zoom Room 2
     - name: Hacking
       time: "13:30"
       duration: "2:30"
       color: red
+      room: WIRB 4190
   - day: 2
     month: 12
     year: 2021
     events:
     - name: Breakfast
       time: "8:00"
       duration: "1:00"
+      room: WIRB 4190
     - name: fMRI/fMRIPrep
       time: "9:00"
       duration: "1:30"
       color: "#1f331e"
       link: "#frmi"
       priority: 1
+      room:
+        - WIRB 1170
+        - Zoom Room 1
     - name: Introduction to Meta-analyses
       time: "10:30"
       duration: "1:30"
       color: "#1f331e"
       link: "#meta-analysis"
       priority: 1
+      room:
+        - WIRB 4190
+        - Zoom Room 2
     - name: Lunch
       time: "12:00"
       duration: "1:30"
+      room: WIRB 4190
     - name: Intro to fNIRS
       time: "13:30"
       duration: "2:30"
       color: "#1f331e"
       link: "#fnirs"
       priority: 1
+      room:
+        - WIRB 1110
+        - Zoom Room 1
     - name: Hacking
       time: "13:30"
       duration: "2:30"
       color: red
+      room:
+        - NSC 1 (9:00-12:00)
+        - WIRB 1160 (10:30-12:00)
     - name: Hacking
       time: "9:00"
       duration: "3:00"
       color: red
+      room:
+        - WIRB 4190 (1:30-2:30)
+        - VAC 100 (1:30-4:00)
     - name: "Diversity in Academia"
       time: "12:30"
-      duration: "1:00"
+      duration: "0:45"
       color: blue
       link: "https://github.com/BrainhackWestern/BrainhackWestern.github.io/wiki/Lunch-and-Learn#winrepo"
 
-
   - day: 3
     month: 12
     year: 2021
     events:
     - name: Breakfast
       time: "8:00"
       duration: "1:00"
+      room: WIRB 4190
     - name: Intro to Machine Learning
       time: "9:00"
       duration: "1:30"
       color: "#1f331e"
       link: "#machine-learning"
       priority: 1
+      room:
+        - WIRB 1130
+        - Zoom Room 1
     - name: Intro to Deep Learning
       time: "10:30"
       duration: "1:30"
       color: "#1f331e"
       link: "#deep-learning"
       priority: 1
+      room:
+        - WIRB 1130
+        - Zoom Room 2
     - name: Lunch
       time: "12:00"
       duration: "1:30"
+      room: WIRB 4190
     - name: Hacking
       time: "9:00"
       duration: "3:00"
       color: red
+      room:
+        - WIRB 4190 (9:30-12:00)
+        - VAC 100 (9:00-12:00)
     - name: Hacking
       time: "13:30"
       duration: "1:00"
       color: red
+      room:
+        - WIRB 4190 (1:30-2:00)
+        - VAC 100 (1:30-2:30)
     - name: Project presentations & Wrap-up
       time: "14:30"
       duration: "1:30"
+      room:
+        - VAC 100
+        - Zoom Room 1
 tutorials:
   - day: 1
     month: 12

interfaces/schedule.ts

@@ -44,6 +44,11 @@ export interface ScheduleDay extends BasicDate {
          */
         priority?: number;
 
+        /**
+         * Optional string or list of strings listing the rooms.
+         */
+        room?: string | string[];
+
         /**
          * For internal use only. Do not manually set. This will be used in config
          * generated by the calendar creator

pages/index.tsx

@@ -147,16 +147,15 @@ const Home = ({ config, calendar }: InferGetStaticPropsType<typeof getStaticProp
       <Schedule
         config={config.schedule}
         calendar={calendar}
-        lineHeight={100}
+        lineHeight={120}
         show={config.displaySections.schedule ?? true}
       />
 
-      <TutorialList 
+      <TutorialList
         config={config.tutorials}
         show={config.displaySections.tutorial ?? true }
       />
-      
-      
+
       <div id="location" className="content-space container-lg">
         <div className="row">
           <div className="col-lg-4 d-flex flex-column justify-content-start align-items-start">

styles/components/_schedule.scss

@@ -30,7 +30,7 @@
 
     .day-col {
       max-width: 80%;
-      width: 300px;
+      width: 320px;
       margin: 0 0.5em;
     }
 
@@ -55,12 +55,19 @@
     }
 
     .event-name {
-      font-size: var.$body_norm;
+      font-size: var.$body_small;
+      font-weight: var.$weight_bold;
       margin-bottom: 0;
     }
 
     .event-time {
       font-size: var.$body_small;
+      margin-bottom: 0;
+    }
+
+    .event-room {
+      font-size: var.$body_small;
+      height: 1.5em;
     }
 
     .event-more-info {