added goals in navbar

0ab522d1 · hollum · 5abbce14 · 0ab522d1 · 0ab522d1 · 0ab522d1
Commit 0ab522d1 authored 3 years ago by hollum
--- a/frontend/www/goals.html
+++ b/frontend/www/goals.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Goals</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 text-center">
+      <h3 class="mt-5">View Goals</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-create-exercise" value="Create new exercise">
+    </div>
+    <div class="row">
+      <div class="col-lg text-center">
+        <div class="list-group mt-1" id="div-content"></div>
+      </div>
+    </div>
+  </div>
+
+  <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>
+
+  <script src="scripts/defaults.js"></script>
+  <script src="scripts/scripts.js"></script>
+  <script src="scripts/goals.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/goals.js
+++ b/frontend/www/scripts/goals.js
+async function fetchExerciseTypes(request) {
+    let response = await sendRequest("GET", `${HOST}/api/exercises/`);
+
+    if (response.ok) {
+        let data = await response.json();
+
+        let exercises = data.results;
+        let container = document.getElementById('div-content');
+        let exerciseTemplate = document.querySelector("#template-exercise");
+        exercises.forEach(exercise => {
+            const exerciseAnchor = exerciseTemplate.content.firstElementChild.cloneNode(true);
+            exerciseAnchor.href = `exercise.html?id=${exercise.id}`;
+
+            const h5 = exerciseAnchor.querySelector("h5");
+            h5.textContent = exercise.name;
+
+            const p = exerciseAnchor.querySelector("p");
+            p.textContent = exercise.description;
+
+            container.appendChild(exerciseAnchor);
+        });
+    }
+
+    return response;
+}
+
+function createExercise() {
+    window.location.replace("goals.html");
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+    let createButton = document.querySelector("#btn-create-exercise");
+    createButton.addEventListener("click", createExercise);
+
+    let response = await fetchExerciseTypes();
+
+    if (!response.ok) {
+        let data = await response.json();
+        let alert = createAlert("Could not retrieve exercise types!", data);
+        document.body.prepend(alert);
+    }
+});
--- a/frontend/www/scripts/navbar.js
+++ b/frontend/www/scripts/navbar.js
@@ -19,8 +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-goals" href="goals.html">Goals</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">

--- 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="goals.html"').classList.remove("hide");
    document.querySelector('a[href="profile.html"').classList.remove("hide");
  } else {
    document.getElementById("btn-login-nav").classList.remove("hide");