summaryrefslogtreecommitdiff
path: root/code/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 /code/index.tmpl.html
parentbef456df253a057c536b6fda209c45c8807eee4b (diff)
Organized so it is easier to share code across modules
Diffstat (limited to 'code/index.tmpl.html')
-rw-r--r--code/index.tmpl.html321
1 files changed, 321 insertions, 0 deletions
diff --git a/code/index.tmpl.html b/code/index.tmpl.html
new file mode 100644
index 0000000..cedd378
--- /dev/null
+++ b/code/index.tmpl.html
@@ -0,0 +1,321 @@
+<!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 19:38:16 +0000