Calender Prototype

2023-05-04 16:41:21 +02:00
parent 87e34e7a2e
commit 88fe8b84e3
4 changed files with 163 additions and 2 deletions
@@ -0,0 +1,79 @@
+import {useEffect, useState} from "react";
+import {CalenderEntry} from "@/components/CalenderEntry";
+
+let entries = {mo:[], tu:[], we:[], th:[], fr:[], sa:[]}
+
+export default function CalenderView(p) {
+    const [t, setT] = useState(false)
+
+    function mouse_click(e) {
+        let y_window = e.clientY;
+        let y_target_offset = e.target.getBoundingClientRect().top;
+        let row = Math.floor((y_window - y_target_offset) / 3) + 1
+        let current_list = entries[e.currentTarget.id];
+        current_list.push(new CalenderEntry(row - 10, row + 5));
+        setT(!t);
+    }
+
+    function internal_to_time(internal)
+    {
+        internal /= 15
+        let integer = Math.floor(internal)
+        let decimal = internal.toFixed(2);
+        let minutes = Math.floor((decimal - integer) * 60);
+        let minutes_string = minutes.toString().length === 1 ? "0" + minutes : minutes
+        return integer + ":" + minutes_string;
+    }
+
+    return (
+        <div className={"calender-container"} id={t}>
+            <div className={"calender-view"}>
+                <div className={"spalte"} onClick={mouse_click} id={"mo"}>
+                    <div className={"wochen-tag font-small"}>Montag</div>
+                    {entries["mo"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}>
+                        <p>{internal_to_time(d.start_point)}</p>
+                        <p>{internal_to_time(d.end_point)}</p>
+                    </div>))}
+                </div>
+                <div className={"spalte"} onClick={mouse_click} id={"tu"}>
+                    <div className={"wochen-tag font-small"}>Dienstag</div>
+                    {entries["tu"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}>
+
+                        <p>{internal_to_time(d.start_point)}</p>
+                        <p>{internal_to_time(d.end_point)}</p>
+                    </div>))}
+                </div>
+                <div className={"spalte"} onClick={mouse_click} id={"we"}>
+                    <div className={"wochen-tag font-small"}>Mittwoch</div>
+                    {entries["we"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}>
+
+                        <p>{internal_to_time(d.start_point)}</p>
+                        <p>{internal_to_time(d.end_point)}</p>
+                    </div>))}
+                </div>
+                <div className={"spalte"} onClick={mouse_click} id={"th"}>
+                    <div className={"wochen-tag font-small"}>Donnerstag</div>
+                    {entries["th"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}>
+
+                        <p>{internal_to_time(d.start_point)}</p>
+                        <p>{internal_to_time(d.end_point)}</p>
+                    </div>))}
+                </div>
+                <div className={"spalte"} onClick={mouse_click} id={"fr"}>
+                    <div className={"wochen-tag font-small"}>Freitag</div>
+                    {entries["fr"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}>
+                        <p>{internal_to_time(d.start_point)}</p>
+                        <p>{internal_to_time(d.end_point)}</p>
+                    </div>))}
+                </div>
+                <div className={"spalte"} onClick={mouse_click} id={"sa"}>
+                    <div className={"wochen-tag font-small"}>Samstag</div>
+                    {entries["sa"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point+10, gridRowEnd: d.end_point+10}}>
+                        <p>{internal_to_time(d.start_point)}</p>
+                        <p>{internal_to_time(d.end_point)}</p>
+                    </div>))}
+                </div>
+            </div>
+        </div>
+    )
+}