diff --git a/anwendung/src/components/CalenderEntry.js b/anwendung/src/components/CalenderEntry.js index 67da2ae..dc0013c 100644 --- a/anwendung/src/components/CalenderEntry.js +++ b/anwendung/src/components/CalenderEntry.js @@ -4,6 +4,6 @@ export class CalenderEntry { this.start_point = start_point; this.end_point = end_point; - this.parent = null; + this.colorID = 0; } } \ No newline at end of file diff --git a/anwendung/src/components/CalenderView.jsx b/anwendung/src/components/CalenderView.jsx index c78a7fa..cd0c214 100644 --- a/anwendung/src/components/CalenderView.jsx +++ b/anwendung/src/components/CalenderView.jsx @@ -8,6 +8,7 @@ let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []} //a variable that saves the currently grabbed resize bar let grabbed = null; let grabbedUp = false; +let grabbed_in_list = null; //a variable the saves if the mouse is pressed or not let mouseDown = false; @@ -24,6 +25,8 @@ let selectedListID = ""; //variable for the hight of one cell / row. Important for resizing the calender view let cellHeight = 25; +let colors = ["#f80000", "#414141"] + export default function CalenderView(p) { //state to update the calender view @@ -146,7 +149,7 @@ export default function CalenderView(p) //if a edge of an element was grabbed, resize it if (grabbed != null) { - size_grabbed(row, current_list); + size_grabbed(row, grabbed_in_list); //if a whole element was grabbed, move it } else if (selectedElement != null) { @@ -166,10 +169,12 @@ export default function CalenderView(p) //remove all selected elements if (grabbed != null) { + grabbed.colorID = 0; grabbed = null; } if (selectedElement != null) { + selectedElement.colorID = 0; selectedElement = null; } @@ -261,6 +266,8 @@ export default function CalenderView(p) //get the startRow of the entry let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart); + grabbed_in_list = current_list; + //check if the upper or lower resize bar was grabbed if (row === rowStart) { @@ -272,12 +279,30 @@ export default function CalenderView(p) grabbed = find_current(row - 1, current_list); grabbedUp = false; } + + grabbed.colorID = 1; + + setT(!t); } //if a whole element was clicked to move else if (e.target.id === "entry") { + let rowStart = parseInt(window.getComputedStyle(e.target).gridRowStart); + selectedListID = e.currentTarget.id; - selectedElement = find_current(row, current_list); + + if(rowStart === row) + { + selectedElement = find_current(row + 1, current_list); + } + else + { + selectedElement = find_current(row, current_list); + } + + selectedElement.colorID = 1; + + setT(!t); selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart); selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row; @@ -347,6 +372,7 @@ export default function CalenderView(p) gridRowEnd: d.end_point, gridColumnStart: 0, gridColumnEnd: 0, + backgroundColor: colors[d.colorID], }} id={"entry"}> {/*content of the entry / element*/} {/*upper resize bar*/} @@ -369,7 +395,8 @@ export default function CalenderView(p) {entries["tu"].map(d => (
@@ -390,7 +417,8 @@ export default function CalenderView(p) {entries["we"].map(d => (
@@ -410,7 +438,8 @@ export default function CalenderView(p) {entries["th"].map(d => (
@@ -431,7 +460,8 @@ export default function CalenderView(p) {entries["fr"].map(d => (
@@ -451,7 +481,8 @@ export default function CalenderView(p) {entries["sa"].map(d => (
diff --git a/anwendung/src/styles/globals.css b/anwendung/src/styles/globals.css index e9174e5..6ae40b4 100644 --- a/anwendung/src/styles/globals.css +++ b/anwendung/src/styles/globals.css @@ -270,7 +270,6 @@ Calender View .entry { - background-color: #f80000; border-radius: 10px; display: flex; flex-direction: column; @@ -280,8 +279,8 @@ Calender View cursor: move; z-index: 10; overflow: hidden; - margin-top: 4px; - margin-bottom: 4px; + margin-top: 1px; + margin-bottom: 1px; } .entry .resize-grab