feat: add registration progress bar for events

src/components/RegistrationProgressBar.tsx

@@ -0,0 +1,29 @@
+import style from "@/styles/RegistrationProgressBar.module.scss";
+
+export default function RegistrationProgressBar(props: {
+  registration_count: number;
+  max_registrations: number;
+  event_name: string;
+}) {
+  var inner_bar_width =
+    (props.registration_count / props.max_registrations) * 100;
+  return (
+    <div className={style.main}>
+      <div className={style.info}>
+        <p className={style.eventName}>{props.event_name}</p>
+        <p className={style.count}>
+          · {props.registration_count}/{props.max_registrations} inscriptions
+        </p>
+      </div>
+      <div className={style.progressBar}>
+        <div className={style.outerBar}></div>
+        <div
+          className={style.innerBar}
+          style={{
+            width: `${inner_bar_width}%`,
+          }}
+        ></div>
+      </div>
+    </div>
+  );
+}

src/pages/index.tsx

@@ -8,12 +8,13 @@ import Gallery from "@/components/Gallery";
 import MembersList from "@/components/MembersList";
 import NewsCard from "@/components/NewsCard";
 import PartnersList from "@/components/PartnersList";
+import RegistrationProgressBar from "@/components/RegistrationProgressBar";
 import SocialsList from "@/components/SocialsList";
 import TabTitle from "@/components/TabTitle";
 import {
-  LayoutProps,
   directus,
   getDirectusImageUrl,
+  LayoutProps,
   populateLayoutProps,
 } from "@/directus";
 import {
@@ -25,13 +26,21 @@ import styles from "@/styles/Homepage.module.scss";
 import {
   Association,
   AssociationMembership,
+  Event,
   Member,
   News,
   Partner,
   PublicFiles,
   SocialLink,
 } from "@/types/aliases";
-import { readFiles, readItems, readSingleton } from "@directus/sdk";
+import { Schema } from "@/types/schema";
+import {
+  aggregate,
+  AggregationOutput,
+  readFiles,
+  readItems,
+  readSingleton,
+} from "@directus/sdk";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 
@@ -66,6 +75,17 @@ export default function Home(
       </div>
 
       <div id="news" className={styles.news}>
+        {props.events.map((event) => (
+          <RegistrationProgressBar
+            key={event.id}
+            event_name={event.name || ""}
+            max_registrations={event.max_registrations || 0}
+            registration_count={parseInt(
+              props.registrations_count.find((b) => b.event == event.id)
+                ?.count || ""
+            )}
+          />
+        ))}
         <h1 className="light">News</h1>
         <div className={styles.newsList}>
           {props.news.map((n) => (
@@ -114,6 +134,12 @@ export const getServerSideProps: GetServerSideProps<
     committee: (AssociationMembership & { member: Member })[];
     publicFiles: PublicFiles[];
     gallery: any[];
+    events: Event[];
+    registrations_count: AggregationOutput<
+      Schema,
+      "registrations",
+      { aggregate: { count: "*" }; groupBy: "event"[] }
+    >;
   } & LayoutProps
 > = populateLayoutProps(async (_) => {
   return {
@@ -189,6 +215,25 @@ export const getServerSideProps: GetServerSideProps<
           },
         })
       ),
+      events: await directus().request(
+        readItems("events", {
+          fields: ["id", "name", "max_registrations"],
+          filter: {
+            opened: {
+              _eq: true,
+            },
+            max_registrations: {
+              _nnull: true,
+            },
+          },
+        })
+      ),
+      registrations_count: await directus().request(
+        aggregate("registrations", {
+          aggregate: { count: "*" },
+          groupBy: ["event"],
+        })
+      ),
     },
   };
 });

src/styles/RegistrationProgressBar.module.scss

@@ -0,0 +1,71 @@
+@use "utilities/variables";
+
+.main {
+  background-color: transparent;
+  border-radius: variables.$small-border-radius;
+  width: 40%;
+  padding: 2rem;
+
+  display: flex;
+  flex-direction: column;
+
+  .info {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .eventName {
+    font-weight: 500;
+    font-size: 2rem;
+    margin: 0;
+    color: variables.$dark-text-color;
+  }
+
+  .count {
+    color: white;
+    font-size: 2rem;
+    margin: 0;
+  }
+
+  .progressBar {
+    position: relative;
+    width: 100%;
+    height: 2rem;
+
+    .outerBar {
+      width: calc(100% + 0.2rem);
+      left: -0.4rem;
+      bottom: 0;
+      top: 0;
+      margin: auto;
+      height: 1rem;
+      padding: 0.1rem;
+      border-radius: 25px;
+      border: solid 0.2rem white;
+      position: absolute;
+      background-color: rgba(255, 255, 255, 0.147);
+    }
+
+    .innerBar {
+      height: 0.8rem;
+      left: 0;
+      bottom: 0;
+      top: 0;
+      margin: auto;
+      background: green;
+      position: absolute;
+      border-radius: 25px;
+      background: #2a7b9b;
+      background: linear-gradient(
+        90deg,
+        rgba(42, 123, 155, 1) 0%,
+        rgba(87, 199, 133, 1) 50%,
+        rgba(237, 221, 83, 1) 100%
+      );
+    }
+  }
+
+  @media (max-width: 1000px) {
+    width: 65%;
+  }
+}