diff --git a/backend/secfit/users/forms.py b/backend/secfit/users/forms.py
index c2e25067d080d79e4fa9dc84439b5e87217b47ca..56db4f55152336580d53da75e59e63f78da77e0c 100644
--- a/backend/secfit/users/forms.py
+++ b/backend/secfit/users/forms.py
@@ -9,11 +9,14 @@ class CustomUserCreationForm(UserCreationForm):
country = forms.CharField(max_length=50)
city = forms.CharField(max_length=50)
street_address = forms.CharField(max_length=50)
+ favorite_exercise = forms.CharField(max_length=50)
+ gym = forms.CharField(max_length=50)
+
class Meta(UserCreationForm):
model = get_user_model()
- fields = ("username", "coach", "phone_number", "country", "city", "street_address")
+ fields = ("username", "coach", "phone_number", "country", "city", "street_address","favorite_exercise","gym")
class CustomUserChangeForm(UserChangeForm):
diff --git a/backend/secfit/users/models.py b/backend/secfit/users/models.py
index 08c14e2ba0899684d8be06d1a7e14b51686e035c..af6eabc1f0def0aa3d43d398c3ad7baeb0402743 100644
--- a/backend/secfit/users/models.py
+++ b/backend/secfit/users/models.py
@@ -18,7 +18,8 @@ class User(AbstractUser):
country = models.TextField(max_length=50, blank=True)
city = models.TextField(max_length=50, blank=True)
street_address = models.TextField(max_length=50, blank=True)
- goal = models.TextField(max_length=200, blank=True)
+ favorite_exercise = models.TextField(max_length=50, blank=True)
+ gym = models.TextField(max_length=50, blank=True)
def athlete_directory_path(instance, filename):
diff --git a/backend/secfit/users/urls.py b/backend/secfit/users/urls.py
index 507c27008e8b0997e486945a27bfe3afc55d89de..928013341b800bca5809c25d75456e73d5196bd2 100644
--- a/backend/secfit/users/urls.py
+++ b/backend/secfit/users/urls.py
@@ -6,6 +6,8 @@ urlpatterns = [
path("api/users/", views.UserList.as_view(), name="user-list"),
path("api/users/<int:pk>/", views.UserDetail.as_view(), name="user-detail"),
path("api/users/<str:username>/", views.UserDetail.as_view(), name="user-detail"),
+ path("api/users/<str:favorite_exercise>/", views.UserDetail.as_view(), name="user-detail"),
+ path("api/users/<str:gym>/", views.UserDetail.as_view(), name="user-detail"),
path("api/offers/", views.OfferList.as_view(), name="offer-list"),
path("api/offers/<int:pk>/", views.OfferDetail.as_view(), name="offer-detail"),
path(
diff --git a/frontend/www/profile.html b/frontend/www/profile.html
index f5eef61ff0510de744177a25604df1cf15a09e13..0ab05c83ab61a462362bbb5ee9035c18a2b39192 100644
--- a/frontend/www/profile.html
+++ b/frontend/www/profile.html
@@ -1,67 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Profile</title>
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Exercises</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
- <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
- <link rel="stylesheet" href="styles/style.css">
- <script src="scripts/navbar.js" type="text/javascript" defer></script>
+ <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
+ <link rel="stylesheet" href="styles/style.css">
+ <script src="scripts/navbar.js" type="text/javascript" defer></script>
</head>
<body>
-<navbar-el></navbar-el>
+ <navbar-el></navbar-el>
-<div class="container">
- <div class="row">
- <div class="col-lg">
- <h3 class="mt-3">Profile settings</h3>
+ <div class="container">
+ <div class="row">
+ <div class="col-lg text-center">
+ <h3 class="mt-5">This is your profile</h3>
+ <p>Here you can view, create, and edit exercise types defined by you and other athletes.</p>
+ <input type="button" class="btn btn-primary" id="btn-edit-profile" value="Edit profile">
+ </div>
+ <div class="row">
+ <div class="col-lg text-center">
+ <div class="list-group mt-1" id="div-content"></div>
+ </div>
+ </div>
</div>
- </div>
- <form class="row g-3" id="form-exercise">
- <div class="col-lg-6 ">
- <label for="inputName" class="form-label">Name</label>
- <input type="text" class="form-control" id="inputName" name="name" readonly>
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-6">
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-6 ">
- <label for="inputName" class="form-label">Favourite Exercise</label>
- <input type="text" class="form-control" id="inputFavouriteExercise" name="favouriteExercise" readonly>
- </div>
-
- <div class="col-lg-6"></div>
- <div class="col-lg-6">
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-6">
- <label for="inputMuscles" class="form-label">Main gym</label>
- <select class="form-select" name="gymGroup" disabled="true">
- <option value="Legs">SIT</option>
- <option value="Chest">IMPULS</option>
- <option value="Back">3T</option>
- <option value="Arms">STAMINA</option>
- </select>
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-6">
- <input type="button" class="btn btn-primary hide" id="btn-ok-exercise" value=" OK ">
- <input type="button" class="btn btn-primary" id="btn-edit-exercise" value=" Edit ">
- <input type="button" class="btn btn-secondary hide" id="btn-cancel-exercise" value="Cancel">
- <input type="button" class="btn btn-danger float-end hide" id="btn-delete-exercise" value="Delete">
- </div>
- <div class="col-lg-6">
+ <template id="template-exercise">
+ <a class="list-group-item list-group-item-action flex-column align-items-start my-1 exercise" href="">
+ <div class="d-flex w-100 justify-content-between align-items-center">
+ <h5 class="mb-1"></h5>
+ </div>
+ <div class="d-flex">
+ <p class="mb-1">
+ </p>
+ </div>
+ </a>
+ </template>
- </div>
- </form>
-</div>
-<script src="scripts/defaults.js"></script>
-<script src="scripts/scripts.js"></script>
-<script src="scripts/profile.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+ <script src="scripts/defaults.js"></script>
+ <script src="scripts/scripts.js"></script>
+ <script src="scripts/profile.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/www/profilesettings.html b/frontend/www/profilesettings.html
new file mode 100644
index 0000000000000000000000000000000000000000..1a390499703dd24bf9740d94cf9d9ba39259abcd
--- /dev/null
+++ b/frontend/www/profilesettings.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Profile</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+
+ <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
+ <link rel="stylesheet" href="styles/style.css">
+ <script src="scripts/navbar.js" type="text/javascript" defer></script>
+</head>
+<body>
+<navbar-el></navbar-el>
+
+<div class="container">
+ <div class="row">
+ <div class="col-lg">
+ <h3 class="mt-3">Profile settings</h3>
+ </div>
+ </div>
+ <form class="row g-3" id="form-exercise">
+ <div class="col-lg-6 ">
+ <label for="inputName" class="form-label">Name</label>
+ <input type="text" class="form-control" id="inputName" name="name" readonly>
+ </div>
+ <div class="col-lg-6"></div>
+ <div class="col-lg-6">
+ </div>
+ <div class="col-lg-6"></div>
+ <div class="col-lg-6 ">
+ <label for="inputName" class="form-label">Favourite Exercise</label>
+ <input type="text" class="form-control" id="inputFavouriteExercise" name="favouriteExercise" readonly>
+ </div>
+
+ <div class="col-lg-6"></div>
+ <div class="col-lg-6">
+
+ </div>
+ <div class="col-lg-6"></div>
+ <div class="col-lg-6">
+ <label for="inputMuscles" class="form-label">Main gym</label>
+ <select class="form-select" name="gymGroup" disabled="true">
+ <option value="Legs">SIT</option>
+ <option value="Chest">IMPULS</option>
+ <option value="Back">3T</option>
+ <option value="Arms">STAMINA</option>
+ </select>
+ </div>
+ <div class="col-lg-6"></div>
+ <div class="col-lg-6">
+ <input type="button" class="btn btn-primary hide" id="btn-ok-exercise" value=" OK ">
+ <input type="button" class="btn btn-primary" id="btn-edit-exercise" value=" Edit ">
+ <input type="button" class="btn btn-secondary hide" id="btn-cancel-exercise" value="Cancel">
+ <input type="button" class="btn btn-danger float-end hide" id="btn-delete-exercise" value="Delete">
+ </div>
+ <div class="col-lg-6">
+
+ </div>
+ </form>
+</div>
+<script src="scripts/defaults.js"></script>
+<script src="scripts/scripts.js"></script>
+<script src="scripts/profilesettings.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/frontend/www/scripts/profile.js b/frontend/www/scripts/profile.js
index ceba324d72bcbb9a12d3c29ff3764356077ca14d..e0ca6d14b7d6463d179142b6ad19690539625d1b 100644
--- a/frontend/www/scripts/profile.js
+++ b/frontend/www/scripts/profile.js
@@ -1,211 +1,42 @@
-let cancelButton;
-let okButton;
-let deleteButton;
-let editButton;
-let oldFormData;
-
-class MuscleGroup {
- constructor(type) {
- this.isValidType = false;
- this.validTypes = ["SIT", "IMPULS", "3T", "STAMINA"];
-
- this.type = this.validTypes.includes(type) ? type : undefined;
- };
-
- setMuscleGroupType = (newType) => {
- this.isValidType = false;
-
- if(this.validTypes.includes(newType)){
- this.isValidType = true;
- this.type = newType;
- }
- else{
- alert("Invalid muscle group!");
- }
-
- };
-
- getMuscleGroupType = () => {
- console.log(this.type, "SWIOEFIWEUFH")
- return this.type;
- }
-}
-
-function handleCancelButtonDuringEdit() {
- console.log("fjpfjhpisdfhøidksfho")
- /*
- setReadOnly(true, "#form-exercise");
- document.querySelector("select").setAttribute("disabled", "")
- okButton.className += " hide";
- deleteButton.className += " hide";
- cancelButton.className += " hide";
- editButton.className = editButton.className.replace(" hide", "");
-
- cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
-
- let form = document.querySelector("#form-exercise");
- if (oldFormData.has("name")) form.name.value = oldFormData.get("name");
- if (oldFormData.has("favouriteExercise")) form.name.value = oldFormData.get("favouriteExercise");
- if (oldFormData.has("gymGroup")) form.muscleGroup.value = oldFormData.get("gymGroup");
-
- oldFormData.delete("name");
- oldFormData.delete("favouriteExercise");
- oldFormData.delete("gymGroup");
- */
-
-}
-
-function handleCancelButtonDuringCreate() {
- window.location.replace("profile.html");
-}
-
-async function createExercise() {
- document.querySelector("select").removeAttribute("disabled")
- console.log("dasdadasda")
- let form = document.querySelector("#form-exercise");
- let formData = new FormData(form);
- let body = {"name": formData.get("name"),
- "description": formData.get("description"),
- "duration": formData.get("duration"),
- "calories": formData.get("calories"),
- "muscleGroup": formData.get("muscleGroup"),
- "unit": formData.get("unit")};
-
- let response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
+async function fetchProfileData(request) {
+ let response = await sendRequest("GET", `${HOST}/api/users/`);
if (response.ok) {
- window.location.replace("exercises.html");
- } else {
let data = await response.json();
- let alert = createAlert("Coulds not create new exercise!", data);
- document.body.prepend(alert);
- }
- console.log("TEST*IJG")
-}
-
-function handleEditExerciseButtonClick() {
- setReadOnly(false, "#form-exercise");
-
- document.querySelector("select").removeAttribute("disabled")
+ let users = data.results;
+ let container = document.getElementById('div-content');
+ let exerciseTemplate = document.querySelector("#users");
+ users.forEach(user => {
+ const exerciseAnchor = exerciseTemplate.content.firstElementChild.cloneNode(true);
+ exerciseAnchor.href = `exercise.html?id=${user.id}`;
- editButton.className += " hide";
- okButton.className = okButton.className.replace(" hide", "");
- cancelButton.className = cancelButton.className.replace(" hide", "");
- deleteButton.className = deleteButton.className.replace(" hide", "");
+ const h5 = exerciseAnchor.querySelector("h5");
+ h5.textContent = exercise.name;
- cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
+ const p = exerciseAnchor.querySelector("p");
+ p.textContent = exercise.description;
- let form = document.querySelector("#form-exercise");
- oldFormData = new FormData(form);
-}
-
-async function deleteExercise(id) {
- let response = await sendRequest("DELETE", `${HOST}/api/exercises/${id}/`);
- if (!response.ok) {
- let data = await response.json();
- let alert = createAlert(`Could not delete exercise ${id}`, data);
- document.body.prepend(alert);
- } else {
- window.location.replace("exercises.html");
+ container.appendChild(exerciseAnchor);
+ });
}
-}
-
-async function retrieveExercise(id) {
- let response = await sendRequest("GET", `${HOST}/api/exercises/${id}/`);
- console.log(response.ok)
-
- if (!response.ok) {
- let data = await response.json();
- let alert = createAlert("Could not retrieve exercise data!", data);
- document.body.prepend(alert);
- } else {
- document.querySelector("select").removeAttribute("disabled")
- let exerciseData = await response.json();
- let form = document.querySelector("#form-exercise");
- let formData = new FormData(form);
-
- for (let key of formData.keys()) {
- let selector
- key !== "muscleGroup" ? selector = `input[name="${key}"], textarea[name="${key}"]` : selector = `select[name=${key}]`
- let input = form.querySelector(selector);
- let newVal = exerciseData[key];
- input.value = newVal;
- }
- document.querySelector("select").setAttribute("disabled", "")
- }
+ return response;
}
-async function updateExercise(id) {
- let form = document.querySelector("#form-exercise");
- let formData = new FormData(form);
-
- let muscleGroupSelector = document.querySelector("select")
- muscleGroupSelector.removeAttribute("disabled")
-
- let selectedMuscleGroup = new MuscleGroup(formData.get("muscleGroup"));
+function editProfile() {
+ window.location.replace("profilesettings.html");
+}
- let body = {"name": formData.get("name"),
- "description": formData.get("description"),
- "duration": formData.get("duration"),
- "calories": formData.get("calories"),
- "muscleGroup": selectedMuscleGroup.getMuscleGroupType(),
- "unit": formData.get("unit")};
- let response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, body);
+window.addEventListener("DOMContentLoaded", async () => {
+ let createButton = document.querySelector("#btn-edit-profile");
+ createButton.addEventListener("click", editProfile);
+ let response = await fetchProfileData();
+
if (!response.ok) {
let data = await response.json();
- let alert = createAlert(`Could not update exercise ${id}`, data);
+ let alert = createAlert("Could not retrieve profile!", data);
document.body.prepend(alert);
- } else {
- muscleGroupSelector.setAttribute("disabled", "")
- // duplicate code from handleCancelButtonDuringEdit
- // you should refactor this
- setReadOnly(true, "#form-exercise");
- okButton.className += " hide";
- deleteButton.className += " hide";
- cancelButton.className += " hide";
- editButton.className = editButton.className.replace(" hide", "");
-
- cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
-
- oldFormData.delete("name");
- oldFormData.delete("description");
- oldFormData.delete("duration");
- oldFormData.delete("calories");
- oldFormData.delete("muscleGroup");
- oldFormData.delete("unit");
- }
-}
-
-window.addEventListener("DOMContentLoaded", async () => {
- cancelButton = document.querySelector("#btn-cancel-exercise");
- okButton = document.querySelector("#btn-ok-exercise");
- deleteButton = document.querySelector("#btn-delete-exercise");
- editButton = document.querySelector("#btn-edit-exercise");
- oldFormData = null;
-
- const urlParams = new URLSearchParams(window.location.search);
-
- // view/edit
- if (urlParams.has('id')) {
- const exerciseId = urlParams.get('id');
- await retrieveExercise(exerciseId);
-
- editButton.addEventListener("click", handleEditExerciseButtonClick);
- deleteButton.addEventListener("click", (async (id) => await deleteExercise(id)).bind(undefined, exerciseId));
- okButton.addEventListener("click", (async (id) => await updateExercise(id)).bind(undefined, exerciseId));
- }
- //create
- else {
- setReadOnly(false, "#form-exercise");
-
- editButton.className += " hide";
- okButton.className = okButton.className.replace(" hide", "");
- cancelButton.className = cancelButton.className.replace(" hide", "");
-
- okButton.addEventListener("click", async () => await createExercise());
- cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
}
});
diff --git a/frontend/www/scripts/profilesettings.js b/frontend/www/scripts/profilesettings.js
new file mode 100644
index 0000000000000000000000000000000000000000..71af728c5738407d921f3734fcd1614fa20a8322
--- /dev/null
+++ b/frontend/www/scripts/profilesettings.js
@@ -0,0 +1,206 @@
+let cancelButton;
+let okButton;
+let deleteButton;
+let editButton;
+let oldFormData;
+
+//TODO change variablenames and check
+class gym {
+ constructor(type) {
+ this.isValidType = false;
+ this.validTypes = ["SIT", "IMPULS", "3T", "STAMINA"];
+
+ this.type = this.validTypes.includes(type) ? type : undefined;
+ };
+
+ setMuscleGroupType = (newType) => {
+ this.isValidType = false;
+
+ if(this.validTypes.includes(newType)){
+ this.isValidType = true;
+ this.type = newType;
+ }
+ else{
+ alert("Invalid gym!");
+ }
+
+ };
+
+ getMuscleGroupType = () => {
+ console.log(this.type, "SWIOEFIWEUFH")
+ return this.type;
+ }
+}
+
+function handleCancelButtonDuringEdit() {
+ console.log("fjpfjhpisdfhøidksfho")
+ /*
+ setReadOnly(true, "#form-exercise");
+ document.querySelector("select").setAttribute("disabled", "")
+ okButton.className += " hide";
+ deleteButton.className += " hide";
+ cancelButton.className += " hide";
+ editButton.className = editButton.className.replace(" hide", "");
+
+ cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
+
+ let form = document.querySelector("#form-exercise");
+ if (oldFormData.has("name")) form.name.value = oldFormData.get("name");
+ if (oldFormData.has("favouriteExercise")) form.name.value = oldFormData.get("favouriteExercise");
+ if (oldFormData.has("gymGroup")) form.muscleGroup.value = oldFormData.get("gymGroup");
+
+ oldFormData.delete("name");
+ oldFormData.delete("favouriteExercise");
+ oldFormData.delete("gymGroup");
+ */
+
+}
+
+function handleCancelButtonDuringCreate() {
+ window.location.replace("profile.html");
+}
+
+
+ async function createExercise() {
+ document.querySelector("select").removeAttribute("disabled")
+ console.log("dasdadasda")
+ let form = document.querySelector("#gym");
+ let formData = new FormData(form);
+ let body = {"name": formData.get("name"),
+ "description": formData.get("description"),
+ "duration": formData.get("duration"),
+ "calories": formData.get("calories"),
+ "muscleGroup": formData.get("gym"),
+ "unit": formData.get("unit")};
+
+ let response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
+
+ if (response.ok) {
+ window.location.replace("exercises.html");
+ } else {
+ let data = await response.json();
+ let alert = createAlert("Coulds not create new exercise!", data);
+ document.body.prepend(alert);
+ }
+
+ console.log("TEST*IJG")
+}
+
+function handleEditExerciseButtonClick() {
+ setReadOnly(false, "#form-exercise");
+
+ document.querySelector("select").removeAttribute("disabled")
+
+ editButton.className += " hide";
+ okButton.className = okButton.className.replace(" hide", "");
+ cancelButton.className = cancelButton.className.replace(" hide", "");
+ deleteButton.className = deleteButton.className.replace(" hide", "");
+
+ cancelButton.addEventListener("click", handleCancelButtonDuringEdit);
+
+ let form = document.querySelector("#form-exercise");
+ oldFormData = new FormData(form);
+}
+
+async function deleteExercise(id) {
+ let response = await sendRequest("DELETE", `${HOST}/api/exercises/${id}/`);
+ if (!response.ok) {
+ let data = await response.json();
+ let alert = createAlert(`Could not delete exercise ${id}`, data);
+ document.body.prepend(alert);
+ } else {
+ window.location.replace("exercises.html");
+ }
+}
+
+//Testing
+async function retrieveGym(id) {
+ let response = await sendRequest("GET", `${HOST}/api/users/${id}/`);
+
+ console.log(response.ok)
+
+ if (!response.ok) {
+ let data = await response.json();
+ let alert = createAlert("Could not retrieve exercise data!", data);
+ document.body.prepend(alert);
+ } else {
+ document.querySelector("select").removeAttribute("disabled")
+ let exerciseData = await response.json();
+ let form = document.querySelector("#gym");
+ let formData = new FormData(form);
+
+ for (let key of formData.keys()) {
+ let selector
+ key !== "gym" ? selector = `input[name="${key}"], textarea[name="${key}"]` : selector = `select[name=${key}]`
+ let input = form.querySelector(selector);
+ let newVal = exerciseData[key];
+ input.value = newVal;
+ }
+ document.querySelector("select").setAttribute("disabled", "")
+ }
+}
+
+async function updateGym(id) {
+ let form = document.querySelector("#gym");
+ let formData = new FormData(form);
+
+ let muscleGroupSelector = document.querySelector("select")
+ muscleGroupSelector.removeAttribute("disabled")
+
+ let selectedGym = new gym(formData.get("gym"));
+
+ let body = {
+ "gym": selectedGym.getMuscleGroupType(),};
+ let response = await sendRequest("PUT", `${HOST}/api/users/${id}/`, body);
+
+ if (!response.ok) {
+ let data = await response.json();
+ let alert = createAlert(`Could not update gym ${id}`, data);
+ document.body.prepend(alert);
+ } else {
+ muscleGroupSelector.setAttribute("disabled", "")
+ // duplicate code from handleCancelButtonDuringEdit
+ // you should refactor this
+ setReadOnly(true, "#form-exercise");
+ okButton.className += " hide";
+ deleteButton.className += " hide";
+ cancelButton.className += " hide";
+ editButton.className = editButton.className.replace(" hide", "");
+
+ cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
+
+ oldFormData.delete("gym");
+
+ }
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+ cancelButton = document.querySelector("#btn-cancel-exercise");
+ okButton = document.querySelector("#btn-ok-exercise");
+ deleteButton = document.querySelector("#btn-delete-exercise");
+ editButton = document.querySelector("#btn-edit-exercise");
+ oldFormData = null;
+
+ const urlParams = new URLSearchParams(window.location.search);
+
+ // view/edit
+ if (urlParams.has('id')) {
+ const exerciseId = urlParams.get('id');
+ await retrieveExercise(exerciseId);
+
+ editButton.addEventListener("click", handleEditExerciseButtonClick);
+ deleteButton.addEventListener("click", (async (id) => await deleteExercise(id)).bind(undefined, exerciseId));
+ okButton.addEventListener("click", (async (id) => await updateGym(id)).bind(undefined, exerciseId));
+ }
+ //create
+ else {
+ setReadOnly(false, "#form-exercise");
+
+ editButton.className += " hide";
+ okButton.className = okButton.className.replace(" hide", "");
+ cancelButton.className = cancelButton.className.replace(" hide", "");
+
+ okButton.addEventListener("click", async () => await createExercise());
+ cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
+ }
+});