New Calender View Logic Concept
This commit is contained in:
brausjonas
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
<div style={{display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", gap: 5}}>
|
||||
{/* resize butto*/}
|
||||
<Button text={"-"} fontSize={25} onClick={() =>
|
||||
{
|
||||
if (cellHeight - 5 >= 10) cellHeight -= 5;
|
||||
setT(!t);
|
||||
}} width={50} height={50}/>
|
||||
{/*shows the day over the columns*/}
|
||||
<div id={t} style={{border: "5px solid #363636", borderRadius: 10}}>
|
||||
|
||||
|
||||
<div style={{border: "5px solid #363636", borderRadius: 10}}>
|
||||
<div style={{backgroundColor: "#363636"}}>
|
||||
<div className={"wochen-tag-container"}>
|
||||
<div className={"wochen-tag font-big"}>Montag</div>
|
||||
@@ -355,53 +401,24 @@ export default function CalenderView(p)
|
||||
<div className={"wochen-tag font-big"}>Samstag</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*the viewport of the actual calender*/}
|
||||
<div className={"calender-container"}>
|
||||
|
||||
{/*the content of the calender (rows and columns)*/}
|
||||
<div className={"calender-view content"} style={{height: cellHeight * 96 + 10}}>
|
||||
|
||||
{/*a row which contains all the entries of monday*/}
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"mo"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
{/*maps all monday entries to new visible div elements*/}
|
||||
{entries["mo"].map(d => (<div className={"entry"} style={{
|
||||
<div className={"spalte"}
|
||||
id={"0"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}>
|
||||
|
||||
{entries[0].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point,
|
||||
gridColumnStart: 0,
|
||||
gridColumnEnd: 0,
|
||||
backgroundColor: colors[d.colorID],
|
||||
}} id={"entry"}>
|
||||
{/*content of the entry / element*/}
|
||||
{/*upper resize bar*/}
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: "#77932b"
|
||||
}} id={d.id + "e"}>
|
||||
<div></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
{/*shows the time span of the entry*/}
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
{/*lower resize bar*/}
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
{/*same as monday*/}
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"tu"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
{entries["tu"].map(d => (<div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point,
|
||||
backgroundColor: colors[d.colorID]
|
||||
}} id={"entry"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
@@ -409,21 +426,22 @@ export default function CalenderView(p)
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
{/*same as monday*/}
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"we"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
|
||||
{entries["we"].map(d => (<div className={"entry"} style={{
|
||||
<div className={"spalte"}
|
||||
id={"1"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}>
|
||||
|
||||
{entries[1].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point,
|
||||
backgroundColor: colors[d.colorID]
|
||||
}} id={"entry"}>
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: "#77932b"
|
||||
}} id={d.id + "e"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
@@ -431,20 +449,23 @@ export default function CalenderView(p)
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
{/*same as monday*/}
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"th"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
{entries["th"].map(d => (<div className={"entry"} style={{
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"2"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}>
|
||||
|
||||
|
||||
{entries[2].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point,
|
||||
backgroundColor: colors[d.colorID]
|
||||
}} id={"entry"}>
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: "#77932b"
|
||||
}} id={d.id + "e"}>
|
||||
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
<div></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
@@ -452,20 +473,22 @@ export default function CalenderView(p)
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
{/*same as monday*/}
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"fr"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
|
||||
{entries["fr"].map(d => (<div className={"entry"} style={{
|
||||
<div className={"spalte"}
|
||||
id={"3"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}>
|
||||
|
||||
{entries[3].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point,
|
||||
backgroundColor: colors[d.colorID]
|
||||
}} id={"entry"}>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: "#77932b"
|
||||
}} id={d.id + "e"}>
|
||||
|
||||
<div></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
@@ -473,20 +496,45 @@ export default function CalenderView(p)
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
{/*same as monday*/}
|
||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
||||
id={"sa"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
||||
|
||||
|
||||
{entries["sa"].map(d => (<div className={"entry"} style={{
|
||||
<div className={"spalte"}
|
||||
id={"4"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}>
|
||||
|
||||
|
||||
{entries[4].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.start_point,
|
||||
gridRowEnd: d.end_point,
|
||||
backgroundColor: colors[d.colorID]
|
||||
}} id={"entry"}>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: "#77932b"
|
||||
}} id={d.id + "e"}>
|
||||
<div></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"5"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}>
|
||||
|
||||
|
||||
{entries[5].map(d => (d != null && <div className={"entry"} style={{
|
||||
width: "100%",
|
||||
gridRowStart: d.timestart,
|
||||
gridRowEnd: d.timeend,
|
||||
backgroundColor: "#77932b"
|
||||
}} id={d.id + "e"}>
|
||||
<div></div>
|
||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
||||
<p>{internal_to_time(d.timestart) + " - " + internal_to_time(d.timeend)}</p>
|
||||
<p>Moduel etc.</p>
|
||||
<p>Mehr Infos</p>
|
||||
<p>Raum</p>
|
||||
@@ -496,7 +544,7 @@ export default function CalenderView(p)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*overlay with timeline*/}
|
||||
|
||||
<div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
|
||||
{/*maps a list of internal time stamps to lines and time stamps*/}
|
||||
{temp.map(i => (<div style={{
|
||||
@@ -553,16 +601,8 @@ export default function CalenderView(p)
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/*the second resize button*/}
|
||||
<Button text={"+"} fontSize={25} onClick={() =>
|
||||
{
|
||||
cellHeight += 5;
|
||||
setT(!t)
|
||||
}} width={50} height={50}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -20,6 +20,9 @@ export default function Login() {
|
||||
if (value != "failed") {
|
||||
localStorage.setItem("sessionid", value);
|
||||
|
||||
url = "http://localhost:8080/users/check?sessionid=" + value;
|
||||
fetch(url).then(r => r.json()).then(u => localStorage.setItem("userid", u.id))
|
||||
|
||||
await router.push("/semesteroverview")
|
||||
|
||||
} else {
|
||||
@@ -35,6 +38,7 @@ export default function Login() {
|
||||
const [backgroundColor, setBackgroundColor] = useState("rgb(255, 255, 255)")
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
return (
|
||||
// <div className="border">
|
||||
<login className={"login-container box-shadow"}>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import CalenderView from "@/components/CalenderView";
|
||||
|
||||
export default function planning(p)
|
||||
{
|
||||
|
||||
return (
|
||||
<CalenderView/>
|
||||
)
|
||||
}
|
||||
@@ -25,7 +25,9 @@ export default function SemesterOverview(p)
|
||||
if(m.target === m.currentTarget)
|
||||
{
|
||||
localStorage.setItem("currentsid", e.id)
|
||||
router.push("/planning")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onClickNewSemester()
|
||||
|
||||
@@ -322,7 +322,7 @@ Calender View
|
||||
justify-content: space-between;
|
||||
padding: 0 2px;
|
||||
align-items: center;
|
||||
cursor: move;
|
||||
/*cursor: move;*/
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
margin-top: 1px;
|
||||
|
||||
Reference in New Issue
Block a user