From 0ab522d1a9918dbb8e681742daf16c782e2e1474 Mon Sep 17 00:00:00 2001
From: hollum <hollum@hotmail.com>
Date: Thu, 3 Mar 2022 13:31:53 +0100
Subject: [PATCH] added goals in navbar
---
frontend/www/goals.html | 47 +++++++++++++++++++++++++++++++++
frontend/www/scripts/goals.js | 42 +++++++++++++++++++++++++++++
frontend/www/scripts/navbar.js | 2 +-
frontend/www/scripts/scripts.js | 1 +
4 files changed, 91 insertions(+), 1 deletion(-)
create mode 100644 frontend/www/goals.html
create mode 100644 frontend/www/scripts/goals.js
diff --git a/frontend/www/goals.html b/frontend/www/goals.html
new file mode 100644
index 0000000..43b056c
--- /dev/null
+++ b/frontend/www/goals.html
@@ -0,0 +1,47 @@
+<!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>
diff --git a/frontend/www/scripts/goals.js b/frontend/www/scripts/goals.js
new file mode 100644
index 0000000..5ffe2c7
--- /dev/null
+++ b/frontend/www/scripts/goals.js
@@ -0,0 +1,42 @@
+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);
+ }
+});
diff --git a/frontend/www/scripts/navbar.js b/frontend/www/scripts/navbar.js
index f294498..76459c2 100644
--- 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">
diff --git a/frontend/www/scripts/scripts.js b/frontend/www/scripts/scripts.js
index 182f5e7..635a2c3 100644
--- 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");
--
GitLab