diff --git a/anwendung/src/components/CalenderEntry.js b/anwendung/src/components/CalenderEntry.js deleted file mode 100644 index dc0013c..0000000 --- a/anwendung/src/components/CalenderEntry.js +++ /dev/null @@ -1,9 +0,0 @@ -export class CalenderEntry -{ - constructor(start_point, end_point) - { - this.start_point = start_point; - this.end_point = end_point; - this.colorID = 0; - } -} \ No newline at end of file diff --git a/anwendung/src/components/CalenderView.jsx b/anwendung/src/components/CalenderView.jsx index cd0c214..cb29989 100644 --- a/anwendung/src/components/CalenderView.jsx +++ b/anwendung/src/components/CalenderView.jsx @@ -1,323 +1,375 @@ import {useEffect, useState} from "react"; -import {CalenderEntry} from "@/components/CalenderEntry"; import Button from "@/components/Button"; import {list} from "postcss"; -//all entries of the current week -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; - -//a variable that stores the currently grabbed element to move -let selectedElement = null; -//move offset from top row to cursor -let selectedOffsetTop = 0; -//move offset from bottom row to cursor -let selectedOffsetBottom = 0; -//the list, the grabbed element to move is currently in -let selectedListID = ""; +// //all entries of the current week +// 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; +// +// //a variable that stores the currently grabbed element to move +// let selectedElement = null; +// //move offset from top row to cursor +// let selectedOffsetTop = 0; +// //move offset from bottom row to cursor +// let selectedOffsetBottom = 0; +// //the list, the grabbed element to move is currently in +// 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 - const [t, setT] = useState(false) +let semesterStart; +let currentWeekStartDay; +let currentYear; - //a blocker for the right click context menu - useEffect(() => - { - window.addEventListener("contextmenu", (e) => (e.preventDefault())) - }) +export default function CalenderView(p) { - function does_element_overlap(entry, start, end, search_list) + const [entries, setEntries] = useState([[], [], [], [], [], []]) + + function readEntries() { + let url = "http://localhost:8080/entries?semesterid=" + localStorage.getItem("currentsid") + + "&daynumber=" + currentWeekStartDay + "&yearnumber=" + currentYear; + console.log(currentWeekStartDay) + fetch(url).then(r => r.json()).then(en => setEntries(en)) + } + + function pushEntry(currentColumnID, row) { - let current = null; - for(let i = 0; i < search_list.length; i++) + let url = "http://localhost:8080/entries" + let json = { + "id": 0, + "daynumber": currentWeekStartDay + currentColumnID, + "yearnumber": currentYear, + "semesterid": localStorage.getItem("currentsid"), + "usercreatedbyid": localStorage.getItem("userid"), + "timestart": row, + "timeend": row + 3, + "info": "" + } + fetch(url, { + method: "POST", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify(json) + }).then(r => {readEntries()}) + } + + function deleteEntry(id) + { + let url = "http://localhost:8080/entries?id=" + id; + fetch(url, { + method: "DELETE" + }).then(r => readEntries()) + } + + function onMouseDown(e) { + let y_window = e.clientY; + let y_target_offset = e.currentTarget.getBoundingClientRect().top; + let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1; + let currentColumnID = parseInt(e.currentTarget.id) + let currentId = e.target.id; + + if(e.button === 0) { - current = search_list[i]; - if(current !== entry) + pushEntry(currentColumnID, row) + } + else if(e.button === 2) + { + if(currentId.includes("e")) { - if (start > current.start_point && start < current.end_point) - { - return true; - } else if (end > current.start_point && end < current.end_point) - { - return true; - } else if (start <= current.start_point && end >= current.end_point) - { - return true; - } + let id = parseInt(currentId.replace("e", "")) + deleteEntry(id) } } - - return false; } + useEffect(() => { + semesterStart = 0; + currentWeekStartDay = 0; + currentYear = 2000; + + let url = "http://localhost:8080/semester/id?sessionid=" + localStorage.getItem("sessionid") + + "&id=" + localStorage.getItem("currentsid"); + + fetch(url).then(r => r.json()).then(s => { + currentWeekStartDay = s.startday - new Date(s.startyear, 0, s.startday).getUTCDay(); + currentYear = s.startyear; + semesterStart = s.startday; + }).then(readEntries) + + window.addEventListener("contextmenu", (e) => (e.preventDefault())) + }, []) + + // function does_element_overlap(entry, start, end, search_list) + // { + // let current = null; + // for(let i = 0; i < search_list.length; i++) + // { + // current = search_list[i]; + // if(current !== entry) + // { + // if (start > current.timestart && start < current.timeend) + // { + // return true; + // } else if (end > current.timestart && end < current.timeend) + // { + // return true; + // } else if (start <= current.timestart && end >= current.timeend) + // { + // return true; + // } + // } + // } + // + // return false; + // } + //function to delete an elemente and resize the corresponding list in the entries dictionary - function delete_element(index, element) - { - let currentList = entries[index]; - let temp = [] - for (let i = 0; i < currentList.length; i++) - { - if (element !== currentList[i]) - { - temp.push(currentList[i]); - } - } - entries[index] = temp; - } + // function delete_element(index, element) + // { + // let currentList = entries[index]; + // let temp = [] + // for (let i = 0; i < currentList.length; i++) + // { + // if (element !== currentList[i]) + // { + // temp.push(currentList[i]); + // } + // } + // entries[index] = temp; + // } //resize a grabbed element to the row paramter - function size_grabbed(row, current_list) - { - if (row >= 0 && row <= 96) - { - if (grabbedUp) - { - console.log(grabbed.start_point) - - if (row < grabbed.end_point - 1) - { - if(!does_element_overlap(grabbed, row, grabbed.end_point, current_list)) - { - grabbed.start_point = row; - } - } - } else - { - if (row > grabbed.start_point) - { - if(!does_element_overlap(grabbed, grabbed.start_point, row + 1, current_list)) - { - grabbed.end_point = row + 1; - } - } - } - } - } + // function size_grabbed(row, current_list) + // { + // if (row >= 0 && row <= 96) + // { + // if (grabbedUp) + // { + // console.log(grabbed.timestart) + // + // if (row < grabbed.timeend - 1) + // { + // if(!does_element_overlap(grabbed, row, grabbed.timeend, current_list)) + // { + // grabbed.timestart = row; + // } + // } + // } else + // { + // if (row > grabbed.timestart) + // { + // if(!does_element_overlap(grabbed, grabbed.timestart, row + 1, current_list)) + // { + // grabbed.timeend = row + 1; + // } + // } + // } + // } + // } //moves the selected element to row and list with id - function move_selected(row, id) - { - if (selectedListID !== id) - { - if(!does_element_overlap(selectedElement, row - selectedOffsetTop, row + selectedOffsetBottom, entries[id])) - { - delete_element(selectedListID, selectedElement); - entries[id].push(selectedElement); - selectedListID = id; - } - } - - if (row - selectedOffsetTop > 0 && row + selectedOffsetBottom <= 97) - { - if(!does_element_overlap(selectedElement, row - selectedOffsetTop, row + selectedOffsetBottom, entries[id])) - { - selectedElement.start_point = row - selectedOffsetTop; - selectedElement.end_point = row + selectedOffsetBottom; - } - } - } + // function move_selected(row, id) + // { + // if (selectedListID !== id) + // { + // if(!does_element_overlap(selectedElement, row - selectedOffsetTop, row + selectedOffsetBottom, entries[id])) + // { + // delete_element(selectedListID, selectedElement); + // entries[id].push(selectedElement); + // selectedListID = id; + // } + // } + // + // if (row - selectedOffsetTop > 0 && row + selectedOffsetBottom <= 97) + // { + // if(!does_element_overlap(selectedElement, row - selectedOffsetTop, row + selectedOffsetBottom, entries[id])) + // { + // selectedElement.timestart = row - selectedOffsetTop; + // selectedElement.timeend = row + selectedOffsetBottom; + // } + // } + // } //routine, when mouse is moved - function mouse_move(e) - { - //checks if mouse is still down - if (mouseDown) - { - //get the y coordinate of the cursor - let y_window = e.clientY; - //get the offset to the calender view - let y_target_offset = e.currentTarget.getBoundingClientRect().top; - //get the id of the current column - let id = e.currentTarget.id; - //calcultes the current row the cursor hovers - let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1 - let current_list = entries[e.currentTarget.id]; - - //if a edge of an element was grabbed, resize it - if (grabbed != null) - { - size_grabbed(row, grabbed_in_list); - //if a whole element was grabbed, move it - } else if (selectedElement != null) - { - move_selected(row, id); - } - } - - //update the calender view - setT(!t); - } + // function mouse_move(e) + // { + // //checks if mouse is still down + // if (mouseDown) + // { + // //get the y coordinate of the cursor + // let y_window = e.clientY; + // //get the offset to the calender view + // let y_target_offset = e.currentTarget.getBoundingClientRect().top; + // //get the id of the current column + // let id = e.currentTarget.id; + // //calcultes the current row the cursor hovers + // let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1 + // let current_list = entries[e.currentTarget.id]; + // + // //if a edge of an element was grabbed, resize it + // if (grabbed != null) + // { + // size_grabbed(row, grabbed_in_list); + // //if a whole element was grabbed, move it + // } else if (selectedElement != null) + // { + // move_selected(row, id); + // } + // } + // + // //update the calender view + // setT(!t); + // } //routine when mouse was released - function mouse_up(e) - { - mouseDown = false; + // function mouse_up(e) + // { + // mouseDown = false; + // + // //remove all selected elements + // if (grabbed != null) + // { + // grabbed.colorID = 0; + // grabbed = null; + // } + // if (selectedElement != null) + // { + // selectedElement.colorID = 0; + // selectedElement = null; + // } + // + // setT(!t); + // } - //remove all selected elements - if (grabbed != null) - { - grabbed.colorID = 0; - grabbed = null; - } - if (selectedElement != null) - { - selectedElement.colorID = 0; - selectedElement = null; - } - - setT(!t); - } - - //find the current element on row in the selected list (search_list) - function find_current(row, search_list) - { - let current = null; - for (let i = 0; i < search_list.length; i++) - { - current = search_list[i]; - if (current.start_point <= row && current.end_point >= row) - { - break; - } - current = null; - } - - return current; - } //places a new entry to the calender - function place_new_entry(row, list) - { - if (row < 96) - { - let free = true; - for (let i = 0; i < list.length; i++) - { - let current = list[i]; - - for (let r = row; r < row + 3; r++) - { - for (let s = current.start_point; s < current.end_point; s++) - { - if (s === r) - { - free = false; - break; - } - } - } - } - - if (free) - { - list.push(new CalenderEntry(row, row + 3)); - setT(!t); - } - } - } + // function place_new_entry(row, list) + // { + // if (row < 96) + // { + // let free = true; + // for (let i = 0; i < list.length; i++) + // { + // let current = list[i]; + // + // for (let r = row; r < row + 3; r++) + // { + // for (let s = current.timestart; s < current.timeend; s++) + // { + // if (s === r) + // { + // free = false; + // break; + // } + // } + // } + // } + // + // if (free) + // { + // list.push(new CalenderEntry(row, row + 3)); + // setT(!t); + // } + // } + // } //routine when mouse was pressed - function mouse_down(e) - { - - //get the cursors y coordinate in the window - let y_window = e.clientY; - //get the offset of the calender view - let y_target_offset = e.currentTarget.getBoundingClientRect().top; - //calculate the row clicked on - let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1; - //get the list of entries clicked on - let current_list = entries[e.currentTarget.id]; - - //if right clicked - if (e.button === 2) - { - //if right clicked on an element / entry delete it - let current = find_current(row, current_list); - - if (current != null) - { - delete_element(e.currentTarget.id, current); - } - - } - else - { - mouseDown = true; - - //if a resize bar was grabbed - if (e.target.id === "grab") - { - //get the entry the resize bar is child of - let entry = e.target.parentElement; - //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) - { - //+ / - 1 to avoid select the wrong element when overlapping - grabbed = find_current(row + 1, current_list); - grabbedUp = true; - } else - { - 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; - - 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; - } - //single click places a new entry - else - { - place_new_entry(row, current_list) - } - } - } + // function mouse_down(e) + // { + // + // //get the cursors y coordinate in the window + // let y_window = e.clientY; + // //get the offset of the calender view + // let y_target_offset = e.currentTarget.getBoundingClientRect().top; + // //calculate the row clicked on + // let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1; + // //get the list of entries clicked on + // let current_list = entries[e.currentTarget.id]; + // + // //if right clicked + // if (e.button === 2) + // { + // //if right clicked on an element / entry delete it + // let current = find_current(row, current_list); + // + // if (current != null) + // { + // delete_element(e.currentTarget.id, current); + // } + // + // } + // else + // { + // mouseDown = true; + // + // //if a resize bar was grabbed + // if (e.target.id === "grab") + // { + // //get the entry the resize bar is child of + // let entry = e.target.parentElement; + // //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) + // { + // //+ / - 1 to avoid select the wrong element when overlapping + // grabbed = find_current(row + 1, current_list); + // grabbedUp = true; + // } else + // { + // 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; + // + // 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; + // } + // //single click places a new entry + // else + // { + // place_new_entry(row, current_list) + // } + // } + // } //returns internal format (0 - 96) to a string - function internal_to_time(internal) - { + function internal_to_time(internal) { internal -= 1 internal /= 4 let integer = Math.floor(internal) @@ -328,23 +380,17 @@ export default function CalenderView(p) } let temp = [] - for (let i = 2; i <= 96; i += 2) - { + for (let i = 2; i <= 96; i += 2) { temp.push(i); } - //html of the calender view + return ( - // calender outer container, contains the calender view and resize buttons +