profile.mjs

Profile

Basic Information

• Sets js interactivity for the profile html page

---

getUserDetails()

function getUserDetails() {
    dbq.getProfileData(sessionStorage.getItem("uid"), (res) => {
        userData = (res);
        console.log(res);
        firstNameLabel.innerHTML = res[0];
        lastNameLabel.innerHTML = res[2];
        emailLabel.innerHTML = res[3];
        idLabel.innerHTML = sessionStorage.getItem("uid");
    });
}

• gets profile details from database and displays it on profile page

---

updateUserInformation()

function updateUserInformation() {
    console.log("UPDATE USR INFO");
    console.log(firstNameInput.value, lastNameInput.value);
    dbq.updateUserProfile(sessionStorage.getItem("uid"), 'user_fname', firstNameLabel.textContent);
    dbq.updateUserProfile(sessionStorage.getItem("uid"), 'user_lname', lastNameLabel.textContent);
    getUserDetails();
}

• called when user edits profile details and saves changes
• sends updated user information to database and then refreshes page

---

onLoad()

function onLoad() {
    getUserDetails();
}

• Called on page load

---

function editDetails()

function editDetails() {
    document.getElementById("fnameLabel").classList.add("d-none");
    document.getElementById("fnameInput").classList.remove("d-none");

    document.getElementById("lnameLabel").classList.add("d-none");
    document.getElementById("lnameInput").classList.remove("d-none");

    document.getElementById("editBtn").classList.add("d-none");
    document.getElementById("saveBtn").classList.remove("d-none");
    document.getElementById("cancelBtn").classList.remove("d-none");
}

• Enables input boxes for user to enter changes to their profile details, requires saveDetails() to save

---

saveChanges()

function saveChanges() {
    let firstName = document.getElementById("fnameInput").value;
    let lastName = document.getElementById("lnameInput").value;

    document.getElementById("fnameLabel").innerHTML = firstName;
    document.getElementById("lnameLabel").innerHTML = lastName;

    console.log("SAVE CHANGES");
    updateUserInformation();
    cancelChanges();
}

• Confirms changes set by editDetails()

---

cancelChanges()

function cancelChanges() {
    document.getElementById("fnameLabel").classList.remove("d-none");
    document.getElementById("fnameInput").classList.add("d-none");

    document.getElementById("lnameLabel").classList.remove("d-none");
    document.getElementById("lnameInput").classList.add("d-none");
    
    document.getElementById("editBtn").classList.remove("d-none");
    document.getElementById("saveBtn").classList.add("d-none");
    document.getElementById("cancelBtn").classList.add("d-none");
}

• cancels changes set by editDetails()