From d1babc85f5391ca7d7ca026545d806edbac5d763 Mon Sep 17 00:00:00 2001 From: Sandy Currier Date: Wed, 6 Mar 2024 12:09:56 -0500 Subject: [PATCH] progress regarding back navigation --- voting.html | 97 ++++++++++++++++++++++++++++++++--------------------- 1 file changed, 59 insertions(+), 38 deletions(-) diff --git a/voting.html b/voting.html index 22d51fd..d3a7aca 100644 --- a/voting.html +++ b/voting.html @@ -114,18 +114,20 @@ function setupProgressBars(numberOfContests) { const progBarElement = document.getElementById("progressBar"); const yrhBarElement = document.getElementById("youAreHereBar"); - for (let contest = 0; contest < numberOfContests; contest++) { - const id = contest + 1; + for (let contestNum = 0; contestNum < numberOfContests; contestNum++) { + const id = contestNum + 1; // progress bar const newBarElement = document.createElement("div"); newBarElement.setAttribute("class", "progSection"); - newBarElement.setAttribute("id", "progBar" + contest); + newBarElement.setAttribute("id", "progBar" + contestNum); + // Add navigation button with the contest id as the button + // string ZZZ newBarElement.innerHTML = id; progBarElement.appendChild(newBarElement); // youAreHereBar bar const newYrhElement = document.createElement("div"); newYrhElement.setAttribute("class", "yrhSection"); - newYrhElement.setAttribute("id", "yrhBar" + contest); + newYrhElement.setAttribute("id", "yrhBar" + contestNum); yrhBarElement.appendChild(newYrhElement); } // Add a final checkout section @@ -457,25 +459,20 @@

Your RCV selection:

// three DOM sections. So when the newButton EventListener calls // either setupNextContest or setupCheckout, the three DOM sections // have been cleared out and are ready to be re-populated. - function setupNextButtonListener(buttonString, nextContest, thisContestValue) { - console.log("Running setupNextButtonListener: '" + buttonString + "' button to contest " + nextContest); - const bottomElement = document.getElementById("bottomSection"); - const newList = document.createElement("ul"); - newList.classList.add("flex-item"); // Apply a class for styling - newList.classList.add("noBullets"); + function setupNavigationButtonListener(buttonString, thisContestNum, thisContestValue, nextContestNum) { const newItem = document.createElement("li"); // Create a next/checkout button const newButton = document.createElement("button"); newButton.innerText = buttonString; // add an event listener to the button newButton.addEventListener("click", function (e) { - console.log("Running NextButton '" + buttonString + "' eventListener for contest " + nextContest); + console.log("Running NextButton '" + buttonString + "' eventListener for contest " + nextContestNum); // On the button click go to the next contest or the checkout screen // // Going to the next contest involves: // 1) capturing the vote (a.k.a. thisContest's selections) before it // (probably?) gets wiped out when the DOM children are reaped. - // thisContestValue is a reference into blankBallot + // thisContestValue is a reference into the blankBallot object. if (thisContestValue) { const selection = []; let index = 0; @@ -488,20 +485,19 @@

Your RCV selection:

thisContestValue["selection"] = selection; // and setting the progressBar color let max = thisContestValue.max; - let contestNum = nextContest - 1; if (!max) { max = thisContestValue.choices.length; } console.log(""); if (selection.length == 0) { - console.log("Contest " + contestNum + " no voted"); - setProgressBarColor(contestNum, "novotedBG"); + console.log("Contest " + thisContestNum + " no voted"); + setProgressBarColor(thisContestNum, "novotedBG"); } else if (max == selection.length) { - console.log("Contest " + contestNum + " voted"); - setProgressBarColor(contestNum, "votedBG"); + console.log("Contest " + thisContestNum + " voted"); + setProgressBarColor(thisContestNum, "votedBG"); } else { - console.log("Contest " + contestNum + " undervoted voted"); - setProgressBarColor(contestNum, "undervotedBG"); + console.log("Contest " + thisContestNum + " undervoted voted"); + setProgressBarColor(thisContestNum, "undervotedBG"); } } // 2) clearing out the upper and lower node DOM trees @@ -509,15 +505,45 @@

Your RCV selection:

document.getElementById("lowerSection").replaceChildren(); document.getElementById("bottomSection").replaceChildren(); // 3) Going somewhere - if (nextContest < numberOfContests) { - setupNewContest(nextContest); + if (nextContestNum < numberOfContests) { + setupNewContest(nextContestNum); } else { setupCheckout(); } }); + return newButton; + } + + // Setup the bottom navigation buttons + function setupBottomNavigation(thisContestNum, nextContestNum, thisContestValue) { + const bottomElement = document.getElementById("bottomSection"); + const newList = document.createElement("ul"); + newList.classList.add("flex-item"); // Apply a class for styling + newList.classList.add("noBullets"); + // For now, always create two buttons (UX TBD later) + let nextButtonString = "Go to next contest"; + let prevContestNum = thisContestNum - 1; + if (nextContestNum >= numberOfContests) { + nextButtonString = "Go to checkout"; + } + let previousButtonString = "Go to previous contest"; + if (thisContestNum == 0) { + previousButtonString = "Go directly to checkout"; + prevContestNum = numberOfContests + 1; + } + // Add the buttons as a table + const table = document.createElement("table"); + table.classList.add("tableStyle"); + const row = document.createElement("tr"); + const col1 = document.createElement("td"); + const col2 = document.createElement("td"); + col1.appendChild(setupNavigationButtonListener(previousButtonString, thisContestNum, thisContestValue, prevContestNum)); + col2.appendChild(setupNavigationButtonListener(nextButtonString, thisContestNum, thisContestValue, nextContestNum)); + row.appendChild(col1); + row.appendChild(col2); + table.appendChild(row); // Add to the DOM - newList.appendChild(newButton); - bottomElement.appendChild(newList); + bottomElement.appendChild(table); } // Helper function for pretty printing selections @@ -577,7 +603,7 @@

Your RCV selection:

if (!max) { max = Object.values(contest)[0].choices.length; } - if (selections.length == 0) { + if (!selections || selections.length == 0) { box2.innerHTML = "no selection - skipped"; box2.classList.add("novotedText"); } else { @@ -640,18 +666,17 @@

Your RCV selection:

// Setup a new contest. Note - when navigating to a new contest, // the previous contest selection data is gone by the time this // is called. Just being clear about that. - function setupNewContest(thisContest) { - console.log("Running setupNewContest: contest " + thisContest); - let nextContest = thisContest + 1; - let thisContestName = Object.keys(listOfContests[thisContest])[0]; - let thisContestValue = Object.values(listOfContests[thisContest])[0]; + function setupNewContest(thisContestNum) { + console.log("Running setupNewContest: contest " + thisContestNum); + let thisContestName = Object.keys(listOfContests[thisContestNum])[0]; + let thisContestValue = Object.values(listOfContests[thisContestNum])[0]; // and initialize them - setProgressBarColor(thisContest, "activeContest"); - setActiveContest(thisContest); + setProgressBarColor(thisContestNum, "activeContest"); + setActiveContest(thisContestNum); // Setup the upper and lower sections - setUpperSection(thisContest, thisContestName, thisContestValue); + setUpperSection(thisContestNum, thisContestName, thisContestValue); setLowerSection(thisContestValue); // Note - for the moment let these be globals (until we know more). @@ -672,7 +697,7 @@

Your RCV selection:

// Restore previous votes. Note - the above setUpperSection clears // everything out, so to restore we only need to add the classes - // to the correct li + // to the correct li - if there is something. if (thisContestValue.selection) { // loop over selection in order for (const selection of thisContestValue.selection) { @@ -700,11 +725,7 @@

Your RCV selection:

// Setup the bottomSection - this supplies simply "next context/checkout" // navigation. Note - the voter's selection is saved when navigating away // from the page - hence it needs _this_ thisContestValue. - let nextButtonString = "Go to next contest"; - if (nextContest >= numberOfContests) { - nextButtonString = "Go to checkout"; - } - setupNextButtonListener(nextButtonString, nextContest, thisContestValue); + setupBottomNavigation(thisContestNum, thisContestNum + 1, thisContestValue); } // If here, this is the first contest