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 handlePageResponse(data){
    if(data.Navigation){
        document.getElementById("navbar").innerHTML = data.Navigation;
    }
    if(data.Page){
        document.getElementById("pagearea").innerHTML = data.Page;
        // if(data.PageLocation){
        //     history.pushState({}, "", data.PageLocation);
        // }
    }
}

function doPageAction(requestData){
    return fetch('/page', {
        method: 'POST',
        body: requestData,
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
                handlePageResponse(data);
        })
        .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 navigateTo(site, page){
    const data = new URLSearchParams();
    data.append("action", "getPage");
    data.append("site", site);
    data.append("page", page);
    doPageAction(data);
}

function refreshNavbar(){
    const data = new URLSearchParams();
    data.append("action", "getNavigation");
    doPageAction(data);
}

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

    doAccountAction(data, "Logout Successful!", "Logout failed.").then(() => {
        refreshNavbar();
        navigateTo("", pageData.defaultPage);
        // Expected output: "Success!"
    });
}

function initAjax() {
    let links = document.querySelectorAll('.navsite_link, .navpage_link');

// Add click event listener to each link
    links.forEach(function (link) {
        link.addEventListener('click', function (e) {
            e.preventDefault();

            // Get page and site information
            let site = this.dataset.site;
            let page = this.dataset.page;

            if (site && page) {
                navigateTo(site, page);
            }

            // You can use this information to update the URL or perform other actions
        });
    });
}
document.addEventListener('DOMContentLoaded', initAjax);