create boxes

JuhG · Jul 9, 2022 · 09fcf29 · 09fcf29
1 parent 96ce762
commit 09fcf29
Show file tree

Hide file tree

Showing 5 changed files with 604 additions and 75 deletions.
diff --git a/components/Form.tsx b/components/Form.tsx
@@ -1,6 +1,6 @@
 import { Filter } from "pages";
 import React, { FC, useRef } from "react";
-import { Location, Program, Range } from "types";
+import { Village, Topic, Day } from "types";
 import { Group, CheckboxGroup, Checkbox, RadioGroup, Radio } from "@mantine/core";
 
 interface FormProps {
@@ -16,30 +16,30 @@ export const Form: FC<FormProps> = ({ filter, setFilter }) => {
     }
     const data = new FormData(formRef.current);
     setFilter({
-      range: data.get("range") as Range,
-      program: data.getAll("program") as Program[],
-      location: data.getAll("location") as Location[],
+      day: data.get("day") as Day,
+      topic: data.getAll("topic") as Topic[],
+      village: data.getAll("village") as Village[],
     });
   }, [setFilter]);
 
   return (
     <form ref={formRef}>
       <Group spacing="xl">
-        <CheckboxGroup label={<h3>Helyszín</h3>} value={filter.location} onChange={onChange}>
-          {Object.values(Location).map((location) => {
-            return <Checkbox label={location} key={location} name="location" value={location} />;
+        <CheckboxGroup label={<h3>Helyszín</h3>} value={filter.village} onChange={onChange}>
+          {Object.values(Village).map((village) => {
+            return <Checkbox label={village} key={village} name="village" value={village} />;
           })}
         </CheckboxGroup>
 
-        <CheckboxGroup label={<h3>Műfaj</h3>} value={filter.program} onChange={onChange}>
-          {Object.values(Program).map((program) => {
-            return <Checkbox label={program} key={program} name="program" value={program} />;
+        <CheckboxGroup label={<h3>Műfaj</h3>} value={filter.topic} onChange={onChange}>
+          {Object.values(Topic).map((topic) => {
+            return <Checkbox label={topic} key={topic} name="topic" value={topic} />;
           })}
         </CheckboxGroup>
 
-        <RadioGroup label={<h3>Idősáv</h3>} name="range" value={filter.range} onChange={onChange}>
-          {Object.values(Range).map((range) => {
-            return <Radio label={range} key={range} value={range} />;
+        <RadioGroup label={<h3>Idősáv</h3>} name="day" value={filter.day} onChange={onChange}>
+          {Object.values(Day).map((day) => {
+            return <Radio label={day} key={day} value={day} />;
           })}
         </RadioGroup>
       </Group>

diff --git a/pages/api/filter.ts b/pages/api/filter.ts
@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { Range, Location, Program, Item } from "types";
+import { Day, Village, Topic, Item, Stage } from "types";
 import dayjs from "dayjs";
 
 const getUrl = (host?: string) => {
@@ -31,67 +31,94 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     return item;
   });
 
-  list = filterByLocation(list, normalizeQueryValue(req.query.location));
-  list = filterByProgram(list, normalizeQueryValue(req.query.program));
-  list = filterByRange(list, req.query.range as Range);
+  list = filterByVillage(list, normalizeQueryValue(req.query.village));
+  list = filterByTopic(list, normalizeQueryValue(req.query.topic));
+  list = filterByDay(list, req.query.day as Day);
+  // TODO: remove unnecessary data
   res.json(list);
 }
 
-const filterByLocation = (list: Item[], locations: Location[] | undefined) => {
-  if (!locations) {
+const filterByVillage = (list: Item[], villages: Village[] | undefined) => {
+  if (!villages) {
     return list;
   }
   return list.filter((item) => {
     if (!item.village) {
-      return true;
+      return false;
     }
-    return locations.some((location) => location === item.village?.name);
+    return villages.some((village) => village === item.village?.name);
   });
 };
 
-const filterByProgram = (list: Item[], programs: Program[] | undefined) => {
-  if (!programs) {
+const filterByTopic = (list: Item[], topics: Topic[] | undefined) => {
+  if (!topics) {
     return list;
   }
   return list.filter((item) => {
     if (!item.labels) {
       return true;
     }
-    return programs.some((program) => {
+    return topics.some((topic) => {
       const labelNames = item.labels?.map((label) => label.name);
-      return labelNames?.includes(program);
+      return labelNames?.includes(topic);
     });
   });
 };
 
-const parseDate = (item: Item) => {
-  return new Date("2022 " + item.time?.name).getTime() / 1000;
+export const parseDate = (item: Item) => {
+  return new Date("2022 " + item.time?.name).getTime() / 1000 / 60;
 };
 
-const getDateForRange = (range: Range): number => {
-  switch (range) {
-    case Range.three: {
-      return dayjs().add(3, "hours").unix();
+const getDateForDay = (
+  day: Day
+): {
+  start: number;
+  end: number;
+} => {
+  switch (day) {
+    case Day.tue: {
+      return {
+        start: dayjs("2022 aug. 02.").unix() / 60,
+        end: dayjs("2022 aug. 02.").endOf("day").add(3, "hours").unix() / 60,
+      };
+    }
+    case Day.wed: {
+      return {
+        start: dayjs("2022 aug. 03.").unix() / 60,
+        end: dayjs("2022 aug. 03.").endOf("day").add(3, "hours").unix() / 60,
+      };
     }
-    case Range.today: {
-      return dayjs().endOf("day").unix();
+    case Day.thu: {
+      return {
+        start: dayjs("2022 aug. 04.").unix() / 60,
+        end: dayjs("2022 aug. 04.").endOf("day").add(3, "hours").unix() / 60,
+      };
     }
-    case Range.tomorrow: {
-      return dayjs().add(1, "day").endOf("day").unix();
+    case Day.fri: {
+      return {
+        start: dayjs("2022 aug. 05.").unix() / 60,
+        end: dayjs("2022 aug. 05.").endOf("day").add(3, "hours").unix() / 60,
+      };
     }
-    default: {
-      return 0;
+    case Day.sat: {
+      return {
+        start: dayjs("2022 aug. 06.").unix() / 60,
+        end: dayjs("2022 aug. 06.").endOf("day").add(3, "hours").unix() / 60,
+      };
     }
   }
 };
 
-const filterByRange = (list: Item[], range: Range) => {
-  if (range === Range.all) {
-    return list;
-  }
-  const rangeDate = getDateForRange(range);
-  return list.filter((item) => {
-    const date = parseDate(item);
-    return date < rangeDate;
-  });
+const filterByDay = (list: Item[], day: Day) => {
+  const { start, end } = getDateForDay(day);
+  return list
+    .filter((item) => {
+      const date = parseDate(item);
+      return start < date && date <= end;
+    })
+    .map((item) => {
+      const date = parseDate(item);
+      item.relativeDateInMinutes = date - start;
+      return item;
+    });
 };
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,21 +2,21 @@ import { Form } from "components/Form";
 import type { NextPage } from "next";
 import React, { useEffect, useState } from "react";
 import { useLocalStorage } from "utils/useLocalStorage";
-import { Location, Program, Range, Item } from "types";
+import { Village, Topic, Day, Item, Stage } from "types";
 import { Drawer } from "@mantine/core";
-import { Paper, Group, Button, Space } from "@mantine/core";
+import { Paper, Group, Button, Space, Card, Stack } from "@mantine/core";
 
 export interface Filter {
-  range: Range;
-  program?: Program[];
-  location?: Location[];
+  day: Day;
+  topic?: Topic[];
+  village?: Village[];
 }
 
 const Home: NextPage = () => {
   const [filter, setFilter] = useLocalStorage<Filter>("DD_KATLAN_FILTER", {
-    range: Range.all,
-    program: Object.values(Program),
-    location: Object.values(Location),
+    day: Day.tue,
+    topic: Object.values(Topic),
+    village: Object.values(Village),
   });
   const [list, setList] = useState<Item[]>([]);
   const [open, setOpen] = useState(false);
@@ -30,12 +30,53 @@ const Home: NextPage = () => {
       .then((r) => setList(r));
   }, [filter]);
 
+  // find the first program of the day
+  // show an extra 30 minutes of padding before
+  const cutoff =
+    list.reduce((smallest, current) => {
+      return Math.min(smallest, current.relativeDateInMinutes);
+    }, Infinity) - 30;
+
   return (
     <div>
       <h1>{list.length}</h1>
-      {list.map((item) => (
-        <li key={item.id}>{item.title}</li>
-      ))}
+
+      <ul style={{ position: "relative", background: "green", width: "100%", height: 2200 }}>
+        {list.map((item) => {
+          console.log(item);
+          return (
+            <li
+              key={item.id}
+              style={{
+                listStyle: "none",
+                position: "absolute",
+                left: 0,
+                top: (item.relativeDateInMinutes - cutoff) * 2,
+                width: "100%",
+                padding: 4,
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "space-between",
+                  background: "white",
+                  border: "1px solid gray",
+                  minHeight: item.duration * 2,
+                  padding: 8,
+                }}
+              >
+                <p style={{ flex: 1 }}>{item.title}</p>
+                <div style={{ display: "flex", justifyContent: "space-between" }}>
+                  <p>{item.time?.name}</p>
+                  <p>{item.duration} perc</p>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
 
       <Drawer
         title={<h2>Filter</h2>}