Closed periods admin page and display

backend/manage.py

@@ -10,7 +10,7 @@
 def main() -> None:
     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'root.settings')
     try:
-        from django.core.management import execute_from_command_line  # noqa: PLC0415
+        from django.core.management import execute_from_command_line
 
     except ImportError as exc:
         raise ImportError(

backend/root/utils/debugpy.py

@@ -17,7 +17,7 @@ def initialize_debugpy() -> None:
     This may be called in wsgi.py if hosting with gunicorn or in manage.py::__main__.
     """
     if os.environ.get('ENABLE_DEBUGPY') == 'yes':
-        import debugpy  # noqa: PLC0415
+        import debugpy
 
         # This is okay as long as ENABLE_DEBUGPY only is enabled during development and NOT in production.
         HOST = '0.0.0.0'  # noqa: N806, S104

backend/samfundet/apps.py

@@ -16,7 +16,7 @@ class SamfundetConfig(AppConfig):
     name = 'samfundet'
 
     def ready(self) -> None:
-        from . import signals  # noqa: F401, PLC0415 # Important, this enables signals.
+        from . import signals  # noqa: F401 # Important, this enables signals.
 
         if os.environ['ENV'] == Environment.DEV:
             try:

backend/samfundet/migrations/0001_initial.py

@@ -1,4 +1,4 @@
-# Generated by Django 5.1.9 on 2025-08-09 16:11
+# Generated by Django 5.2.10 on 2026-01-20 20:45
 
 import datetime
 import django.contrib.auth.models
@@ -138,8 +138,6 @@ class Migration(migrations.Migration):
                 ('updated_at', models.DateTimeField(blank=True, editable=False, null=True)),
                 ('message_nb', models.TextField(blank=True, null=True, verbose_name='Melding (norsk)')),
                 ('message_en', models.TextField(blank=True, null=True, verbose_name='Melding (engelsk)')),
-                ('description_nb', models.TextField(blank=True, null=True, verbose_name='Beskrivelse (norsk)')),
-                ('description_en', models.TextField(blank=True, null=True, verbose_name='Beskrivelse (engelsk)')),
                 ('start_dt', models.DateField(blank=True, verbose_name='Start dato')),
                 ('end_dt', models.DateField(blank=True, verbose_name='Slutt dato')),
                 ('created_by', models.ForeignKey(blank=True, editable=False, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to=settings.AUTH_USER_MODEL)),

backend/samfundet/migrations/0006_userpreference_closed_override.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.2.10 on 2026-03-10 11:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('samfundet', '0005_medlemsinfo'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userpreference',
+            name='closed_override',
+            field=models.CharField(default='default', max_length=30),
+        ),
+    ]

backend/samfundet/migrations/0007_alter_userpreference_closed_override.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.2.11 on 2026-04-09 17:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('samfundet', '0006_userpreference_closed_override'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='userpreference',
+            name='closed_override',
+            field=models.CharField(choices=[('default', 'Default'), ('closed', 'Closed'), ('open', 'Open')], default='default', max_length=30),
+        ),
+    ]

backend/samfundet/migrations/0008_remove_userpreference_closed_override.py

@@ -0,0 +1,17 @@
+# Generated by Django 5.2.11 on 2026-04-14 19:59
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('samfundet', '0007_alter_userpreference_closed_override'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='userpreference',
+            name='closed_override',
+        ),
+    ]

backend/samfundet/models/general.py

@@ -260,9 +260,6 @@ class ClosedPeriod(CustomBaseModel):
     message_nb = models.TextField(blank=True, null=True, verbose_name='Melding (norsk)')
     message_en = models.TextField(blank=True, null=True, verbose_name='Melding (engelsk)')
 
-    description_nb = models.TextField(blank=True, null=True, verbose_name='Beskrivelse (norsk)')
-    description_en = models.TextField(blank=True, null=True, verbose_name='Beskrivelse (engelsk)')
-
     start_dt = models.DateField(blank=True, null=False, verbose_name='Start dato')
     end_dt = models.DateField(blank=True, null=False, verbose_name='Slutt dato')
 

frontend/src/Components/OpeningHours/OpeningHours.module.scss

@@ -10,8 +10,8 @@
   align-items: center;
 
   @include theme-dark {
-    background-color: $black-2;
-    color: $white;
+    background-color: $theme-dark-bg;
+    color: $theme-dark-color;
   }
 }
 
@@ -26,3 +26,10 @@
   margin: 0 0.2em;
 }
 
+.closedBox {
+  border: 2px $red_samf solid;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 2rem;
+  margin-top: 1rem;
+}

frontend/src/Components/OpeningHours/OpeningHours.tsx

@@ -1,9 +1,13 @@
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 import { TimeDuration } from '~/Components';
 import { Link } from '~/Components/Link/Link';
 import { Text } from '~/Components/Text/Text';
+import { getActiveClosedPeriods } from '~/api';
 import type { VenueDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
+import { dbT } from '~/utils';
 import styles from './OpeningHours.module.scss';
 
 type OpeningHoursProps = {
@@ -14,6 +18,23 @@ type OpeningHoursProps = {
 
 export function OpeningHours({ venues, isLoading, isError }: OpeningHoursProps) {
   const { t } = useTranslation();
+  const [isClosed, setIsClosed] = useState<boolean>(false);
+  const [closedText, setClosedText] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    getActiveClosedPeriods()
+      .then((periods) => {
+        if (periods.length !== 0) {
+          setIsClosed(true);
+          setClosedText(dbT(periods[0], 'message'));
+          return;
+        }
+      })
+      .catch((error) => {
+        toast.error(t(KEY.common_something_went_wrong));
+        console.error(error);
+      });
+  }, [t]);
 
   if (isLoading) {
     return <Text>{t(KEY.common_loading)}</Text>;
@@ -25,34 +46,37 @@ export function OpeningHours({ venues, isLoading, isError }: OpeningHoursProps)
 
   const today = new Date().toISOString().split('T')[0];
   const day = new Date().toLocaleDateString('en-US', { weekday: 'long' }).toLowerCase();
-
   return (
     <div className={styles.container}>
       <Text size="l" as="strong">
         {t(KEY.common_opening_hours)}
       </Text>
-      <table className={styles.timeTable}>
-        {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.openingRow}>
-              <td className={styles.tableCell}>
-                <Link url={`information/${venue.name}`}>
-                  <p className={styles.openingHoursText}>{venue.name}</p>
-                </Link>
-              </td>
-              <td className={styles.tableCell}>
-                <TimeDuration
-                  className={styles.openingHoursText}
-                  start={`${today}T${openingTime}`}
-                  end={`${today}T${closingTime}`}
-                />
-              </td>
-            </tr>
-          );
-        })}
-      </table>
+      {isClosed ? (
+        <div className={styles.closedBox}>{closedText}</div>
+      ) : (
+        <table className={styles.timeTable}>
+          {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.openingRow}>
+                <td className={styles.tableCell}>
+                  <Link url={`information/${venue.name}`}>
+                    <p className={styles.openingHoursText}>{venue.name}</p>
+                  </Link>
+                </td>
+                <td className={styles.tableCell}>
+                  <TimeDuration
+                    className={styles.openingHoursText}
+                    start={`${today}T${openingTime}`}
+                    end={`${today}T${closingTime}`}
+                  />
+                </td>
+              </tr>
+            );
+          })}
+        </table>
+      )}
     </div>
   );
 }

frontend/src/Components/OpeningHours/index.ts

@@ -1 +1,2 @@
 export { OpeningHours } from './OpeningHours';
+export { OpeningHoursContainer } from './OpeningHoursContainer';

frontend/src/Components/Page/Page.module.scss

@@ -14,8 +14,6 @@ $side-padding: 1em;
 
   // Limit max content size for large screens.
   max-width: $content-max-size;
-
-  // Center all content.
   margin: auto;
 
   @include for-mobile-only {

frontend/src/Components/index.ts

@@ -51,7 +51,7 @@ export { Navbar } from './Navbar';
 export { NotificationBadge } from './NotificationBadge';
 export { NumberInput } from './NumberInput';
 export { OccupiedForm, OccupiedFormModal } from './OccupiedForm';
-export { OpeningHours } from './OpeningHours';
+export { OpeningHours, OpeningHoursContainer } from './OpeningHours';
 export { Page } from './Page';
 export { PagedPagination } from './Pagination';
 export { PermissionRoute } from './PermissionRoute';

frontend/src/Pages/HomePage/HomePage.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
+import { OpeningHoursContainer } from '~/Components';
 import { EventCarousel, LargeCard } from '~/Pages/HomePage/components';
 import { getHomeData } from '~/api';
 import type { HomePageDto, HomePageElementDto } from '~/dto';
@@ -50,6 +51,7 @@ export function HomePage() {
   return (
     <>
       <Splash events={homePage?.splash} showInfo={true} />
+      <OpeningHoursContainer />
       <div className={styles.content}>
         {/*<SplashHeaderBox />*/}
         {isLoading && skeleton}

frontend/src/PagesAdmin/AdminPageLayout/AdminPageLayout.module.scss

@@ -36,6 +36,7 @@ $header-bg-dark: #111111;
   flex-direction: row;
   padding-bottom: 1.5em;
   gap: 1em;
+  align-items: center;
 }
 
 .spinner_container {

frontend/src/PagesAdmin/ClosedPeriodAdminPage/ClosedPeriodAdminPage.module.scss

@@ -1,3 +1,9 @@
 @use 'src/mixins' as *;
 
 @use 'src/constants' as *;
+
+.edit_buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}

frontend/src/PagesAdmin/ClosedPeriodAdminPage/ClosedPeriodAdminPage.tsx

@@ -51,9 +51,11 @@ export function ClosedPeriodAdminPage() {
   }
 
   const header = (
-    <Button theme="success" rounded={true} link={ROUTES.frontend.admin_closed_create}>
-      {t(KEY.admin_closed_period_new_period)}
-    </Button>
+    <>
+      <Button theme="success" rounded link={ROUTES.frontend.admin_closed_create}>
+        {t(KEY.admin_closed_period_new_period)}
+      </Button>
+    </>
   );
   const backendUrl = ROUTES.backend.admin__samfundet_closedperiod_changelist;
 
@@ -67,21 +69,21 @@ export function ClosedPeriodAdminPage() {
       <div className={styles.tableContainer}>
         <Table
           columns={[
-            t(KEY.common_message) ?? '',
-            `Event ${t(KEY.common_message)}`,
+            `${t(KEY.common_message)} ${t(KEY.common_norwegian)}`,
+            `${t(KEY.common_message)} ${t(KEY.common_english)}`,
             t(KEY.start_time) ?? '',
             t(KEY.end_time) ?? '',
-            '',
+            t(KEY.common_edit) ?? '',
           ]}
           data={closedPeriods.map((element) => ({
             cells: [
-              element.message_no,
-              element.description_no,
+              element.message_nb,
+              element.message_en,
               { content: <TimeDisplay displayType="date" timestamp={element.start_dt} /> },
               { content: <TimeDisplay displayType="date" timestamp={element.end_dt} /> },
               {
                 content: (
-                  <div>
+                  <div className={styles.edit_buttons}>
                     <Button
                       theme="blue"
                       display="block"
@@ -98,7 +100,8 @@ export function ClosedPeriodAdminPage() {
                       display="block"
                       className={styles.smallButtons}
                       onClick={() => {
-                        if (window.confirm(`${t(KEY.form_confirm)} ${t(KEY.common_delete)} ${element.message_no}`)) {
+                        // :TODO: window.confirm should be replaced with a non-browser implementation (not built-in popup)
+                        if (window.confirm(`${t(KEY.form_confirm)} ${t(KEY.common_delete)} ${element.message_nb}`)) {
                           deleteSelectedEvent(element.id);
                         }
                       }}

frontend/src/PagesAdmin/ClosedPeriodFormAdminPage/ClosedPeriodFormAdminPage.module.scss

@@ -7,7 +7,25 @@
   flex-direction: column;
   margin-top: 0.5em;
   gap: 1.5em;
+
   @include for-tablet-up {
     flex-direction: row;
   }
 }
+
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 20px;
+
+  >div {
+    flex: 1;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}