From 73f2d16728a0960e7dda522fa82c12fddbe18e34 Mon Sep 17 00:00:00 2001 From: Sciocatti Date: Sun, 8 Jan 2023 16:18:46 +0200 Subject: [PATCH] Use mock data to render first to panels. --- html/index.html | 162 +++++++++++++++++++++++++++++---------- html/static/css/main.css | 101 ++++++++++++++++++++---- html/static/js/main.js | 162 ++++++++++++++++++++++++++++++++++++++- 3 files changed, 367 insertions(+), 58 deletions(-) diff --git a/html/index.html b/html/index.html index f612d95..0e597ef 100644 --- a/html/index.html +++ b/html/index.html @@ -22,11 +22,109 @@
-

We're getting married

-
-
- - +
+

We're getting married

+
+
+
+ + + + +
+
+ + +
@@ -41,49 +139,31 @@

Loading

- - - - - \ No newline at end of file diff --git a/html/static/css/main.css b/html/static/css/main.css index 98f0cbe..101298a 100644 --- a/html/static/css/main.css +++ b/html/static/css/main.css @@ -1,12 +1,12 @@ /* VARIABLES */ :root { - --color-primary: #a598be; - --color-secondary: #e7d6a2; + --color-primary: rgb(165, 151, 190); + --color-secondary: rgb(231, 214, 162); --color-tertiary: #5260ff; --color-success: #2dd36f; --color-warning: #ffc409; --color-danger: #eb445a; - --color-dark: #19233e; + --color-dark: rgb(25, 35, 62); --color-medium: #92949c; --color-light: #f4f5f8; --base-rem-size: 12px; @@ -32,10 +32,6 @@ a { select { color: var(--color-secondary); background-color: var(--color-dark); -} - -#select-user { - width: 50%; text-align: center; font-size: 1.5rem; padding: 0.8rem; @@ -46,6 +42,52 @@ select { border-right: 0; } +input { + color: var(--color-secondary); + background-color: var(--color-dark); + text-align: center; + font-size: 1.5rem; + padding: 0.8rem; + border-style: solid; + border-top: 0; + border-left: 0; + border-right: 0; + border-bottom: 1px solid var(--color-secondary); +} + +/* ===== Scrollbar CSS ===== */ + /* Firefox */ + * { + scrollbar-width: auto; + scrollbar-color: var(--color-primary) var(--color-dark); + } + + /* Chrome, Edge, and Safari */ + *::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; + } + + *::-webkit-scrollbar-track { + background: var(--color-dark); + } + + *::-webkit-scrollbar-thumb { + background-color: var(--color-primary); + border-radius: 5px; + border: 0px solid var(--color-secondary); + } + +#select-party { + min-width: 50%; + max-width: 80%; + +} + +.color-secondary { + color: var(--color-secondary); +} + .container { width: 70%; margin: 5rem auto; @@ -54,10 +96,11 @@ select { box-shadow: 20px 20px 67px #0c101d, -20px -20px 67px #2b3d6c; display: flex; - gap: 2rem; + gap: 2rem 3rem; text-align: center; flex-wrap: wrap; align-items: stretch; + justify-content: center; } .container a { @@ -68,12 +111,26 @@ select { color: var(--color-secondary); } +.content { + width: 100%; +} + #page-content { + display: inline-block; + width: 100%; + letter-spacing: 1.8px; + position: relative; + margin-top: 0; transition: opacity 0.5s ease-in-out; + overflow-y: auto; + margin-bottom: 5rem; + height: calc(100% - 5rem); } #img-holder { width: 40%; + min-width: 290px; + max-width: 400px; } #img-holder img { @@ -83,7 +140,7 @@ select { .panel { width: calc(60% - 2rem); position: relative; - min-width: 450px; + min-width: 290px; } .panel h1 { @@ -96,16 +153,15 @@ select { color: var(--color-secondary); } -#page-content { +.panel-content { display: inline-block; - width: 100%; - margin-bottom: auto; - letter-spacing: 1.8px; position: relative; - margin-top: 0; - margin-bottom: 0; + height: 450px; + width: 100%; } + + .btn { --color: var(--color-primary); --color2: var(--color-dark); @@ -167,4 +223,19 @@ select { position: absolute; bottom: 1rem; width: 100%; +} + +.user-settings-user { + overflow-x: auto; + width: 100%; + margin-bottom: 3rem;; +} + +#user-settings-users h3 { + margin-top: 5rem;; +} + +#user-settings-users td { + min-width: 100px; + padding-bottom: 0.5rem; } \ No newline at end of file diff --git a/html/static/js/main.js b/html/static/js/main.js index cc913e2..cbcb2fd 100644 --- a/html/static/js/main.js +++ b/html/static/js/main.js @@ -1,19 +1,35 @@ function setPageContent(elemID) { - let elem = document.querySelector(elemID); let target = document.querySelector("#page-content"); target.style.opacity=0; setTimeout(function () { - target.innerHTML = elem.innerHTML; + // For all elements, set display to none + let elems = document.querySelectorAll(".content"); + elems.forEach(element => { + element.style.display = "none"; + }); + document.querySelector(elemID).style.display = "inline-block"; + if (Object.keys(pageFunctionsLoad).includes(elemID)) { + pageFunctionsLoad[elemID](data); + } target.style.opacity = 1; + showLoader(false); }, 500); } function nextPage() { + let elemID = pages[page]; + if (Object.keys(pageFunctionsExit).includes(elemID)) { + pageFunctionsExit[elemID](data); + } page = Math.min(page+1, pages.length-1); setPageContent(pages[page]); } function prevPage() { + let elemID = pages[page]; + if (Object.keys(pageFunctionsExit).includes(elemID)) { + pageFunctionsExit[elemID](data); + } page = Math.max(page-1, 0); setPageContent(pages[page]); } @@ -28,4 +44,146 @@ function showLoader(opacity) { elem.style.display = "none"; }, 500) } +} + +async function getData() { + let res = await fetch("/api/party.json"); + return await res.json(); +} + +function renderPartySelection(data) { + console.log("Render event for #landing triggered"); + let elem = document.querySelector("#select-party"); + elem.innerHTML = ""; + data.items.forEach(party => { + let opt = document.createElement("option"); + opt.value = party.id; + opt.innerHTML = party.party_name; + opt.classList.add("font-cinzel-light"); + elem.appendChild(opt); + }); + if (selectedParty) { + elem.value = selectedParty; + } +} + +function selectChosenParty(data) { + console.log("Exit event for #landing triggered"); + let elem = document.querySelector("#select-party"); + console.log("Setting selected party to: " + elem.value); + selectedParty = elem.value; +} + +function renderUserSettings(data) { + console.log("Render event for #user-settings triggered"); + let group; + for (let i = 0; i < data.items.length; i++) { + if (data.items[i].id != selectedParty) {continue}; + group = data.items[i]; + } + document.querySelector("#user-settings-name").innerHTML = group.party_name; + document.querySelector("#user-settings-seats").innerHTML = group.seats; + let elem = document.querySelector("#user-settings-users"); + elem.innerHTML = ""; + group.users.forEach(user => { + console.log(user) + addUserSettings(elem, user); + }); +} + +function addUserSettings(elem, user) { + let container = document.createElement("div"); + elem.appendChild(container); + + let name = document.createElement("h3"); + name.classList.add("color-secondary"); + name.innerHTML = user.name; + container.appendChild(name); + + let table = document.createElement("table"); + container.appendChild(table); + + let tr1 = document.createElement("tr"); + table.appendChild(tr1); + + let td11 = document.createElement("td"); + td11.innerHTML = "Name:"; + tr1.appendChild(td11); + + let td12 = document.createElement("td"); + tr1.appendChild(td12); + + let td12Input = document.createElement("input"); + td12Input.value = user.name; + td12Input.id = "user-settings-user-name-" + user.id; + td12.appendChild(td12Input); + + let td13 = document.createElement("td"); + td13.innerHTML = "*For seating arrangements"; + tr1.appendChild(td13); + + let tr2 = document.createElement("tr"); + table.appendChild(tr2); + + let td21 = document.createElement("td"); + td21.innerHTML = "E-mail:"; + tr2.appendChild(td21); + + let td22 = document.createElement("td"); + tr2.appendChild(td22); + + let td22Input = document.createElement("input"); + td22Input.value = user.email; + td22Input.type = "email" + td22Input.id = "user-settings-user-email-" + user.id; + td22.appendChild(td22Input); + + let td23 = document.createElement("td"); + td23.innerHTML = "*For updates and changes"; + tr2.appendChild(td23); + + let tr3 = document.createElement("tr"); + table.appendChild(tr3); + + let td31 = document.createElement("td"); + td31.innerHTML = "RSVP:"; + tr3.appendChild(td31); + + let td32 = document.createElement("td"); + tr3.appendChild(td32); + + let td32Select = document.createElement("select"); + td32.appendChild(td32Select); + let td32SelectOpt1 = document.createElement("option"); + td32SelectOpt1.value = true; + td32SelectOpt1.innerHTML = "I am going" + td32Select.appendChild(td32SelectOpt1); + let td32SelectOpt2 = document.createElement("option"); + td32SelectOpt2.value = false; + td32SelectOpt2.innerHTML = "I cannot come" + td32Select.appendChild(td32SelectOpt2); + td32Select.value = "" + user.rsvp_status + td32Select.id = "user-settings-user-rsvp_status-" + user.id; + + let td33 = document.createElement("td"); + tr3.appendChild(td33); + + let tr4 = document.createElement("tr"); + table.appendChild(tr4); + + let td41 = document.createElement("td"); + td41.innerHTML = "Allergies:"; + tr4.appendChild(td41); + + let td42 = document.createElement("td"); + tr4.appendChild(td42); + + let td42Input = document.createElement("input"); + td42Input.value = user.allergies; + td42Input.id = "user-settings-user-allergies-" + user.id; + td42.appendChild(td42Input); + + let td43 = document.createElement("td"); + td43.innerHTML = "*For food considerations, eg 'Tomatoes, Garlic'"; + tr4.appendChild(td43); } \ No newline at end of file