wedding-page/html/static/js/main.js

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