diff --git a/anwendung/src/components/CalenderView.jsx b/anwendung/src/components/CalenderView.jsx index 0385373..fafd873 100644 --- a/anwendung/src/components/CalenderView.jsx +++ b/anwendung/src/components/CalenderView.jsx @@ -14,43 +14,30 @@ let selectedListID = ""; export default function CalenderView(p) { const [t, setT] = useState(false) - function mouse_move(e) - { - if(mouseDown) - { + function mouse_move(e) { + if (mouseDown) { let y_window = e.clientY; let y_target_offset = e.currentTarget.getBoundingClientRect().top; let id = e.currentTarget.id; let row = Math.floor((y_window - y_target_offset) / 10) + 1 - if(grabbed != null) - { - if(grabbedUp) - { - if (row < grabbed.end_point) - { + if (grabbed != null) { + if (grabbedUp) { + if (row < grabbed.end_point - 1) { grabbed.start_point = row; } - } - else - { - if(row > grabbed.start_point) - { + } else { + if (row > grabbed.start_point) { grabbed.end_point = row + 1; } } - } - else if(selectedElement != null) - { - if (selectedListID !== id) - { + } else if (selectedElement != null) { + if (selectedListID !== id) { let index = -1; let currentList = entries[selectedListID]; let temp = []; - for(let i = 0; i < currentList.length; i++) - { - if(selectedElement !== currentList[i]) - { + for (let i = 0; i < currentList.length; i++) { + if (selectedElement !== currentList[i]) { temp.push(currentList[i]); } } @@ -67,20 +54,17 @@ export default function CalenderView(p) { setT(!t); } - function mouse_up(e) - { + function mouse_up(e) { mouseDown = false; let y_window = e.clientY; let y_target_offset = e.currentTarget.getBoundingClientRect().top; let row = Math.floor((y_window - y_target_offset) / 10) + 1 let current_list = entries[e.currentTarget.id]; - if (grabbed != null) - { + if (grabbed != null) { grabbed = null; } - if(selectedElement != null) - { + if (selectedElement != null) { selectedElement = null; } @@ -95,37 +79,27 @@ export default function CalenderView(p) { let row = Math.floor((y_window - y_target_offset) / 10) + 1; let current_list = entries[e.currentTarget.id]; - if(e.target.id === "grab") - { + if (e.target.id === "grab") { let entry = e.target.parentElement; - let rowStart= parseInt(window.getComputedStyle(entry).gridRowStart); + let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart); - for(let i = 0; i < current_list.length; i++) - { + for (let i = 0; i < current_list.length; i++) { let current = current_list[i]; - if(current.start_point === row || current.end_point === row+1) - { + if (current.start_point === row || current.end_point === row + 1) { grabbed = current; break; } } - if(row === rowStart) - { + if (row === rowStart) { grabbedUp = true; - } - else - { + } else { grabbedUp = false; } - } - else if(e.target.id === "entry") - { - for(let i = 0; i < current_list.length; i++) - { + } else if (e.target.id === "entry") { + for (let i = 0; i < current_list.length; i++) { let current = current_list[i]; - if(current.start_point <= row && current.end_point >= row) - { + if (current.start_point <= row && current.end_point >= row) { selectedElement = current; selectedListID = e.currentTarget.id; break; @@ -135,10 +109,8 @@ export default function CalenderView(p) { selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart); selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row; - } - else - { - if (row <= 98 && row > 3) { + } else { + if (row < 96) { let free = true; for (let i = 0; i < current_list.length; i++) { let current = current_list[i]; @@ -162,7 +134,7 @@ export default function CalenderView(p) { } function internal_to_time(internal) { - internal -= 4 + internal -= 1 internal /= 4 let integer = Math.floor(internal) let decimal = internal.toFixed(2); @@ -172,88 +144,108 @@ export default function CalenderView(p) { } return ( -
-
-
-
Montag
- {entries["mo"].map(d => (
-
-

{internal_to_time(d.start_point)}

-

{internal_to_time(d.end_point)}

-
-
))} -
-
-
Dienstag
- {entries["tu"].map(d => (
+
+
+
Montag
+
Dienstag
+
Mittwoch
+
Donnerstag
+
Freitag
+
Samstag
+
+
+
+
-
-

{internal_to_time(d.start_point)}

-

{internal_to_time(d.end_point)}

-
-
))} -
-
-
Mittwoch
- {entries["we"].map(d => (
-
-

{internal_to_time(d.start_point)}

-

{internal_to_time(d.end_point)}

-
-
))} -
-
-
Donnerstag
- {entries["th"].map(d => (
+ {entries["mo"].map(d => (
+
+

{internal_to_time(d.start_point)}

+

{internal_to_time(d.end_point)}

+
+
))} +
+
-
-

{internal_to_time(d.start_point)}

-

{internal_to_time(d.end_point)}

-
-
))} -
-
-
Freitag
- {entries["fr"].map(d => (
-
-

{internal_to_time(d.start_point)}

-

{internal_to_time(d.end_point)}

-
-
))} -
-
-
Samstag
- {entries["sa"].map(d => (
-
-

{internal_to_time(d.start_point)}

-

{internal_to_time(d.end_point)}

-
-
))} + {entries["tu"].map(d => (
+ +
+

{internal_to_time(d.start_point)}

+

{internal_to_time(d.end_point)}

+
+
))} +
+
+ + + {entries["we"].map(d => (
+ +
+

{internal_to_time(d.start_point)}

+

{internal_to_time(d.end_point)}

+
+
))} +
+
+ + {entries["th"].map(d => (
+ +
+

{internal_to_time(d.start_point)}

+

{internal_to_time(d.end_point)}

+
+
))} +
+
+ + + {entries["fr"].map(d => (
+
+

{internal_to_time(d.start_point)}

+

{internal_to_time(d.end_point)}

+
+
))} +
+
+ + + {entries["sa"].map(d => (
+
+

{internal_to_time(d.start_point)}

+

{internal_to_time(d.end_point)}

+
+
))} +
diff --git a/anwendung/src/pages/index.js b/anwendung/src/pages/index.js index 725d8a2..a226772 100644 --- a/anwendung/src/pages/index.js +++ b/anwendung/src/pages/index.js @@ -17,6 +17,7 @@ export default function Home(p) { return ( <> +
diff --git a/anwendung/src/styles/globals.css b/anwendung/src/styles/globals.css index ca3baea..73b0be0 100644 --- a/anwendung/src/styles/globals.css +++ b/anwendung/src/styles/globals.css @@ -188,9 +188,21 @@ Calender View .calender-container { - margin-top: 100px; max-height: 300px; overflow-y: scroll; + border-bottom: 2px solid #5d606e; +} + +.wochen-tag-container +{ + display: flex; + flex-direction: row; + justify-content: space-between; + margin-right: 1.5%; + height: 25px; + background-color: #5d606e; + border: 2px solid #5d606e; + border-radius: 5px 5px 0 0; } .calender-view @@ -207,10 +219,9 @@ Calender View display: flex; flex-direction: row; align-items: stretch; - border-radius: 5px; justify-content: stretch; gap: 2px; - padding: 2px; + padding: 0 2px 0 2px; user-select: none; } @@ -221,16 +232,16 @@ Calender View background-color: white; display: grid; grid-template-columns: 100%; - grid-template-rows: repeat(100, 10px); + grid-template-rows: repeat(96, 10px); } -.spalte .wochen-tag +.wochen-tag-container .wochen-tag { text-align: center; background-color: #f80000; - width: 100%; + width: 16%; color: white; - border-radius: 5px 5px 0 0; + border-radius: 5px; display: flex; align-items: center; justify-content: center; @@ -262,4 +273,6 @@ Calender View { color: white; font-size: 5px; -} \ No newline at end of file + cursor: default; + pointer-events: none; +}