fyp/views/js/main.js

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")
                    }
                })
            }
        });
    }
}
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")
        }
});