static/html/index.html

@@ -16,6 +16,8 @@
         <h1 id="app_title">Vote +</h1>
         <label for="player_id">Pour qui votes tu?</label>
         <select id="player_id"></select>
+        <label id="other_label" for="other" hidden="hidden">Autre:</label>
+        <input id="other" hidden="hidden">
         <label for="nickname">As-tu un surnom à lui donner?</label>
         <input type="text" id="nickname">
         <label for="reason">Pourquoi votes-tu pour lui?</label>

static/js/index.js

@@ -24,10 +24,25 @@ async function main() {
         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 {
@@ -59,6 +74,19 @@ async function main() {
                     true, "warning");
                 return;
             }
+            if (select.value === "other") {
+                let otherInput = document.getElementById("other");
+                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)
             })
@@ -76,6 +104,19 @@ async function main() {
             }
             rightButton.textContent = "À voté!";
             title.textContent = "Vote -";
+            if (select.value === "other") {
+                let otherInput = document.getElementById("other");
+                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;