fyp/views/js/main.js

function tabs() {
    for (const elm of document.querySelectorAll(".tabs")) {
        let count = 0;
        let selected = 0;
        for (const child of elm.children) {
            if (child.tagName == "BUTTON")  {
                count++;
                if (child.classList.contains("selected")) {
                    selected++;
                }
                if (!child.getAttribute("data-armed")) {
                    child.addEventListener("click", () => {
                        if (!child.classList.contains("selected")) {
                            for (const elm of child.parentElement.children) {
                                elm.classList.remove("selected");
                            }
                            child.classList.add("selected");

                            for (const childElm of child.parentElement.children) {
                                if (childElm.classList.contains("selected")) {
                                    childElm.classList.remove("selected")
                                }
                            }

                            document.querySelector(`.tabs .content[data-tab="${
                                child.getAttribute("data-tab")
                            }"]`)?.classList.add("selected");
                        }
                    });
                    child.setAttribute("data-armed", "true")
                }
            }
        }

        if (selected > 1 || selected == 0) {
            for (const child of elm.children) {
                child.classList.remove("selected");
            }
            for (const child of elm.children) {
                if (child.tagName == "BUTTON") {
                    child.classList.add("selected");
                    document.querySelector(`.tabs .content[data-tab="${
                        child.getAttribute("data-tab")
                    }"]`)?.classList.add("selected");
                    break;
                }
            }

        }
    }
    for (const elm of document.querySelectorAll(".tabs-header")) {
        let count = 0;
        let selected = 0;
        for (const child of elm.children[0].children) {
            if (child.tagName == "BUTTON")  {
                count++;
                if (child.classList.contains("selected")) {
                    selected++;
                }
                if (!child.getAttribute("data-armed")) {
                    child.addEventListener("click", () => {
                        if (!child.classList.contains("selected")) {
                            for (const elm of child.parentElement.children) {
                                elm.classList.remove("selected");
                            }
                            child.classList.add("selected");

                            for (const childElm of child.parentElement.parentElement.children) {
                                if (childElm.classList.contains("selected")) {
                                    childElm.classList.remove("selected")
                                }
                            }

                            document.querySelector(`.tabs-header .content[data-tab="${
                                child.getAttribute("data-tab")
                            }"]`)?.classList.add("selected");
                        }
                    });
                    child.setAttribute("data-armed", "true")
                }
            }
        }

        if (selected > 1 || selected == 0) {
            for (const child of elm.children) {
                child.classList.remove("selected");
            }
            for (const child of elm.children[0].children) {
                if (child.tagName == "BUTTON") {
                    child.classList.add("selected");
                    document.querySelector(`.tabs .content[data-tab="${
                        child.getAttribute("data-tab")
                    }"]`)?.classList.add("selected");
                    break;
                }
            }

        }
    }
}
function load() {
    for (const elm of document.querySelectorAll("form > button")) {
        elm.addEventListener('click', (e) => {
            e.target.parentElement.classList.add("submitted");
        });
    }
    for (const elm of document.querySelectorAll("button.icon")) {
        elm.addEventListener('click', (e) => {
            e.preventDefault()
            const input = document.querySelectorAll('form .file-upload input[type="file"]')[0];
            if (input) {
                input.click();
                input.addEventListener('change', (e) => {
                    const file = input.files[0];
                    if (!file) return;
                    elm.setAttribute("disabled", "true");

                    const spanToReplace = document.querySelector('.file-upload .icon span');
                    const imgToReplace = document.querySelector('.file-upload .icon img');
                    if (!imgToReplace || !spanToReplace) return;

                    if (imgToReplace.getAttribute("replace")) {
                        const fileReader = new FileReader();
                        fileReader.onloadend = () => {
                            imgToReplace.setAttribute("src", fileReader.result)
                            elm.classList.add("adapt");
                        }
                        fileReader.readAsDataURL(file)
                    }

                    if (spanToReplace.getAttribute("replace")) {
                        spanToReplace.innerHTML = spanToReplace.getAttribute("replace")
                    }
                })
            }
        });
    }
    tabs();
}
window.onload = load;
htmx.on('htmx:afterSwap', load);
htmx.on('htmx:beforeSwap', (env) => {
    if (env.detail.xhr.status === 401) {
        window.location = "/login"
    } else
        // 309 is the code I selected for html to htmlfull change
        if (env.detail.xhr.status === 309) {
            env.detail.target = htmx.find(".app")
        }
});