From d564294275ee3ac53ba27853532f445b40793bd6 Mon Sep 17 00:00:00 2001
From: dominicjk <jkdominic752@gmail.com>
Date: Wed, 10 Apr 2024 17:05:08 -0600
Subject: [PATCH] dynamically changing selects in register page

---
 .../src/views/pages/register.hbs              | 104 ++++++++++++------
 1 file changed, 72 insertions(+), 32 deletions(-)

diff --git a/ProjectSourceCode/src/views/pages/register.hbs b/ProjectSourceCode/src/views/pages/register.hbs
index e207d76..a591fb7 100644
--- a/ProjectSourceCode/src/views/pages/register.hbs
+++ b/ProjectSourceCode/src/views/pages/register.hbs
@@ -1,36 +1,76 @@
-  <div class="register-page">
-    <div class="form-container">
-      <h1 class="mt-5 mb-4">Register</h1>
-      <form action="/register" method="POST" class="mt-3">
-        <div class="mb-3">
-          <label for="username" class="form-label">Username:</label>
-          <input type="text" class="form-control" id="username" name="username" required>
+<div class="register-page">
+  <div class="form-container">
+    <h1 class="mt-5 mb-4">Register</h1>
+    <form action="/register" method="POST" class="mt-3">
+      <div class="mb-3">
+        <label for="username" class="form-label">Username:</label>
+        <input type="text" class="form-control" id="usernameInput" name="username" required>
+      </div>
+      <div class="mb-3">
+        <label for="password" class="form-label">Password:</label>
+        <input type="password" class="form-control" id="passwordInput" name="password" required>
+      </div>
+      <div class="dropdowns">
+        <div>
+          <label class="form-label">Preferred League :</label><br>
+          <select id="league_dropdown">
+            <option>Premier League</option>
+            <option>La Liga</option>
+            <option>Bundesliga</option>
+            <option>Serie A</option>
+            <option>Ligue 1</option>
+            <option>Brasilerao</option>
+          </select>
         </div>
-        <div class="mb-3">
-          <label for="password" class="form-label">Password:</label>
-          <input type="password" class="form-control" id="password" name="password" required>
+        <div>
+          <label class="form-label">Favorite Team   :</label><br>
+          <select id="team_dropdown">
+          </select>
         </div>
-        <div class="dropdowns">
-          <div>
-            <label class="form-label">Preferred League :</label><br>
-            <select id="league_dropdown">
-              <option value="option1">Premier League</option>
-              <option value="option2">La Liga</option>
-              <option value="option3">Bundesliga</option>
-              <option value="option4">Serie A</option>
-              <option value="option5">Ligue 1</option>
-              <option value="option6">Brasilerao</option>
-            </select>
-          </div>
-          <div>
-            <label class="form-label">Favorite Team   :</label><br>
-            <select id="team_dropdown">
-            </select>
-          </div>
-        </div>
-        <button type="submit" class="btn btn-primary">Submit</button>
-      </form>
-      <p class="mt-3">Already have an account? <a href="/login">Login</a></p>
-    </div>
+      </div>
+      <button type="submit" class="btn btn-primary">Submit</button>
+    </form>
+    <p class="mt-3">Already have an account? <a href="/login">Login</a></p>
   </div>
 
+  <script>
+    console.log("Hello");
+    const league_select = document.getElementById('league_dropdown');
+    const team_select = document.getElementById('team_dropdown');
+
+    document.addEventListener("DOMContentLoaded", function() {
+
+      league_select.addEventListener('change', updateTeamSelect);
+
+      function updateTeamSelect() {
+        var selectedLeague = league_select.value;
+
+        team_select.innerHTML = "";
+        console.log(selectedLeague);
+        // Add options based on the selected value from the first select element
+        if (selectedLeague === "La Liga") {
+          // Add options for La Liga
+              console.log("Hello");
+
+          addOption(team_select, "Option 1 for LL", "option1A");
+          addOption(team_select, "Option 2 for LL", "option2A");
+        } else if (selectedLeague === "Serie A") {
+          // Add options for Serie A
+          addOption(team_select, "Team 1 in Serie A", "option1B");
+          addOption(team_select, "Team 2 in Serie A", "option2B");
+        } else if (selectedLeague === "Bundesliga") {
+          // Add options for Bundesliga
+          addOption(team_select, "Option 1 for Bun", "option1C");
+          addOption(team_select, "Option 2 for Bun", "option2C");
+        }
+      }
+
+      function addOption(selectElement, text, value) {
+        var option = document.createElement("option");
+        option.text = text;
+        option.value = value;
+        selectElement.add(option);
+      }
+    });
+  </script>
+</div>