Fix dropdown adding/deletion after Rounds_Question update

README.md

@@ -81,7 +81,7 @@ Source: https://stackoverflow.com/a/5947
 
 Scope: Single line for getting text of currently selected question from Rounds_Questions update dropdown
 
-Originality: Adapted, with our own dropdown menu and variable names
+Originality: Adapted to fit with our own dropdown menu and variable names
 
 Date: 3/16/2024
 

app.js

@@ -681,13 +681,26 @@ app.put('/put-round-question', function(req, res) {
         WHERE roundID = ? AND questionID = ?
     ;`
     const selectQuery = `
-        SELECT Rounds_Questions.roundID, Users.username, Game_Rounds.score, Game_Rounds.time, Questions.questionText
+        SELECT Rounds_Questions.roundID, Users.username, Game_Rounds.score, Game_Rounds.time, Questions.questionText, Rounds_Questions.questionID
         FROM Rounds_Questions
             INNER JOIN Game_Rounds ON Rounds_Questions.roundID = Game_Rounds.roundID
             LEFT JOIN Users ON Game_Rounds.userID = Users.userID
             INNER JOIN Questions ON Rounds_Questions.questionID = Questions.questionID
         WHERE Rounds_Questions.roundID = ? AND Rounds_Questions.questionID = ?
     ;`
+    const roundDropdownQuery = `
+        SELECT DISTINCT Rounds_Questions.roundID, Users.username, Game_Rounds.score, Game_Rounds.time
+        FROM Rounds_Questions
+            INNER JOIN Game_Rounds ON Rounds_Questions.roundID = Game_Rounds.roundID
+            LEFT JOIN Users ON Game_Rounds.userID = Users.userID
+        ;`
+
+    const questionDropdownQuery = `
+        SELECT DISTINCT Rounds_Questions.questionID, Questions.questionText
+        FROM Rounds_Questions
+            INNER JOIN Questions ON Rounds_Questions.questionID = Questions.questionID
+        ;
+    `
 
     // Run the 1st query
     db.pool.query(updateQuery, [newRoundID, newQuestionID, inputRoundID, inputQuestionID], function(error, rows, fields) {
@@ -707,8 +720,32 @@ app.put('/put-round-question', function(req, res) {
                     res.sendStatus(400)
                 }
                 else {
-                    console.log(rows)
-                    res.send(rows)
+                    let newRow = rows
+                    console.log(newRow)
+
+                    db.pool.query(roundDropdownQuery, function(error, rows, fields) {
+                        if (error) {
+                            console.log(error)
+                            res.sendStatus(400)
+                        }
+                        else {
+                            let dropdownRounds = rows
+                            db.pool.query(questionDropdownQuery, function(error, rows, fields) {
+                                if (error) {
+                                    console.log(error)
+                                    res.sendStatus(400)
+                                }
+                                else {
+                                    let dropdownQuestions = rows
+                                    res.send({
+                                        data: newRow,
+                                        dropdownRounds: dropdownRounds,
+                                        dropdownQuestions: dropdownQuestions
+                                    })
+                                }
+                            })
+                        }
+                    })
                 }
             })
         }

public/js/delete_rounds_question.js

@@ -37,7 +37,6 @@ function deleteDropdownItem(roundID, questionText) {
             roundDropdown[i].remove();
             break;
         }
-
     }
     const questionTextDropdown = document.getElementById("input-questionID");
     for (let i = 0; i < questionTextDropdown.length; i++) {

public/js/update-round-question.js

@@ -26,7 +26,7 @@ updateRoundForm.addEventListener("submit", function (e) {
     // Get text of currently selected question from dropdown
     // Source: https://stackoverflow.com/a/5947
     // Scope: Single line
-    // Originality: Adapted, with our own dropdown menu and variable names
+    // Originality: Adapted to fit our own dropdown menu and variable names
     // Date: 3/16/2024
     const inputQuestionTextValue = inputQuestionText.options[inputQuestionText.selectedIndex].text
 
@@ -86,8 +86,15 @@ updateRoundForm.addEventListener("submit", function (e) {
 })
 
 
-function updateRow(data, inputRoundID, inputQuestionText){
-    const parsedData = JSON.parse(data);
+function updateRow(data, inputRoundID, inputQuestionText) {
+    // Since our query returns multiple sets of data, we make separate variables for them here
+    const jsonData = JSON.parse(data)
+    console.log(jsonData)
+    const parsedData = jsonData.data;
+    const updatedDropdownRounds = jsonData.dropdownRounds;
+    const updatedDropdownQuestions = jsonData.dropdownQuestions;
+
+
     // We added an alert for when a user picks a pair of roundID and questionText where they individually exist
     // in Rounds_Questions but there is no row that has both of them
     if (parsedData.length === 0) {
@@ -123,55 +130,52 @@ function updateRow(data, inputRoundID, inputQuestionText){
 
     // All lines below until the end of the function are original
 
-    // Find rounds dropdown menu, create a new option, fill data in the option,
-    // then append option to dropdown menu
+    // Find rounds dropdown menu and remove it
     let selectRoundMenu = document.getElementById("input-roundID");
+    selectRoundMenu.remove()
 
-    // Remove the option for the old roundID
-    for (let i = 0; i < selectRoundMenu.length; i++) {
-        if (selectRoundMenu.options[i].value == inputRoundID) {
-            selectRoundMenu.remove(i)
-        }
-    }
-    // Check if an option already exists for the new roundID
-    let roundAlreadyExists = false;
-    for (let i = 0; i < selectRoundMenu.length; i++) {
-        if (selectRoundMenu.options[i].value === parsedData[0]['roundID']) {
-            roundAlreadyExists = true;
-            break;
-        }
-    }
-    // Add an option for the roundID if it's new
-    if (roundAlreadyExists === false) {
-        let roundOption = document.createElement("option");
-        roundOption.text = parsedData[0]['roundID'] + " | " + parsedData[0]['username'] + " | " + parsedData[0]['score'] + " | " + parsedData[0]['time'];
-        roundOption.value = parsedData[0]['roundID'];
-        selectRoundMenu.add(roundOption);
-    }
-
-    // Find questionText dropdown menu, create a new option, fill data in the option,
-    // then append option to dropdown menu
+    // Find questionTexts dropdown menu and remove it
     let selectQuestionMenu = document.getElementById("input-questionID");
-    let questionAlreadyExists = false;
-
-    // Remove the option for the old questionID
-    for (let i = 0; i < selectQuestionMenu.length; i++) {
-        if (selectQuestionMenu.options[i].innerHTML === inputQuestionText) {
-            selectQuestionMenu[i].remove()
-        }
-    }
-    // Check if an option already exists for the new questionText
-    for (let i = 0; i < selectQuestionMenu.length; i++) {
-        if (selectQuestionMenu.options[i].value === parsedData[0]['questionID']) {
-            questionAlreadyExists = true;
-            break;
-        }
-    }
-    // Add an option for the questionText if it's new
-    if (questionAlreadyExists === false) {
-        let questionOption = document.createElement("option");
-        questionOption.text = parsedData[0]['questionText'];
-        questionOption.value = parsedData[0]['questionID'];
-        selectQuestionMenu.add(questionOption);
-    }
+    selectQuestionMenu.remove()
+
+    // Create new dropdowns to add in the newly retrieved dropdown data
+    let newSelectRoundMenu = document.createElement("select")
+    newSelectRoundMenu.setAttribute("id", "input-roundID")
+    let newSelectQuestionMenu = document.createElement("select")
+    newSelectQuestionMenu.setAttribute("id", "input-questionID")
+
+    // For each row in the data, create a new option and add it to the new dropdown
+    updatedDropdownRounds.forEach(row => {
+        let newRoundOption = document.createElement("option")
+
+        // Build the string for the inner text
+        let optionText = ""
+        row.roundID ? optionText += row.roundID : optionText += "NULL"
+        optionText += " | "
+        row.username ? optionText += row.username : optionText += "NULL"
+        optionText += " | "
+        row.score ? optionText += row.score : optionText += "NULL"
+        optionText += " | "
+        row.time ? optionText += row.time : optionText += "NULL"
+        newRoundOption.innerText = optionText
+
+        newRoundOption.setAttribute("value", row.roundID)
+        newSelectRoundMenu.appendChild(newRoundOption)
+    });
+
+    // For each row in the data, create a new option and add it to the new dropdown
+    updatedDropdownQuestions.forEach(row => {
+        let newQuestionOption = document.createElement("option")
+        newQuestionOption.innerText = row.questionText
+
+        newQuestionOption.setAttribute("value", row.questionID)
+        newSelectQuestionMenu.appendChild(newQuestionOption)
+    });
+
+    // Get location of label to go with the dropdown and insert the new dropdown next to it
+    let roundLabel = document.getElementById("input-roundID-label")
+    roundLabel.insertAdjacentElement("afterend", newSelectRoundMenu)
+    // Get location of label to go with the dropdown and insert the new dropdown next to it
+    let questionLabel = document.getElementById("input-questionID-label")
+    questionLabel.insertAdjacentElement("afterend", newSelectQuestionMenu)
 }

public/js/update_round.js

@@ -64,6 +64,7 @@ updateRoundForm.addEventListener("submit", function (e) {
 
     if (isNaN(roundIDValue))
     {
+        console.log("That round doesn't exist!")
         return
     }
 

views/rounds_questions.handlebars

@@ -44,15 +44,15 @@
     <h2>Update Round_Question</h2>
     <form id="update-round-question" class="form-example">
         <div class="form-example">
-            <label for="input-roundID">Round ID:</label>
+            <label for="input-roundID" id="input-roundID-label">Round ID:</label>
             <select name="input-roundID" id="input-roundID">
                 {{#each roundUpdateDropdown}}
                     <option value="{{this.roundID}}">{{this.roundID}} | {{#if this.username}}{{this.username}}{{else}}NULL{{/if}} | {{#if this.score}}{{this.score}}{{else}}NULL{{/if}} | {{#if this.time}}{{this.time}}{{else}}NULL{{/if}}</option>
                 {{/each}}
             </select>
         </div>
         <div class="form-example">
-            <label for="input-questionID">Question Text:</label>
+            <label for="input-questionID" id="input-questionID-label">Question Text:</label>
             <select name="input-questionID" id="input-questionID">
                 {{#each questionTextsUpdateDropdown}}
                     <option value="{{this.questionID}}">{{this.questionText}}</option>