fixed input

FachschaftMathPhysInfo · Jul 3, 2024 · 3498832 · 3498832
1 parent a85f289
commit 3498832
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 120 deletions.
diff --git a/frontend/app/form-tutor/page.tsx b/frontend/app/form-tutor/page.tsx
@@ -1,38 +1,49 @@
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
+"use client";
+
+import { FormEvent } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import EventTable from "@/app/form-tutor/ui/table/table";
-import { Header } from "@/components/header"
+import { Header } from "@/components/header";
 
-const inputDivStyling = "w-96 my-3"
-const tableDivStyling = "my-10 w-full h-full"
+const inputDivStyling = "w-96 my-3";
+const tableDivStyling = "my-10 w-full h-full";
 
 export default function Page() {
-    return (
-        <div className="w-full h-full">
-            <Header></Header>
-            <div className="w-fit mx-auto p-10">
-                <h1 className="font-bold text-2xl">Anmeldung Vorkurstutor:in</h1>
-
-                <div className={inputDivStyling}>
-                    <Input placeholder="Vorname"/>
-                </div>
-
-                <div className={inputDivStyling}>
-                    <Input placeholder="Nachname"/>
-                </div>
-
-                <div className={inputDivStyling}>
-                    <Input type="email" placeholder="E-Mail" />
-                </div>
-
-                <div className={tableDivStyling}>
-                    <EventTable/>
-                </div>
-
-                <div className={inputDivStyling}>
-                    <Button>Submit</Button>
-                </div>
-            </div>
-        </div>
-    )
-}
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const formData = new FormData(event.currentTarget);
+    alert(formData.get("fn"));
+  }
+
+  return (
+    <div className="w-full h-full">
+      <Header></Header>
+      <div className="w-fit mx-auto p-10">
+        <form onSubmit={onSubmit}>
+          <h1 className="font-bold text-2xl">Anmeldung Vorkurstutor:in</h1>
+
+          <div className={inputDivStyling}>
+            <Input type="text" name="fn" placeholder="Vorname" />
+          </div>
+
+          <div className={inputDivStyling}>
+            <Input type="text" name="sn" placeholder="Nachname" />
+          </div>
+
+          <div className={inputDivStyling}>
+            <Input type="email" name="email" placeholder="E-Mail" />
+          </div>
+
+          <div className={tableDivStyling}>
+            <EventTable />
+          </div>
+
+          <div className={inputDivStyling}>
+            <Button type="submit">Submit</Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/form-tutor/ui/table/columns.tsx b/frontend/app/form-tutor/ui/table/columns.tsx
@@ -1,39 +1,40 @@
-"use client"
-
-import { ColumnDef } from "@tanstack/react-table"
-import { Checkbox } from "@/components/ui/checkbox"
+import { ColumnDef } from "@tanstack/react-table";
+import { Checkbox } from "@/components/ui/checkbox";
 
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
-export type Vorlesung = {
-    isSelected: boolean,
-    name: string
-    date: string
-}
-
-export const columns: ColumnDef<Vorlesung>[] = [
-    {
-      accessorKey: "isSelected",
-      header: "",
-      cell: ({ row }) => (
-
-          <div className="w-full flex flex-row justify-center">
-              <Checkbox
-                  className={"mx-auto"}
-                  checked={row.getIsSelected()}
-                  onCheckedChange={(value) => row.toggleSelected(!!value)}
-                  aria-label="Ich kann diese Vorlesung halten"
-              />
-          </div>
+export type Event = {
+  id: string;
+  title: string;
+  from: Date;
+  to: Date;
+};
 
-      ),
-    },
-    {
-        accessorKey: "name",
-        header: "Name der Veranstaltung",
-    },
-    {
-        accessorKey: "date",
-        header: "Datum",
-    },
-]
+export const columns: ColumnDef<Event>[] = [
+  {
+    accessorKey: "isSelected",
+    header: "",
+    cell: ({ row }) => (
+      <div className="w-full flex flex-row justify-center">
+        <Checkbox
+          className={"mx-auto"}
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Ich kann diese Vorlesung halten"
+        />
+      </div>
+    ),
+  },
+  {
+    accessorKey: "name",
+    header: "Veranstaltung",
+  },
+  {
+    accessorKey: "from",
+    header: "Von",
+  },
+  {
+    accessorKey: "to",
+    header: "Bis",
+  },
+];
diff --git a/frontend/app/form-tutor/ui/table/table.tsx b/frontend/app/form-tutor/ui/table/table.tsx
@@ -1,56 +1,28 @@
-import {Vorlesung, columns} from "./columns"
+import {Event, columns} from "./columns"
 import {DataTable} from "./data-table"
 
-async function getData(): Promise<Vorlesung[]> {
-    // Fetch data from your API here.
-    return [
-        {
-            isSelected: false,
-            name: "Logik",
-            date: "1.10.",
-        },
-        {
-            isSelected: false,
-            name: "Logik",
-            date: "1.10.",
-        },
-        {
-            isSelected: false,
-            name: "Logik",
-            date: "1.10.",
-        },
-        {
-            isSelected: false,
-            name: "Logik",
-            date: "1.10.",
-        },
-        {
-            isSelected: false,
-            name: "Logik",
-            date: "1.10.",
-        },
-        {
-            isSelected: false,
-            name: "Logik",
-            date: "1.10.",
-        },
-        {
-            isSelected: false,
-            name: "Logik",
-            date: "1.10.",
-        },
-        {
-            isSelected: false,
-            name: "Logik",
-            date: "1.10.",
-        },
-        {
-            isSelected: false,
-            name: "Logik",
-            date: "1.10.",
-        },
-        // ...
-    ]
+async function getData(): Promise<Event[]> {
+    const jsonData = {
+        "data": {
+            "events": [
+                {
+                    "ID": "6da7655a-1c20-4228-9b8c-d1ee99317a87",
+                    "title": "event1",
+                    "from": "2024-07-01T10:00:00Z",
+                    "to": "2024-07-01T12:00:00Z"
+                }
+            ]
+        }
+    };
+
+    const events: Event[] = jsonData.data.events.map(event => ({
+        id: event.ID,
+        title: event.title,
+        from: new Date(event.from),
+        to: new Date(event.to)
+    }));
+
+    return events;
 }
 
 export default async function EventTable() {