added profile for users. Changed localhost address

ccfc6696 · hollum · ba43d13c · ccfc6696 · ccfc6696 · ccfc6696
Commit ccfc6696 authored 3 years ago by hollum
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,6 @@ backend/secfit/*/migrations/__pycache__/
 backend/secfit/*/__pycache__/
 backend/secfit/db.sqlite3

+frontend/node_modules/
+node_modules/
 .env
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -21,3 +21,5 @@ staging:
    - gem install dpl
    - dpl --provider=heroku --app=tdt4242-base-frontend --api-key=$HEROKU_STAGING_API_KEY
    - dpl --provider=heroku --app=tdt4242-base-backend --api-key=$HEROKU_STAGING_API_KEY
+  only:
+    - master
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/www/index.html
+++ b/frontend/www/index.html
@@ -30,4 +30,4 @@
        <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>
\ No newline at end of file
+</html>
--- a/frontend/www/login.html
+++ b/frontend/www/login.html
@@ -13,7 +13,7 @@
 <body>
    <navbar-el></navbar-el>

-    <div class="container">       
+    <div class="container">
        <div class="card mt-3 border-0">
        <article class="card-body mx-auto">
            <h4 class="card-title mt-3 text-center">Log In</h4>
@@ -25,24 +25,24 @@
            <div class="input-group mb-2">
                <span class="input-group-text"> <i class="fas fa-lock"></i> </span>
                <input class="form-control" name="password" placeholder="Password" type="password" required>
-            </div> <!-- form-group// -->    
+            </div> <!-- form-group// -->
            <div class="input-group mb-2">
                <label class="checkbox" style="border: none;">
                    <input type="checkbox" value="rememberMe" id="rememberMe"> Remember me
                </label>
-            </div> <!-- form-group// -->          
+            </div> <!-- form-group// -->
            <div class="d-grid">
                <input type="button" class="btn btn-primary" id="btn-login" value=" Log in  ">
            </div> <!-- form-group// -->
        </form>
        </article>
        </div> <!-- card.// -->
-        
-        </div> 
+
+        </div>

    <script src="scripts/defaults.js"></script>
    <script src="scripts/scripts.js"></script>
    <script src="scripts/login.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>
\ No newline at end of file
+</html>
--- a/frontend/www/mycoach.html
+++ b/frontend/www/mycoach.html
@@ -84,4 +84,4 @@
    <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>
\ No newline at end of file
+</html>
--- a/frontend/www/profile.html
+++ b/frontend/www/profile.html
+<!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/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>
--- a/frontend/www/scripts/defaults.js
+++ b/frontend/www/scripts/defaults.js
-const HOST = "http://localhost:8000";
+const HOST = "http://localhost:9090";
--- a/frontend/www/scripts/navbar.js
+++ b/frontend/www/scripts/navbar.js
@@ -19,6 +19,8 @@ class NavBar extends HTMLElement {
                <a class="nav-link hide" id="nav-mycoach" href="mycoach.html">Coach</a>
                <a class="nav-link hide" id="nav-myathletes" href="myathletes.html">Athletes</a>
                <a class="nav-link hide" id="nav-meals" href="meals.html">Meal registration</a>
+                <a class="nav-link hide" id="nav-profile" href="profile.html">Profile</a>
+
                <hr>
            </div>
            <div class="my-2 my-lg-0 me-5">
@@ -31,8 +33,8 @@ class NavBar extends HTMLElement {
        </nav>
        `;

-        
+
    }
 }

-customElements.define('navbar-el', NavBar);
\ No newline at end of file
+customElements.define('navbar-el', NavBar);
--- a/frontend/www/scripts/profile.js
+++ b/frontend/www/scripts/profile.js
+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);
+
+    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");
+    }
+}
+
+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", "")
+    }
+}
+
+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"));
+
+    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);
+
+    if (!response.ok) {
+        let data = await response.json();
+        let alert = createAlert(`Could not update exercise ${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("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);
+    }
+});
--- a/frontend/www/scripts/scripts.js
+++ b/frontend/www/scripts/scripts.js
@@ -35,6 +35,7 @@ function updateNavBar() {
    document.querySelector('a[href="exercises.html"').classList.remove("hide");
    document.querySelector('a[href="myathletes.html"').classList.remove("hide");
    document.querySelector('a[href="meals.html"').classList.remove("hide");
+    document.querySelector('a[href="profile.html"').classList.remove("hide");
  } else {
    document.getElementById("btn-login-nav").classList.remove("hide");
    document.getElementById("btn-register").classList.remove("hide");
@@ -126,7 +127,7 @@ function setReadOnly(readOnly, selector) {
      }
      else if (readOnly && !input.hasAttribute("disabled")) {
        input.disabled = true;
-      } 
+      }
    }
  }

@@ -134,7 +135,7 @@ function setReadOnly(readOnly, selector) {
    if ((!readOnly && input.hasAttribute("disabled")) ||
        (readOnly && !input.hasAttribute("disabled"))) {
        input.disabled = !input.disabled;
-    } 
+    }
  }
 }

@@ -155,7 +156,7 @@ function createAlert(header, data) {
  let alertDiv = document.createElement("div");
  alertDiv.className = "alert alert-warning alert-dismissible fade show"
  alertDiv.setAttribute("role", "alert");
-  
+
  let strong = document.createElement("strong");
  strong.innerText = header;
  alertDiv.appendChild(strong);

--- a/frontend/www/styles/myStyle.css
+++ b/frontend/www/styles/myStyle.css
+.profile-container{
+
+    background: red;
+}
--- a/frontend/www/workouts.html
+++ b/frontend/www/workouts.html
@@ -17,7 +17,7 @@
        <div class="row">
            <div class="col-lg text-center">
                <h3 class="mt-5">View Workouts</h3>
-                <p>Here you can view workouts completed by you, your athletes, 
+                <p>Here you can view workouts completed by you, your athletes,
                    or the public. Click on a workout to view its details.</p>
                <input type="button" class="btn btn-success" id="btn-create-workout" value="Log new workout">
            </div>
@@ -50,7 +50,7 @@
                    <tr><td>Time:</td><td></td></tr>
                    <tr><td>Owner:</td><td></td></tr>
                    <tr><td>Exercises:</td><td></td></tr>
-                </table>       
+                </table>
            </div>
        </a>
    </template>
@@ -60,4 +60,4 @@
    <script src="scripts/workouts.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>
\ No newline at end of file
+</html>