Calender View Sync Prototype Working Correctly
This commit is contained in:
brausjonas
@@ -1,49 +1,32 @@
|
||||
import {useEffect, useState} from "react";
|
||||
import Button from "@/components/Button";
|
||||
import {list} from "postcss";
|
||||
import Background from "@/components/Background";
|
||||
import WeekSelector from "@/components/WeekSelector";
|
||||
|
||||
// //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 cellHeight = 20;
|
||||
|
||||
let colors = ["#f80000", "#414141"]
|
||||
|
||||
let semesterStart;
|
||||
let currentWeekStartDay;
|
||||
let currentYear;
|
||||
let selectedElement;
|
||||
|
||||
export default function CalenderView(p) {
|
||||
|
||||
const [entries, setEntries] = useState([[], [], [], [], [], []])
|
||||
const [update, setUpdate] = useState(false)
|
||||
|
||||
function readEntries() {
|
||||
let url = "http://localhost:8080/entries?semesterid=" + localStorage.getItem("currentsid") +
|
||||
"&daynumber=" + currentWeekStartDay + "&yearnumber=" + currentYear;
|
||||
"&daynumber=" + currentWeekStartDay + "&yearnumber=" + currentYear + "&sessionid=" + localStorage.getItem("sessionid");
|
||||
console.log(currentWeekStartDay)
|
||||
fetch(url).then(r => r.json()).then(en => setEntries(en))
|
||||
}
|
||||
|
||||
function pushEntry(currentColumnID, row)
|
||||
{
|
||||
let url = "http://localhost:8080/entries"
|
||||
function pushEntry(currentColumnID, row) {
|
||||
let url = "http://localhost:8080/entries" + "?sessionid=" + localStorage.getItem("sessionid")
|
||||
let json = {
|
||||
"id": 0,
|
||||
"daynumber": currentWeekStartDay + currentColumnID,
|
||||
@@ -58,17 +41,89 @@ export default function CalenderView(p) {
|
||||
method: "POST",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify(json)
|
||||
}).then(r => {readEntries()})
|
||||
}).then(r => {
|
||||
readEntries()
|
||||
})
|
||||
}
|
||||
|
||||
function deleteEntry(id)
|
||||
{
|
||||
let url = "http://localhost:8080/entries?id=" + id;
|
||||
function deleteEntry(id) {
|
||||
let url = "http://localhost:8080/entries?id=" + id + "&sessionid=" + localStorage.getItem("sessionid");
|
||||
fetch(url, {
|
||||
method: "DELETE"
|
||||
}).then(r => readEntries())
|
||||
}
|
||||
|
||||
function checkForElementAtRow(row, column) {
|
||||
let currentList = entries[column];
|
||||
for (let i = 0; i < currentList.length; i++) {
|
||||
if (currentList[i] != null) {
|
||||
if (row >= currentList[i].timestart && row <= currentList[i].timeend) {
|
||||
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getElementInColumn(id, column) {
|
||||
let currentList = entries[column];
|
||||
for (let i = 0; i < currentList.length; i++) {
|
||||
if (currentList[i] != null) {
|
||||
if (currentList[i].id === id) {
|
||||
return currentList[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function onMouseUp(e) {
|
||||
if (selectedElement != null) {
|
||||
let id = selectedElement.id;
|
||||
|
||||
let url = "http://localhost:8080/entries?sessionid=" + localStorage.getItem("sessionid");
|
||||
let json = {
|
||||
"id": id,
|
||||
"daynumber": 0,
|
||||
"yearnumber": 0,
|
||||
"semesterid": 0,
|
||||
"usercreatedbyid": 0,
|
||||
"timestart": 0,
|
||||
"timeend": selectedElement.timeend,
|
||||
"info": ""
|
||||
}
|
||||
fetch(url, {
|
||||
method: "PUT",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify(json)
|
||||
}).then(r => {
|
||||
readEntries()
|
||||
})
|
||||
|
||||
selectedElement = null;
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseMove(e) {
|
||||
if (selectedElement != null) {
|
||||
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)
|
||||
|
||||
if (selectedElement.timestart < row - 1) {
|
||||
selectedElement.timeend = row + 1;
|
||||
}
|
||||
|
||||
setUpdate(!update);
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
let y_window = e.clientY;
|
||||
let y_target_offset = e.currentTarget.getBoundingClientRect().top;
|
||||
@@ -76,24 +131,40 @@ export default function CalenderView(p) {
|
||||
let currentColumnID = parseInt(e.currentTarget.id)
|
||||
let currentId = e.target.id;
|
||||
|
||||
if(e.button === 0)
|
||||
{
|
||||
pushEntry(currentColumnID, row)
|
||||
}
|
||||
else if(e.button === 2)
|
||||
{
|
||||
if(currentId.includes("e"))
|
||||
{
|
||||
if (e.button === 0) {
|
||||
if (!currentId.includes("e")) {
|
||||
if (!currentId.includes("grab")) {
|
||||
if (!checkForElementAtRow(row + 2, currentColumnID)) {
|
||||
pushEntry(currentColumnID, row)
|
||||
}
|
||||
} else {
|
||||
let parentID = parseInt(e.target.parentElement.id.replace("e", ""));
|
||||
selectedElement = getElementInColumn(parentID, currentColumnID);
|
||||
}
|
||||
}
|
||||
} else if (e.button === 2) {
|
||||
if (currentId.includes("e")) {
|
||||
let id = parseInt(currentId.replace("e", ""))
|
||||
deleteEntry(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onWeekLeft() {
|
||||
currentWeekStartDay -= 7;
|
||||
readEntries()
|
||||
}
|
||||
|
||||
function onWeekRight() {
|
||||
currentWeekStartDay += 7;
|
||||
readEntries()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
semesterStart = 0;
|
||||
currentWeekStartDay = 0;
|
||||
currentYear = 2000;
|
||||
selectedElement = null;
|
||||
|
||||
let url = "http://localhost:8080/semester/id?sessionid=" + localStorage.getItem("sessionid") +
|
||||
"&id=" + localStorage.getItem("currentsid");
|
||||
@@ -107,266 +178,6 @@ export default function CalenderView(p) {
|
||||
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;
|
||||
// }
|
||||
|
||||
//resize a grabbed element to the row paramter
|
||||
// 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.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);
|
||||
// }
|
||||
|
||||
//routine when mouse was released
|
||||
// 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);
|
||||
// }
|
||||
|
||||
|
||||
//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.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)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
//returns internal format (0 - 96) to a string
|
||||
function internal_to_time(internal) {
|
||||
@@ -387,219 +198,247 @@ export default function CalenderView(p) {
|
||||
|
||||
return (
|
||||
|
||||
<div style={{display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", gap: 5}}>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
height: "100vh",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: 15
|
||||
}}>
|
||||
<WeekSelector year={currentYear} startday={currentWeekStartDay} onFunctionLeft={() => onWeekLeft()}
|
||||
onFunctionRight={() => onWeekRight()}/>
|
||||
<div id={update} style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: 5
|
||||
}}>
|
||||
|
||||
|
||||
<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>
|
||||
<div className={"wochen-tag font-big"}>Dienstag</div>
|
||||
<div className={"wochen-tag font-big"}>Mittwoch</div>
|
||||
<div className={"wochen-tag font-big"}>Donnerstag</div>
|
||||
<div className={"wochen-tag font-big"}>Freitag</div>
|
||||
<div className={"wochen-tag font-big"}>Samstag</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"calender-container"}>
|
||||
|
||||
<div className={"calender-view content"} style={{height: cellHeight * 96 + 10}}>
|
||||
|
||||
|
||||
<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.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>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<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.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>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<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.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>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<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.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>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<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.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>
|
||||
</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>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
<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>
|
||||
<div className={"wochen-tag font-big"}>Dienstag</div>
|
||||
<div className={"wochen-tag font-big"}>Mittwoch</div>
|
||||
<div className={"wochen-tag font-big"}>Donnerstag</div>
|
||||
<div className={"wochen-tag font-big"}>Freitag</div>
|
||||
<div className={"wochen-tag font-big"}>Samstag</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"calender-container"}>
|
||||
|
||||
<div className={"calender-view content"} style={{height: cellHeight * 96 + 10}}>
|
||||
|
||||
|
||||
<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={{
|
||||
width: "100%",
|
||||
height: cellHeight * 2,
|
||||
borderBottom: "1px solid #363636",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center",
|
||||
}} className={"no-pointer-events"}>
|
||||
<div className={"spalte"}
|
||||
id={"0"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
</div>))}
|
||||
{entries[0].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>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"1"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
{entries[1].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>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"2"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
|
||||
{entries[2].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>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"3"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
{entries[3].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>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className={"spalte"}
|
||||
id={"4"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}
|
||||
onMouseDown={e => onMouseDown(e)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(e)}>
|
||||
|
||||
|
||||
{entries[4].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>
|
||||
</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)}
|
||||
onMouseMove={e => onMouseMove(e)}
|
||||
onMouseUp={e => onMouseUp(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>
|
||||
</div>
|
||||
<div className={"resize-grab"} id={"grab"}></div>
|
||||
</div>))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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={{
|
||||
width: "100%",
|
||||
height: cellHeight * 2,
|
||||
borderBottom: "1px solid #363636",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center",
|
||||
}} className={"no-pointer-events"}>
|
||||
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
<p style={{
|
||||
color: "gray",
|
||||
marginTop: cellHeight - 3,
|
||||
marginRight: 120,
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
}}>{internal_to_time(i + 1)}</p>
|
||||
</div>))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,17 +4,13 @@ function addDays(date, days) {
|
||||
return result;
|
||||
}
|
||||
|
||||
export default function DateElement(props){
|
||||
let startDate;
|
||||
let endDate;
|
||||
const currDate = new Date();
|
||||
export default function DateElement(p){
|
||||
|
||||
startDate = addDays(currDate, (currDate.getDay()-1)*-1); //berechnet den Montag der aktuellen Woche
|
||||
startDate = addDays(startDate, props.week*7); //erhöht das Datum um 7 Tage für jede Woche, die weiter geklickt wurde.
|
||||
endDate = addDays(startDate, 6);
|
||||
let startDate = new Date(p.year, 0, p.startday);
|
||||
let endDate = new Date(p.year, 0, p.startday + 5);
|
||||
|
||||
const startDateString = `${startDate.getDate()}.${startDate.getMonth()+1}.${startDate.getFullYear()}`;
|
||||
const endDateString = `${endDate.getDate()}.${endDate.getMonth()+1}.${endDate.getFullYear()}`;
|
||||
let startDateString = `${startDate.getDate()}.${startDate.getMonth()+1}.${startDate.getFullYear()}`;
|
||||
let endDateString = `${endDate.getDate()}.${endDate.getMonth()+1}.${endDate.getFullYear()}`;
|
||||
return (
|
||||
<>
|
||||
<div className="dateElement round-border">
|
||||
|
||||
@@ -6,14 +6,14 @@ import { useState } from 'react'
|
||||
|
||||
|
||||
|
||||
export default function WeekSelector(){
|
||||
const [weeks, setWeeks] = useState(0)
|
||||
export default function WeekSelector(p){
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="weekSelector">
|
||||
<Button icon={arrowLeft} onClick={() => setWeeks(weeks-1)} />
|
||||
<DateElement week={weeks}/>
|
||||
<Button icon={arrowRight} onClick={() => setWeeks(weeks+1)}/>
|
||||
<Button icon={arrowLeft} onClick={() => p.onFunctionLeft()} width={50} color={"#346991"}/>
|
||||
<DateElement year={p.year} startday={p.startday}/>
|
||||
<Button icon={arrowRight} onClick={() => p.onFunctionRight()} width={50} color={"#346991"}/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
import CalenderView from "@/components/CalenderView";
|
||||
import Background from "@/components/Background";
|
||||
|
||||
export default function planning(p)
|
||||
{
|
||||
|
||||
return (
|
||||
<CalenderView/>
|
||||
<>
|
||||
<Background/>
|
||||
<CalenderView/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -171,7 +171,9 @@ weekSelector
|
||||
width: 200px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0d52ce;
|
||||
background-color: #77932b;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.weekSelector {
|
||||
@@ -303,7 +305,7 @@ Calender View
|
||||
|
||||
.wochen-tag-container .wochen-tag {
|
||||
text-align: center;
|
||||
background-color: #f80000;
|
||||
background-color: #346991;
|
||||
width: 400px;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
|
||||
Reference in New Issue
Block a user