index.js refactor

static/css/index.css

@@ -89,16 +89,20 @@ body {
     grid-column-start: 2;
     grid-column-end: 3;
 }
-.confirm {
+.notification {
+    position: absolute;
+    top: 0;
     margin: auto;
-    width: fit-content;
+    width: 100%;
+    height: 100dvh;
     text-align: center;
+    background-color: #11111b;
 }
 
-.confirm > h1 {
+.notification > h1 {
     color: yellow;
 }
 
-.confirm > h3 {
+.notification > h3 {
     color: white;
 }

static/html/index.html

@@ -26,7 +26,8 @@
     </div>
     <div id="notification" class="notification" hidden="hidden">
         <h1 id="title"></h1>
-        <h2 id="detail"></h2>
+        <h3 id="detail"></h3>
+        <button id="close">Ok</button>
     </div>
     <div id="footer" class="footer">
         <a href="/">Voter</a>

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,35 +21,46 @@ 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", () => {
@@ -57,15 +68,28 @@ async function main() {
             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;
+            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();