2022-10-09 23:32:50 +01:00
|
|
|
let dateOptions={month:"short",year:"numeric"};function edit(e){document.querySelector("#timelineItem"+e).classList.toggle("editing"),document.querySelector("#grade"+e).toggleAttribute("disabled"),document.querySelector("#course"+e).toggleAttribute("disabled")}function updateEduItem(e,t){t.preventDefault();let n={};n.dateFrom=document.querySelector("#dateFrom"+e).value,n.dateTo=document.querySelector("#dateTo"+e).value,n.grade=document.querySelector("#grade"+e).value,n.course=document.querySelector("#course"+e).value,fetch("/api/timelineData/edu/"+e,{method:"PATCH",body:JSON.stringify(n),headers:{"Content-Type":"application/json",Authorization:"Bearer "+localStorage.getItem("token")}}).then((t=>{if(t.ok)return document.querySelector("#timelineHeader"+e).innerHTML=new Date(document.querySelector("#dateFrom"+e).value).toLocaleString("en-gb",dateOptions)+" - "+new Date(document.querySelector("#dateTo"+e).value).toLocaleString("en-gb",dateOptions),document.querySelector("#timelineItem"+e).classList.toggle("editing"),document.querySelector("#grade"+e).setAttribute("disabled",""),void document.querySelector("#course"+e).setAttribute("disabled","");401!==t.status?t.json().then((t=>{document.querySelector("#eduError"+e).classList.remove("hidden"),document.querySelector(`#eduError${e} div`).innerHTML=t.error})):window.location.href="./"}))}document.addEventListener("DOMContentLoaded",(()=>{document.querySelector("#dateFrom").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++){let n=t[e].ID,o=document.createElement("form");o.id="timelineItem"+n,o.classList.add("timelineItem"),o.onsubmit=e=>updateEduItem(n,e),o.innerHTML=`\n <div class="modifyBtnContainer">\n <button class="edit" type="button" id="edit${n}" onclick="edit(${n})"><i class="fa-solid fa-pen-to-square"></i></button>\n <button class="delete" type="button" id="delete${n}" onclick="deleteEduItem(${n})"><i class="fa- fa-trash"></i></button>\n </div>\n <div class="dateContainer formControl">\n <input type="date" name="dateFrom${n}" id="dateFrom${n}" onload="this.max = new Date().toISOString().split('T')[0]" value="${t[e].startPeriod}">\n -\n <input type="date" name="dateTo${n}" id="dateTo${n}" value="${t[e].endPeriod}">\n </div>\n\t\t\t\t\t<h3 class="timelineHeader" id="timelineHeader${n}">${new Date(t[e].startPeriod).toLocaleString("en-gb",dateOptions)} - ${new Date(t[e].endPeriod).toLocaleString("en-gb",dateOptions)}</h3>\n <div class="gradeContainer formControl">\n <label for="grade${n}">Grade:</label>\n <input type="text" name="grade${n}" id="grade${n}" value="${t[e].grade}" disabled>\n </div>\n\t\t\t\t\t<div class="formControl">\n\t\t\t\t\t <textarea class="courseText" name="course${n}" id="course${n}" cols="10" rows="3" disabled>${t[e].course}</textarea>\n\t\t\t\t\t</div>\n\t\t\t\t\t\n <div class="error hidden" id="eduError${n}">\n <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">×</button>\n <div></div>\n </div>\n\t\t\t\t\t<input type="submit" value="Change">\n\t\t\t\t`,document.getElementById("edu").appendChild(o)}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="visib
|
