my-portfolio/src/editor/js/editor.js
2022-10-09 16:02:07 +01:00

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">&times;</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);
})
})
}