Days Grayed Out

This commit is contained in:
brausjonas
2023-06-09 14:22:18 +02:00
parent b93c05b874
commit 74fbf38ecd
4 changed files with 77275 additions and 16 deletions
+1 -1
View File
@@ -58,7 +58,7 @@ export default function BasicDateCalendar(p) {
backgroundColor: getBackMonthColor(index) ? "#346991":"rgba(0,0,0,0)", backgroundColor: getBackMonthColor(index) ? "#346991":"rgba(0,0,0,0)",
color : getBackMonthColor(index) ? "white":"black", color : getBackMonthColor(index) ? "white":"black",
borderRadius : 10 borderRadius : 10
}}>{getMonthName(index)}</p> }}>{getMonthName(index) + " " + new Date(parseInt(startParts[2]), parseInt(startParts[1]) + index - 1, 1).getFullYear()}</p>
<div className={"Days"} style={{ <div className={"Days"} style={{
pointerEvents: "none" pointerEvents: "none"
}}> }}>
+35 -15
View File
@@ -12,14 +12,18 @@ let cellHeight = 20;
let colors = ["#f80000", "#414141"] let colors = ["#f80000", "#414141"]
let semesterStart; let semesterStart;
let semesterEnd;
let currentWeekStartDay; let currentWeekStartDay;
let currentYear; let currentYear;
let semesterStartYear;
let semesterEndYear;
let selectedElement; let selectedElement;
let grabbedDown; let grabbedDown;
let isDayOkay = [true, true, true, true, true, true] let isDayOkay = [true, true, true, true, true, true]
let errorState = ErrorType.Okay let errorState = ErrorType.Okay
let grayedOut = [false, false, false, false, false, false]
export default function CalenderView(p) { export default function CalenderView(p) {
@@ -27,15 +31,14 @@ export default function CalenderView(p) {
const [update, setUpdate] = useState(false) const [update, setUpdate] = useState(false)
const scrollRef = useRef(null); const scrollRef = useRef(null);
const[startDayCalenderSideBar, setStartDayCalenderSideBar] = useState(0) const [startDayCalenderSideBar, setStartDayCalenderSideBar] = useState(0)
const[startYearCalenderSideBar, setStartYearCalenderSideBar] = useState(2000) const [startYearCalenderSideBar, setStartYearCalenderSideBar] = useState(2000)
const[endDayCalenderSideBar, setEndDayCalenderSideBar] = useState(0) const [endDayCalenderSideBar, setEndDayCalenderSideBar] = useState(0)
const[endYearCalenderSideBar, setEndYearCalenderSideBar] = useState(2000) const [endYearCalenderSideBar, setEndYearCalenderSideBar] = useState(2000)
const [highlightMonth, setHighlightMonth] = useState(0) const [highlightMonth, setHighlightMonth] = useState(0)
const [highlightYear, setHighlightYear] = useState(2000) const [highlightYear, setHighlightYear] = useState(2000)
function readEntries() { function readEntries() {
let url = baseURL + "/entries?semesterid=" + localStorage.getItem("currentsid") + let url = baseURL + "/entries?semesterid=" + localStorage.getItem("currentsid") +
"&daynumber=" + currentWeekStartDay + "&yearnumber=" + currentYear + "&sessionid=" + localStorage.getItem("sessionid"); "&daynumber=" + currentWeekStartDay + "&yearnumber=" + currentYear + "&sessionid=" + localStorage.getItem("sessionid");
@@ -93,6 +96,13 @@ export default function CalenderView(p) {
} }
} }
let j = 0;
for(let i = Math.round(((new Date(currentYear, 0, currentWeekStartDay) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))); i <= Math.round(((new Date(currentYear, 0, currentWeekStartDay + 5) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))); i++)
{
grayedOut[j] = i % Math.round(((new Date(currentYear, 11, 31) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))) < semesterStart && semesterEnd && new Date(currentYear, 0, currentWeekStartDay + j).getFullYear() == semesterStartYear || i % Math.round(((new Date(currentYear, 11, 31) - new Date(currentYear, 0, 0)) / (1000 * 60 * 60 * 24))) > semesterEnd && new Date(currentYear, 0, currentWeekStartDay + j).getFullYear() == semesterEndYear
j++
}
setEntries(en) setEntries(en)
}) })
} catch (e) { } catch (e) {
@@ -248,7 +258,9 @@ export default function CalenderView(p) {
if (!currentId.includes("grab")) { if (!currentId.includes("grab")) {
if (!checkForElementAtRow(row + 2, currentColumnID)) { if (!checkForElementAtRow(row + 2, currentColumnID)) {
if ((row - 1) / 4 >= 7 && (row + 2) / 4 <= 18) { if ((row - 1) / 4 >= 7 && (row + 2) / 4 <= 18) {
pushEntry(currentColumnID, row) if(!grayedOut[currentColumnID]) {
pushEntry(currentColumnID, row)
}
} }
} }
} else { } else {
@@ -313,6 +325,9 @@ export default function CalenderView(p) {
useEffect(() => { useEffect(() => {
semesterStart = 0; semesterStart = 0;
semesterEnd = 0;
semesterStartYear = 0;
semesterEndYear = 0;
currentWeekStartDay = 0; currentWeekStartDay = 0;
currentYear = 2000; currentYear = 2000;
selectedElement = null; selectedElement = null;
@@ -333,6 +348,9 @@ export default function CalenderView(p) {
setHighlightYear(currentYear) setHighlightYear(currentYear)
semesterStart = s.startday; semesterStart = s.startday;
semesterEnd = s.endday;
semesterStartYear = s.startyear;
semesterEndYear = s.endyear;
setStartDayCalenderSideBar(semesterStart) setStartDayCalenderSideBar(semesterStart)
setEndDayCalenderSideBar(s.endday) setEndDayCalenderSideBar(s.endday)
}).then(readEntries) }).then(readEntries)
@@ -379,8 +397,7 @@ export default function CalenderView(p) {
temp.push(i); temp.push(i);
} }
function onMonthClick(monthIndex, startParts) function onMonthClick(monthIndex, startParts) {
{
monthIndex-- monthIndex--
let date = new Date(parseInt(startParts[2]), monthIndex, 1) let date = new Date(parseInt(startParts[2]), monthIndex, 1)
let start = new Date(date.getFullYear(), 0, 0) let start = new Date(date.getFullYear(), 0, 0)
@@ -401,7 +418,10 @@ export default function CalenderView(p) {
alignItems: "center" alignItems: "center"
}}> }}>
<div> <div>
<BasicDateCalendar startyear={startYearCalenderSideBar} startday={startDayCalenderSideBar} endyear={endYearCalenderSideBar} endday={endDayCalenderSideBar} highlightYear={highlightYear} highlightMonth={highlightMonth} onMonthClick={onMonthClick}/> <BasicDateCalendar startyear={startYearCalenderSideBar} startday={startDayCalenderSideBar}
endyear={endYearCalenderSideBar} endday={endDayCalenderSideBar}
highlightYear={highlightYear} highlightMonth={highlightMonth}
onMonthClick={onMonthClick}/>
</div> </div>
<div style={{ <div style={{
display: "flex", display: "flex",
@@ -449,7 +469,7 @@ export default function CalenderView(p) {
<div className={"spalte"} <div className={"spalte"}
id={"0"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}} id={"0"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[0] ? "#aaaaaa" : "#ffffff"}}
onMouseDown={e => onMouseDown(e)} onMouseDown={e => onMouseDown(e)}
onMouseMove={e => onMouseMove(e)} onMouseMove={e => onMouseMove(e)}
onMouseUp={e => onMouseUp(e)}> onMouseUp={e => onMouseUp(e)}>
@@ -475,7 +495,7 @@ export default function CalenderView(p) {
<div className={"spalte"} <div className={"spalte"}
id={"1"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}} id={"1"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[1] ? "#aaaaaa" : "#ffffff"}}
onMouseDown={e => onMouseDown(e)} onMouseDown={e => onMouseDown(e)}
onMouseMove={e => onMouseMove(e)} onMouseMove={e => onMouseMove(e)}
onMouseUp={e => onMouseUp(e)}> onMouseUp={e => onMouseUp(e)}>
@@ -502,7 +522,7 @@ export default function CalenderView(p) {
<div className={"spalte"} <div className={"spalte"}
id={"2"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}} id={"2"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[2] ? "#aaaaaa" : "#ffffff"}}
onMouseDown={e => onMouseDown(e)} onMouseDown={e => onMouseDown(e)}
onMouseMove={e => onMouseMove(e)} onMouseMove={e => onMouseMove(e)}
onMouseUp={e => onMouseUp(e)}> onMouseUp={e => onMouseUp(e)}>
@@ -530,7 +550,7 @@ export default function CalenderView(p) {
<div className={"spalte"} <div className={"spalte"}
id={"3"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}} id={"3"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[3] ? "#aaaaaa" : "#ffffff"}}
onMouseDown={e => onMouseDown(e)} onMouseDown={e => onMouseDown(e)}
onMouseMove={e => onMouseMove(e)} onMouseMove={e => onMouseMove(e)}
onMouseUp={e => onMouseUp(e)}> onMouseUp={e => onMouseUp(e)}>
@@ -557,7 +577,7 @@ export default function CalenderView(p) {
<div className={"spalte"} <div className={"spalte"}
id={"4"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}} id={"4"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[4] ? "#aaaaaa" : "#ffffff"}}
onMouseDown={e => onMouseDown(e)} onMouseDown={e => onMouseDown(e)}
onMouseMove={e => onMouseMove(e)} onMouseMove={e => onMouseMove(e)}
onMouseUp={e => onMouseUp(e)}> onMouseUp={e => onMouseUp(e)}>
@@ -584,7 +604,7 @@ export default function CalenderView(p) {
<div className={"spalte"} <div className={"spalte"}
id={"5"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}} id={"5"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`, backgroundColor: grayedOut[5] ? "#aaaaaa" : "#ffffff"}}
onMouseDown={e => onMouseDown(e)} onMouseDown={e => onMouseDown(e)}
onMouseMove={e => onMouseMove(e)} onMouseMove={e => onMouseMove(e)}
onMouseUp={e => onMouseUp(e)}> onMouseUp={e => onMouseUp(e)}>
Binary file not shown.
File diff suppressed because it is too large Load Diff