stylehub/assets/script.js

function doAccountAction(requestData, successMessage, failureMessage, silent=false) {
    return fetch('/account', {
        method: 'POST',
        body: requestData,
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if(!silent) {
                handleResponse(data, successMessage, failureMessage);
            }
            return data; // Returning the response data for further processing
        })
        .catch((error) => {
            console.error('Error:', error);
        });
}

function displayList(data, element_id, delete_function=null) {
    const tableContainer = document.getElementById(element_id);
    tableContainer.innerHTML = ""; // Clear previous content

    const table = document.createElement("table");
    table.classList.add("list-table");

    // Create header row
    const headerRow = table.insertRow(0);
    for (const key in data[0]) {
        const th = document.createElement("th");
        th.appendChild(document.createTextNode(key));
        headerRow.appendChild(th);
    }

    if(typeof delete_function === "function") {
        const th = document.createElement("th");
        th.appendChild(document.createTextNode("Delete"));
        headerRow.appendChild(th);
    }

    // Create data rows
    for (const line of data) {
        const dataRow = table.insertRow();
        for (const key in line) {
            const td = document.createElement("td");
            td.appendChild(document.createTextNode(line[key]));
            dataRow.appendChild(td);
        }
        if(typeof delete_function === "function") {
            const td = document.createElement("td");
            let delete_button = document.createElement('button');
            delete_button.textContent = "Delete"
            delete_button.onclick = function (){
                delete_function(line.ID);
            }
            td.appendChild(delete_button);
            dataRow.appendChild(td);
        }
    }

    tableContainer.appendChild(table);
}

function handleResponse(data, SuccessMessage, failureMessage) {
    const StatusMessageElement = document.getElementById("StatusMessage");

    if (data.Status === 'Success') {
        StatusMessageElement.innerText = SuccessMessage;
    } else {
        StatusMessageElement.innerText = failureMessage;
    }

    // Show the status message
    StatusMessageElement.style.display = "block";
    setTimeout(() => {
        // Hide the status message after 3 seconds
        StatusMessageElement.style.opacity = "0";
        setTimeout(() => {
            StatusMessageElement.style.display = "none";
            // Reset opacity for future messages
            StatusMessageElement.style.opacity = "1";
        }, 500);
    }, 3000);
}

function logout() {
    const data = new URLSearchParams();
    data.append("action", "logout");

    doAccountAction(data, "Logout Successful!", "Logout failed.").then(() => {
        location.reload();
        // Expected output: "Success!"
    });
}