From 0528ac4851818bf2dd44a7122e811821252efbcb Mon Sep 17 00:00:00 2001
From: henrikskog <henrikskog01@gmail.com>
Date: Fri, 30 Aug 2024 13:22:41 +0200
Subject: [PATCH 1/4] Add section on front page for upcoming and current
 registrations

---
 .../components/Registrations/registration.tsx | 154 ++++++++++++++++
 .../components/Registrations/styles.less      | 164 ++++++++++++++++++
 src/events/models/Event.ts                    |   2 +
 src/frontpage/index.tsx                       |   2 +
 4 files changed, 322 insertions(+)
 create mode 100644 src/events/components/Registrations/registration.tsx
 create mode 100644 src/events/components/Registrations/styles.less

diff --git a/src/events/components/Registrations/registration.tsx b/src/events/components/Registrations/registration.tsx
new file mode 100644
index 00000000..b23c7fa4
--- /dev/null
+++ b/src/events/components/Registrations/registration.tsx
@@ -0,0 +1,154 @@
+import React, { FC, useEffect, useState } from 'react';
+
+import { listEvents } from '../../api/events';
+import { IEvent } from '../../models/Event';
+
+import { faCalendarAlt, faUser } from '@fortawesome/free-regular-svg-icons/';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { DateTime } from 'luxon';
+
+import { getEventUrl } from 'core/appUrls';
+import { Link } from 'core/components/Router';
+import { getEventColor } from 'events/models/Event';
+
+import style from './styles.less';
+import mitt from 'next/dist/next-server/lib/mitt';
+
+interface IProps {
+  event: IEvent;
+}
+
+function timeLeftUntilRegistrationStart(date: string) {
+  const start = DateTime.fromISO(date);
+  const now = DateTime.local();
+  const diff = start.diff(now, ['days', 'hours', 'minutes']);
+
+  if (diff.days < 0) {
+    return `i dag ${start.toFormat('HH:mm')}`;
+  }
+
+  const days = ['man', 'tir', 'ons', 'tor', 'fre', 'lør', 'søn'][start.weekday - 1];
+
+  return `${days} ${start.toFormat('HH:mm')}`;
+}
+
+function timeLeftUntilRegistrationEnd(date: string) {
+  const end = DateTime.fromISO(date);
+  const diff = end.diff(DateTime.local(), ['days', 'hours', 'minutes']);
+
+  if (diff.days < 0) {
+    return `i dag ${end.toFormat('HH:mm')}`;
+  }
+
+  const days = ['man', 'tir', 'ons', 'tor', 'fre', 'lør', 'søn'][end.weekday - 1];
+
+  return `${days} ${end.toFormat('HH:mm')}`;
+}
+
+const Registration: FC<IProps> = ({ event }) => {
+  const capacity = `${event.number_of_seats_taken}/${event.max_capacity}`;
+  const registrationStart = DateTime.fromISO(event.registration_start);
+  const now = DateTime.local();
+
+  const registrationText =
+    registrationStart > now
+      ? `Påmelding åpner <b>${timeLeftUntilRegistrationStart(event.registration_start)}</b>`
+      : `Påmelding stenger <b>${timeLeftUntilRegistrationEnd(event.registration_end)}</b>`;
+
+  return (
+    <Link {...getEventUrl(event.id)}>
+      <a>
+        <div className={style.small}>
+          <span style={{ background: getEventColor(event.event_type) }} />
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <p>{event.title}</p>
+            <p dangerouslySetInnerHTML={{ __html: registrationText }} />
+          </div>
+          <div className={style.icon}>
+            <FontAwesomeIcon icon={faCalendarAlt} fixedWidth />
+          </div>
+          <p className={style.suppText}> {DateTime.fromISO(event.start_date).toFormat('dd.MM')} </p>
+          <div className={style.icon}>
+            <FontAwesomeIcon icon={faUser} fixedWidth />
+          </div>
+          <p className={style.suppText}>{capacity}</p>
+        </div>
+      </a>
+    </Link>
+  );
+};
+
+export const Registrations: FC = () => {
+  const [events, setEvents] = useState<IEvent[]>([]);
+
+  useEffect(() => {
+    async function fetchUpcomingRegistrations() {
+      const response = await listEvents({
+        ordering: 'attendance_event__registration_end',
+        page_size: 10,
+        registration_end__gte: DateTime.local().toISODate(),
+        // starts within 1 week
+        registration_start__lte: DateTime.local()
+          .plus({ days: 4 })
+          .toISODate(),
+      });
+      if (response.status === 'success') {
+        setEvents(response.data.results);
+        return;
+      }
+
+      console.log(response.errors);
+      return [];
+    }
+
+    fetchUpcomingRegistrations();
+  }, []);
+
+  function eventsWithOpenRegistration(events: IEvent[]) {
+    return events.filter((event) => {
+      return (
+        DateTime.fromISO(event.registration_start) < DateTime.local() &&
+        DateTime.fromISO(event.registration_end) > DateTime.local()
+      );
+    });
+  }
+
+  function eventsWithRegistrationNotStarted(events: IEvent[]) {
+    return events.filter((event) => {
+      return DateTime.fromISO(event.registration_start) > DateTime.local();
+    });
+  }
+
+  return (
+    <section style={{ width: '100%', marginTop: '2rem' }}>
+      <div>
+        {eventsWithOpenRegistration(events).length > 0 ? (
+          <div>
+            <h3>Åpne påmeldinger</h3>
+            <div className={style.eventColumn}>
+              {eventsWithOpenRegistration(events).map((event) => (
+                <Registration event={event} key={event.id} />
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div>Ingen åpne påmeldinger</div>
+        )}
+      </div>
+      <div style={{ marginTop: '2rem' }}>
+        {eventsWithRegistrationNotStarted(events).length > 0 ? (
+          <div className={style.eventColumn}>
+            <h3>Kommende påmeldinger neste 7 dager</h3>
+            {eventsWithRegistrationNotStarted(events).map((event) => (
+              <Registration event={event} key={event.id} />
+            ))}
+          </div>
+        ) : (
+          <div>Ingen kommende påmeldinger neste uke</div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Registrations;
diff --git a/src/events/components/Registrations/styles.less b/src/events/components/Registrations/styles.less
new file mode 100644
index 00000000..963ab79b
--- /dev/null
+++ b/src/events/components/Registrations/styles.less
@@ -0,0 +1,164 @@
+@import '~common/less/constants.less';
+@import '~common/less/mixins.less';
+
+@edge-height: 20px;
+@colorIndicatorSize: 0.5rem;
+
+.imageContainer {
+  min-height: 220px;
+}
+
+.eventGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  margin: 0 -0.5rem;
+}
+
+@media (min-width: @owTabletBreakpoint + 1) {
+  .eventGrid {
+    grid-template-columns: 1fr 1fr 1fr;
+
+    & > .eventColumn {
+      padding: 0 0.5rem;
+
+      &:not(:last-child) {
+        border-right: 1px solid @lightGray;
+      }
+    }
+  }
+}
+
+.eventColumn {
+  display: flex;
+  flex-direction: column;
+
+  > a {
+    &:not(:last-child) {
+      border-bottom: 1px solid @lightGray;
+    }
+    &:hover {
+      outline: 1px solid @blue;
+    }
+  }
+}
+
+.large {
+  display: flex;
+  flex-direction: column;
+
+  > img {
+    width: 100%;
+  }
+}
+
+.imageLargeType {
+  position: relative;
+  padding: 0.5rem 0;
+  color: #fff;
+  text-align: center;
+  font-weight: 200;
+  letter-spacing: 1px;
+  font-size: 20px;
+}
+
+.largeContent > span,
+.small > span {
+  margin-right: @colorIndicatorSize / 2;
+}
+
+.largeContentEmpty {
+  display: block;
+  padding: 10px 15px;
+  margin-top: -25px;
+  font-size: @owFontM;
+  text-align: center;
+  color: @gray;
+  min-height: 4rem;
+}
+
+.largeContent,
+.small {
+  display: grid;
+  grid-template-columns: @colorIndicatorSize * 3 / 2 1fr 1.5rem 2.5rem 1.5rem 3.5rem;
+  min-height: 4rem;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  grid-gap: 0.25rem;
+
+  > p {
+    align-self: center;
+    text-align: left;
+    color: initial;
+  }
+}
+
+.icon {
+  align-self: center;
+  text-align: right;
+}
+
+.suppText {
+  width: 40px;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  padding: 1em;
+
+  svg {
+    opacity: 0.3;
+  }
+}
+
+/* Mobile CSS */
+
+@media (max-width: @owTabletBreakpoint) {
+  .small,
+  .largeContent {
+    min-height: 3rem;
+    grid-template-columns: @colorIndicatorSize * 3 / 2 1fr 1.5rem 2.5rem 1.5rem 3.5rem;
+  }
+  .eventColumn {
+    border: 1px solid @lightGray;
+
+    &:not(:first-child) {
+      margin-top: 1rem;
+    }
+  }
+  // Change size so that the cards aren't too big
+  .eventGrid {
+    width: 70%;
+    margin: auto;
+  }
+}
+
+@media (max-width: 600px) {
+  // Change text sizes
+  .small > p,
+  .largeContent > p {
+    font-size: 16px;
+  }
+  .icon {
+    font-size: 17px;
+  }
+  .suppText {
+    max-width: 35px;
+  }
+  .eventGrid {
+    width: 100%;
+    margin: 0;
+  }
+}
+
+@media (max-width: 320px) {
+  .small,
+  .largeContent {
+    max-width: 17rem;
+  }
+  .largeContent {
+    padding-right: 0;
+  }
+}
+
+/* End of Mobile CSS */
diff --git a/src/events/models/Event.ts b/src/events/models/Event.ts
index c0816bef..5b3243aa 100644
--- a/src/events/models/Event.ts
+++ b/src/events/models/Event.ts
@@ -108,6 +108,8 @@ export interface AttendeeInfo {
 export interface IEvent {
   id: number;
   title: string;
+  registration_start: string;
+  registration_end: string;
   slug: string;
   ingress: string;
   ingress_short: string;
diff --git a/src/frontpage/index.tsx b/src/frontpage/index.tsx
index ff78afba..49c6804e 100644
--- a/src/frontpage/index.tsx
+++ b/src/frontpage/index.tsx
@@ -1,4 +1,5 @@
 import EventsContainer from 'events/components/EventsContainer';
+import Registrations from 'events/components/Registrations/registration';
 import React, { FC } from 'react';
 import Articles from './components/Articles';
 import ForCompanies from './components/ForCompanies';
@@ -14,6 +15,7 @@ const Frontpage: FC<FrontpageProps> = ({ offlines }) => (
   <>
     <AprilFoolsCaptcha />
     <EventsContainer />
+    <Registrations />
     <Articles />
     <Offline issues={offlines} />
     <ForCompanies />

From e89d4d3671873e81398416f6b1a0d21b48e9a751 Mon Sep 17 00:00:00 2001
From: henrikskog <henrikskog01@gmail.com>
Date: Fri, 30 Aug 2024 13:55:20 +0200
Subject: [PATCH 2/4] rm unused import

---
 src/events/components/Registrations/registration.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/events/components/Registrations/registration.tsx b/src/events/components/Registrations/registration.tsx
index b23c7fa4..f07ae67b 100644
--- a/src/events/components/Registrations/registration.tsx
+++ b/src/events/components/Registrations/registration.tsx
@@ -12,7 +12,6 @@ import { Link } from 'core/components/Router';
 import { getEventColor } from 'events/models/Event';
 
 import style from './styles.less';
-import mitt from 'next/dist/next-server/lib/mitt';
 
 interface IProps {
   event: IEvent;

From 4d11a30bd67ddda1acbcf8200fc80bd590bc981a Mon Sep 17 00:00:00 2001
From: henrikskog <henrikskog01@gmail.com>
Date: Fri, 30 Aug 2024 14:08:34 +0200
Subject: [PATCH 3/4] show in two cols on pc

---
 .../components/Registrations/registration.tsx |  48 ++++---
 .../components/Registrations/styles.less      | 133 +-----------------
 2 files changed, 32 insertions(+), 149 deletions(-)

diff --git a/src/events/components/Registrations/registration.tsx b/src/events/components/Registrations/registration.tsx
index f07ae67b..0c54d985 100644
--- a/src/events/components/Registrations/registration.tsx
+++ b/src/events/components/Registrations/registration.tsx
@@ -86,9 +86,8 @@ export const Registrations: FC = () => {
         ordering: 'attendance_event__registration_end',
         page_size: 10,
         registration_end__gte: DateTime.local().toISODate(),
-        // starts within 1 week
         registration_start__lte: DateTime.local()
-          .plus({ days: 4 })
+          .plus({ days: 8 })
           .toISODate(),
       });
       if (response.status === 'success') {
@@ -120,31 +119,34 @@ export const Registrations: FC = () => {
 
   return (
     <section style={{ width: '100%', marginTop: '2rem' }}>
-      <div>
-        {eventsWithOpenRegistration(events).length > 0 ? (
-          <div>
-            <h3>Åpne påmeldinger</h3>
+      <h3>Påmeldinger</h3>
+      <div className={style.registrationContainer}>
+        <div>
+          {eventsWithOpenRegistration(events).length > 0 ? (
+            <div>
+              <h4 style={{ marginBottom: '0.5rem' }}>Åpne</h4>
+              <div className={style.eventColumn}>
+                {eventsWithOpenRegistration(events).map((event) => (
+                  <Registration event={event} key={event.id} />
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div>Ingen åpne påmeldinger</div>
+          )}
+        </div>
+        <div>
+          {eventsWithRegistrationNotStarted(events).length > 0 ? (
             <div className={style.eventColumn}>
-              {eventsWithOpenRegistration(events).map((event) => (
+              <h4 style={{ marginBottom: '0.5rem' }}>Åpner snart</h4>
+              {eventsWithRegistrationNotStarted(events).map((event) => (
                 <Registration event={event} key={event.id} />
               ))}
             </div>
-          </div>
-        ) : (
-          <div>Ingen åpne påmeldinger</div>
-        )}
-      </div>
-      <div style={{ marginTop: '2rem' }}>
-        {eventsWithRegistrationNotStarted(events).length > 0 ? (
-          <div className={style.eventColumn}>
-            <h3>Kommende påmeldinger neste 7 dager</h3>
-            {eventsWithRegistrationNotStarted(events).map((event) => (
-              <Registration event={event} key={event.id} />
-            ))}
-          </div>
-        ) : (
-          <div>Ingen kommende påmeldinger neste uke</div>
-        )}
+          ) : (
+            <div>Ingen kommende påmeldinger neste uke</div>
+          )}
+        </div>
       </div>
     </section>
   );
diff --git a/src/events/components/Registrations/styles.less b/src/events/components/Registrations/styles.less
index 963ab79b..7fbeee2d 100644
--- a/src/events/components/Registrations/styles.less
+++ b/src/events/components/Registrations/styles.less
@@ -4,79 +4,22 @@
 @edge-height: 20px;
 @colorIndicatorSize: 0.5rem;
 
-.imageContainer {
-  min-height: 220px;
-}
-
-.eventGrid {
-  display: grid;
-  grid-template-columns: 1fr;
-  margin: 0 -0.5rem;
-}
-
-@media (min-width: @owTabletBreakpoint + 1) {
-  .eventGrid {
-    grid-template-columns: 1fr 1fr 1fr;
-
-    & > .eventColumn {
-      padding: 0 0.5rem;
-
-      &:not(:last-child) {
-        border-right: 1px solid @lightGray;
-      }
-    }
-  }
-}
-
-.eventColumn {
+.registrationContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 
-  > a {
-    &:not(:last-child) {
-      border-bottom: 1px solid @lightGray;
-    }
-    &:hover {
-      outline: 1px solid @blue;
-    }
+  > div {
+    flex: 1;
   }
 }
 
-.large {
-  display: flex;
-  flex-direction: column;
-
-  > img {
-    width: 100%;
+@media (max-width: @owTabletBreakpoint) {
+  .registrationContainer {
+    flex-direction: column;
   }
 }
 
-.imageLargeType {
-  position: relative;
-  padding: 0.5rem 0;
-  color: #fff;
-  text-align: center;
-  font-weight: 200;
-  letter-spacing: 1px;
-  font-size: 20px;
-}
-
-.largeContent > span,
-.small > span {
-  margin-right: @colorIndicatorSize / 2;
-}
 
-.largeContentEmpty {
-  display: block;
-  padding: 10px 15px;
-  margin-top: -25px;
-  font-size: @owFontM;
-  text-align: center;
-  color: @gray;
-  min-height: 4rem;
-}
-
-.largeContent,
 .small {
   display: grid;
   grid-template-columns: @colorIndicatorSize * 3 / 2 1fr 1.5rem 2.5rem 1.5rem 3.5rem;
@@ -100,65 +43,3 @@
 .suppText {
   width: 40px;
 }
-
-.logo {
-  display: flex;
-  justify-content: center;
-  padding: 1em;
-
-  svg {
-    opacity: 0.3;
-  }
-}
-
-/* Mobile CSS */
-
-@media (max-width: @owTabletBreakpoint) {
-  .small,
-  .largeContent {
-    min-height: 3rem;
-    grid-template-columns: @colorIndicatorSize * 3 / 2 1fr 1.5rem 2.5rem 1.5rem 3.5rem;
-  }
-  .eventColumn {
-    border: 1px solid @lightGray;
-
-    &:not(:first-child) {
-      margin-top: 1rem;
-    }
-  }
-  // Change size so that the cards aren't too big
-  .eventGrid {
-    width: 70%;
-    margin: auto;
-  }
-}
-
-@media (max-width: 600px) {
-  // Change text sizes
-  .small > p,
-  .largeContent > p {
-    font-size: 16px;
-  }
-  .icon {
-    font-size: 17px;
-  }
-  .suppText {
-    max-width: 35px;
-  }
-  .eventGrid {
-    width: 100%;
-    margin: 0;
-  }
-}
-
-@media (max-width: 320px) {
-  .small,
-  .largeContent {
-    max-width: 17rem;
-  }
-  .largeContent {
-    padding-right: 0;
-  }
-}
-
-/* End of Mobile CSS */

From b3d36fac6a1f5646c9a5eadaca83d81202420851 Mon Sep 17 00:00:00 2001
From: henrikskog <henrikskog01@gmail.com>
Date: Fri, 30 Aug 2024 14:11:17 +0200
Subject: [PATCH 4/4] removed too many styles :)

---
 src/events/components/Registrations/styles.less | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/events/components/Registrations/styles.less b/src/events/components/Registrations/styles.less
index 7fbeee2d..6ebb776b 100644
--- a/src/events/components/Registrations/styles.less
+++ b/src/events/components/Registrations/styles.less
@@ -13,12 +13,29 @@
   }
 }
 
+.small > span {
+  margin-right: @colorIndicatorSize / 2;
+}
+
 @media (max-width: @owTabletBreakpoint) {
   .registrationContainer {
     flex-direction: column;
   }
 }
 
+.eventColumn {
+  display: flex;
+  flex-direction: column;
+
+  > a {
+    &:not(:last-child) {
+      border-bottom: 1px solid @lightGray;
+    }
+    &:hover {
+      outline: 1px solid @blue;
+    }
+  }
+}
 
 .small {
   display: grid;