vote-rllhc/static/js/index.js

let vote = {
    submit_date: null,
    plus_player_id: null,
    plus_nickname: "",
    plus_reason: "",
    minus_player_id: null,
    minus_nickname: "",
    minus_reason: ""
}

let current_page = 0;

async function main() {
    if (read_cookie()) {
        showMessage("Merci pour ton vote!", "Ton vote a bien été pris en compte.", false, "info");
        return;
    }
    let players = await fetch("/data/players").then(r => r.json());
    let select = document.getElementById("player_id");
    let nickname = document.getElementById("nickname");
    let reason = document.getElementById("reason");
    players.forEach((x) => {
        let option = document.createElement("option");
        option.value = x["id"];
        option.textContent = x["name"];
        select.append(option);
    })
    let other = document.createElement("option");
    other.value = "other";
    other.textContent = "Autre";
    select.append(other);
    select.value = null;
    nickname.value = "";
    reason.value = "";
    select.addEventListener("change", () => {
        if (select.value === "other") {
            let other = document.getElementById("other");
            other.hidden = false;
            let otherLabel = document.getElementById("other_label");
            otherLabel.hidden = false;
        } else {
            let other = document.getElementById("other");
            other.hidden = true;
            let otherLabel = document.getElementById("other_label");
            otherLabel.hidden = true;
        }
        if (current_page) {
            vote.minus_player_id = parseInt(select.value);
        } else {
            vote.plus_player_id = parseInt(select.value);
        }
    })
    nickname.addEventListener("change", () => {
        if (current_page) {
            vote.minus_nickname = nickname.value;
        } else {
            vote.plus_nickname = nickname.value;
        }
    })
    reason.addEventListener("change", () => {
        if (current_page) {
            vote.minus_reason = reason.value;
        } else {
            vote.plus_reason = reason.value;
        }
    })
    let rightButton = document.getElementById("next");
    let leftButton = document.getElementById("prev");
    let title = document.getElementById("app_title");
    rightButton.addEventListener("click", async () => {
        if (current_page) {
            if (vote.minus_player_id === null) {
                showMessage("Bah alors, on sait pas pour qui voter?",
                    "Il semblerait que tu aies oublié de sélectionner quelqu'un pour ton vote!",
                    true, "warning");
                return;
            }
            if (select.value === "other") {
                let otherInput = document.getElementById("other");
                if (otherInput.value === "") {
                    showMessage("Tu as sélectionné autre mais tu n'as pas donné de nom", "N'oublie pas de soit sélectioner une personne ou de mettre un nom dans ''Autre:''.", true, "warning");
                    return;
                }
                let otherInputLabel = document.getElementById("other_label");
                let player = await fetch("/player", {method: "post", body: JSON.stringify({"name": otherInput.value})}).then(r => r.json());
                let option = document.createElement("option");
                option.value = player["id"];
                option.textContent = player["name"];
                select.insertBefore(option, other);
                vote.minus_player_id = parseInt(player["id"]);
                otherInput.value = "";
                otherInput.hidden = true;
                otherInputLabel.hidden = true;
            }
            if (await fetch("/vote", {
                method: "post", body: JSON.stringify(vote)
            })
                .then(r => r.status) === 200) {
                showMessage("Merci pour ton vote!", "Ton vote a bien été pris en compte.", false, "info");
            }
            console.log(vote);
        } else {
            if (vote.plus_player_id === null) {
                showMessage("Bah alors, on sait pas pour qui voter?",
                    "Il semblerait que tu aies oublié de sélectionner quelqu'un pour ton vote!",
                    true, "warning");
                return;
            }
            rightButton.textContent = "À voté!";
            title.textContent = "Vote -";
            if (select.value === "other") {
                let otherInput = document.getElementById("other");
                if (otherInput.value === "") {
                    showMessage("Tu as sélectionné autre mais tu n'as pas donné de nom", "N'oublie pas de soit sélectioner une personne ou de mettre un nom dans ''Autre:''.", true, "warning");
                    return;
                }
                let otherInputLabel = document.getElementById("other_label");
                let player = await fetch("/player", {method: "post", body: JSON.stringify({"name": otherInput.value})}).then(r => r.json());
                let option = document.createElement("option");
                option.value = player["id"];
                option.textContent = player["name"];
                select.insertBefore(option, other);
                vote.plus_player_id = parseInt(player["id"]);
                otherInput.value = "";
                otherInput.hidden = true;
                otherInputLabel.hidden = true;
            }
            current_page = 1;
            leftButton.hidden = false;
            select.value = vote.minus_player_id;
            nickname.value = vote.minus_nickname;
            reason.value = vote.minus_reason;
        }
    })
    leftButton.addEventListener("click", () => {
        if (current_page) {
            current_page = 0;
            title.textContent = "Vote +";
            rightButton.textContent = "Suivant";
            leftButton.hidden = true;
            select.value = vote.plus_player_id;
            nickname.value = vote.plus_nickname;
            reason.value = vote.plus_reason;
        }
    })
}

function showMessage(title, description, canBeDismissed, type) {
    let notification = document.getElementById("notification");
    notification.hidden = false;
    let notificationTitle = document.getElementById("title");
    notificationTitle.textContent = title;
    notificationTitle.classList.add(type);
    let detail = document.getElementById("detail");
    detail.textContent = description;
    let close = document.getElementById("close");
    close.hidden = !canBeDismissed;
    close.addEventListener("click", () => {
        notification.hidden = true;
    })
}

function read_cookie() {
    return document.cookie.includes("hasvoted=true");
}

let login = document.getElementById("login");
let logged = document.cookie.includes("logged=true");
login.textContent = logged ? "Se déconnecter" : "Se connecter";
login.href = logged ? "/logout" : "/login";

let _ = main();