Added dynamic schedule (#1139)

* Schedule is now pulled from HackathonManager

* Schedule is now pulled from HackathonManager

* Switched schedule JS to use correct data format

* Scaffolded API fetch code

* Added date/time background fade

* Added time progress indicator

* Event marker now extends outside event div

* Second-day events can be shown automatically

* CSS code style fixes

* Event border works for any size events

* Fix second day click

* More CSS code style fixes

* Removed fake API data

* fix url for testing

* fix now, change url, change section description

Co-authored-by: Peter Kos <[email protected]>

Author: Colby Gallup

index.html

@@ -163,7 +163,6 @@ <h1>What is a Hackathon?</h1>
     </section>
     <section id="schedule" class="section-pad">
         <h1>Schedule</h1>
-        <p>More events coming soon!</p>
         <p>All times are in EST.</p>
         <div id="schedule-block">
             <div id="schedule-tapes">
@@ -181,42 +180,8 @@ <h2 class="number">21</h2>
                         <h6 class="name">SUNDAY</h6>
                     </div>
                 </div>
-                <div class="events day-first-events">
-                    <div class="event">
-                        <p class="time">10-10:30am</p>
-                        <p class="title">Opening Ceremony</p>
-                    </div>
-                    <div class="event">
-                        <p class="time">12pm</p>
-                        <p class="title">Lunch (on your own!)</p>
-                    </div>
-                    <div class="event">
-                        <p class="time">2pm-3pm</p>
-                        <p class="title">Mystery Workshop</p>
-                    </div>
-                    <div class="event">
-                        <p class="time">5pm-6pm</p>
-                        <p class="title">Mystery Event</p>
-                    </div>
-                </div>
-                <div class="events day-second-events">
-                    <div class="event">
-                        <p class="time">10am</p>
-                        <p class="title">Devpost submission</p>
-                    </div>
-                    <div class="event">
-                        <p class="time">1pm-2pm</p>
-                        <p class="title">Mystery Workshop 2</p>
-                    </div>
-                    <div class="event">
-                        <p class="time">12:30pm-2pm</p>
-                        <p class="title">Coding stops / Judging begins</p>
-                    </div>
-                    <div class="event">
-                        <p class="time">2pm-4pm</p>
-                        <p class="title">Closing Ceremony</p>
-                    </div>
-                </div>
+                <div class="events day-first-events"></div>
+                <div class="events day-second-events"></div>
             </div>
         </div>
     </section>

index.js

@@ -128,18 +128,105 @@ for (let i = 0; i < card.length; i++) {
     });
 }
 
-
 // Schedule toggle code
+
+// Created as named function so that we can show the correct day
+function showSecondDayEvents() {
+    $('.day-first-events').hide();
+    $('.day-first').removeClass('day-active');
+    $('.day-second-events').show();
+    $('.day-second').addClass('day-active');
+}
+
 $('.day-second-events').hide();
 $('.day-first').click(function() {
     $('.day-first-events').show();
     $('.day-first').addClass('day-active');
     $('.day-second-events').hide();
     $('.day-second').removeClass('day-active');
 });
-$('.day-second').click(function() {
-    $('.day-first-events').hide();
-    $('.day-first').removeClass('day-active');
-    $('.day-second-events').show();
-    $('.day-second').addClass('day-active');
-});
+$('.day-second').click(showSecondDayEvents);
+
+// Dynamic schedule code (sample API data)
+
+function convertDate(date) {
+    let output = '';
+
+    // hour
+    if (date.getUTCHours() > 12) {
+        output = String(date.getUTCHours() - 12);
+    } else {
+        output = String(date.getUTCHours());
+    }
+
+    // minute
+    if (date.getMinutes() !== 0) {
+        output += ':' + String(date.getUTCMinutes()).padStart(2, '0');
+    }
+
+    // AM/PM
+    if (date.getUTCHours() >= 12) {
+        output += 'pm';
+    } else {
+        output += 'am';
+    }
+
+    return output;
+}
+
+function handleEventData(events) {
+    let now = new Date()
+
+    // needed to handle overlapping events
+    let timeMarkerAdded = false;
+
+    // show second day page
+    if (now > new Date(1613865600 * 1000)) {  // start of Feb 21
+        showSecondDayEvents();
+    }
+
+    events.forEach(event => {
+        let startDate = new Date(event.start);  // convert ISO 8601 -> Date object
+        let finishDate = undefined;
+
+        let dateString = convertDate(startDate);
+        if (event.finish) {  // finish === null for instantaneous events
+            finishDate = new Date(event.finish);
+            let finishString = convertDate(finishDate);
+            if (dateString.slice(-2) === finishString.slice(-2)) {  // hide "am/pm" of first time if both are identical
+                dateString = dateString.slice(0, -2);
+            }
+            dateString += "-" + convertDate(finishDate);
+        }
+
+        // calculate event container classes
+        let divClasses = 'event';
+        if ((finishDate || startDate) < now) {
+            divClasses += ' past';
+        }
+
+        // add event to DOM
+        let eventContainer = $('.day-first-events');
+        if (startDate.getDate() === 21) {
+            eventContainer = $('.day-second-events');
+        }
+        const eventDiv = eventContainer.append(`<div class="${divClasses}"><p class="time">${dateString}</p><p class="title">${event.title}</p></div>`);
+
+        // add time indicator for the current event
+        if (!timeMarkerAdded && startDate < now && finishDate > now) {
+            timeMarkerAdded = true;
+
+            // calculate percent
+            const eventLength = finishDate - startDate;
+            const percent = ((now - startDate) / eventLength) * 100;
+
+            eventDiv.children('div:last-child').css('background-image', `linear-gradient(0deg, white, white ${100-percent}%, #bfbfbf 0)`);
+            eventDiv.children('div:last-child').append(`<div class="marker" style="top: ${percent}%;"></div>`);
+        }
+    });
+}
+
+fetch('https://apply.brickhack.io/events.json')
+    .then(res => res.json())
+    .then(events => handleEventData(events))
+    .catch(err => console.log(err));

sass/main.scss

@@ -31,10 +31,6 @@ $font-regular: 400;
 // Size for all titles on page
 $title-size: 3em;
 
-// MAX events (across either day)
-// TODO: Make this more dynamic via JS?
-$event-count: 6;
-
 // Import carousel
 @import '../node_modules/slick-carousel/slick/slick.css';
 @import '../node_modules/slick-carousel/slick/slick-theme.css';
@@ -745,26 +741,57 @@ nav {
             width: 60%;
 
             // Sequentially assign colors to all elements
-            $colors: $red, $orange, $light-gray;
-            @for $i from 1 through $event-count {
-                .event:nth-child(#{$i}) {
-                    border-top: 10px solid nth($colors, $i % length($colors) + 1);
-                }
+            .event:nth-child(3n) {
+                border-top: 10px solid $red;
+            }
+            .event:nth-child(3n + 1) {
+                border-top: 10px solid $orange;
+            }
+            .event:nth-child(3n + 2) {
+                border-top: 10px solid $light-gray;
             }
 
             .event {
-                background-color: white;
+                background: white;
                 border-radius: 15px;
                 margin: 10px 0px;
                 padding: 10px;
+                position: relative;
+
+                &.past {
+                    background-color: #bfbfbf;
+                }
 
                 .time {
                     color: $light-blue;
                 }
+
                 .title {
                     color: black;
                     font-size: 1.3em;
                 }
+
+                .marker {
+                    $marker-width: 20px;
+
+                    border-bottom: 2px solid $red;
+                    border-top: 2px solid $red;
+                    position: absolute;
+                    left: -25px;
+                    right: 0;
+                    top: 0;
+
+                    &::before {
+                        content: "";
+                        background-color: $red;
+                        border-radius: 50%;
+                        position: absolute;
+                        bottom: -($marker-width / 2);
+                        left: -($marker-width / 2);
+                        height: $marker-width;
+                        width: $marker-width;
+                    }
+                }
             }
         }