index.js refactor

static/js/index.js

@@ -1,10 +1,10 @@
 let vote = {
-    plusId: null,
-    plusNickname: "",
-    plusReason: "",
-    minusId: null,
-    minusNickname: "",
-    minusReason: ""
+    plus_player_id: null,
+    plus_nickname: "",
+    plus_reason: "",
+    minus_player_id: null,
+    minus_nickname: "",
+    minus_reason: ""
 }
 
 let current_page = 0;
@@ -21,51 +21,75 @@ async function main() {
         select.append(option);
     })
     select.value = null;
+    select.addEventListener("change", () => {
+        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");
-    // better to do event listeners onchange with condition currentpage
-    // such as currentpage gets changed before reassigning values
-    // should work
-    rightButton.addEventListener("click", () => {
+    rightButton.addEventListener("click", async () => {
         if (current_page) {
-            vote.minusId = parseInt(select.value);
-            select.value = null;
-            vote.minusNickname = nickname.value;
-            nickname.value = "";
-            vote.minusReason = reason.value;
-            reason.value = "";
+            if (await fetch("/post", {
+                method:"post", body: JSON.stringify(vote)})
+                .then(r => r.status) === 200) {
+                showMessage("Merci pour ton vote!", "Ton vote a bien été prit en compte.", false);
+            }
             console.log(vote);
         } else {
             rightButton.textContent = "À voté!";
             title.textContent = "Vote -";
             current_page = 1;
-            vote.plusId = parseInt(select.value);
-            select.value = null;
-            vote.plusNickname = nickname.value;
-            nickname.value = "";
-            vote.plusReason = reason.value;
-            reason.value = "";
             leftButton.hidden = false;
-            select.value = vote.minusId;
-            nickname.value = vote.minusNickname;
-            reason.value = vote.minusReason;
+            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";
-                vote.minusId = parseInt(select.value);
-                vote.minusNickname = nickname.value;
-                vote.minusReason = reason.value;
-                leftButton.hidden = true;
-                select.value = vote.plusId;
-                nickname.value = vote.plusNickname;
-                reason.value = vote.plusReason;
-            }
-        })
+        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) {
+    let notification = document.getElementById("notification");
+    notification.hidden = false;
+    let notificationTitle = document.getElementById("title");
+    notificationTitle.textContent = title;
+    let detail = document.getElementById("detail");
+    detail.textContent = description;
+    let close = document.getElementById("close");
+    close.hidden = !canBeDismissed;
+    close.addEventListener("click", () => {
+        notification.hidden = true;
+    })
+}
+
+function cookie() {}
+
 let _ = main();