rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Being able to edit a timeline item fully working as currently tested.

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai
2022-10-09 23:32:50 +01:00
parent a5c7d16991
commit 7b04af165e
10 changed files with 163 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor/js/editor.js
+45 -30
View File
@@ -20,31 +20,32 @@ document.addEventListener('DOMContentLoaded', () =>
{
for (let i = 0; i < json.length; i++)
{
let id = json[i].ID;
let timelineItem = document.createElement("form")
timelineItem.id = "timelineItem" + i;
timelineItem.id = "timelineItem" + id;
timelineItem.classList.add("timelineItem");
timelineItem.onsubmit = e => updateItem(i, e);
timelineItem.onsubmit = e => updateEduItem(id, 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>
<button class="edit" type="button" id="edit${id}" onclick="edit(${id})"><i class="fa-solid fa-pen-to-square"></i></button>
<button class="delete" type="button" id="delete${id}" onclick="deleteEduItem(${id})"><i class="fa- 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="dateFrom${id}" id="dateFrom${id}" 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']}">
<input type="date" name="dateTo${id}" id="dateTo${id}" 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>
<h3 class="timelineHeader" id="timelineHeader${id}">${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>
<label for="grade${id}">Grade:</label>
<input type="text" name="grade${id}" id="grade${id}" 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>
<textarea class="courseText" name="course${id}" id="course${id}" cols="10" rows="3" disabled>${json[i]['course']}</textarea>
</div>
<div class="error hidden" id="eduError">
<button class="close" type="button">&times;</button>
<div class="error hidden" id="eduError${id}">
<button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>
<div></div>
</div>
<input type="submit" value="Change">
@@ -72,42 +73,56 @@ document.querySelector("#navClose").addEventListener("click", () =>
document.querySelector("#navOpen").style.visibility = "visible";
});
function edit(i)
/**
* Switches the timeline item between edit and view mode
* @param id the id of the timeline item
*/
function edit(id)
{
document.querySelector("#timelineItem" + i).classList.toggle("editing");
document.querySelector("#grade" + i).removeAttribute("disabled");
document.querySelector("#course" + i).removeAttribute("disabled");
document.querySelector("#timelineItem" + id).classList.toggle("editing");
document.querySelector("#grade" + id).toggleAttribute("disabled");
document.querySelector("#course" + id).toggleAttribute("disabled");
}
function updateItem(i, e)
function updateEduItem(id, 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,
let data = {}
data["dateFrom"] = document.querySelector("#dateFrom" + id).value;
data["dateTo"] = document.querySelector("#dateTo" + id).value;
data["grade"] = document.querySelector("#grade" + id).value;
data["course"] = document.querySelector("#course" + id).value;
fetch("/api/timelineData/edu/" + id, {
method: "PATCH",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
"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", "");
document.querySelector("#timelineHeader" + id).innerHTML = new Date(document.querySelector("#dateFrom" + id).value).toLocaleString('en-gb', dateOptions) + " - " + new Date(document.querySelector("#dateTo" + id).value).toLocaleString('en-gb', dateOptions);
document.querySelector("#timelineItem" + id).classList.toggle("editing");
document.querySelector("#grade" + id).setAttribute("disabled", "");
document.querySelector("#course" + id).setAttribute("disabled", "");
return;
}
if (res.status === 401)
{
window.location.href = "./";
return;
}
res.json().then(json =>
{
alert(json.message);
})
document.querySelector("#eduError" + id).classList.remove("hidden");
document.querySelector(`#eduError${id} div`).innerHTML = json.error;
});
})
}
src/editor/js/index.js
+2 -2
View File
@@ -39,7 +39,7 @@ document.querySelector("#login form").addEventListener("submit", e =>
{
method: "POST",
body: loginData
}).then(res => res.json()).then(json =>
}).then(res => res.json().then(json =>
{
if (res.ok)
{
@@ -53,7 +53,7 @@ document.querySelector("#login form").addEventListener("submit", e =>
return;
}
showErrorMessage("Invalid username or password.", "login");
});
}));
return;
}
showErrorMessage("Please type in a username and password.", "login");