Use mock data to render first to panels.

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;
 }

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);
 }