summaryrefslogtreecommitdiff
path: root/index.tmpl.html
diff options
context:
space:
mode:
authorRaymaekers Luca <luca@spacehb.net>2025-11-07 18:26:36 +0100
committerRaymaekers Luca <luca@spacehb.net>2025-11-07 18:26:36 +0100
commit18d189f5c79ed30a96410c9443eddb80c7a89d1e (patch)
tree6778b725b8a13ea3d71d2f192c452b8ce07a4b3b /index.tmpl.html
parentbef456df253a057c536b6fda209c45c8807eee4b (diff)
Organized so it is easier to share code across modules
Diffstat (limited to 'index.tmpl.html')
-rw-r--r--index.tmpl.html321
1 files changed, 0 insertions, 321 deletions
diff --git a/index.tmpl.html b/index.tmpl.html
deleted file mode 100644
index cedd378..0000000
--- a/index.tmpl.html
+++ /dev/null
@@ -1,321 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr" data-theme="dark">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
- <meta property="og:title" content="Cadeaux de noël 2025"/>
- <meta property="og:description" content="À qui offrir le cadeau de noël?"/>
-
- <meta property="og:image" content="/static/favicon.ico" />
-
- <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
- <style>
-h1 {
- display: flex;
- justify-content: center;
-}
-
-button {
- font-size: 1rem;
-}
-
-.buttons {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- gap: 1rem;
-}
-
-body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 50vh;
-}
-
-span.name {
- color: #87bfcf;
-}
-
-textarea {
- display: block !important;
-}
-
-.fade {
- animation: fadeOut 1s forwards; /* Duration and direction of the animation */
-}
-
-@keyframes fadeOut {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
-}
-
- </style>
- <script>
-"use strict";
-
-//- Globals
-let people =
-[{{ range .People }}
- {"name": "{{.Name}}", "has_picked": {{.HasPicked}},}, {{ end }}
-];
-
-let local_storage_key = "{{.Key}}";
-
-let global_all_data = {
- initialized: false,
- token: null,
- thisName: null,
- thisWishlist: null,
- otherName: null,
- otherWishlist: null,
-};
-
-//- Helpers
-function findPersonByName(picking_person_name) {
- let result = null;
-
- for(let peopleIndex = 0; peopleIndex < people.length; peopleIndex += 1)
- {
- if(people[peopleIndex].name === picking_person_name)
- {
- result = people[peopleIndex];
- break;
- }
- }
-
- return result;
-}
-
-//- Pages
-function setPageChoose() {
- document.body.innerHTML = `
- <div>
- <h1>Qui es-tu?</h1>
- <div class="buttons">
- </div>
- </div>
- `;
-
- let buttons = document.querySelector("div.buttons");
- for(let index = 0; index < people.length; index += 1)
- {
- let person = people[index];
- if(!person.has_picked)
- {
- let button = document.createElement('button');
- button.textContent = people[index].name;
- buttons.appendChild(button);
- button.addEventListener("click", function(event) {
- event.preventDefault();
-
- let name = person.name;
- let thisPerson = findPersonByName(name);
-
- document.body.innerHTML = `
- <h1>Tu es bien ${thisPerson.name}?</h1>
- <div class="buttons">
- <button id="yes">Oui</button>
- <button id="no">Non</button>
- </div>`;
-
- let yes_button = document.getElementById("yes");
- let no_button = document.getElementById("no");
-
- yes_button.addEventListener("click", async function(event) {
- event.preventDefault();
- await fetch(`/choose/?name=${thisPerson.name}`)
- .then(function(response) {
- if (!response.ok) {
- console.error('Network response was not ok');
- }
- return response.json();
- })
- .then(function(response) {
- global_all_data.token = response.Token;
- global_all_data.thisName = thisPerson.name;
- global_all_data.thisWishlist = response.ThisWishlist;
- global_all_data.otherName = response.OtherName;
- global_all_data.otherWishlist = response.OtherWishlist;
- global_all_data.initialized = true;
-
- localStorage.setItem(local_storage_key, JSON.stringify(global_all_data));
- })
- .catch(function(error) {
- console.error('There was a problem with the fetch operation:', error);
- });
-
- setPageThisPerson();
- });
-
- no_button.addEventListener("click", function(event) {
- event.preventDefault();
- setPageChoose();
- });
-
- }); // button click even listener
- } // has_picked
- } // for loop
-}
-
-function setPageOtherPerson() {
- let wishlistID = "wishlist";
- document.body.innerHTML = `
- <div>
- <h1>Tu as&nbsp;<span class="name">${global_all_data.otherName}</span>.</h1>
- <h4>Sa liste des souhaits:</h4>
- <textarea readonly rows="5" cols="40" id="${wishlistID}" placeholder="vide..."></textarea>
- </div>
- `;
- let wishlist = document.getElementById(wishlistID);
-
- wishlist.textContent = global_all_data.otherWishlist;
-
- fetch(`/list/?name=${global_all_data.thisName}&token=${global_all_data.token}`)
- .then(function(response) {
- if (!response.ok) {
- console.error('Network response was not ok');
- }
- return response.text();
- })
- .then(function(response) {
- if(wishlist.textContent != response)
- {
- global_all_data.otherWishlist = response;
- wishlist.textContent = global_all_data.otherWishlist;
- localStorage.setItem(local_storage_key, JSON.stringify(global_all_data));
- }
- })
- .catch(function(error) {
- console.error('There was a problem with the fetch operation:', error);
- });
-
-}
-
-function setPageThisPerson() {
- let showPersonButtonID = "show-person";
- let writeLetterButtonID = "write-letter";
-
- document.body.innerHTML = `
- <main class="container">
- <h1>Noël-An de &nbsp;<span class="name">${global_all_data.thisName}</span></h1>
- <div class="buttons">
- <button id="${showPersonButtonID}">Voir qui j'ai choisi</button>
- <button id="${writeLetterButtonID}">Ma liste des souhaits</button>
- </div>
- <h4><b>Infos:</b></h4>
- <ul>
- <li>Ne dévoilez à persone qui vous avez tiré au sort!</li>
- <li>Vous pouvez écrire une liste de souhaits, la personne ayant tiré votre nom y a accès.</li>
- <li>Il n'est pas obligé de respecter la liste ou d'en écrire une. Elle sert pour inspirer des idées de cadeaux.</li>
- <li>Si vous avez un soucis n'hésitez-pas à me contacter !</li>
- </ul>
- </main>
- `;
-
- let showPersonButton = document.getElementById(showPersonButtonID);
- showPersonButton.addEventListener("click", function(event) {
- event.preventDefault();
-
- setPageOtherPerson();
- });
-
- let writeLetterButton = document.getElementById(writeLetterButtonID);
- writeLetterButton.addEventListener("click", function(event) {
- event.preventDefault();
-
- let sendLetterButtonID = "send-letter";
- let letterTextAreaID = "letter-text";
-
- document.body.innerHTML = `
- <div>
- <h1>Liste des souhaits</h1>
- <textarea id="${letterTextAreaID}" rows="5" cols="40" placeholder="..."></textarea>
- <div class="buttons">
- <button id="${sendLetterButtonID}">sauvegarder</button>
- </div>
- </div>
- `;
-
- let letterTextArea = document.getElementById(letterTextAreaID);
- letterTextArea.textContent = global_all_data.thisWishlist;
-
- let sendLetterButton = document.getElementById(sendLetterButtonID);
- sendLetterButton.addEventListener("click", function(event) {
- event.preventDefault();
-
- console.log("Sending list of", global_all_data.thisName);
-
- global_all_data.thisWishlist = letterTextArea.value
- localStorage.setItem(local_storage_key, JSON.stringify(global_all_data));
-
- let messageBody = {
- name: global_all_data.thisName,
- token: global_all_data.token,
- text: letterTextArea.value,
- };
- const postBody = new URLSearchParams(messageBody).toString();
-
- fetch('/list/', {
- method: 'POST',
- headers:
- {
- 'Content-Type': 'application/x-www-form-urlencoded'
- },
- body: postBody,
- })
- .then(function(response) {
- response.text().
- then(function(text_response) {
- const textElement = document.createElement('div');
- textElement.textContent = 'Sauvegardé';
- textElement.classList.add('fade');
- let buttons = document.querySelector("div.buttons");
- buttons.appendChild(textElement);
- setTimeout(function() {
- textElement.remove();
- }, 1000);
- })
- })
- .catch(function(error) { console.error('Error:', error); });
-
- }); // add event listener send button
- }); // add event listener write letter
-}
-
-//- Main
-window.onload = function() {
- // NOTE(luca): Users will expect going back to go to the home page so we do this manually.
- var stateObj = { home: "home" };
- history.pushState(stateObj, "home", "/");
- window.addEventListener('popstate', function(event) {
- window.location.reload();
- });
-
- let all_data = localStorage.getItem(local_storage_key);
- if(!all_data)
- {
- setPageChoose();
- }
- else
- {
- let data_parsed = JSON.parse(all_data);
- global_all_data = data_parsed;
- console.log(global_all_data);
-
- setPageThisPerson();
- }
-};
- </script>
- </head>
- <body>
- </body>
-
-</html>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-25 23:47:50 +0000