Use mock data to render first to panels.

html/index.html

@@ -22,11 +22,109 @@
             <img src="/static/img/Invitation.jpeg" alt="">
         </div>
         <div class="panel">
-            <h1 class="font-amelia-giovani-regular">We're getting married</h1>
-            <div id="page-content" style="opacity: 0"></div>
-            <div class="btn-holder">
-                <button class="btn font-cinzel-regular" onclick="prevPage()">Back</button>
-                <button class="btn font-cinzel-regular" onclick="nextPage()">Continue</button>
+            <div class="panel-header">
+                <h1 class="font-amelia-giovani-regular">We're getting married</h1>
+            </div>
+            <div class="panel-content">
+                <div id="page-content" style="opacity: 0">
+                    <!-- Landing Page HTML -->
+                    <div id="landing" class="content" style="display: none;">
+                        <p>
+                            We want you to enjoy the event with us.
+                            <br>
+                            Please go through the steps below 
+                            <br>
+                            to help us make it the best day.
+                        </p>
+                        <br><br>
+                        <h2 style="color: var(--color-secondary);">We are</h2>
+                        <select class="font-cinzel-light" id="select-party">
+                            <option class="font-cinzel-light" value="1">Erna & Michael</option>
+                            <option class="font-cinzel-light" value="1">Susan & Andre</option>
+                            <option class="font-cinzel-light" value="1">Aloma & Ruben</option>
+                        </select>
+                    </div>
+
+                    <div id="user-settings" class="content" style="display: none;">
+                        <h3>Hello, <span class="color-secondary" id="user-settings-name"></span></h3>
+                        <p>
+                            Your group has <span class="color-secondary" id="user-settings-seats">X</span> seats.
+                            <br>
+                            Can you please check all info is correct for the group?
+                        </p>
+                        <div id="user-settings-users">
+                            
+                            <div>
+                                <h3 class="color-secondary">Erna</h3>
+                                <div class="user-settings-user">
+                                    <table>
+                                        <tr>
+                                            <td>Name:</td>
+                                            <td><input type="text"></td>
+                                            <td>(For seating arrangements)</td>
+                                        </tr>
+                                        <tr>
+                                            <td>E-mail:</td>
+                                            <td><input type="email"></td>
+                                            <td>*For updates and changes</td>
+                                        </tr>
+                                        <tr>
+                                            <td>RSVP:</td>
+                                            <td>
+                                                <select name="" id="">
+                                                    <option value="">I am going</option>
+                                                    <option value="">I cannot come</option>
+                                                </select>
+                                            </td>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td>Allergies:</td>
+                                            <td><input type="text"></td>
+                                            <td>(For food considerations, eg Tomatoes, Garlic)</td>
+                                        </tr>
+                                    </table>
+                                </div>
+                            </div>
+                            <div>
+                                <h3 class="color-secondary">Michael</h3>
+                                <div class="user-settings-user">
+                                    <table>
+                                        <tr>
+                                            <td>Name:</td>
+                                            <td><input type="text"></td>
+                                            <td>(For seating arrangements)</td>
+                                        </tr>
+                                        <tr>
+                                            <td>E-mail:</td>
+                                            <td><input type="email"></td>
+                                            <td>*For updates and changes</td>
+                                        </tr>
+                                        <tr>
+                                            <td>RSVP:</td>
+                                            <td>
+                                                <select name="" id="">
+                                                    <option value="">I am going</option>
+                                                    <option value="">I cannot come</option>
+                                                </select>
+                                            </td>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td>Allergies:</td>
+                                            <td><input type="text"></td>
+                                            <td>(For food considerations, eg Tomatoes, Garlic)</td>
+                                        </tr>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="btn-holder">
+                    <button class="btn font-cinzel-regular" onclick="prevPage()">Back</button>
+                    <button class="btn font-cinzel-regular" onclick="nextPage()">Continue</button>
+                </div>
             </div>
         </div>
     </div>
@@ -41,49 +139,31 @@
         </div>
         <h2>Loading</h2>
     </div>
-
-    <!-- Landing Page HTML -->
-    <div id="landing" class="content" style="display: none;">
-        <p>
-            We want you to enjoy the event with us.
-            <br>
-            Please go through the steps below 
-            <br>
-            to help us make it the best day.
-        </p>
-        <br><br>
-        <h2 style="color: var(--color-secondary);">We are</h2>
-        <select class="font-cinzel-light" id="select-user">
-            <option class="font-cinzel-light" value="1">Erna & Michael</option>
-            <option class="font-cinzel-light" value="1">Susan & Andre</option>
-            <option class="font-cinzel-light" value="1">Aloma & Ruben</option>
-        </select>
-    </div>
-    
-    <div id="user-selection" class="content" style="display: none;">
-        <p>
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam, nemo cumque unde fugiat quo voluptas impedit alias numquam commodi officiis error fugit sit, quia culpa quis dolor excepturi, odit ratione!
-        </p>
-        <ul>
-            <li>User</li>
-            <li>RSVP</li>
-            <li>Choose menu</li>
-            <li>Choose drinks</li>
-            <li>Venue info</li>
-        </ul>
-    </div>
 </body>
 
 <!-- JS -->
 <script src="/static/js/main.js"></script>
 <script>
     // Actions get called from here. This makes it easy to see what starts where.
-    var pages = ["#landing", "#user-selection"];
+    var pages = ["#landing", "#user-settings"];
     var page = 0;
+    var data;
+    var selectedParty;
 
-    setPageContent("#landing");
-    setTimeout(function () {
-        showLoader(false);
-    }, 1000)
+    var pageFunctionsLoad = {
+        "#landing": renderPartySelection,
+        "#user-settings": renderUserSettings
+    }
+
+    var pageFunctionsExit = {
+        "#landing": selectChosenParty
+    }
+
+    async function onLoad() {
+        data = await getData();
+        setPageContent("#landing");
+    }
+
+    onLoad();
 </script>
 </html>

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