stylehub/assets/script.js

let UserInfo = {};
let PageIntervals = [];

function isLoggedIn(){
    return UserInfo.Email && UserInfo.Email.length > 0;
}

async function handleResponse(data, successMessage, failureMessage) {
    const statusMessageContainer = document.getElementById("statusMessageContainer");

    const statusMessage = document.createElement("div");
    statusMessage.classList.add("status-message");

    if (data.Status === 'Success') {
        statusMessage.innerText = successMessage;
        statusMessage.classList.add("success");
    } else {
        statusMessage.innerText = failureMessage;
        statusMessage.classList.add("failure");
    }

    statusMessageContainer.appendChild(statusMessage);

    // Automatically remove the message after 3 seconds
    setTimeout(() => {
        statusMessage.style.opacity = "0";
        setTimeout(() => {
            statusMessage.remove();
        }, 500);
    }, 2000);
}

async function showDashboardGreeting() {
    document.getElementById("welcomeMsg").innerText = `Ahoj, ${UserInfo.FirstName}.`;
}

async function doAction(url, requestData, successMessage, failureMessage, silent = false) {
    try {
        const params = new URLSearchParams();

        for (const key in requestData) {
            params.append(key, requestData[key]);
        }

        const response = await fetch(url, {
            method: 'POST',
            body: params,
        });

        if (!response.ok) {
            console.error(`HTTP error! Status: ${response.status}`);
        }

        const data = await response.json();

        if (!silent) {
            await handleResponse(data, successMessage, failureMessage);
        }

        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

async function handlePageResponse(data) {
    const navbar = document.getElementById("navbar_container");
    const pageArea = document.getElementById("page_container");

    if (data.Navigation) {
        navbar.innerHTML = data.Navigation;
    }

    if (data.Page) {
        pageArea.innerHTML = data.Page;
        if (data.PageLocation) {
            history.pushState({}, "", data.PageLocation);
        }
    }
}

async function displayList(data, elementId, deleteFunction) {
    const tableContainer = document.getElementById(elementId);
    tableContainer.innerHTML = ""; // Clear previous content

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

    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 deleteFunction === "function") {
        const th = document.createElement("th");
        th.appendChild(document.createTextNode("Delete"));
        headerRow.appendChild(th);
    }

    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 deleteFunction === "function") {
            const td = document.createElement("td");
            const deleteButton = document.createElement('button');
            deleteButton.textContent = "Delete";
            deleteButton.onclick = () => deleteFunction(line.ID);
            td.appendChild(deleteButton);
            dataRow.appendChild(td);
        }
    }

    tableContainer.appendChild(table);
}

async function doPageAction(requestData, wantsReturn = false) {
    try {
        const response = await fetch('/page', {
            method: 'POST',
            body: new URLSearchParams(requestData),
        });

        if (!response.ok) {
            console.error(`HTTP error! Status: ${response.status}`);
        }

        const data = await response.json();
        await handlePageResponse(data);
        if (wantsReturn) {
            return data;
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

async function initAjaxNavigationEvents() {
    const allLinks = document.querySelectorAll('.navsite_link, .navpage_link');
    const pageLinks = document.querySelectorAll('.navpage_link');

    pageLinks.forEach(function (link) {
        link.addEventListener('click', function () {
            navLinks.classList.remove("active");
        });
    });

    allLinks.forEach(function (link) {
        link.addEventListener('click', function (e) {
            e.preventDefault();
            let site = this.dataset.site;
            let page = this.dataset.page;
            if (site && page) {
                navigateTo(site, page);
            }
        });
    });
    const toggleButton = document.getElementById("toggle_button")
    const navLinks = document.getElementById("navsite_list")

    toggleButton.addEventListener('click', () => {
        navLinks.classList.toggle("active")
    })
}

async function initAjax() {

    await initAjaxNavigationEvents();
    await onPageLoad();
}

async function togglearticlecreate(){
    let articleContainerElement = document.getElementById("articlecreatecontainer");

    articleContainerElement.classList.toggle("hidden");
}

async function renderarticles(){
    let template = document.querySelector('template[data-template-name="article"]').innerHTML;
    let articles = await doAction(
        "/newsarticle",
        {
            action: "getNewsArticles"
        },
        "Články načítané",
        "Nastala chyba pri načítavaní článkov",
        true
    );

    let articleout = "";
    for (const article of articles.Articles) {
        articleout += template.replace("__TEMPLATE_ARTICLE_TITLE__", article.Title).replace("__TEMPLATE_ARTICLE_AUTHOR__", article.WrittenByName).replace("__TEMPLATE_ARTICLE_DATE__", article.WrittenAt).replace("__TEMPLATE_ARTICLE_BODY__", article.Body)
    }
    document.getElementById("articleslist").innerHTML = articleout;
}

async function submitarticle(){
    let articleTitleElement = document.getElementById("articletitleinput");
    let articleBodyElement = document.getElementById("articlebodyinput");
    await doAction(
        "/newsarticle",
        {
            action: "addNewsArticle",
            title: articleTitleElement.value,
            body: articleBodyElement.value
        },
        "Článok úspešne pridaný",
        "Nastala chyba pri pridávaní článku",
        false
    );
    await togglearticlecreate();
}

async function articleInit(){
    let articleContainerElement = document.getElementById("articlecreatecontainer");
    let articleCreateOpenElement = document.getElementById("articlecreateopen");
    articleContainerElement.addEventListener("keyup", function (ev) {
        if(ev.key === "Escape"){
            togglearticlecreate();
        }
    })
    PageIntervals.push(setInterval(renderarticles, 300000));
    document.getElementById("articleprivilegeinput").setAttribute("max", UserInfo.Privileges);
    if(UserInfo.Privileges < 2){
        articleContainerElement.style.display = "none";
        articleCreateOpenElement.style.display = "none";
    }
    else{
        articleCreateOpenElement.style.display = "inline-block";
    }
}

async function onPageLoad() {
    await restoreUserInfo();
    let currentSite = localStorage.getItem("currentSite");
    let currentPage = localStorage.getItem("currentPage");

    for(let interval of PageIntervals) {
        clearInterval(interval);
    }

    if (currentSite === "home" && currentPage === "settings") {
        if (document.getElementById("user-settings")) {
            await populateUserInfoFields(UserInfo);
        }
        if (document.getElementById("admin-settings")) {
            await listActivationCodes(true);
            await listUsers(true);
        }
    }
    if (currentSite === "home" && currentPage === "account" && isLoggedIn()) {
        await showDashboardGreeting();
    }
    if (currentSite === "news" && currentPage === "index") {
        await articleInit();
    }
}

async function navigateTo(site, page) {
    const data = {
        action: "getPage",
        site: site,
        page: page,
    };
    doPageAction(data, true).then(() => {
        localStorage.setItem("currentSite", site);
        localStorage.setItem("currentPage", page);
        onPageLoad();
    });
}

async function softReload() {
    let currentSite = localStorage.getItem("currentSite");
    let currentPage = localStorage.getItem("currentPage");
    await navigateTo(currentSite, currentPage);
    umami.track("softReload");
}

async function refreshNavbar() {
    const data = {
        action: "getNavigation",
    };
    await doPageAction(data);
    umami.track("refreshNavbar");
    await initAjaxNavigationEvents();
}

async function logout() {
    const data = {
        action: "logout",
    };

    doAction('/account', data, "Logout Successful!", "Logout failed.")
        .then(async () => {
            await refreshNavbar();
            await navigateTo(localStorage.getItem("defaultSite"), localStorage.getItem("defaultPage"));
            localStorage.clear();
            umami.track("logout");
        })
        .catch((error) => {
            // Handle errors if needed
            console.error("An error occurred during logout:", error);
        });
}

async function login() {
    const email = document.getElementById("login_email").value;
    const password = document.getElementById("login_password").value;
    await doLogin(email, password);
    await getUserInfo();
    await refreshNavbar();
    await softReload();
}

async function doLogin(email, password) {
    const data = {
        action: "login",
        email: email,
        password: password,
    };

    await doAction('/account', data, "Login Successful!", "Login failed. Please check your credentials.");
    umami.track("login");
}

async function register() {
    const firstName = document.getElementById("register_firstName").value;
    const lastName = document.getElementById("register_lastName").value;
    const email = document.getElementById("register_email").value;
    const password = document.getElementById("register_password").value;
    const activationToken = document.getElementById("register_activationToken").value;

    const data = {
        action: "register",
        firstname: firstName,
        lastname: lastName,
        email: email,
        password: password,
        activation_token: activationToken,
    };

    await doRegister(data);
}

async function doRegister(requestData) {
    await doAction('/account', requestData, "Registration Successful!", "Registration failed.");
    umami.track("register");
}

//User settings start

async function changePassword() {
    const oldPassword = document.getElementById("changeOldPassword").value;
    const newPassword = document.getElementById("changeNewPassword").value;

    const data = {
        action: "change_password",
        old_password: oldPassword,
        new_password: newPassword,
    };

    await doChangePassword(data, "Password change Successful!", "Password change failed.");
}

async function doChangePassword(requestData, successMessage, failureMessage) {
    await doAction('/account', requestData, successMessage, failureMessage);
    umami.track("passwordChange");
}

async function updateUserProfile() {
    const firstName = document.getElementById("updateFirstName").value;
    const lastName = document.getElementById("updateLastName").value;
    const nickname = document.getElementById("updateNickname").value;
    const minecraftNick = document.getElementById("updateMinecraftNick").value;

    const data = {
        action: "update_user_profile",
        first_name: firstName,
        last_name: lastName,
        nickname: nickname,
        minecraft_nick: minecraftNick,
    };

    await doAction('/account', data, "Profile update Successful!", "Profile update failed.");
    umami.track("updateUserProfile");
}

async function updateEmail() {
    const newEmail = document.getElementById("updateNewEmail").value;

    const data = {
        action: "update_user_email",
        email: newEmail,
    };

    await doAction('/account', data, "Email update Successful!", "Email update failed.");
    umami.track("updateEmail");
}

async function populateUserInfoFields(userData) {
    document.getElementById("updateFirstName").value = userData.FirstName || "";
    document.getElementById("updateLastName").value = userData.LastName || "";
    document.getElementById("updateNickname").value = userData.Nickname || "";
    document.getElementById("updateMinecraftNick").value = userData.MinecraftNick || "";
    document.getElementById("updateNewEmail").value = userData.Email || "";
}

async function restoreUserInfo() {
    for (let i = 0; i < localStorage.length; i++) {
        let key = localStorage.key(i);
        if (key.startsWith("UserInfo_")) {
            let keyClean = key.replace("UserInfo_", "");
            UserInfo[keyClean] = localStorage.getItem(key);
        }
    }
}

async function getUserInfo() {
    const data = {
        action: "get_user_info",
    };
    const result = await doAction('/account', data, "User info retrieved Successfully!", "User info retrieval failed.", true);

    if (result && result.Status === "Success") {
        Object.keys(result.UserInfo).forEach(index => {
            let value = result.UserInfo[index];
            localStorage.setItem("UserInfo_" + index, value);
            UserInfo[index] = value;
        });
    }

}

//User settings end

//Admin settings start

async function addActivationCodes() {
    const count = document.getElementById("activationCodeCount").value;

    const data = {
        action: "add_activation_codes",
        count: count,
    };

    doAction('/account', data, "Activation codes added Successfully!", "Activation codes addition failed.").then((result) => {
        displayList(result.ActivationCodes, "codeListTable", deleteActivationCode);
        umami.track("addActivationCodes");
    });
}

async function listUsers(silent = false) {
    const data = {
        action: "list_users",
    };

    doAction('/account', data, "User list retrieved Successfully!", "User list retrieval failed.", silent).then((result) => {

        if (result && result.Status === "Success") {
            displayList(result.Users, "userListTable", deleteUser);
        }
    });
}

async function listActivationCodes(silent = false) {
    const data = {
        action: "list_activation_codes",
    };

    doAction('/account', data, "Activation code list retrieved Successfully!", "Activation code list retrieval failed.", silent).then((result) => {
        displayList(result.ActivationCodes, "codeListTable", deleteActivationCode);
    });
}

async function deleteUser(userId) {
    const data = {
        action: "delete_user",
        user_id: userId,
    };

    await doAction('/account', data, "User deleted Successfully!", "User deletion failed.");
    await listUsers();
    umami.track("deleteUser");
}

async function deleteActivationCode(activationCode) {
    const data = {
        action: "delete_activation_code",
        activation_code: activationCode,
    };

    await doAction('/account', data, "Activation code deleted Successfully!", "Activation code deletion failed.");
    await listActivationCodes();
    umami.track("deleteActivationCode");
}

//Admin settings end

if (document.readyState !== "loading") {
    setTimeout(initAjax, 0);
} else {
    document.addEventListener("DOMContentLoaded", initAjax);
}