AINDUSTRIES/vote-rllhc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reflection on how the main page works.

Browse Source
This commit is contained in:
AINDUSTRIES
2024-09-19 23:09:59 +02:00
parent 77e149eae1
commit 6122b21d90
3 changed files with 92 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
static/css/index.css
View File

@@ -38,6 +38,13 @@ body {
color: white; color: white;
} }
.app > label {
color: white;
font-size: 24px;
font-weight: bold;
margin-top: 8px;
}
.app > h1 { .app > h1 {
color: yellow; color: yellow;
} }
@@ -56,7 +63,7 @@ body {
resize: vertical; resize: vertical;
} }
.buttons > button { .app-nav > button {
font-size: 16px; font-size: 16px;
margin: 4px 0 4px 0; margin: 4px 0 4px 0;
padding: 5px; padding: 5px;
@@ -66,19 +73,19 @@ body {
border-radius: 5px; border-radius: 5px;
} }
.buttons { .app-nav {
width: 100%; width: 100%;
display: grid; display: grid;
gap: 5px; gap: 5px;
grid-template-columns: repeat(2, 50% [col-start]); grid-template-columns: repeat(2, 50% [col-start]);
} }
.left { .left-button {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 2; grid-column-end: 2;
} }
.right { .right-button {
grid-column-start: 2; grid-column-start: 2;
grid-column-end: 3; grid-column-end: 3;
} }

18
static/html/index.html
View File

@@ -11,7 +11,23 @@
<link rel="stylesheet" href="static/css/index.css"> <link rel="stylesheet" href="static/css/index.css">
</head> </head>
<body> <body>
<div id="app" class="app"></div> <div id="app" class="app">
<h1 id="app_title">Vote +</h1>
<label for="player_id">Pour qui votes tu?</label>
<select id="player_id"></select>
<label for="nickname">As-tu un surnom à lui donner?</label>
<input type="text" id="nickname">
<label for="reason">Pourquoi votes-tu pour lui?</label>
<textarea id="reason"></textarea>
<div id="app-nav" class="app-nav">
<button id="prev" hidden="hidden" class="left-button">Précédent</button>
<button id="next" class="right-button">Suivant</button>
</div>
</div>
<div id="notification" class="notification" hidden="hidden">
<h1 id="title"></h1>
<h2 id="detail"></h2>
</div>
<div id="footer" class="footer"> <div id="footer" class="footer">
<a href="/">Voter</a> <a href="/">Voter</a>
<a href="/results">Résultats</a> <a href="/results">Résultats</a>

185
static/js/index.js
View File

@@ -1,132 +1,71 @@
Vote = { let vote = {
plus_player_id: null, plusId: null,
plus_nickname: "", plusNickname: "",
plus_reason: "", plusReason: "",
minus_player_id: null, minusId: null,
minus_nickname: "", minusNickname: "",
minus_reason: "" minusReason: ""
} }
let _ = load_page(0) let current_page = 0;
async function load_page(id) { async function main() {
if (get_state()) { let players = await fetch("/data/players").then(r => r.json());
confirm_popup(); let select = document.getElementById("player_id");
return; let nickname = document.getElementById("nickname");
} let reason = document.getElementById("reason");
let players = await fetch("data/players").then(r => r.json()); players.forEach((x) => {
let option = document.createElement("option");
const header = document.createElement("h1"); option.value = x["id"];
const buttons = document.createElement("div"); option.textContent = x["name"];
buttons.className = "buttons"; select.append(option);
const idlbl = document.createElement("h2");
idlbl.textContent = "Pour qui votes-tu?"
const id_select = document.createElement("select");
const nickname = document.createElement("h2");
nickname.textContent = "As-tu un surnom à lui donner?";
const nickname_input = document.createElement("input");
nickname_input.inputMode = "text";
nickname_input.maxLength = 100;
const reason = document.createElement("h2");
reason.textContent = "Pourquoi votes-tu pour lui?";
const reason_input = document.createElement("textarea");
reason_input.maxLength = 1000;
players.forEach((player) => {
const player_option = document.createElement("option");
player_option.value = player["id"];
player_option.innerText = player["name"];
id_select.appendChild(player_option);
}) })
select.value = null;
if (id) { let rightButton = document.getElementById("next");
id_select.value = Vote.minus_player_id; let leftButton = document.getElementById("prev");
nickname_input.value = Vote.minus_nickname; let title = document.getElementById("app_title");
reason_input.value = Vote.minus_reason; // better to do event listeners onchange with condition currentpage
header.textContent = "Vote -"; // such as currentpage gets changed before reassigning values
let previous = document.createElement("button"); // should work
previous.textContent = "Précédent"; rightButton.addEventListener("click", () => {
previous.addEventListener("click", () => { if (current_page) {
Vote.minus_player_id = id_select.value; vote.minusId = parseInt(select.value);
Vote.minus_nickname = nickname_input.value; select.value = null;
Vote.minus_reason = reason_input.value; vote.minusNickname = nickname.value;
load_page(0) nickname.value = "";
}); vote.minusReason = reason.value;
let submit = document.createElement("button"); reason.value = "";
submit.textContent = "A Voté"; console.log(vote);
submit.addEventListener("click", async () => {
if (Vote.plus_id === null || id_select.value === "") {
const popUp = document.createElement("div");
popUp.className = "popup";
const message = document.createElement("h2");
message.textContent = "Tu dois dire pour qui tu vote!";
const page = document.body;
popUp.append(message);
page.append(popUp);
} else { } else {
Vote.minus_player_id = id_select.value; rightButton.textContent = "À voté!";
Vote.minus_nickname = nickname_input.value; title.textContent = "Vote -";
Vote.minus_reason = reason_input.value; current_page = 1;
if (await send_vote(Vote)) { vote.plusId = parseInt(select.value);
confirm_popup(); select.value = null;
save_state(); 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;
}
})
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;
} }
}) })
submit.className = "right";
previous.className = "left";
buttons.append(previous, submit);
} else {
id_select.value = Vote.plus_player_id;
nickname_input.value = Vote.plus_nickname;
reason_input.value = Vote.plus_reason;
header.textContent = "Vote +";
let next = document.createElement("button");
next.innerText = "Suivant";
next.addEventListener("click", () => {
Vote.plus_player_id = id_select.value;
Vote.plus_nickname = nickname_input.value;
Vote.plus_reason = reason_input.value;
load_page(1)
});
next.className = "right";
buttons.appendChild(next);
} }
let _ = main();
const div = document.getElementById("app");
div.innerHTML = "";
div.append(header, idlbl, id_select, nickname, nickname_input, reason, 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) {
vote.plus_player_id = parseInt(vote.plus_player_id, 10);
vote.minus_player_id = parseInt(vote.minus_player_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;
}