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,31 @@
+@use 'src/mixins' as *;
+
+@use 'src/constants' as *;
+
+//TODO: Add styling
+//I won't do it rn because the issue says to focus on functionality and it'll probably be redesigned in the future anyways
+
+.timeTable {
+    margin : 0 auto 0 auto;
+    width: 60%;
+}
+
+.tableRow {
+    min-width: 10%; //Dummy value, will be changed for the redisign
+}
+
+.tableHeader {
+    min-width: 10%; //Dummy value, will be changed for the redisign
+}
+
+.tableData {
+    min-width: 10%; //Dummy value, will be changed for the redisign
+}
+
+.tableParagraph {
+    min-width: 10%; //Dummy value, will be changed for the redisign
+}
+
+.tableTime {
+    min-width: 10%; //Dummy value, will be changed for the redisign
+}

frontend/src/Pages/WeeklyOpeningPage/WeeklyOpeningPage.tsx

@@ -0,0 +1,62 @@
+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 { getDayKey } from '~/utils';
+import styles from './WeeklyOpeningPage.module.scss';
+
+export function WeeklyOpeningPage() {
+  const { t } = useTranslation();
+  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)),
+  });
+
+  function buildVenueTable(venues: VenueDto[], day: Day) {
+    const dummy_date = '1970-01-01';
+    return (
+      <table className={styles.timeTable}>
+        <tr>
+          <th className={styles.tableHeader}>{t(getDayKey(day))}</th>
+          <th className={styles.tableHeader}>{t(KEY.common_opening_hours)}</th>
+        </tr>
+
+        {venues.map((venue) => {
+          const openingTime = venue[`opening_${day}` as keyof VenueDto] as string;
+          const closingTime = venue[`closing_${day}` as keyof VenueDto] as string;
+          return (
+            <tr key={venue.name} className={styles.tableRow}>
+              <td className={styles.tableData}>
+                <Link target="samf3" url={`${ROUTES_SAMF_THREE.information.general}/${venue.name}`}>
+                  <p className={styles.tableParagraph}>{venue.name}</p>
+                </Link>
+              </td>
+              <td className={styles.tableData}>
+                <TimeDuration
+                  className={styles.tableTime}
+                  start={`${dummy_date}T${openingTime}`}
+                  end={`${dummy_date}T${closingTime}`}
+                />
+              </td>
+            </tr>
+          );
+        })}
+      </table>
+    );
+  }
+
+  function buildAllDayTables(venues: VenueDto[]) {
+    return ALL_DAYS.map((day) => buildVenueTable(venues, day));
+  }
+
+  return <Page loading={isLoading}>{buildAllDayTables(venues)}</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;