feat(landing): schedule component (#126)

Co-authored-by: Joshua Gonsalves <[email protected]>
Co-authored-by: Nishant Aanjaney Jalan <[email protected]>

Author: 3 people

README.md

@@ -82,6 +82,7 @@ You should create a PR **as soon as** you create a branch.
 #### Code contributors
 
 - [@Harini-Sritharar](https://github.com/Harini-Sritharar)
+- [@JoshXL23 | Joshua Gonsalves](https://github.com/JoshXL23)
 
 ## License
 

packages/common/composables/useEvents.ts

@@ -0,0 +1,29 @@
+import { Result } from 'typescript-result';
+import type { Event as ICEvent } from '~~/shared/types';
+
+export default function () {
+  const client = useHttpClient();
+
+  const getEvents = async (): Promise<Result<ICEvent[], Error>> => {
+    return Result.try(async () => {
+      const res = await client.event.$get();
+      if (!res.ok) {
+        const message = await res.text();
+        throw new Error('Server errored when fetching events:' + message);
+      }
+
+      const eventsJson = await res.json();
+      return eventsJson.map(event => {
+        return {
+          ...event,
+          startsAt: new Date(event.startsAt),
+          endsAt: event.endsAt ? new Date(event.endsAt) : undefined
+        };
+      });
+    });
+  };
+
+  return {
+    getEvents
+  };
+}

packages/ui25/assets/location-sign.svg

@@ -1,5 +1,6 @@
 <template>
-  <nav class="relative flex justify-between px-5 lg:overflow-hidden">
+  <nav
+    class="sticky top-0 z-50 flex justify-between bg-black px-5 lg:overflow-hidden">
     <img src="@ui25/assets/logo-white.svg" class="my-2" />
 
     <ICHamburger

packages/ui25/components/IC/NavBar.vue

@@ -6,10 +6,10 @@
 
     <div class="max-w-[512px]">
       <ICWindow name="about.txt" background="bg-cream-ic">
-        <div class="flex gap-4 text-black">
+        <div class="relative flex gap-4 text-black">
           <div
             class="[&_span]:text-blue-ic flex self-start text-lg [&_span]:font-bold">
-            <img src="@ui25/assets/alien.svg" class="absolute" />
+            <img src="@ui25/assets/alien.svg" class="absolute left-0 top-0" />
             <div
               v-for="col in ['bg-blue-ic', 'bg-yellow-ic', 'bg-red-ic']"
               class="ml-1 w-8"

packages/www/assets/svgs/clock.svg

@@ -0,0 +1,155 @@
+<template>
+  <section
+    id="schedule"
+    class="relative mx-auto flex max-w-[80%] flex-col justify-center px-5 sm:flex-row">
+    <div class="absolute top-0">
+      <div id="schedule-1"></div>
+      <div id="schedule-2"></div>
+    </div>
+    <div
+      class="font-ichack sticky top-[60px] z-10 ml-6 w-full self-start bg-black/50 backdrop-blur-sm sm:top-[80px] sm:ml-0 sm:w-auto">
+      <h1 class="text-4xl uppercase">Schedule</h1>
+      <div class="mt-2 flex gap-4 sm:justify-end">
+        <a
+          href="#schedule-1"
+          :class="`font-ichack z-20 px-1 py-2 text-xl uppercase leading-9 sm:text-2xl ${day == 1 ? 'bg-blue-ic' : ''}`"
+          @click="() => (day = 1)">
+          1st
+        </a>
+        <a
+          href="#schedule-2"
+          :class="`font-ichack px-1 py-2 text-xl uppercase leading-9 sm:text-2xl ${day == 2 ? 'bg-red-ic' : ''}`"
+          @click="() => (day = 2)">
+          2nd
+        </a>
+      </div>
+    </div>
+    <div
+      class="relative hidden w-8 bg-[url(~/assets/svgs/line-divider.svg)] bg-center bg-repeat-y p-8 sm:block"></div>
+    <div
+      class="absolute left-0 h-full w-6 bg-[url(~/assets/svgs/line-divider.svg)] bg-center bg-repeat-y sm:hidden"></div>
+    <!-- RHS details -->
+
+    <div
+      class="relative ml-6 inline-block max-lg:mt-8 max-sm:z-0 lg:ml-7 lg:w-1/2">
+      <div
+        v-for="(event, index) in schedule"
+        :key="event.title"
+        class="mb-16 flex flex-col items-start gap-4 sm:mb-32"
+        ref="refs">
+        <h2 :class="`font-ichack ${nextTxtColor(index)} text-4xl sm:text-6xl`">
+          {{ format(event.startsAt, 'HH:mm') }}
+          <!-- prettier-ignore -->
+          <span v-if="event.endsAt"> - {{ format(event.endsAt, 'HH:mm') }}</span>
+        </h2>
+        <h2 class="text-xl font-extrabold capitalize text-white sm:text-4xl">
+          {{ event.title }}
+        </h2>
+        <p class="text-2xl font-normal lowercase leading-snug text-white">
+          {{ event.description }}
+        </p>
+        <div
+          v-for="(loc, loc_index) in event?.locations ?? []"
+          :key="loc"
+          :class="`flex ${nextColor(index + loc_index)} w-full items-center justify-start sm:w-[80%]`">
+          <img
+            src="@ui25/assets/location-sign.svg"
+            alt="location"
+            class="m-4" />
+          <p
+            class="pr-4 text-lg font-extrabold leading-[15px] text-white sm:text-2xl">
+            {{ locationToFullName[loc] }}
+          </p>
+        </div>
+        <img
+          :src="getImage(event)"
+          :alt="event.locations[0]"
+          class="sm:w-[80%]" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { EventLocation, Event as ICEvent } from '#shared/types';
+import { filename } from 'pathe/utils';
+import { format } from 'date-fns';
+
+type Schedule = [ICEvent[], ICEvent[]];
+
+const glob = import.meta.glob('~/public/locations/*.jpeg', {
+  eager: true
+});
+
+const images = Object.fromEntries(
+  Object.entries(glob).map(([key, value]) => [
+    filename(key),
+    // @ts-ignore - default is not in the type
+    value.default
+  ])
+) as Record<EventLocation, string>;
+
+const { getEvents } = useEvents();
+const { data: schedules } = useAsyncData<Schedule>('get_schedule', async () => {
+  const eventRes = await getEvents();
+  const events: ICEvent[] = eventRes.getOrThrow();
+  return [
+    events.filter(e => e.startsAt.getUTCDate() === 1),
+    events.filter(e => e.startsAt.getUTCDate() === 2)
+  ];
+});
+
+const day = ref<1 | 2>(1);
+const schedule = computed<ICEvent[]>(() => {
+  if (!schedules.value) return [];
+  return day.value === 1 ? schedules.value[0] : schedules.value[1];
+});
+
+function nextTxtColor(index: number) {
+  switch (index % 3) {
+    case 0:
+      return 'text-blue-ic';
+    case 1:
+      return 'text-red-ic';
+    case 2:
+      return 'text-yellow-ic';
+    default:
+      throw new Error('Invalid index');
+  }
+}
+
+function nextColor(index: number) {
+  switch (index % 3) {
+    case 0:
+      return 'bg-blue-ic';
+    case 1:
+      return 'bg-red-ic';
+    case 2:
+      return 'bg-yellow-ic';
+    default:
+      throw new Error('Invalid index');
+  }
+}
+
+function getImage(event: ICEvent) {
+  const loc = !event.locations.length ? 'HXLY' : event.locations[0]!;
+  return images[loc];
+}
+
+const locationToFullName: Record<EventLocation, string> = {
+  HXLY: 'HUXLEY BUILDING',
+  JCR: 'JUNIOR COMMON ROOM',
+  SCR: 'SENIOR COMMON ROOM',
+  QTR: "QUEEN'S TOWER ROOMS",
+  QLWN: "QUEEN'S LAWN",
+  HBAR: 'ħ-bar',
+  ICME: 'IMPERIAL COLLEGE MAIN ENTRANCE',
+  GRHL: 'GREAT HALL',
+  SF: 'SHERFIELD BUILDING',
+  CLR: 'HUXLEY CLORE THEATRE',
+  H308: 'HUXLEY LECTURE THEATRE 308',
+  H311: 'HUXLEY LECTURE THEATRE 311',
+  H340: 'HUXLEY LECTURE THEATRE 340',
+  HF: 'HUXLEY FOYER'
+};
+</script>

packages/www/assets/svgs/line-divider-2.svg

@@ -2,8 +2,9 @@ export default defineNuxtConfig({
   app: {
     rootAttrs: {
       id: 'app',
-      style:
-        'overflow-x: hidden; min-height: 100svh; background: black; color: white;'
+      style: `overflow-x: hidden; height: 100svh; background: black; color: white;
+        position: relative; width: 100vw; scroll-padding-top: 1.5rem; overflow-x: hidden;
+        overflow-y: visible; scroll-behavior: smooth;`
     },
     head: {
       titleTemplate: '%s'

packages/www/assets/svgs/line-divider.svg

@@ -7,6 +7,7 @@
     <DividerOne />
     <SectionAbout class="py-16" />
     <SectionTicket class="py-16" />
+    <SectionSchedule class="py-8" />
     <SectionSponsors class="py-16" />
     <SectionTeam class="py-16" />
     <SectionFAQ class="py-16" />

packages/www/components/Section/About.vue

@@ -3,6 +3,7 @@ CREATE TYPE "public"."user_roles" AS ENUM('god', 'admin', 'hacker', 'volunteer')
 CREATE TYPE "public"."gender_types" AS ENUM('Male', 'Female', 'Non-binary', 'Other', 'N/A');--> statement-breakpoint
 CREATE TYPE "public"."t_shirt_sizes" AS ENUM('S', 'M', 'L', 'XL', '2XL');--> statement-breakpoint
 CREATE TYPE "public"."year_of_study" AS ENUM('Undergraduate Year 1', 'Undergraduate Year 2', 'Undergraduate Year 3', 'Undergraduate Year 4', 'Undergraduate Year 5', 'Undergraduate Year 6', 'Graduated', 'Postgraduate');--> statement-breakpoint
+CREATE TYPE "public"."location_enum" AS ENUM('HXLY', 'JCR', 'SCR', 'QTR', 'QLWN', 'HBAR', 'ICME', 'GRHL', 'SF', 'HF', 'H308', 'H311', 'H340', 'CLR');--> statement-breakpoint
 CREATE TABLE "announcements" (
 	"id" serial PRIMARY KEY NOT NULL,
 	"title" text NOT NULL,
@@ -67,7 +68,8 @@ CREATE TABLE "events" (
 	"description" text NOT NULL,
 	"starts_at" timestamp NOT NULL,
 	"ends_at" timestamp,
-	"public" boolean NOT NULL
+	"public" boolean NOT NULL,
+	"locations" "location_enum"[] NOT NULL
 );
 --> statement-breakpoint
 CREATE TABLE "profiles" (

packages/www/components/Section/Schedule.vue

@@ -0,0 +1,2 @@
+CREATE TYPE "public"."location_enum" AS ENUM('HXLY', 'JCR', 'SCR', 'QTR', 'QLWN', 'HBAR', 'ICME', 'GRHL', 'SF', 'HF', 'H308', 'H311', 'H340', 'CLR');--> statement-breakpoint
+ALTER TABLE "events" ADD COLUMN "locations" "location_enum"[] NOT NULL;