Vote + Results done

static/js/index.js

@@ -1,17 +1,24 @@
 Vote = {
     vote_plus_id: null,
-    vote_plus_nickname: null,
-    vote_plus_reason: null,
+    vote_plus_nickname: "",
+    vote_plus_reason: "",
     vote_moins_id: null,
-    vote_moins_nickname: null,
-    vote_moins_reason: null
+    vote_moins_nickname: "",
+    vote_moins_reason: ""
 }
 
-load_page(0)
+let _ = load_page(0)
+
+async function load_page(id) {
+    if (get_state()) {
+        confirm_popup();
+        return;
+    }
+    let players = await fetch("data/players").then(r => r.json());
 
-function load_page(id) {
     const header = document.createElement("h1");
     const buttons = document.createElement("div");
+    buttons.className = "buttons";
 
     const vote_id = document.createElement("h2");
     vote_id.textContent = "Pour qui votes-tu?"
@@ -20,11 +27,19 @@ function load_page(id) {
     vote_nickname.textContent = "As-tu un surnom à lui donner?";
     const vote_nickname_input = document.createElement("input");
     vote_nickname_input.inputMode = "text";
+    vote_nickname_input.maxLength = 100;
     const vote_reason = document.createElement("h2");
     vote_reason.textContent = "Pourquoi votes-tu pour lui?";
     const vote_reason_input = document.createElement("textarea");
     vote_reason_input.maxLength = 1000;
 
+    players.forEach((player) => {
+        const player_option = document.createElement("option");
+        player_option.value = player["id"];
+        player_option.innerText = player["name"];
+        vote_id_select.appendChild(player_option);
+    })
+
     if (id) {
         vote_id_select.value = Vote.vote_moins_id;
         vote_nickname_input.value = Vote.vote_moins_nickname;
@@ -33,12 +48,24 @@ function load_page(id) {
         let previous = document.createElement("button");
         previous.textContent = "Précédent";
         previous.addEventListener("click", () => {
-            Vote.vote_moins_id = vote_id.value;
+            Vote.vote_moins_id = vote_id_select.value;
             Vote.vote_moins_nickname = vote_nickname_input.value;
             Vote.vote_moins_reason = vote_reason_input.value;
-            load_page(0)});
+            load_page(0)
+        });
         let submit = document.createElement("button");
         submit.textContent = "A Voté";
+        submit.addEventListener("click", async () => {
+            Vote.vote_moins_id = vote_id_select.value;
+            Vote.vote_moins_nickname = vote_nickname_input.value;
+            Vote.vote_moins_reason = vote_reason_input.value;
+            if (await send_vote(Vote)) {
+                confirm_popup();
+                save_state();
+            }
+        })
+        submit.className = "right";
+        previous.className = "left";
         buttons.append(previous, submit);
     } else {
         vote_id_select.value = Vote.vote_plus_id;
@@ -48,15 +75,51 @@ function load_page(id) {
         let next = document.createElement("button");
         next.innerText = "Suivant";
         next.addEventListener("click", () => {
-            Vote.vote_plus_id = vote_id.value;
+            Vote.vote_plus_id = vote_id_select.value;
             Vote.vote_plus_nickname = vote_nickname_input.value;
             Vote.vote_plus_reason = vote_reason_input.value;
             load_page(1)
         });
+        next.className = "right";
         buttons.appendChild(next);
     }
 
+
     const div = document.getElementById("app");
     div.innerHTML = "";
-    div.append(header,vote_id, vote_id_select, vote_nickname, vote_nickname_input, vote_reason, vote_reason_input, buttons);
+    div.append(header, vote_id, vote_id_select, vote_nickname, vote_nickname_input, vote_reason, vote_reason_input, buttons);
+}
+
+function confirm_popup() {
+    const div = document.getElementById("app");
+    div.innerText = "";
+    div.className = "confirm";
+    let success = document.createElement("h1");
+    success.textContent = "Merci d'avoir voté!"
+    let sub = document.createElement("h3");
+    sub.textContent = "Ton vote a bien été prit en compte!";
+    div.append(success, sub);
+}
+function save_state() {
+    // create cookie with expiration the next day.
+    let date = new Date(Date.now());
+    date.setDate(date.getDate() + 1);
+    date.setHours(0, 0, 0, 0);
+    document.cookie = "hasvoted=true; expires=" + date.toUTCString()
+}
+
+function get_state() {
+    // get the cookie if exists => already voted.
+    let cookie = document.cookie;
+    return cookie.includes("hasvoted=true");
+}
+async function send_vote(vote) {
+    if (vote.vote_plus_id === null || vote.vote_moins_id === null) {
+        return false;
+    }
+    vote.vote_plus_id = parseInt(vote.vote_plus_id, 10);
+    vote.vote_moins_id = parseInt(vote.vote_moins_id, 10);
+    let body = JSON.stringify(vote);
+    let result = await fetch(window.location.href + "post", {method: "POST", body: body}).then(r => r.status);
+    return result === 200;
 }