Merge branch 'exercise_dropdown' into 'master'

added exercise select

See merge request !2

www/profilepage.html

@@ -29,10 +29,15 @@
                             <input type="date" class="form-control" id="birthday" name="name" readonly>
                         </div>
                         <div class="col-lg-6"></div>
-                        <div class="col-lg-6 ">
+                        <div class="col-lg-6 " id="favoriteExercise-container">
                             <label for="inputName" class="form-label">Favorite Exercise</label>
                             <input type="text" class="form-control" id="favoriteExercise" name="name" readonly>
                         </div>
+                        <div class="col-lg-6 hide" id="favoriteExercise-select-container">
+                            <label class="form-label exercise-type">Favorite Exercise</label>
+                            <select class="form-select" id="favoriteExercise-select" name="type">
+                            </select>
+                          </div>
                         <div class="col-lg-6"></div>
                         <div class="col-lg-6 ">
                             <label for="inputName" class="form-label">Bio</label>

www/scripts/profilepage.js

@@ -29,26 +29,50 @@ function displayProfilePage(user) {
         const favoriteExercise = document.getElementById('favoriteExercise');
         favoriteExercise.value = user.favorite_exercise
 
+        // favoriteExercise.disabled = true;
+        // let option = document.createElement("option");
+        // option.value = user.favorite_exercise 
+        // option.innerText = user.favorite_exercise 
+        // favoriteExercise.append(option);
+
         const bio = document.getElementById('bio');
         bio.value = user.bio
     } 
 }
 
-function handleCancelDuringProfileEdit() {
+function handleCancelDuringProfileEdit(user) {
     location.reload();
 }
 
-function handleEditProfileButtonClick() {
-    let editProfileButton = document.querySelector("#edit-profile-page-button");
-    let saveProfileButton = document.querySelector("#save-profile-page-button");
-    let cancelProfileButton = document.querySelector("#cancel-profile-page-button");
+async function handleEditProfileButtonClick() {
+    const editProfileButton = document.querySelector("#edit-profile-page-button");
+    const saveProfileButton = document.querySelector("#save-profile-page-button");
+    const cancelProfileButton = document.querySelector("#cancel-profile-page-button");
+    const favoriteExercise = document.getElementById('favoriteExercise');
+    const favoriteExercise_select = document.getElementById('favoriteExercise-select');
+    const favoriteExercise_select_container = document.getElementById('favoriteExercise-select-container');
+    const favoriteExercise_container = document.getElementById('favoriteExercise-container');
+
+    let exerciseTypeResponse = await sendRequest("GET", `${HOST}/api/exercises/`);
+    let exerciseTypes = await exerciseTypeResponse.json();
 
     cancelProfileButton.addEventListener("click", handleCancelDuringProfileEdit);
     saveProfileButton.addEventListener("click", updateProfilePage);
 
     editProfileButton.classList.add("hide");
+    favoriteExercise_container.classList.add("hide")
     saveProfileButton.classList.remove("hide");
     cancelProfileButton.classList.remove("hide");
+    favoriteExercise_select_container.classList.remove("hide")
+
+    favoriteExercise_select.disabled = false;
+
+    for (let j = 0; j < exerciseTypes.count; j++) {
+        let option = document.createElement("option");
+        option.value = exerciseTypes.results[j].name;
+        option.innerText = exerciseTypes.results[j].name;
+        favoriteExercise_select.append(option);
+    }
     
     setReadOnly(false, "#form-profile");
 }