death-notifier/src/main/js/Main.ts

// @ts-ignore
const {$, doAfterLoad, footer, header, nav} = window.fwdekker;

let csrfToken: string|null = null;


function refreshTrackings() {
    fetch("api.php?action=list-trackings")
        .then(it => it.json())
        .then(response => {
            $("#trackings tbody").remove();
            $("#trackings").append(document.createElement("tbody"));

            const headerRow = document.createElement("tr");
            const headerPersonName = document.createElement("th");
            headerPersonName.innerText = "Person name";
            const headerIsDeceased = document.createElement("th");
            headerIsDeceased.innerText = "Deceased?";
            const headerDelete = document.createElement("th");
            headerRow.append(headerPersonName, headerIsDeceased, headerDelete);
            $("#trackings tbody").append(headerRow);

            response["message"].forEach((tracking: any) => {
                const trackingRow = document.createElement("tr");
                const trackingPersonName = document.createElement("td");
                trackingPersonName.innerText = tracking["person_name"];
                const trackingIsDeceased = document.createElement("td");
                trackingIsDeceased.innerText = tracking["is_deceased"] === 1 ? "yes" : "no";
                const trackingDelete = document.createElement("td");
                const trackingDeleteButton = document.createElement("button");
                trackingDeleteButton.innerText = "remove";
                trackingDeleteButton.addEventListener("click", () => {
                    $("#trackingsError").innerText = "";
                    fetch("api.php",
                        {
                            method: "post",
                            headers: {
                                "Accept": "application/json",
                                "Content-Type": "application/json",
                            },
                            body: JSON.stringify({
                                action: "delete-tracking",
                                token: csrfToken,
                                person_name: tracking["person_name"],
                            })
                        })
                        .then(it => it.json())
                        .then(it => {
                            if (!it["satisfied"]) {
                                $("#trackingsError").innerText = it["message"];
                                return;
                            }
                            refreshTrackings();
                        });
                });
                trackingDelete.append(trackingDeleteButton);
                trackingRow.append(trackingPersonName, trackingIsDeceased, trackingDelete);
                $("#trackings tbody").append(trackingRow);
            });

            const createRow = document.createElement("tr");
            const createPersonName = document.createElement("td");
            const createPersonInput = document.createElement("input");
            const createPersonSubmit = document.createElement("button");
            createPersonSubmit.innerText = "add";
            createPersonSubmit.addEventListener("click", () => {
                $("#trackingsError").innerText = "";
                fetch("api.php",
                    {
                        method: "post",
                        headers: {
                            "Accept": "application/json",
                            "Content-Type": "application/json",
                        },
                        body: JSON.stringify({
                            action: "add-tracking",
                            token: csrfToken,
                            person_name: createPersonInput.value,
                        })
                    })
                    .then(it => it.json())
                    .then(it => {
                        if (!it["satisfied"]) {
                            $("#trackingsError").innerText = it["message"];
                            return;
                        }
                        refreshTrackings();
                    });
            });
            createPersonName.append(createPersonInput, createPersonSubmit);
            const createIsDeceased = document.createElement("td");
            const createDelete = document.createElement("td");
            createRow.append(createPersonName, createIsDeceased, createDelete);
            $("#trackings tbody").append(createRow);
        });
}


doAfterLoad(async () => {
    // Initialize template
    $("#nav").appendChild(nav("/Tools/Death-Notifier/"));
    $("#header").appendChild(header({
        title: "Death Notifier",
        description: "Get notified when a famous person dies"
    }));
    $("#footer").appendChild(footer({
        vcsURL: "https://git.fwdekker.com/tools/death-notifier/",
        version: "v%%VERSION_NUMBER%%"
    }));
    $("main").classList.remove("hidden");

    // Workflow
    const loginRow = $("#loginRow");
    const trackingRow = $("#trackingRow");
    const accountRow = $("#accountRow");

    // TODO: Move common code to a Form class or sth... (or actually, wait with that until I have the table thingy
    //       implemented!)
    $("#loginForm").addEventListener("submit", async () => {
        $("#loginForm .error").innerText = "";

        fetch("api.php",
            {
                method: "post",
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    action: "login",
                    // TODO: Deal with tokens in a smarter way. Allow refreshing them! Also remove duplication...
                    token: csrfToken,
                    email: $("#loginForm input[name=email]").value,
                    password: $("#loginForm input[name=password]").value,
                })
            })
            .then(it => it.json())
            .then(it => {
                if (!it["satisfied"]) {
                    $("#loginForm .error").innerText = it["message"];
                    return;
                }
                $("#loginForm").reset();
                loginRow.classList.add("hidden");
                trackingRow.classList.remove("hidden");
                accountRow.classList.remove("hidden");
                refreshTrackings();
            });
    });
    $("#registerForm").addEventListener("submit", async () => {
        $("#registerForm .error").innerText = "";

        fetch("api.php",
            {
                method: "post",
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    action: "register",
                    token: csrfToken,
                    email: $("#registerForm input[name=email]").value,
                    password: $("#registerForm input[name=password]").value,
                    password_confirm: $("#registerForm input[name=password_confirm]").value,
                })
            })
            .then(it => it.json())
            .then(it => {
                if (!it["satisfied"]) {
                    $("#registerForm .error").innerText = it["message"];
                    return;
                }
                $("#registerForm").reset();
                $("#registerForm .error").innerText = "Account created successfully! You may now log in.";
            });
    });
    $("#logoutForm").addEventListener("submit", async () => {
        $("#logoutForm .error").innerText = "";

        fetch("api.php",
            {
                method: "post",
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    action: "logout",
                    token: csrfToken,
                })
            })
            .then(it => it.json())
            .then(it => {
                csrfToken = it["token"];

                if (!it["satisfied"]) {
                    $("#logoutForm .error").innerText = it["message"];
                    return;
                }
                $("#logoutForm").reset();
                loginRow.classList.remove("hidden");
                trackingRow.classList.add("hidden");
                accountRow.classList.add("hidden");
            });
    });

    fetch("api.php?action=get-user-data")
        .then(it => it.json())
        .then(it => {
            csrfToken = it["token"];

            if (!it["satisfied"]) {
                loginRow.classList.remove("hidden");
            } else {
                trackingRow.classList.remove("hidden");
                accountRow.classList.remove("hidden");
                refreshTrackings();
            }
        });
});