Days Grayed Out
This commit is contained in:
@@ -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"
|
||||||
}}>
|
}}>
|
||||||
|
|||||||
@@ -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
Reference in New Issue
Block a user