Skip to content

Commit

Permalink
Update Schedule
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicosalm
nicosalm committed Nov 5, 2024
1 parent ac52d13 commit 1ada57a
Showing 1 changed file with 89 additions and 217 deletions.
306 changes: 89 additions & 217 deletions src/components/Schedule.astro
View file
Original file line number Diff line number Diff line change
@@ -1,227 +1,99 @@
---
import Container from "./Container.astro";
let eventObject = [
{ startTime: "9:00AM", endTime: "11:00AM", Core: "Career Fair", Event: "" },
{ startTime: "10:30AM", endTime: "11:00AM", Core: "", Event: "Team Matching" },
{ startTime: "11:00AM", endTime: "12:00PM", Core: "Opening Ceremony", Event: "" },
{ startTime: "12:00PM", endTime: "1:00PM", Core: "Hacking begins", Event: "" },
{ startTime: "12:30PM", endTime: "1:15PM", Core: "", Event: "Welcome Workshop: Intro to Hackathon w/ Notion" },
{ startTime: "1:30PM", endTime: "2:00PM", Core: "", Event: "Development and Code Sharing w/ GitHub" },
{ startTime: "2:00PM", endTime: "2:30PM", Core: "", Event: "MLH: Github Copilot" },
{ startTime: "3:00PM", endTime: "3:45PM", Core: "", Event: "Website Workshop w/ GWC" },
{ startTime: "4:00PM", endTime: "4:45PM", Core: "", Event: "Backend / API Workshop" },
{ startTime: "4:00PM", endTime: "5:30PM", Core: "", Event: "React Workshop w/ WebDevUW" },
{ startTime: "6:00PM", endTime: "6:30PM", Core: "Dinner", Event: "" },
{ startTime: "7:00PM", endTime: "8:00PM", Core: "", Event: "CAT Digital Code in the Dark Challenge" },
{ startTime: "8:00PM", endTime: "9:00PM", Core: "", Event: "Transcend: How to Present" },
{ startTime: "9:00PM", endTime: "10:00PM", Core: "", Event: "Mini Event MLH - Bob Ross" },
{ startTime: "10:00PM", endTime: "12:00AM", Core: "", Event: "" },
{ startTime: "12:00AM", endTime: "1:00AM", Core: "", Event: "Estimathon" },
{ startTime: "1:00AM", endTime: "8:00AM", Core: "Overnight Hacking", Event: "" },
{ startTime: "8:00AM", endTime: "12:00PM", Core: "Breakfast & Final Sprint", Event: "" },
{ startTime: "12:00PM", endTime: "1:00PM", Core: "Hacking Ends", Event: "" },
{ startTime: "1:00PM", endTime: "2:00PM", Core: "Project Judging", Event: "" },
{ startTime: "2:30PM", endTime: "3:00PM", Core: "Finalist Presentations", Event: "" },
{ startTime: "3:15PM", endTime: "4:00PM", Core: "Awards & Closing Ceremony", Event: "" }
];
// utility to convert "9:00AM" style time to Date object for today
function getTime(timeStr, baseDate = new Date()) {
const [time, modifier] = timeStr.split(/(?=AM|PM)/);
let [hours, minutes] = time.split(":");
hours = parseInt(hours);
minutes = parseInt(minutes);
if (modifier === "PM" && hours !== 12) hours += 12;
if (modifier === "AM" && hours === 12) hours = 0;
const date = new Date(baseDate);
date.setHours(hours, minutes, 0, 0);
return date;
}
function isCurrentEvent(startTime, endTime) {
const now = new Date();
let start = getTime(startTime);
let end = getTime(endTime);
// handle overnight events
if (end < start) {
// if current time is before midnight
if (now >= start) {
end.setDate(end.getDate() + 1);
}
// if current time is after midnight
else if (now <= end) {
start.setDate(start.getDate() - 1);
}
}
return now >= start && now <= end;
}
---

<div class="w-full mx-auto px-6 md:px-12 xl:px-6 bg-gray-800">
<div class="relative pb-10 pt-10 sm:pt-10 sm:pb-10 ml-auto min-h-full flex flex-col items-center">
<div class="relative pb-10 pt-10 sm:pt-10 sm:pb-10 ml-auto min-h-full flex flex-col items-center">
<h1 id="schedule" class="font-header text-white font-semibold text-3xl md:text-4xl xl:text-5xl mt-12 mb-4">Schedule</h1>
<div class="w-lg max-w-full overflow-x-auto">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 overflow-x-auto">
<thead class="text-base uppercase bg-gray-700 text-gray-100">
<tr>
<th scope="col" class="px-6 py-3">
Time
</th>
<th scope="col" class="px-6 py-3">
Core
</th>
<th scope="col" class="px-6 py-3">
Event
</th>
</tr>
</thead>
<tbody>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
9:00 AM - 10:30 AM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Check-in
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Career Fair
</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
10:30 AM - 11:15 AM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Walk-in Registration
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Career Fair
</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
11:15 AM - 12:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Opening Ceremony
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Career Fair
</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
12:00 PM - 1:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Lunch & Hacking Begins
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
1:00 PM - 2:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Development and Code Sharing Tools
</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
2:30 PM - 4:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Intro To HTML, CSS, JS Static Site
</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
4:00 PM - 5:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Intro To Web Scraping
</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
5:00 PM - 6:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
MLH's Bob Ross Painting Mini Event
</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
6:00 PM - 7:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Dinner
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
7:00 PM - 8:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Intro to React.js
</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
8:00 PM - 9:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Intro to Backend & Databases
</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
9:00 PM - 10:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Jane Street's Estimathon™ Mini Event
</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
10:00 PM - 8:00 AM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Hacking Through the Night
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
8:00 AM - 11:00 AM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Breakfast
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
12:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Final Submission Deadline
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
12:00 PM - 1:00 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Lunch
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
1:00 PM - 2:30 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Judging
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
</tr>
<tr class="bg-gray-800 border-gray-700">
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
2:45 PM - 3:15 PM
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
Closing Ceremony and Prizes
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">

</td>
</tr>
</tbody>
</table>
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 overflow-x-auto">
<thead class="text-base uppercase bg-gray-700 text-gray-100">
<tr>
<th scope="col" class="px-6 py-3">Time</th>
<th scope="col" class="px-6 py-3">Core</th>
<th scope="col" class="px-6 py-3">Event</th>
</tr>
</thead>
<tbody>
{eventObject.map((element) => (
<tr class={`border-b transition-colors duration-200 ${
isCurrentEvent(element.startTime, element.endTime)
? "bg-cyan-600 border-blue-700"
: "bg-gray-800 border-gray-700"
}`}>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
{element.startTime} - {element.endTime}
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
{element.Core}
</td>
<td class="px-6 py-4 font-medium text-lg whitespace-nowrap text-white">
{element.Event}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>

0 comments on commit 1ada57a

Please sign in to comment.