Calender Prototype

anwendung/src/components/CalenderEntry.js

@@ -0,0 +1,9 @@
+export class CalenderEntry
+{
+    constructor(start_point, end_point)
+    {
+        this.start_point = start_point;
+        this.end_point = end_point;
+        this.parent = null;
+    }
+}

anwendung/src/components/CalenderView.jsx

@@ -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>
+    )
+}

anwendung/src/pages/index.js

@@ -5,6 +5,7 @@ import Button from "@/components/Button";
 import {arrowLeft, arrowRight} from "@/components/Icons";
 import WeekSelector from "@/components/WeekSelector";
 import PopUp from "@/components/PopUp";
+import CalenderView from "@/components/CalenderView";
 
 
 const inter = Inter({subsets: ['latin']})
@@ -16,8 +17,7 @@ export default function Home(p) {
     return (
 
         <>
-            <WeekSelector />
+            <CalenderView/>
-            <PopUp/>
         </>
 
     )

anwendung/src/styles/globals.css

@@ -181,3 +181,76 @@ Popup
   justify-content: end;
   gap: 5px;
 }
+
+/*
+Calender View
+ */
+
+.calender-container
+{
+  margin-top: 100px;
+  max-height: 300px;
+  overflow: scroll;
+}
+
+.calender-view
+{
+  /*
+  Test
+   */
+  width: 500px;
+  height: 1110px;
+  /*
+  End Test
+   */
+  background-color: #5d606e;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  border-radius: 5px;
+  justify-content: stretch;
+  gap: 2px;
+  padding: 2px;
+}
+
+.calender-view .spalte
+{
+  border-radius: 5px;
+  width: 100px;
+  background-color: white;
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: repeat(370, 3px);
+}
+
+.spalte .wochen-tag
+{
+  text-align: center;
+  background-color: #f80000;
+  width: 100%;
+  color: white;
+  border-radius: 5px 5px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  grid-row-start: 1;
+  grid-row-end: 10;
+}
+
+.entry
+{
+  background-color: #dc910b;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 2px;
+  align-items: center;
+}
+
+.entry p
+{
+  color: white;
+  font-size: 10px;
+}