Merge branch 'main' into stage

Use mock data to render first to panels.
Added mock data.
2023-01-11 18:42:44 +02:00 · 2023-01-08 16:18:46 +02:00 · 2023-01-08 16:18:14 +02:00 · 2023-01-08 16:18:04 +02:00 · 2023-01-08 00:35:11 +02:00 · 2023-01-08 00:27:59 +02:00
16 changed files with 748 additions and 24 deletions
--- a/html/api/party.json
+++ b/html/api/party.json
@@ -0,0 +1,37 @@
+{
+    "items": [
+        {
+            "id": 1,
+            "seats": 2,
+            "modified_data": false,
+            "party_name": "Erna & Michael",
+            "users": [
+                {
+                    "id": 1,
+                    "name": "Erna",
+                    "rsvp_status": false,
+                    "meals": [],
+                    "drinks": [],
+                    "allergies": "None",
+                    "email": ""
+                },
+                {
+                    "id": 2,
+                    "name": "Michael",
+                    "rsvp_status": false,
+                    "meals": [],
+                    "drinks": [],
+                    "allergies": "None",
+                    "email": ""
+                }
+            ]
+        },
+        {
+            "id": 2,
+            "seats": 2,
+            "modified_data": false,
+            "party_name": "Party 2",
+            "users": []
+        }
+    ]
+}
--- a/html/index.html
+++ b/html/index.html
@@ -11,22 +11,159 @@
    <link rel="icon" type="image/png" sizes="16x16" href="/static/fav/favicon-16x16.png">
    <link rel="shortcut icon" href="/static/fav/favicon.ico" type="image/x-icon">
    <!-- CSS -->
-    <link rel="stylesheet" href="/static/css/fonts.css">
+    <link rel="stylesheet" href="/static/css/font-cinzel.css">
+    <link rel="stylesheet" href="/static/css/font-amelia-giovani.css">
+    <link rel="stylesheet" href="/static/css/loaders.css">
    <link rel="stylesheet" href="/static/css/main.css">
 </head>
 <body>
-    <div class="container">
-        <img src="/static/img/logo.png" alt="">
-        <h1>Hey, this template is hosted at <a href="http://192.168.195.195:30001">this</a> repo.</h1>
-        <p>You have had this page open for <span id="counter">1</span> seconds.</p>
+    <div class="container font-cinzel-regular">
+        <div id="img-holder">
+            <img src="/static/img/Invitation.jpeg" alt="">
+        </div>
+        <div class="panel">
+            <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>
+
+    <div id="loading-page">
+        <br><br><br><br><br><br>
+        <div class="newtons-cradle">
+            <div class="newtons-cradle-dot"></div>
+            <div class="newtons-cradle-dot"></div>
+            <div class="newtons-cradle-dot"></div>
+            <div class="newtons-cradle-dot"></div>
+        </div>
+        <h2>Loading</h2>
    </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.
-    setInterval(function () {
-        incrementCounter();
-    }, 1000);
+    var pages = ["#landing", "#user-settings"];
+    var page = 0;
+    var data;
+    var selectedParty;
+
+    var pageFunctionsLoad = {
+        "#landing": renderPartySelection,
+        "#user-settings": renderUserSettings
+    }
+
+    var pageFunctionsExit = {
+        "#landing": selectChosenParty
+    }
+
+    async function onLoad() {
+        data = await getData();
+        setPageContent("#landing");
+    }
+
+    onLoad();
 </script>
 </html>
--- a/html/static/css/font-amelia-giovani.css
+++ b/html/static/css/font-amelia-giovani.css
@@ -0,0 +1,11 @@
+@font-face {
+    font-family: AmeliaGiovani;
+    src: url(../fonts/Amelia\ Giovani\ Regular.otf);
+    font-weight: 400;
+    font-style: normal;
+}
+
+.font-amelia-giovani-regular {
+    font-family: AmeliaGiovani;
+    font-weight: 400;
+}
--- a/html/static/css/font-cinzel.css
+++ b/html/static/css/font-cinzel.css
@@ -0,0 +1,72 @@
+/* Cinzel */
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-Regular.ttf);
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-Medium.ttf);
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-SemiBold.ttf);
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-Bold.ttf);
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-ExtraBold.ttf);
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-Black.ttf);
+    font-weight: 900;
+    font-style: normal;
+}
+
+.font-cinzel-regular {
+    font-family: Cinzel;
+    font-weight: 400;
+}
+
+.font-cinzel-medium {
+    font-family: Cinzel;
+    font-weight: 500;
+}
+
+.font-cinzel-semi-bold {
+    font-family: Cinzel;
+    font-weight: 600;
+}
+
+.font-cinzel-bold {
+    font-family: Cinzel;
+    font-weight: 700;
+}
+
+.font-cinzel-extra-bold {
+    font-family: Cinzel;
+    font-weight: 800;
+}
+
+.font-cinzel-extra-black {
+    font-family: Cinzel;
+    font-weight: 900;
+}
--- a/html/static/css/font-roboto.css
+++ b/html/static/css/font-roboto.css
@@ -1,3 +1,5 @@
+/* ROBOTO */
+
@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Thin.ttf);
@@ -82,36 +84,36 @@
    font-style: italic;
 }

-.font-italic {
+.font-roboto-italic {
    font-style: italic;
 }

-.font-thin {
+.font-roboto-thin {
    font-family: Roboto;
    font-weight: 100;
 }

-.font-light {
+.font-roboto-light {
    font-family: Roboto;
    font-weight: 300;
 }

-.font-regular {
+.font-roboto-regular {
    font-family: Roboto;
    font-weight: 400;
 }

-.font-medium {
+.font-roboto-medium {
    font-family: Roboto;
    font-weight: 500;
 }

-.font-bold {
+.font-roboto-bold {
    font-family: Roboto;
    font-weight: 700;
 }

-.font-black {
+.font-roboto-black {
    font-family: Roboto;
    font-weight: 900;
 }
--- a/html/static/css/loaders.css
+++ b/html/static/css/loaders.css
@@ -0,0 +1,86 @@
+#loading-page {
+    background-color: var(--color-dark);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    z-index: 10000;
+    top: 0;
+    left: 0;
+    align-content: center;
+    align-items: baseline;
+    flex-wrap: wrap;
+    transition: opacity 0.5s;
+}
+
+.newtons-cradle {
+    --uib-speed: 1.2s;
+    --uib-color: var(--color-primary);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 75px;
+    height: 75px;
+}
+   
+.newtons-cradle-dot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 1.8rem;
+    transform-origin: center top;
+}
+   
+.newtons-cradle-dot::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 25%;
+    border-radius: 50%;
+    background-color: var(--uib-color);
+}
+   
+.newtons-cradle-dot:first-child {
+    animation: swing var(--uib-speed) linear infinite;
+}
+   
+.newtons-cradle-dot:last-child {
+    animation: swing2 var(--uib-speed) linear infinite;
+}
+   
+@keyframes swing {
+    0% {
+     transform: rotate(0deg);
+     animation-timing-function: ease-out;
+    }
+   
+    25% {
+     transform: rotate(70deg);
+     animation-timing-function: ease-in;
+    }
+   
+    50% {
+     transform: rotate(0deg);
+     animation-timing-function: linear;
+    }
+}
+   
+@keyframes swing2 {
+    0% {
+     transform: rotate(0deg);
+     animation-timing-function: linear;
+    }
+   
+    50% {
+     transform: rotate(0deg);
+     animation-timing-function: ease-out;
+    }
+   
+    75% {
+     transform: rotate(-70deg);
+     animation-timing-function: ease-in;
+    }
+}
--- a/html/static/css/main.css
+++ b/html/static/css/main.css
@@ -1,12 +1,12 @@
 /* VARIABLES */
 :root {
-    --color-primary: #c9cacf;
-    --color-secondary: #f2f2f3;
+    --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: #3d3e43;
+    --color-dark: rgb(25, 35, 62);
    --color-medium: #92949c;
    --color-light: #f4f5f8;
    --base-rem-size: 12px;
@@ -29,13 +29,78 @@ a {
    transition: color 0.3s;
 }

+select {
+    color: var(--color-secondary);
+    background-color: var(--color-dark);
+    text-align: center;
+    font-size: 1.5rem;
+    padding: 0.8rem;
+    border-style: solid;
+    border-color: var(--color-secondary);
+    border-top: 0;
+    border-left: 0;
+    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: 80%;
+    width: 70%;
    margin: 5rem auto;
    padding: 3rem;
    border-radius: 1rem;
-    box-shadow:  16px 16px 36px #626369,
-    -16px -16px 36px #c2c5cf;
+    box-shadow:  20px 20px 67px #0c101d,
+    -20px -20px 67px #2b3d6c;
+    display: flex;
+    gap: 2rem 3rem;
+    text-align: center;
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: center;
 }

 .container a {
@@ -44,4 +109,133 @@ a {

 .container a:hover {
    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 {
+    width: 100%;
+}
+
+.panel {
+    width: calc(60% - 2rem);
+    position: relative;
+    min-width: 290px;
+}
+
+.panel h1 {
+    font-size: 4rem;
+    letter-spacing: 1.2px;
+    text-decoration: underline 1px;
+    text-underline-offset: 15px;
+    margin-bottom: 1rem;
+    margin-top: 0;
+    color: var(--color-secondary);
+}
+
+.panel-content {
+    display: inline-block;
+    position: relative;
+    height: 450px;
+    width: 100%;
+}
+
+
+
+.btn {
+    --color: var(--color-primary);
+    --color2: var(--color-dark);
+    padding: 0.8em 1.75em;
+    background-color: transparent;
+    border-radius: 6px;
+    border: .3px solid var(--color);
+    transition: .5s;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    z-index: 1;
+    font-size: 1rem;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    color: var(--color);
+    margin-left: 2rem;
+   }
+   
+   .btn::after, .btn::before {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    transform: skew(90deg) translate(-50%, -50%);
+    position: absolute;
+    inset: 50%;
+    left: 25%;
+    z-index: -1;
+    transition: .5s ease-out;
+    background-color: var(--color);
+    text-shadow: 1px;
+   }
+   
+   .btn::before {
+    top: -50%;
+    left: -25%;
+    transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
+   }
+   
+   .btn:hover::before {
+    transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
+   }
+   
+   .btn:hover::after {
+    transform: skew(45deg) translate(-50%, -50%);
+   }
+   
+   .btn:hover {
+    color: var(--color2);
+   }
+   
+   .btn:active {
+    filter: brightness(.7);
+    transform: scale(.98);
+   }
+
+.btn-holder {
+    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;
 }
--- a/html/static/fonts/Amelia
+++ b/html/static/fonts/Amelia
--- a/html/static/fonts/Cinzel-Black.ttf
+++ b/html/static/fonts/Cinzel-Black.ttf
--- a/html/static/fonts/Cinzel-Bold.ttf
+++ b/html/static/fonts/Cinzel-Bold.ttf
--- a/html/static/fonts/Cinzel-ExtraBold.ttf
+++ b/html/static/fonts/Cinzel-ExtraBold.ttf
--- a/html/static/fonts/Cinzel-Medium.ttf
+++ b/html/static/fonts/Cinzel-Medium.ttf
--- a/html/static/fonts/Cinzel-Regular.ttf
+++ b/html/static/fonts/Cinzel-Regular.ttf
--- a/html/static/fonts/Cinzel-SemiBold.ttf
+++ b/html/static/fonts/Cinzel-SemiBold.ttf
--- a/html/static/img/Invitation.jpeg
+++ b/html/static/img/Invitation.jpeg
--- a/html/static/js/main.js
+++ b/html/static/js/main.js
@@ -1,4 +1,189 @@
-function incrementCounter() {
-    let elem = document.querySelector("#counter");
-    elem.innerHTML = Number(elem.innerHTML) + 1;
+function setPageContent(elemID) {
+    let target = document.querySelector("#page-content");
+    target.style.opacity=0;
+    setTimeout(function () {
+        // 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]);
+}
+
+function showLoader(opacity) {
+    let elem = document.querySelector("#loading-page");
+    elem.style.opacity = opacity ? 1 : 0;
+    if (opacity) {
+        elem.style.display = "flex";
+    } else {
+        setTimeout(function () {
+            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);
 }
Author	SHA1	Message	Date
Sciocatti	35ce21324d	Merge branch 'main' into stage All checks were successful Home Cluster Builds/wedding-page/pipeline/head This commit looks good Details	2023-01-11 18:42:44 +02:00
Sciocatti	73f2d16728	Use mock data to render first to panels. All checks were successful Home Cluster Builds/wedding-page/pipeline/head This commit looks good Details	2023-01-08 16:18:46 +02:00
Sciocatti	362fb61c1d	Added mock data.	2023-01-08 16:18:14 +02:00
Sciocatti	2707459e3b	Updated invitation image.	2023-01-08 16:18:04 +02:00
Sciocatti	b0320962ae	Fixed image url. All checks were successful Home Cluster Builds/wedding-page/pipeline/head This commit looks good Details	2023-01-08 00:35:11 +02:00
Sciocatti	3649d0c30c	Loading page and landing page initial styling. All checks were successful Home Cluster Builds/wedding-page/pipeline/head This commit looks good Details	2023-01-08 00:27:59 +02:00