`;
if (prepend)
{
document.querySelector("#edu").prepend(timelineItem);
return;
}
document.getElementById("edu").appendChild(timelineItem);
}
/**
* Adds a new work timeline item to the page
* @param {number} ID - the id of the work timeline item from the database
* @param {string} startPeriod - the start date of the job
* @param {string} endPeriod - the end date of the job
* @param {string} companyName - the name of the company
* @param {string} area - the area of the company
* @param {string} jobTitle - the job title
* @param {boolean} prepend - whether to prepend the timeline item to the timeline
*/
function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, prepend=false)
{
let id = ID + "w";
let timelineItem = document.createElement("form")
timelineItem.id = "timelineItem" + id;
timelineItem.classList.add("timelineItem");
timelineItem.onsubmit = e => updateWorkItem(ID, e);
timelineItem.innerHTML = `
`;
if (prepend)
{
document.querySelector("#work").prepend(timelineItem);
return;
}
document.getElementById("work").appendChild(timelineItem);
}
/**
* Updates the edu timeline item with the given id
* and data from the form
* @param {number} id - the id of the edu timeline item from the database
* @param {SubmitEvent} e - the event that triggered the function
*/
function updateEduItem(id, e)
{
e.preventDefault();
let data = {}
data["dateFrom"] = document.querySelector(`#dateFrom${id}e`).value;
data["dateTo"] = document.querySelector(`#dateTo${id}e`).value;
data["grade"] = document.querySelector(`#grade${id}e`).value;
data["course"] = document.querySelector(`#course${id}e`).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(`#timelineHeader${id}e`).innerHTML = new Date(document.querySelector(`#dateFrom${id}e`).value).toLocaleString('en-gb', dateOptions) + " - " + new Date(document.querySelector(`#dateTo${id}e`).value).toLocaleString('en-gb', dateOptions);
document.querySelector(`#timelineItem${id}e`).classList.toggle("editing");
document.querySelector(`#grade${id}e`).setAttribute("disabled", "");
document.querySelector(`#course${id}e`).setAttribute("disabled", "");
return;
}
if (res.status === 401)
{
window.location.href = "./";
return;
}
res.json().then(json =>
{
document.querySelector(`#eduError${id}e`).classList.remove("hidden");
document.querySelector(`#eduError${id}e div`).innerHTML = json.error;
});
})
}
/**
* Updates the work timeline item with the given id
* and data from the form
* @param {number} id - the id of the work timeline item from the database
* @param {SubmitEvent} e - the event that triggered the function
*/
function updateWorkItem(id, e)
{
e.preventDefault();
let data = {}
data["dateFrom"] = document.querySelector(`#dateFrom${id}w`).value;
data["dateTo"] = document.querySelector(`#dateTo${id}w`).value;
data["companyName"] = document.querySelector(`#companyName${id}w`).value;
data["area"] = document.querySelector(`#area${id}w`).value;
data["title"] = document.querySelector(`#jobTitle${id}w`).value;
fetch("/api/timelineData/work/" + id, {
method: "PATCH",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + localStorage.getItem("token")
}
}).then(res =>
{
if(res.ok)
{
document.querySelector(`#timelineHeader${id}w`).innerHTML = new Date(document.querySelector(`#dateFrom${id}w`).value).toLocaleString('en-gb', dateOptions) + " - " + new Date(document.querySelector(`#dateTo${id}w`).value).toLocaleString('en-gb', dateOptions);
document.querySelector(`#timelineItem${id}w`).classList.toggle("editing");
document.querySelector(`#companyName${id}w`).setAttribute("disabled", "");
document.querySelector(`#area${id}w`).setAttribute("disabled", "");
document.querySelector(`#jobTitle${id}w`).setAttribute("disabled", "");
return;
}
if (res.status === 401)
{
window.location.href = "./";
return;
}
res.json().then(json =>
{
document.querySelector(`#workError${id}w`).classList.remove("hidden");
document.querySelector(`#workError${id}w div`).innerHTML = json.error;
});
});
}
/**
* Deletes the timeline item with the given id
* @param {number} id - the id of the timeline item
*/
function deleteEduItem(id)
{
fetch("/api/timelineData/edu/" + id, {
method: "DELETE",
headers: {
"Authorization": "Bearer " + localStorage.getItem("token")
}
}).then(res =>
{
if (res.ok)
{
document.querySelector(`#timelineItem${id}e`).remove();
return;
}
if (res.status === 401)
{
window.location.href = "./";
return;
}
res.json().then(json => alert(json.error));
});
}
/**
* Updates the timeline item with the given id
* @param {number} id - the id of the timeline item from the database
*/
function deleteWorkItem(id)
{
fetch("/api/timelineData/work/" + id, {
method: "DELETE",
headers: {
"Authorization": "Bearer " + localStorage.getItem("token")
}
}).then(res =>
{
if (res.ok)
{
document.querySelector(`#timelineItem${id}w`).remove();
return;
}
if (res.status === 401)
{
window.location.href = "./";
return;
}
res.json().then(json => alert(json.error));
});
}
/**
* Updates the project item with the given id
* and data from the form
* @param {number} id - the base id of the element
* @param {SubmitEvent} e - the event of the form that was submitted
*/
function updateProjectItem(id, e)
{
e.preventDefault();
let data = {}
data["title"] = document.querySelector(`#title${id}`).value;
data["isMainProject"] = document.querySelector(`#isMainProject${id}`).checked ? "true" : "false";
data["information"] = document.querySelector(`#info${id}`).value;
data["projectLink"] = document.querySelector(`#viewProj${id}`).value;
data["gitLink"] = document.querySelector(`#git${id}`).value;
let imgData = new FormData();
imgData.append("img", document.querySelector(`#img${id}`).files[0]);
fetch("/api/projectData/" + id, {
method: "PATCH",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + localStorage.getItem("token")
}
}).then(res =>
{
if (res.ok)
{
if (imgData.get("img") === "undefined")
{
if (data["isMainProject"] === "true")
{
document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
document.querySelector(`#isMainProject${id}`).checked = true;
document.querySelector("#projList").prepend(document.querySelector(`#projectItem${id}`));
}
document.querySelector(`#projectItem${id}`).classList.toggle("editing");
document.querySelector(`#title${id}`).setAttribute("disabled", "");
document.querySelector(`#info${id}`).setAttribute("disabled", "");
return;
}
console.log("updating image")
return fetch("/api/projectImage/" + id, {
method: "POST",
body: imgData,
headers: {
"Authorization": "Bearer " + localStorage.getItem("token")
}
});
}
if (res.status === 401)
{
window.location.href = "./";
return;
}
res.json().then(projectDataError =>
{
document.querySelector(`#projError${id}`).classList.remove("hidden");
document.querySelector(`#projError${id} div`).innerHTML = projectDataError.error;
});
}).then(res => res.json().then(updatedProjectImage =>
{
if (res.ok)
{
if (updatedProjectImage["isMainProject"] === "true")
{
document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
document.querySelector(`#isMainProject${id}`).checked = true;
document.querySelector("#projList").prepend(document.querySelector(`#projectItem${id}`));
}
document.querySelector(`#projectItem${id}`).classList.toggle("editing");
document.querySelector(`#title${id}`).setAttribute("disabled", "");
document.querySelector(`#info${id}`).setAttribute("disabled", "");
document.querySelector(`#projectImage${id}`).src = updatedProjectImage.imgLocation;
return;
}
if (res.status === 401)
{
window.location.href = "./";
return;
}
document.querySelector(`#projError${id}`).classList.remove("hidden");
document.querySelector(`#projError${id} div`).innerHTML = updatedProjectImage.error;
}));
}
/**
* Deletes the project item with the given id
* @param id {number} - the id of the project item from the database
*/
function deleteProjectItem(id)
{
fetch("/api/projectData/" + id, {
method: "DELETE",
headers: {
"Authorization": "Bearer " + localStorage.getItem("token")
}
}).then(res =>
{
if (res.ok)
{
document.querySelector(`#projectItem${id}`).remove();
return;
}
if (res.status === 401)
{
window.location.href = "./";
return;
}
res.json().then(json => alert(json.error));
});
}
/**
* Adds a new project to the page
* @param {number} ID - the id of the project from the database
* @param {string} isMainProject - is it the main project
* @param {string} imgLocation - the relative path of the image
* @param {string} title - the title of the project
* @param {string} information - the information about the project
* @param {string} projectLink - the link to the project
* @param {string} gitLink - the link to the git repository
*/
function addProject(ID, isMainProject, imgLocation, title, information, projectLink, gitLink)
{
let projectItem = document.createElement("form");
let id = ID + "proj";
projectItem.id = "projectItem" + ID;
projectItem.classList.add("projItem");
projectItem.onsubmit = e => updateProjectItem(ID, e);
projectItem.innerHTML = `
`;
if (isMainProject === "true")
{
document.querySelectorAll(".isMainProject input").forEach(item => item.checked = false);
document.querySelector("#projList").prepend(projectItem);
return;
}
document.querySelector("#projList").appendChild(projectItem);
}
/**
* Deletes the post item with the given id
* @param {number} id - the id of the post item from the database
*/
function deletePostItem(id)
{
fetch("/api/blog/post/" + id, {
method: "DELETE",
headers: {
"Authorization": "Bearer " + localStorage.getItem("token")
}
}).then(res =>
{
if (res.ok)
{
document.querySelector(`#postInfo${id}`).remove();
return;
}
if (res.status === 401)
{
window.location.href = "./";
return;
}
res.json().then(json => alert(json.error));
});
}
/**
* Adds a new post info to the edit post table
* @param {number} ID - the id of the post
* @param {string} title - the title of the post
* @param {string} dateCreated - the date the post was created
* @param {string} dateModified - the date the post was modified
*/
function addPostInfo(ID, title, dateCreated, dateModified)
{
let postInfo = document.createElement("tr");
let id = ID + "post";
postInfo.id = "postInfo" + ID;
postInfo.innerHTML = `