1 line
9.7 KiB
JavaScript
1 line
9.7 KiB
JavaScript
let dateOptions={month:"short",year:"numeric"};function edit(e){if(document.querySelector("#timelineItem"+e).classList.toggle("editing"),e.includes("e"))return document.querySelector("#grade"+e).toggleAttribute("disabled"),void document.querySelector("#course"+e).toggleAttribute("disabled");document.querySelector("#companyName"+e).toggleAttribute("disabled"),document.querySelector("#area"+e).toggleAttribute("disabled"),document.querySelector("#jobTitle"+e).toggleAttribute("disabled")}function addEduData(e,t,o,n,r,a=!1){let d=e+"e",i=document.createElement("form");i.id="timelineItem"+d,i.classList.add("timelineItem"),i.onsubmit=t=>updateEduItem(e,t),i.innerHTML=`\n <div class="modifyBtnContainer">\n <button class="edit" type="button" id="edit${d}" onclick="edit('${d}')"><i class="fa-solid fa-pen-to-square"></i></button>\n <button class="delete" type="button" id="delete${d}" onclick="deleteEduItem(${e})"><i class="fa-solid fa-trash"></i></button>\n </div>\n <div class="dateContainer formControl">\n <input type="date" name="dateFrom${d}" id="dateFrom${d}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n -\n <input type="date" name="dateTo${d}" id="dateTo${d}" value="${o}">\n </div>\n <h3 class="timelineHeader" id="timelineHeader${d}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n <div class="gradeContainer formControl">\n <label for="grade${d}">Grade:</label>\n <input type="text" name="grade${d}" id="grade${d}" value="${n}" disabled>\n </div>\n <div class="formControl">\n <textarea class="courseText" name="course${d}" id="course${d}" cols="10" rows="3" disabled>${r}</textarea>\n </div>\n \n <div class="error hidden" id="eduError${d}">\n <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">×</button>\n <div></div>\n </div>\n <input type="submit" value="Change">\n `,a?document.querySelector("#edu").prepend(i):document.getElementById("edu").appendChild(i)}function addWorkData(e,t,o,n,r,a,d=!1){let i=e+"w",l=document.createElement("form");l.id="timelineItem"+i,l.classList.add("timelineItem"),l.onsubmit=t=>updateWorkItem(e,t),l.innerHTML=`\n <div class="modifyBtnContainer">\n <button class="edit" type="button" id="edit${i}" onclick="edit('${i}')"><i class="fa-solid fa-pen-to-square"></i></button>\n <button class="delete" type="button" id="delete${i}" onclick="deleteWorkItem(${e})"><i class="fa-solid fa-trash"></i></button>\n </div>\n <div class="dateContainer formControl">\n <input type="date" name="dateFrom${i}" id="dateFrom${i}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t}">\n -\n <input type="date" name="dateTo${i}" id="dateTo${i}" value="${"Present"===o?"":o}">\n </div>\n <h3 class="timelineHeader" id="timelineHeader${i}">${new Date(t).toLocaleString("en-gb",dateOptions)} - ${"Present"===o?"":new Date(o).toLocaleString("en-gb",dateOptions)}</h3>\n <div class="companyAreaContainer formControl">\n <input type="text" name="companyName${i}" id="companyName${i}" value="${n}" disabled>\n -\n <input type="text" name="area${i}" id="area${i}" value="${r}" disabled> \n </div>\n <div class="formControl">\n <textarea class="jobTitleText" name="jobTitle${i}" id="jobTitle${i}" cols="10" rows="3" disabled>${a}</textarea>\n </div>\n \n <div class="error hidden" id="workError${i}">\n <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">×</button>\n <div></div>\n </div>\n <input type="submit" value="Change">\n\t`,d?document.querySelector("#work").prepend(l):document.getElementById("work").appendChild(l)}function updateEduItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}e`).value,o.dateTo=document.querySelector(`#dateTo${e}e`).value,o.grade=document.querySelector(`#grade${e}e`).value,o.course=document.querySelector(`#course${e}e`).value,fetch("/api/timelineData/edu/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}e`).innerHTML=new Date(document.querySelector(`#dateFrom${e}e`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}e`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}e`).classList.toggle("editing"),document.querySelector(`#grade${e}e`).setAttribute("disabled",""),void document.querySelector(`#course${e}e`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#eduError${e}e`).classList.remove("hidden"),document.querySelector(`#eduError${e}e div`).innerHTML=t.error})):window.location.href="./"}))}function updateWorkItem(e,t){t.preventDefault();let o={};o.dateFrom=document.querySelector(`#dateFrom${e}w`).value,o.dateTo=document.querySelector(`#dateTo${e}w`).value,o.companyName=document.querySelector(`#companyName${e}w`).value,o.area=document.querySelector(`#area${e}w`).value,o.title=document.querySelector(`#jobTitle${e}w`).value,fetch("/api/timelineData/work/"+e,{method:"PATCH",body:JSON.stringify(o),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector(`#timelineHeader${e}w`).innerHTML=new Date(document.querySelector(`#dateFrom${e}w`).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector(`#dateTo${e}w`).value).toLocaleString("en-gb",dateOptions),document.querySelector(`#timelineItem${e}w`).classList.toggle("editing"),document.querySelector(`#companyName${e}w`).setAttribute("disabled",""),document.querySelector(`#area${e}w`).setAttribute("disabled",""),void document.querySelector(`#jobTitle${e}w`).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector(`#workError${e}w`).classList.remove("hidden"),document.querySelector(`#workError${e}w div`).innerHTML=t.error})):window.location.href="./"}))}function deleteEduItem(e){fetch("/api/timelineData/edu/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}e`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}function deleteWorkItem(e){fetch("/api/timelineData/work/"+e,{method:"DELETE",headers:{Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{t.ok?document.querySelector(`#timelineItem${e}w`).remove():401!==t.status?t.json().then((e=>alert(e.error))):window.location.href="./"}))}document.addEventListener("DOMContentLoaded",(()=>{fetch("/api/user/isLoggedIn").then((e=>{e.ok||(window.location.href="./")})),document.querySelector("#dateFromE").max=(new Date).toISOString().split("T")[0],document.querySelector("#dateFromW").max=(new Date).toISOString().split("T")[0],fetch("/api/timelineData/edu").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++)addEduData(t[e].ID,t[e].startPeriod,t[e].endPeriod,t[e].grade,t[e].course);else document.querySelector("#edu").innerHTML="No education data found"}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((t=>{if(e.ok)for(let e=0;e<t.length;e++){let o=null===t[e].endPeriod?"Present":t[e].endPeriod;addWorkData(t[e].ID,t[e].startPeriod,o,t[e].companyName,t[e].area,t[e].title)}else 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"})),document.querySelector("#addEdu").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromE").value),t.append("dateTo",document.querySelector("#dateToE").value),t.append("grade",document.querySelector("#grade").value),t.append("course",document.querySelector("#courseTitle").value),fetch("/api/timelineData/edu",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok)return addEduData(o.ID,t.get("dateFrom"),t.get("dateTo"),t.get("grade"),t.get("course"),!0),void document.querySelector("#addEdu").reset();401!==e.status?(document.querySelector("#eduError").classList.remove("hidden"),document.querySelector("#eduError div").innerHTML=o.error):window.location.href="./"}))))})),document.querySelector("#addWork").addEventListener("submit",(e=>{e.preventDefault();let t=new FormData;t.append("dateFrom",document.querySelector("#dateFromW").value),t.append("dateTo",document.querySelector("#dateToW").value),t.append("companyName",document.querySelector("#company").value),t.append("area",document.querySelector("#area").value),t.append("title",document.querySelector("#jobTitle").value),fetch("/api/timelineData/work",{method:"POST",body:t,headers:{Authentication:localStorage.getItem("token")}}).then((e=>e.json().then((o=>{if(e.ok){let e=null===t.get("dateTo")?"Present":t.get("dateTo ");return addWorkData(o.ID,t.get("dateFrom"),e,t.get("companyName"),t.get("area"),t.get("title"),!0),void document.querySelector("#addEdu").reset()}401!==e.status?(document.querySelector("#eduError").classList.remove("hidden"),document.querySelector("#eduError div").innerHTML=o.error):window.location.href="./"}))))})); |