Dynamic dedicated opening hours page for users

frontend/src/Components/Footer/Footer.tsx

@@ -153,8 +153,7 @@ export function Footer() {
           </Link>
         </li>
         <li className={styles.footer_list_item}>
-          {/*TODO: Replace samf3 link with samf4 */}
-          <Link className={styles.footer_link} target="samf3" url={ROUTES_SAMF_THREE.information.openingHours}>
+          <Link className={styles.footer_link} url={ROUTES.frontend.weekly_opening_hours}>
             {t(KEY.common_opening_hours)}
           </Link>
         </li>

frontend/src/Components/NavbarSamfThree/Navbar.tsx

@@ -85,7 +85,7 @@ export function Navbar() {
         {t(KEY.common_membership)}
       </a>
       <a
-        href={ROUTES.samfThree.information.openingHours}
+        href={ROUTES.frontend.weekly_opening_hours}
         className={styles.navbar_dropdown_link}
         onClick={() => setExpandedDropdown('')}
       >

frontend/src/Pages/WeeklyOpeningPage/WeeklyOpeningPage.module.scss

@@ -0,0 +1,53 @@
+@use 'src/mixins' as *;
+
+@use 'src/constants' as *;
+
+.page {
+  margin: 0 auto;
+  padding-top: 1em;
+  padding-bottom: 5em;
+}
+
+
+
+.venueBlockContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1em 2em;
+  margin: 1em 1em 1em 1em;
+  align-items: stretch;
+
+  @include for-mobile-only {
+    grid-template-columns: 1fr; 
+  }
+}
+
+.venueBlock {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  padding-bottom: 2em;
+  border-bottom: 1px solid $grey-36;
+
+  &:nth-last-child(-n + 2) {
+    border-bottom: none;
+  }
+}
+
+.venueName {
+  margin: 0 0 2vh 0;
+}
+
+.timeDuration {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  margin: 0.5em 0 0 0; 
+}
+
+.today {
+  font-weight: bold;
+}
+
+.notToday {
+  color: $grey-2;
+}

frontend/src/Pages/WeeklyOpeningPage/WeeklyOpeningPage.tsx

@@ -0,0 +1,106 @@
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Link, Page, TimeDuration } from '~/Components';
+import { getOpenVenues } from '~/api';
+import type { VenueDto } from '~/dto';
+import { useTitle } from '~/hooks';
+import { KEY } from '~/i18n/constants';
+import { venueKeys } from '~/queryKeys';
+import { ROUTES_SAMF_THREE } from '~/routes/samf-three';
+import { ALL_DAYS, type Day } from '~/types';
+import { getShortDayKey } from '~/utils';
+import styles from './WeeklyOpeningPage.module.scss';
+
+export function WeeklyOpeningPage() {
+  const { t } = useTranslation();
+  const today = ALL_DAYS[(new Date().getDay() + 6) % 7];
+  useTitle(t(KEY.common_opening_hours));
+
+  const { data: venues = [], isLoading } = useQuery({
+    queryKey: venueKeys.all,
+    queryFn: getOpenVenues,
+    select: (data) => [...data].sort((venueA, venueB) => venueA.name.localeCompare(venueB.name)),
+  });
+
+  const isNextDay = (dayA: Day, dayB: Day) => {
+    return ALL_DAYS.indexOf(dayB) - ALL_DAYS.indexOf(dayA) === 1;
+  };
+
+  function sortDayArrays(days: Day[][]) {
+    return days.sort((dayArrayA, dayArrayB) => {
+      const firstDayA = dayArrayA[0];
+      const firstDayB = dayArrayB[0];
+
+      return ALL_DAYS.indexOf(firstDayA) - ALL_DAYS.indexOf(firstDayB);
+    });
+  }
+
+  function buildTimeDuration(venue: VenueDto, dayPeriod: Day[]) {
+    const dummyDate = '1970-01-01'; //Time duration component needs a date to work, but we only care about the time
+
+    const firstDay = dayPeriod[0];
+
+    const openingTime = venue[`opening_${firstDay}` as keyof VenueDto] as string;
+    const closingTime = venue[`closing_${firstDay}` as keyof VenueDto] as string;
+
+    return (
+      <div className={styles.timeDuration}>
+        <p className={dayPeriod.includes(today) ? styles.today : styles.notToday}>
+          {t(getShortDayKey(firstDay))}
+          {dayPeriod.length > 1 ? `-${t(getShortDayKey(dayPeriod[dayPeriod.length - 1]))}` : ''}
+        </p>
+        <TimeDuration
+          className={dayPeriod.includes(today) ? styles.today : styles.notToday}
+          start={`${dummyDate}T${openingTime}`}
+          end={`${dummyDate}T${closingTime}`}
+        />
+      </div>
+    );
+  }
+
+  function buildGroupedTimePeriods(venue: VenueDto) {
+    const seenPeriods = new Map<string, Day[]>();
+    const NonContinuousPeriods = new Array<Day[]>();
+    for (const day of ALL_DAYS) {
+      const openingTime = venue[`opening_${day}` as keyof VenueDto] as string;
+      const closingTime = venue[`closing_${day}` as keyof VenueDto] as string;
+      const period = `${openingTime}-${closingTime}`;
+
+      const ContinuousPeriod = seenPeriods.get(period);
+      if (ContinuousPeriod) {
+        if (isNextDay(ContinuousPeriod[ContinuousPeriod.length - 1], day)) {
+          ContinuousPeriod.push(day);
+        } else {
+          NonContinuousPeriods.push([day]);
+        }
+      } else {
+        seenPeriods.set(period, [day]);
+      }
+    }
+
+    return (
+      <>
+        {sortDayArrays([...NonContinuousPeriods, ...seenPeriods.values()]).map((dayPeriod) => (
+          <div key={dayPeriod.join(',')}>{buildTimeDuration(venue, dayPeriod)}</div>
+        ))}
+      </>
+    );
+  }
+
+  function buildVenueBlock(venue: VenueDto) {
+    return (
+      <div key={venue.name} className={styles.venueBlock}>
+        <Link target="samf3" url={`${ROUTES_SAMF_THREE.information.general}/${venue.name}`}>
+          <p className={styles.venueName}>{venue.name}</p>
+        </Link>
+        {buildGroupedTimePeriods(venue)}
+      </div>
+    );
+  }
+
+  return (
+    <Page className={styles.page} loading={isLoading}>
+      <div className={styles.venueBlockContainer}>{venues.map((venue) => buildVenueBlock(venue))}</div>
+    </Page>
+  );
+}

frontend/src/Pages/WeeklyOpeningPage/index.ts

@@ -0,0 +1 @@
+export { WeeklyOpeningPage } from './WeeklyOpeningPage';

frontend/src/router/router.tsx

@@ -88,6 +88,7 @@ import { ROUTES } from '~/routes';
 import { t } from 'i18next';
 import { App } from '~/App';
 import { DynamicOrgOutlet } from '~/Components/DynamicOrgOutlet/DynamicOrgOutlet';
+import { WeeklyOpeningPage } from '~/Pages/WeeklyOpeningPage/WeeklyOpeningPage';
 import { RecruitmentRecruiterDashboardPage } from '~/PagesAdmin/RecruitmentRecruiterDashboardPage/RecruitmentRecruiterDashboardPage';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
@@ -121,6 +122,7 @@ export const router = createBrowserRouter(
           <Route path={ROUTES.frontend.venues} element={<SiteFeatureGate feature="venues"><VenuePage /></SiteFeatureGate>}/>
           <Route path={ROUTES.frontend.health} element={<HealthPage />} />
           <Route path={ROUTES.frontend.components} element={<ComponentPage />} />
+          <Route path={ROUTES.frontend.weekly_opening_hours} element={<WeeklyOpeningPage />} />
           <Route element={<ProtectedRoute authState={false} element={<Outlet />} />}>
             <Route path={ROUTES.frontend.login} element={<LoginPickerPage newRoute="/new-login" />} />
             <Route path={SAMF3_LOGIN_URL.login} element={<LoginPage />} />

frontend/src/routes/frontend.ts

@@ -19,6 +19,7 @@ export const ROUTES_FRONTEND = {
   membership: '/membership',
   luka: '/luka',
   contributors: '/contributors',
+  weekly_opening_hours: '/opening-hours',
   // Recruitment:
   recruitment: '/recruitment/',
   recruitment_application: '/recruitment/:recruitmentId/position/:positionId/',

frontend/src/routes/samf-three.ts

@@ -27,6 +27,16 @@ export const ROUTES_SAMF_THREE = {
     bar: `${BASE_URL}/informasjon/bar`,
     scene: `${BASE_URL}/informasjon/scene`,
     club: `${BASE_URL}/informasjon/klubb`,
+    bodegaen: `${BASE_URL}/informasjon/bodegaen`,
+    daglighallen: `${BASE_URL}/informasjon/daglighallen`,
+    edgar: `${BASE_URL}/informasjon/edgar`,
+    klubben: `${BASE_URL}/informasjon/klubben`,
+    knaus: `${BASE_URL}/informasjon/knaus`,
+    lyche: `${BASE_URL}/informasjon/lyche`,
+    rundhallen: `${BASE_URL}/informasjon/rundhallen`,
+    selskapssiden: `${BASE_URL}/informasjon/selskapssiden`,
+    storsalen: `${BASE_URL}/informasjon/storsalen`,
+    strossa: `${BASE_URL}/informasjon/strossa`,
   },
   volunteer: `${BASE_URL}/opptak`,
 } as const;

frontend/src/utils.ts

@@ -204,6 +204,28 @@ export function getDayKey(day: Day): TranslationKeys {
   }
 }
 
+/**
+ * Gets the shorthand translation key for a given day
+ */
+export function getShortDayKey(day: Day): TranslationKeys {
+  switch (day) {
+    case 'monday':
+      return KEY.common_day_monday_short;
+    case 'tuesday':
+      return KEY.common_day_tuesday_short;
+    case 'wednesday':
+      return KEY.common_day_wednesday_short;
+    case 'thursday':
+      return KEY.common_day_thursday_short;
+    case 'friday':
+      return KEY.common_day_friday_short;
+    case 'saturday':
+      return KEY.common_day_saturday_short;
+    case 'sunday':
+      return KEY.common_day_sunday_short;
+  }
+}
+
 export const SHORT_DAY_I18N_KEYS = [
   KEY.common_day_monday_short,
   KEY.common_day_tuesday_short,