Home page progress + start of db manipulations

static/js/index.js

@@ -1,6 +1,4 @@
-App = {
-    div: document.getElementById("app"),
-    current_page: 0,
+Vote = {
     vote_plus_id: null,
     vote_plus_nickname: null,
     vote_plus_reason: null,
@@ -9,8 +7,56 @@ App = {
     vote_moins_reason: null
 }
 
-load_page(App["current_page"])
+load_page(0)
 
 function load_page(id) {
-    console.log("He he")
+    const header = document.createElement("h1");
+    const buttons = document.createElement("div");
+
+    const vote_id = document.createElement("h2");
+    vote_id.textContent = "Pour qui votes-tu?"
+    const vote_id_select = document.createElement("select");
+    const vote_nickname = document.createElement("h2");
+    vote_nickname.textContent = "As-tu un surnom à lui donner?";
+    const vote_nickname_input = document.createElement("input");
+    vote_nickname_input.inputMode = "text";
+    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;
+
+    if (id) {
+        vote_id_select.value = Vote.vote_moins_id;
+        vote_nickname_input.value = Vote.vote_moins_nickname;
+        vote_reason_input.value = Vote.vote_moins_reason;
+        header.textContent = "Vote -";
+        let previous = document.createElement("button");
+        previous.textContent = "Précédent";
+        previous.addEventListener("click", () => {
+            Vote.vote_moins_id = vote_id.value;
+            Vote.vote_moins_nickname = vote_nickname_input.value;
+            Vote.vote_moins_reason = vote_reason_input.value;
+            load_page(0)});
+        let submit = document.createElement("button");
+        submit.textContent = "A Voté";
+        buttons.append(previous, submit);
+    } else {
+        vote_id_select.value = Vote.vote_plus_id;
+        vote_nickname_input.value = Vote.vote_plus_nickname;
+        vote_reason_input.value = Vote.vote_plus_reason;
+        header.textContent = "Vote +";
+        let next = document.createElement("button");
+        next.innerText = "Suivant";
+        next.addEventListener("click", () => {
+            Vote.vote_plus_id = vote_id.value;
+            Vote.vote_plus_nickname = vote_nickname_input.value;
+            Vote.vote_plus_reason = vote_reason_input.value;
+            load_page(1)
+        });
+        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);
 }