113 lines
4.5 KiB
JavaScript
113 lines
4.5 KiB
JavaScript
let dateOptions = {month: 'short', year: 'numeric'};
|
|
document.addEventListener('DOMContentLoaded', () =>
|
|
{
|
|
// check if the user is logged in, if not redirect to log in
|
|
/* fetch('/api/user/isLoggedIn').then(res =>
|
|
{
|
|
if (!res.ok)
|
|
{
|
|
window.location.href = './';
|
|
}
|
|
});*/
|
|
document.querySelector("#dateFrom").max = new Date().toISOString().split("T")[0];
|
|
|
|
|
|
fetch("/api/timelineData/edu").then(res =>
|
|
{
|
|
res.json().then(json =>
|
|
{
|
|
if (res.ok)
|
|
{
|
|
for (let i = 0; i < json.length; i++)
|
|
{
|
|
let timelineItem = document.createElement("form")
|
|
timelineItem.id = "timelineItem" + i;
|
|
timelineItem.classList.add("timelineItem");
|
|
timelineItem.onsubmit = e => updateItem(i, e);
|
|
timelineItem.innerHTML = `
|
|
<div class="modifyBtnContainer">
|
|
<button class="edit" type="button" id="edit${i}" onclick="edit(${i})"><i class="fa-solid fa-pen-to-square"></i></button>
|
|
<button class="delete" type="button" id="delete${i}"><i class="fa-solid fa-trash"></i></button>
|
|
</div>
|
|
<div class="dateContainer formControl">
|
|
<input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${json[i]['startPeriod']}">
|
|
-
|
|
<input type="date" name="dateTo${i}" id="dateTo${i}" value="${json[i]['endPeriod']}">
|
|
</div>
|
|
<h3 class="timelineHeader">${new Date(json[i]["startPeriod"]).toLocaleString('en-gb', dateOptions)} - ${new Date(json[i]["endPeriod"]).toLocaleString('en-gb', dateOptions)}</h3>
|
|
<div class="gradeContainer formControl">
|
|
<label for="grade${i}">Grade:</label>
|
|
<input type="text" name="grade${i}" id="grade${i}" value="${json[i]['grade']}" disabled>
|
|
</div>
|
|
<div class="formControl">
|
|
<textarea class="courseText" name="course${i}" id="course${i}" cols="10" rows="3" disabled>${json[i]['course']}</textarea>
|
|
</div>
|
|
|
|
<div class="error hidden" id="eduError">
|
|
<button class="close" type="button">×</button>
|
|
<div></div>
|
|
</div>
|
|
<input type="submit" value="Change">
|
|
`;
|
|
document.getElementById("edu").appendChild(timelineItem);
|
|
}
|
|
return;
|
|
}
|
|
document.querySelector("#edu").innerHTML = "No education data found";
|
|
})
|
|
});
|
|
})
|
|
|
|
document.querySelector("#navOpen").addEventListener("click", e =>
|
|
{
|
|
document.querySelector("nav.sideNav").style.removeProperty("width");
|
|
document.querySelector("main.editor").style.removeProperty("margin-left");
|
|
e.target.style.removeProperty("visibility");
|
|
});
|
|
|
|
document.querySelector("#navClose").addEventListener("click", () =>
|
|
{
|
|
document.querySelector("nav.sideNav").style.width = "0";
|
|
document.querySelector("main.editor").style.marginLeft = "0";
|
|
document.querySelector("#navOpen").style.visibility = "visible";
|
|
});
|
|
|
|
function edit(i)
|
|
{
|
|
document.querySelector("#timelineItem" + i).classList.toggle("editing");
|
|
document.querySelector("#grade" + i).removeAttribute("disabled");
|
|
document.querySelector("#course" + i).removeAttribute("disabled");
|
|
}
|
|
|
|
function updateItem(i, e)
|
|
{
|
|
e.preventDefault();
|
|
let data = new FormData();
|
|
data.append("dateFrom", document.querySelector("#dateFrom" + i).value);
|
|
data.append("dateTo", document.querySelector("#dateTo" + i).value);
|
|
data.append("grade", document.querySelector("#grade" + i).value);
|
|
data.append("course", document.querySelector("#course" + i).value);
|
|
|
|
fetch("/api/timelineData/edu/" + i, {
|
|
method: "PUT",
|
|
body: data,
|
|
headers: {
|
|
"Authorization": "Bearer " + localStorage.getItem("token")
|
|
}
|
|
}).then(res =>
|
|
{
|
|
if (res.ok)
|
|
{
|
|
document.querySelector("#timelineItem" + i).classList.toggle("editing");
|
|
document.querySelector("#grade" + i).setAttribute("disabled", "");
|
|
document.querySelector("#course" + i).setAttribute("disabled", "");
|
|
return;
|
|
}
|
|
|
|
res.json().then(json =>
|
|
{
|
|
alert(json.message);
|
|
})
|
|
|
|
})
|
|
} |