add support for opening hours that automatically change over time

web/src/components/blocks/Blocks.tsx

@@ -8,6 +8,8 @@ import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
 import { ContactListBlock } from "./ContactListBlock";
 import { ContactEntityBlock } from "./ContactEntityBlock";
 import { NeufAddressSectionBlock } from "./NeufAddressSectionBlock";
+import { OpeningHoursSectionBlock } from "./OpeningHoursSectionBlock";
+
 
 export const Blocks = ({ blocks }: any) => {
   const sections = blocks.filter(
@@ -52,6 +54,9 @@ export const Blocks = ({ blocks }: any) => {
       case "NeufAddressSectionBlock":
         return <NeufAddressSectionBlock />;
         break;
+      case "OpeningHoursSectionBlock":
+        return <OpeningHoursSectionBlock />;
+        break;
       default:
         return <div>Unsupported block type {block.blockType}</div>;
         console.log("unsupported block", block);

web/src/components/blocks/OpeningHoursSectionBlock.tsx

@@ -0,0 +1,66 @@
+import {
+  getOpeningHours,
+  getOpeningHoursForFunction,
+  getPrettyOpeningHoursForFunction,
+  groupOpeningHours,
+  PrettyOpeningHours,
+} from "@/lib/openinghours";
+import styles from "./openingHoursSectionBlock.module.scss";
+
+function OpeningHoursSubsection({
+  title,
+  prettyHours,
+}: {
+  title: string;
+  prettyHours: PrettyOpeningHours[];
+}) {
+  return (
+    <section className={styles.openingHoursSubsection}>
+      <h3>{title}</h3>
+      <ul>
+        {prettyHours.map(({ range, time, custom }) => (
+          <li key={range}>
+            <span className={styles.dayRange}>{range}</span>:&nbsp;
+            {time && <span className={styles.timeRange}>{time}</span>}
+            {custom && <span className={styles.timeRange}>{custom}</span>}
+            {!time && !custom && <span className={styles.closed}>Stengt</span>}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+export async function OpeningHoursSectionBlock() {
+  const allOpeningHours = await getOpeningHours();
+  const subsections = [
+    ["glassbaren", "Glassbaren"],
+    ["bokcafeen", "Bokcaféen"],
+    ["ekspedisjonen", "Ekspedisjonen"],
+  ];
+  const { announcement } = allOpeningHours;
+
+  return (
+    <section className={styles.openingHoursSection}>
+      {announcement && <p>{announcement}</p>}
+      {subsections.map((subsection) => {
+        const [slug, title] = subsection;
+        const prettyHours = getPrettyOpeningHoursForFunction(
+          allOpeningHours,
+          slug
+        );
+        console.log("prettyHours", prettyHours, slug);
+        if (!prettyHours || prettyHours?.length === 0) {
+          return <></>;
+        }
+        return (
+          <OpeningHoursSubsection
+            key={slug}
+            title={title}
+            prettyHours={prettyHours}
+          />
+        );
+      })}
+    </section>
+  );
+}

web/src/components/events/DateList.tsx

@@ -5,8 +5,9 @@ import {
   formatDate,
   formatExtendedDateTime,
   isTodayOrFuture,
+  compareDates,
 } from "@/lib/date";
-import { EventFragment, EventOccurrence, compareDates } from "@/lib/event";
+import { EventFragment, EventOccurrence } from "@/lib/event";
 import styles from "./dateList.module.scss";
 import Link from "next/link";