basic working imprint and contact (and faq)

package.json

@@ -16,6 +16,8 @@
     "@apollo/client": "^3.10.1",
     "@turf/bbox": "^7.0.0",
     "classnames": "^2.5.1",
+    "d3-scale": "^4.0.2",
+    "d3-time-format": "^4.1.0",
     "graphql": "^16.8.1",
     "iso-639-1": "^3.1.2",
     "mapbox-gl": "^3.4.0",
@@ -31,6 +33,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@types/d3-time-format": "^4.0.3",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/api/constants.ts

@@ -229,3 +229,72 @@ export const FLOORPLAN_MARGINS = {
 };
 
 export const LOCATION_ROOT = process.env.REST_API_LOCATIONS_ROOT;
+
+export const TIMES = [
+  ['left-[0px]', '10 AM'],
+  ['left-[100px]', '11 AM'],
+  ['left-[200px]', '12 PM'],
+  ['left-[300px]', '01 PM'],
+  ['left-[400px]', '02 PM'],
+  ['left-[500px]', '03 PM'],
+  ['left-[600px]', '04 PM'],
+  ['left-[700px]', '05 PM'],
+  ['left-[800px]', '06 PM'],
+  ['left-[900px]', '07 PM'],
+  ['left-[1000px]', '08 PM'],
+  ['left-[1100px]', '09 PM'],
+  ['left-[1200px]', '10 PM'],
+  ['left-[1300px]', '11 PM'],
+  ['left-[1400px]', '12 AM'],
+  ['left-[1500px]', '01 AM'],
+  ['left-[1600px]', '02 AM'],
+  ['left-[1700px]', '03 AM'],
+  ['left-[1800px]', '04 AM'],
+  ['left-[1900px]', '05 AM'],
+  ['left-[2000px]', '06 AM'],
+  ['left-[2100px]', '07 AM'],
+  ['left-[2200px]', '08 AM'],
+  ['left-[2300px]', '09 AM'],
+  ['left-[2400px]', '10 AM'],
+  ['left-[2500px]', '11 AM'],
+  ['left-[2600px]', '12 PM'],
+  ['left-[2700px]', '01 PM'],
+  ['left-[2800px]', '02 PM'],
+  ['left-[2900px]', '03 PM'],
+  ['left-[3000px]', '04 PM'],
+  ['left-[3100px]', '05 PM'],
+  ['left-[3200px]', '06 PM'],
+  ['left-[3300px]', '07 PM'],
+  ['left-[3400px]', '08 PM'],
+  ['left-[3500px]', '09 PM'],
+  ['left-[3600px]', '10 PM'],
+  ['left-[3700px]', '11 PM'],
+  ['left-[3800px]', '12 AM'],
+  ['left-[3900px]', '01 AM'],
+  ['left-[4000px]', '02 AM'],
+  ['left-[4100px]', '03 AM'],
+  ['left-[4200px]', '04 AM'],
+  ['left-[4300px]', '05 AM'],
+  ['left-[4400px]', '06 AM'],
+  ['left-[4500px]', '07 AM'],
+  ['left-[4600px]', '08 AM'],
+  ['left-[4700px]', '09 AM'],
+  ['left-[4800px]', '10 AM'],
+  ['left-[4900px]', '11 AM'],
+  ['left-[5000px]', '12 PM'],
+  ['left-[5100px]', '01 PM'],
+  ['left-[5200px]', '02 PM'],
+  ['left-[5300px]', '03 PM'],
+  ['left-[5400px]', '04 PM'],
+  ['left-[5500px]', '05 PM'],
+  ['left-[5600px]', '06 PM'],
+  ['left-[5700px]', '07 PM'],
+  ['left-[5800px]', '08 PM'],
+  ['left-[5900px]', '09 PM'],
+  ['left-[6000px]', '10 PM'],
+];
+
+export const TIME_PADDING = 0;
+export const LOCATION_PADDING = 60;
+export const LOCATION_HEIGHT = 1000;
+export const TIME_WIDTH = 6000;

src/api/rest/events.ts

@@ -1,16 +1,39 @@
 import { cache } from 'react';
 import { getRestApiQuery } from '@/api/rest/api';
-import { LOCATION_ROOT } from '../constants';
-import { Context, GraphQlItem } from '@/types/graphql';
+import { LOCATION_ROOT, TIME_PADDING, TIME_WIDTH } from '../constants';
+import { Context } from '@/types/graphql';
+import { scaleTime } from 'd3-scale';
+import { EventItem } from '@/types/types';
 
-export const getEventList = cache(
-  async (id: string): Promise<GraphQlItem[]> => {
-    const res = await fetch(
-      getRestApiQuery(`${id}/list/filter/allocation/temporal`),
-    );
-    return res.json();
-  },
-);
+const toDate = (stamp, s) => s(new Date(parseInt(stamp) * 1000));
+
+export const getEventList = cache(async (id: string): Promise<EventItem[]> => {
+  const res = await fetch(
+    getRestApiQuery(`${id}/list/filter/allocation/temporal`),
+  );
+  const scaleX = scaleTime()
+    .domain([new Date(2024, 6, 19, 12), new Date(2024, 6, 22, 0)])
+    .range([TIME_PADDING, TIME_WIDTH]);
+
+  return res.json().then((r) =>
+    r.map((ev) => {
+      const start =
+        ev.allocation.temporal?.length > 0
+          ? ev.allocation.temporal[0].start
+          : new Date(2024, 6, 19, 12);
+      const end =
+        ev.allocation.temporal?.length > 0
+          ? ev.allocation.temporal[0].end
+          : new Date(2024, 6, 19, 16);
+
+      return {
+        ...ev,
+        left: `left-[${toDate(start, scaleX)}px]`,
+        width: `width-[${toDate(end, scaleX) - toDate(start, scaleX)}px]`,
+      };
+    }),
+  );
+});
 
 export const getEventLocations = cache(async (): Promise<Context[]> => {
   const res = await fetch(getRestApiQuery(`${LOCATION_ROOT}/tree`));

src/app/[locale]/@modal/(.)contact/page.tsx

@@ -0,0 +1,10 @@
+import Content from '@/components/modal/content.server';
+import Modal from '@/components/modal/modal';
+
+export default function Page(props: any) {
+  return (
+    <Modal>
+      <Content title="Contact" />
+    </Modal>
+  );
+}

src/app/[locale]/@modal/(.)imprint/page.tsx

@@ -0,0 +1,10 @@
+import Content from '@/components/modal/content.server';
+import Modal from '@/components/modal/modal';
+
+export default function Page(props: any) {
+  return (
+    <Modal>
+      <Content title="Imprint" />
+    </Modal>
+  );
+}

src/app/[locale]/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null;
+}

src/app/[locale]/contact/page.tsx

@@ -1,7 +1,10 @@
+import Content from '@/components/modal/content.server';
+import Modal from '@/components/modal/modal';
+
 export default async function Page(props: any) {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div>Generic Page Design</div>
-    </main>
+    <Modal>
+      <Content title="Contact" />
+    </Modal>
   );
 }

src/app/[locale]/error.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  );
+}

src/app/[locale]/imprint/page.tsx

@@ -1,7 +1,9 @@
+import Content from '@/components/modal/content.server';
+
 export default async function Page(props: any) {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div>Generic Page Design</div>
+    <main>
+      <Content title="Imprint" />
     </main>
   );
 }

src/app/[locale]/info/components/content/info/info.server.tsx

@@ -1,12 +1,36 @@
-import { infoItems } from '@/data';
 import InfoContentInfoItem from '@/app/info/components/content/info/item/item.client';
 import { HtmlProps } from '@/components/html/html';
+import { getTranslations } from 'next-intl/server';
+const keys = [
+  'arrival',
+  'awareness',
+  'wristbands',
+  'accessibility',
+  'payment',
+  'fire',
+  'entry',
+  'opening',
+  'food',
+  'lostnfound',
+  'opening_times',
+  'press',
+  'program',
+  'recycling',
+  'registration',
+  'reservation',
+  'safety',
+  'other',
+] as const;
 
-export default function InfoContentInfo() {
+export default async function InfoContentInfo() {
+  const t = await getTranslations('Info.faqs');
+  const infoItems = keys
+    .map((k) => ({ id: k, title: t(`${k}.title`), text: t.raw(`${k}.text`) }))
+    .sort((a, b) => a.title.localeCompare(b.title));
   return (
     <InfoContentInfoContainer>
       {infoItems.map((item) => (
-        <InfoContentInfoItem key={item.en.id} item={item.en} />
+        <InfoContentInfoItem key={item.id} item={item} />
       ))}
       <div className="grow-[1] rounded-md bg-white"></div>
     </InfoContentInfoContainer>

src/app/[locale]/info/components/content/info/item/item.client.tsx

@@ -32,8 +32,8 @@ export default function InfoContentInfoItem({
       <InfoContentInfoItemTitle item={item} isHovered={isHovered} />
       {isHovered && (
         <ResponsiveMultiLineText
-          className="pb-gutter-sm"
-          text={item.content}
+          className="pb-gutter-sm text-black [&>a]:underline"
+          text={item.text}
           textSize="sm"
         />
       )}

src/app/[locale]/info/components/content/info/item/title.client.tsx

@@ -9,7 +9,9 @@ export default function InfoContentInfoItemTitle({
   isHovered,
 }: InfoContentInfoItemProps & { isHovered: boolean }) {
   return (
-    <InfoContentInfoItemTitleContainer className={isHovered ? 'font-bold' : ''}>
+    <InfoContentInfoItemTitleContainer
+      className={isHovered ? 'font-bold text-black' : ''}
+    >
       {item.title}
     </InfoContentInfoItemTitleContainer>
   );