diff --git a/frontend/www/exercise.html b/frontend/www/exercise.html
index 741bca077b7962809c16c5db83a223f062ffb49b..c2c15b47cdad5ecb66cdf4433bc5ac7389ec077b 100644
--- a/frontend/www/exercise.html
+++ b/frontend/www/exercise.html
@@ -1,54 +1,101 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exercise</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">
+ <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="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>
+ </head>
+ <body>
+ <navbar-el></navbar-el>
- <div class="container">
- <div class="row">
- <div class="col-lg">
- <h3 class="mt-3">View/Edit Exercise</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">
- <label for="inputDescription" class="form-label">Description</label>
- <textarea class="form-control" id="inputDescription" name="description" readonly></textarea>
- </div>
- <div class="col-lg-6"></div>
- <div class="col-lg-6">
- <label for="inputUnit" class="form-label">Unit</label>
- <input type="text" class="form-control" id="inputUnit" name="unit" readonly>
- </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 class="container">
+ <div class="row">
+ <div class="col-lg">
+ <h3 class="mt-3">View/Edit Exercise</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">
+ <label for="inputDescription" class="form-label">Description</label>
+ <textarea
+ class="form-control"
+ id="inputDescription"
+ name="description"
+ readonly
+ ></textarea>
+ </div>
+ <div class="col-lg-6"></div>
+ <div class="col-lg-6">
+ <label for="inputUnit" class="form-label">Unit</label>
+ <input
+ type="text"
+ class="form-control"
+ id="inputUnit"
+ name="unit"
+ readonly
+ />
+ </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>
- <script src="scripts/defaults.js"></script>
- <script src="scripts/scripts.js"></script>
- <script src="scripts/exercise.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
+ <div class="col-lg-6"></div>
+ </form>
+ </div>
+ <script src="scripts/defaults.js"></script>
+ <script src="scripts/scripts.js"></script>
+ <script src="scripts/exercise.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/login.html b/frontend/www/login.html
index 1d798730665bbe58bf30295c29e04a4fa01e00fc..6e16e4b77e093eb0b9a9dde73ef814b8788bb7d2 100644
--- a/frontend/www/login.html
+++ b/frontend/www/login.html
@@ -1,48 +1,86 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login</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">
+ <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="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>
+ </head>
+ <body>
<navbar-el></navbar-el>
- <div class="container">
- <div class="card mt-3 border-0">
+ <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>
- <form id="form-login">
+ <h4 class="card-title mt-3 text-center">Log In</h4>
+ <form id="form-login">
<div class="input-group mb-2">
- <span class="input-group-text"> <i class="fas fa-user"></i> </span>
- <input name="username" class="form-control" placeholder="User name" type="text" required>
- </div> <!-- form-group// -->
+ <span class="input-group-text">
+ <i class="fas fa-user"></i>
+ </span>
+ <input
+ name="username"
+ class="form-control"
+ placeholder="User name"
+ type="text"
+ required
+ />
+ </div>
+ <!-- form-group// -->
<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// -->
+ <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 class="input-group mb-2">
- <label class="checkbox" style="border: none;">
- <input type="checkbox" value="rememberMe" id="rememberMe"> Remember me
- </label>
- </div> <!-- form-group// -->
+ <label class="checkbox" style="border: none;">
+ <input type="checkbox" value="rememberMe" id="rememberMe" />
+ Remember me
+ </label>
+ </div>
+ <!-- form-group// -->
<div class="d-grid">
- <input type="button" class="btn btn-primary" id="btn-login" value=" Log in ">
- </div> <!-- form-group// -->
- </form>
+ <input
+ type="button"
+ class="btn btn-primary"
+ id="btn-login"
+ value=" Log in "
+ />
+ </div>
+ <!-- form-group// -->
+ </form>
</article>
- </div> <!-- card.// -->
-
- </div>
+ </div>
+ <!-- card.// -->
+ </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
+ <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/logout.html b/frontend/www/logout.html
index e45927cb7b372b1230fd01bb00ddb5fbdb3b6d53..dde3930524e360cef658ce2c6a5c855a007fa1bb 100644
--- a/frontend/www/logout.html
+++ b/frontend/www/logout.html
@@ -1,18 +1,30 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logout</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">
+ <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">
-</head>
-<body>
+ <script
+ src="https://kit.fontawesome.com/0ce6c392ca.js"
+ crossorigin="anonymous"
+ ></script>
+ <link rel="stylesheet" href="styles/style.css" />
+ </head>
+ <body>
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
<script src="scripts/logout.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
+ <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/mycoach.html b/frontend/www/mycoach.html
index f4989e112c4679793f5269d92e7fbb37fd787993..3ee81f84897b975c1e5cdd04ac260875996a63d2 100644
--- a/frontend/www/mycoach.html
+++ b/frontend/www/mycoach.html
@@ -1,87 +1,121 @@
<!DOCTYPE html>
<html lang="en">
-
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Coach</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">
+ <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>
+ </head>
-<body>
+ <body>
<navbar-el></navbar-el>
<div class="container">
- <div class="row">
- <div class="col-lg text-center">
- <h3 class="mt-5">Coach & Files</h3>
- <p>On this page you can view/change your current coach as well as view the files your coaches (present
- and previous)
- have uploaded.
- </p>
- </div>
+ <div class="row">
+ <div class="col-lg text-center">
+ <h3 class="mt-5">Coach & Files</h3>
+ <p>
+ On this page you can view/change your current coach as well as view
+ the files your coaches (present and previous) have uploaded.
+ </p>
</div>
- <form id="form-coach" class="row">
- <div class="col-lg-6 mb-3">
- <label for="input-coach" class="form-label">Coach</label>
- <input type="text" class="form-control mb-1" placeholder="User ID" id="input-coach" name="coach"
- readonly>
- <input type="button" class="btn btn-primary" id="button-edit-coach" value="Edit">
- <input type="button" class="btn btn-primary hide" id="button-set-coach" value=" OK ">
- <input type="button" class="btn btn-secondary hide" id="button-cancel-coach" value="Cancel">
- </div>
- <div id="offers-div" class="col-lg-6 mb-3">
- <label for="list-offers" class="form-label">Offers</label>
- <ul class="list-group" id="list-offers">
-
- </ul>
- </div>
- </form>
- <div class="row">
- <div id="list-files-div" class="col">
- <label for="list-tab" class="form-label">Files</label>
- </div>
+ </div>
+ <form id="form-coach" class="row">
+ <div class="col-lg-6 mb-3">
+ <label for="input-coach" class="form-label">Coach</label>
+ <input
+ type="text"
+ class="form-control mb-1"
+ placeholder="User ID"
+ id="input-coach"
+ name="coach"
+ readonly
+ />
+ <input
+ type="button"
+ class="btn btn-primary"
+ id="button-edit-coach"
+ value="Edit"
+ />
+ <input
+ type="button"
+ class="btn btn-primary hide"
+ id="button-set-coach"
+ value=" OK "
+ />
+ <input
+ type="button"
+ class="btn btn-secondary hide"
+ id="button-cancel-coach"
+ value="Cancel"
+ />
+ </div>
+ <div id="offers-div" class="col-lg-6 mb-3">
+ <label for="list-offers" class="form-label">Offers</label>
+ <ul class="list-group" id="list-offers"></ul>
+ </div>
+ </form>
+ <div class="row">
+ <div id="list-files-div" class="col">
+ <label for="list-tab" class="form-label">Files</label>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-3">
+ <div class="list-group" id="list-tab" role="tablist"></div>
</div>
- <div class="row">
- <div class="col-3">
- <div class="list-group" id="list-tab" role="tablist"></div>
- </div>
- <div class="col-3">
- <div class="tab-content" id="nav-tabContent"></div>
- </div>
- <div class="col-6"></div>
+ <div class="col-3">
+ <div class="tab-content" id="nav-tabContent"></div>
</div>
+ <div class="col-6"></div>
+ </div>
</div>
<template id="template-owner-tab">
- <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#list-tab" role="tab"></a>
+ <a
+ class="list-group-item list-group-item-action"
+ data-bs-toggle="list"
+ href="#list-tab"
+ role="tab"
+ ></a>
</template>
<template id="template-files">
- <div class="tab-pane fade" role="tabpanel"></div>
+ <div class="tab-pane fade" role="tabpanel"></div>
</template>
<template id="template-file">
- <a class="me-2 link-block" href="#"></a>
+ <a class="me-2 link-block" href="#"></a>
</template>
<template id="template-offer">
- <li class="list-group-item">
- <span></span>
- <div class="btn-group ms-4" role="group">
- <button type="button" class="btn btn-success">Accept</button>
- <button type="button" class="btn btn-danger">Decline</button>
- </div>
- </template>
-
+ <li class="list-group-item">
+ <span></span>
+ <div class="btn-group ms-4" role="group">
+ <button type="button" class="btn btn-success">Accept</button>
+ <button type="button" class="btn btn-danger">Decline</button>
+ </div>
+ </li></template
+ >
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
<script src="scripts/mycoach.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
+ <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/register.html b/frontend/www/register.html
index 0140dcc01aac2c227d7558cb557954d29d0100fa..59fecd7fffa4feee641abb4522c60069388c1fab 100644
--- a/frontend/www/register.html
+++ b/frontend/www/register.html
@@ -1,72 +1,149 @@
<!DOCTYPE html>
<html lang="en">
-
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Register</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">
+ <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>
+ </head>
-<body>
+ <body>
<navbar-el></navbar-el>
<!-- Adapted from https://bootsnipp.com/snippets/z8699 START -->
<div class="container">
- <div class="card mt-3 border-0">
- <article class="card-body mx-auto">
- <h4 class="card-title mt-3 text-center">Create Account</h4>
- <p class="text-center">Get started with your free account</p>
- <form id="form-register-user">
- <div class="input-group mb-2">
- <span class="input-group-text"> <i class="fas fa-user"></i> </span>
- <input name="username" class="form-control" placeholder="User name" type="text" required>
- </div> <!-- form-group// -->
- <div class="input-group mb-2">
- <span class="input-group-text"> <i class="fas fa-envelope"></i> </span>
- <input name="email" class="form-control" placeholder="Email address" type="email" required>
- </div>
- <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="Create password" type="password"
- required>
- </div> <!-- form-group// -->
- <div class="input-group mb-2">
- <span class="input-group-text"> <i class="fas fa-lock"></i> </span>
- <input class="form-control" name="password1" placeholder="Repeat password" type="password"
- required>
- </div> <!-- form-group// -->
- <div class="input-group mb-2">
- <span class="input-group-text"> <i class="fas fa-mobile"></i> </span>
- <input class="form-control" name="phone_number" placeholder="Phone number" type="text"
- required>
- </div> <!-- form-group// -->
- <div class="input-group mb-2">
- <span class="input-group-text"> <i class="fas fa-globe"></i> </span>
- <input class="form-control" name="country" placeholder="Country" type="text"
- required>
- </div> <!-- form-group// -->
- <div class="input-group mb-2">
- <span class="input-group-text"> <i class="fas fa-building"></i> </span>
- <input class="form-control" name="city" placeholder="City" type="text"
- required>
- </div> <!-- form-group// -->
- <div class="input-group mb-2">
- <span class="input-group-text"> <i class="fas fa-hotel"></i> </span>
- <input class="form-control" name="street_address" placeholder="Street address" type="text"
- required>
- </div> <!-- form-group// -->
- <div class="d-grid">
- <input type="button" class="btn btn-primary" id="btn-create-account"
- value=" Create Account ">
- </div> <!-- form-group// -->
- </form>
- </article>
- </div> <!-- card.// -->
-
+ <div class="card mt-3 border-0">
+ <article class="card-body mx-auto">
+ <h4 class="card-title mt-3 text-center">Create Account</h4>
+ <p class="text-center">Get started with your free account</p>
+ <form id="form-register-user">
+ <div class="input-group mb-2">
+ <span class="input-group-text">
+ <i class="fas fa-user"></i>
+ </span>
+ <input
+ name="username"
+ class="form-control"
+ placeholder="User name"
+ type="text"
+ required
+ />
+ </div>
+ <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text">
+ <i class="fas fa-envelope"></i>
+ </span>
+ <input
+ name="email"
+ class="form-control"
+ placeholder="Email address"
+ type="email"
+ required
+ />
+ </div>
+ <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="Create password"
+ type="password"
+ required
+ />
+ </div>
+ <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text">
+ <i class="fas fa-lock"></i>
+ </span>
+ <input
+ class="form-control"
+ name="password1"
+ placeholder="Repeat password"
+ type="password"
+ required
+ />
+ </div>
+ <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text">
+ <i class="fas fa-mobile"></i>
+ </span>
+ <input
+ class="form-control"
+ name="phone_number"
+ placeholder="Phone number"
+ type="text"
+ required
+ />
+ </div>
+ <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text">
+ <i class="fas fa-globe"></i>
+ </span>
+ <input
+ class="form-control"
+ name="country"
+ placeholder="Country"
+ type="text"
+ required
+ />
+ </div>
+ <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text">
+ <i class="fas fa-building"></i>
+ </span>
+ <input
+ class="form-control"
+ name="city"
+ placeholder="City"
+ type="text"
+ required
+ />
+ </div>
+ <!-- form-group// -->
+ <div class="input-group mb-2">
+ <span class="input-group-text">
+ <i class="fas fa-hotel"></i>
+ </span>
+ <input
+ class="form-control"
+ name="street_address"
+ placeholder="Street address"
+ type="text"
+ required
+ />
+ </div>
+ <!-- form-group// -->
+ <div class="d-grid">
+ <input
+ type="button"
+ class="btn btn-primary"
+ id="btn-create-account"
+ value=" Create Account "
+ />
+ </div>
+ <!-- form-group// -->
+ </form>
+ </article>
+ </div>
+ <!-- card.// -->
</div>
<!--container end.//-->
<!-- Adapted from https://bootsnipp.com/snippets/z8699 END -->
@@ -74,7 +151,10 @@
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
<script src="scripts/register.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
+ <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/navbar.js b/frontend/www/scripts/navbar.js
index d906f613e77b06fe961e37151d1eea6f5668b48a..a0580a6ce2de4fa22e5e1ed6c0004acac1cfe6ca 100644
--- a/frontend/www/scripts/navbar.js
+++ b/frontend/www/scripts/navbar.js
@@ -1,10 +1,10 @@
class NavBar extends HTMLElement {
- constructor() {
- super();
- }
+ constructor() {
+ super();
+ }
- connectedCallback() {
- this.innerHTML = `
+ connectedCallback() {
+ this.innerHTML = `
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand fw-bold ms-5 me-3" href="#">SecFit</a>
@@ -18,6 +18,7 @@ class NavBar extends HTMLElement {
<a class="nav-link hide" id="nav-exercises" href="exercises.html">Exercises</a>
<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-statistics" href="statistics.html">Statistics</a>
<hr>
</div>
<div class="my-2 my-lg-0 me-5">
@@ -29,9 +30,7 @@ class NavBar extends HTMLElement {
</div>
</nav>
`;
-
-
- }
+ }
}
-customElements.define('navbar-el', NavBar);
\ No newline at end of file
+customElements.define("navbar-el", NavBar);
diff --git a/frontend/www/scripts/scripts.js b/frontend/www/scripts/scripts.js
index 8c550009c43a70acc44ecd56c4434faa318c1c69..4d62e415e43ce831fc17c9fdab1935ec53753d7d 100644
--- a/frontend/www/scripts/scripts.js
+++ b/frontend/www/scripts/scripts.js
@@ -5,23 +5,28 @@ function makeNavLinkActive(id) {
}
function isUserAuthenticated() {
- return (getCookieValue("access") != null) || (getCookieValue("refresh") != null);
+ return getCookieValue("access") != null || getCookieValue("refresh") != null;
}
function updateNavBar() {
let nav = document.querySelector("nav");
// Emphasize link to current page
- if (window.location.pathname == "/" || window.location.pathname == "/index.html") {
+ if (
+ window.location.pathname == "/" ||
+ window.location.pathname == "/index.html"
+ ) {
makeNavLinkActive("nav-index");
} else if (window.location.pathname == "/workouts.html") {
makeNavLinkActive("nav-workouts");
} else if (window.location.pathname == "/exercises.html") {
makeNavLinkActive("nav-exercises");
} else if (window.location.pathname == "/mycoach.html") {
- makeNavLinkActive("nav-mycoach")
+ makeNavLinkActive("nav-mycoach");
} else if (window.location.pathname == "/myathletes.html") {
makeNavLinkActive("nav-myathletes");
+ } else if (window.location.pathname == "/statistics.html") {
+ makeNavLinkActive("nav-statistics");
}
if (isUserAuthenticated()) {
@@ -32,15 +37,14 @@ function updateNavBar() {
document.querySelector('a[href="mycoach.html"').classList.remove("hide");
document.querySelector('a[href="exercises.html"').classList.remove("hide");
document.querySelector('a[href="myathletes.html"').classList.remove("hide");
+ document.querySelector('a[href="statistics.html"').classList.remove("hide");
} else {
document.getElementById("btn-login-nav").classList.remove("hide");
document.getElementById("btn-register").classList.remove("hide");
}
-
}
-
-function setCookie(name, value, maxage, path="") {
+function setCookie(name, value, maxage, path = "") {
document.cookie = `${name}=${value}; max-age=${maxage}; path=${path}`;
}
@@ -50,7 +54,9 @@ function deleteCookie(name) {
function getCookieValue(name) {
let cookieValue = null;
- let cookieByName = document.cookie.split("; ").find(row => row.startsWith(name));
+ let cookieByName = document.cookie
+ .split("; ")
+ .find(row => row.startsWith(name));
if (cookieByName) {
cookieValue = cookieByName.split("=")[1];
@@ -59,7 +65,12 @@ function getCookieValue(name) {
return cookieValue;
}
-async function sendRequest(method, url, body, contentType="application/json; charset=UTF-8") {
+async function sendRequest(
+ method,
+ url,
+ body,
+ contentType = "application/json; charset=UTF-8"
+) {
if (body && contentType.includes("json")) {
body = JSON.stringify(body);
}
@@ -67,16 +78,19 @@ async function sendRequest(method, url, body, contentType="application/json; cha
let myHeaders = new Headers();
if (contentType) myHeaders.set("Content-Type", contentType);
- if (getCookieValue("access")) myHeaders.set("Authorization", "Bearer " + getCookieValue("access"));
- let myInit = {headers: myHeaders, method: method, body: body};
+ if (getCookieValue("access"))
+ myHeaders.set("Authorization", "Bearer " + getCookieValue("access"));
+ let myInit = { headers: myHeaders, method: method, body: body };
let myRequest = new Request(url, myInit);
let response = await fetch(myRequest);
if (response.status == 401 && getCookieValue("refresh")) {
// access token not accepted. getting refresh token
- myHeaders = new Headers({"Content-Type": "application/json; charset=UTF-8"});
- let tokenBody = JSON.stringify({"refresh": getCookieValue("refresh")});
- myInit = {headers: myHeaders, method: "POST", body: tokenBody};
+ myHeaders = new Headers({
+ "Content-Type": "application/json; charset=UTF-8"
+ });
+ let tokenBody = JSON.stringify({ refresh: getCookieValue("refresh") });
+ myInit = { headers: myHeaders, method: "POST", body: tokenBody };
myRequest = new Request(`${HOST}/api/token/refresh/`, myInit);
response = await fetch(myRequest);
@@ -85,13 +99,15 @@ async function sendRequest(method, url, body, contentType="application/json; cha
let data = await response.json();
setCookie("access", data.access, 86400, "/");
- let myHeaders = new Headers({"Authorization": "Bearer " + getCookieValue("access"),
- "Content-Type": contentType});
- let myInit = {headers: myHeaders, method: method, body: body};
- let myRequest = new Request(url, myInit);
- response = await fetch(myRequest);
+ let myHeaders = new Headers({
+ Authorization: "Bearer " + getCookieValue("access"),
+ "Content-Type": contentType
+ });
+ let myInit = { headers: myHeaders, method: method, body: body };
+ let myRequest = new Request(url, myInit);
+ response = await fetch(myRequest);
- if (!response.ok) window.location.replace("logout.html");
+ if (!response.ok) window.location.replace("logout.html");
}
}
@@ -103,46 +119,45 @@ function setReadOnly(readOnly, selector) {
let formData = new FormData(form);
for (let key of formData.keys()) {
- let selector = `input[name="${key}"], textarea[name="${key}"]`;
- for (let input of form.querySelectorAll(selector)) {
-
- if (!readOnly && input.hasAttribute("readonly"))
- {
+ let selector = `input[name="${key}"], textarea[name="${key}"]`;
+ for (let input of form.querySelectorAll(selector)) {
+ if (!readOnly && input.hasAttribute("readonly")) {
input.readOnly = false;
- }
- else if (readOnly && !input.hasAttribute("readonly")) {
+ } else if (readOnly && !input.hasAttribute("readonly")) {
input.readOnly = true;
}
}
selector = `input[type="file"], select[name="${key}`;
for (let input of form.querySelectorAll(selector)) {
- if ((!readOnly && input.hasAttribute("disabled")))
- {
+ if (!readOnly && input.hasAttribute("disabled")) {
input.disabled = false;
- }
- else if (readOnly && !input.hasAttribute("disabled")) {
+ } else if (readOnly && !input.hasAttribute("disabled")) {
input.disabled = true;
- }
+ }
}
}
- for (let input of document.querySelectorAll("input:disabled, select:disabled")) {
- if ((!readOnly && input.hasAttribute("disabled")) ||
- (readOnly && !input.hasAttribute("disabled"))) {
- input.disabled = !input.disabled;
- }
+ for (let input of document.querySelectorAll(
+ "input:disabled, select:disabled"
+ )) {
+ if (
+ (!readOnly && input.hasAttribute("disabled")) ||
+ (readOnly && !input.hasAttribute("disabled"))
+ ) {
+ input.disabled = !input.disabled;
+ }
}
}
async function getCurrentUser() {
let user = null;
- let response = await sendRequest("GET", `${HOST}/api/users/?user=current`)
+ let response = await sendRequest("GET", `${HOST}/api/users/?user=current`);
if (!response.ok) {
- console.log("COULD NOT RETRIEVE CURRENTLY LOGGED IN USER");
+ console.log("COULD NOT RETRIEVE CURRENTLY LOGGED IN USER");
} else {
- let data = await response.json();
- user = data.results[0];
+ let data = await response.json();
+ user = data.results[0];
}
return user;
@@ -150,9 +165,9 @@ async function getCurrentUser() {
function createAlert(header, data) {
let alertDiv = document.createElement("div");
- alertDiv.className = "alert alert-warning alert-dismissible fade show"
+ alertDiv.className = "alert alert-warning alert-dismissible fade show";
alertDiv.setAttribute("role", "alert");
-
+
let strong = document.createElement("strong");
strong.innerText = header;
alertDiv.appendChild(strong);
@@ -187,8 +202,6 @@ function createAlert(header, data) {
alertDiv.appendChild(ul);
return alertDiv;
-
}
window.addEventListener("DOMContentLoaded", updateNavBar);
-
diff --git a/frontend/www/scripts/statistics.js b/frontend/www/scripts/statistics.js
new file mode 100644
index 0000000000000000000000000000000000000000..b69a3ab4db507a247ddbf1959e402a05b1d3c6ca
--- /dev/null
+++ b/frontend/www/scripts/statistics.js
@@ -0,0 +1,80 @@
+async function fetchWorkouts(ordering) {
+ let response = await sendRequest(
+ "GET",
+ `${HOST}/api/workouts/?ordering=${ordering}`
+ );
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ } else {
+ let data = await response.json();
+ let workouts = data.results;
+
+ return workouts;
+ }
+}
+function isLastWeek(date) {
+ let lastWeek = new Date();
+ let today = new Date();
+ let past = lastWeek.getDate() - 7;
+ lastWeek.setDate(past);
+ console.log(today);
+ return date >= lastWeek && date <= today;
+}
+function isLastMonth(date) {
+ let lastMonth = new Date();
+ let today = new Date();
+ let past = lastMonth.getDate() - 30;
+ lastMonth.setDate(past);
+ return date >= lastMonth && date <= today;
+}
+function isLastYear(date) {
+ let lastYear = new Date();
+ let today = new Date();
+ let past = lastYear.getDate() - 365;
+ lastYear.setDate(past);
+ return date >= lastYear && date <= today;
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+ let ordering = "-date";
+ let sevenDays = 0;
+ let thirtyDays = 0;
+ let threeSixtyFive = 0;
+
+ let currentUser = await getCurrentUser();
+ if (ordering.includes("owner")) {
+ ordering += "__username";
+ }
+ let workouts = await fetchWorkouts(ordering);
+
+ console.log(workouts.length);
+ for (let i = 0; i < workouts.length; i++) {
+ let workout = workouts[i];
+
+ let d = workout.date;
+ let wDate = new Date(d.slice(0, 4), d.slice(5, 7) - 1, d.slice(8, 10));
+ console.log("last week", isLastWeek(wDate));
+ console.log("last month", isLastMonth(wDate));
+ console.log("last year", isLastYear(wDate));
+
+ if (workout.owner == currentUser.url) {
+ if (isLastWeek(wDate)) {
+ sevenDays++;
+ }
+
+ if (isLastMonth(wDate)) {
+ thirtyDays++;
+ }
+ if (isLastYear(wDate)) {
+ threeSixtyFive++;
+ }
+ }
+
+ document.getElementById("week").innerHTML = sevenDays;
+ document.getElementById("month").innerHTML = thirtyDays;
+ document.getElementById("year").innerHTML = threeSixtyFive;
+
+ console.log(sevenDays, thirtyDays, threeSixtyFive);
+ }
+});
diff --git a/frontend/www/scripts/workouts.js b/frontend/www/scripts/workouts.js
index 772be1ea070499ad9574d787d990c1ca17097bdf..a02b3dfc25e90c47ce6e3ebf5f77aa2611ae80e0 100644
--- a/frontend/www/scripts/workouts.js
+++ b/frontend/www/scripts/workouts.js
@@ -1,106 +1,121 @@
async function fetchWorkouts(ordering) {
- let response = await sendRequest("GET", `${HOST}/api/workouts/?ordering=${ordering}`);
+ let response = await sendRequest(
+ "GET",
+ `${HOST}/api/workouts/?ordering=${ordering}`
+ );
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
- } else {
- let data = await response.json();
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ } else {
+ let data = await response.json();
- let workouts = data.results;
- let container = document.getElementById('div-content');
- workouts.forEach(workout => {
- let templateWorkout = document.querySelector("#template-workout");
- let cloneWorkout = templateWorkout.content.cloneNode(true);
+ let workouts = data.results;
+ let container = document.getElementById("div-content");
+ workouts.forEach(workout => {
+ let templateWorkout = document.querySelector("#template-workout");
+ let cloneWorkout = templateWorkout.content.cloneNode(true);
- let aWorkout = cloneWorkout.querySelector("a");
- aWorkout.href = `workout.html?id=${workout.id}`;
+ let aWorkout = cloneWorkout.querySelector("a");
+ aWorkout.href = `workout.html?id=${workout.id}`;
- let h5 = aWorkout.querySelector("h5");
- h5.textContent = workout.name;
+ let h5 = aWorkout.querySelector("h5");
+ h5.textContent = workout.name;
- let localDate = new Date(workout.date);
+ let localDate = new Date(workout.date);
- let table = aWorkout.querySelector("table");
- let rows = table.querySelectorAll("tr");
- rows[0].querySelectorAll("td")[1].textContent = localDate.toLocaleDateString(); // Date
- rows[1].querySelectorAll("td")[1].textContent = localDate.toLocaleTimeString(); // Time
- rows[2].querySelectorAll("td")[1].textContent = workout.owner_username; //Owner
- rows[3].querySelectorAll("td")[1].textContent = workout.exercise_instances.length; // Exercises
+ let table = aWorkout.querySelector("table");
+ let rows = table.querySelectorAll("tr");
+ rows[0].querySelectorAll(
+ "td"
+ )[1].textContent = localDate.toLocaleDateString(); // Date
+ rows[1].querySelectorAll(
+ "td"
+ )[1].textContent = localDate.toLocaleTimeString(); // Time
+ rows[2].querySelectorAll("td")[1].textContent = workout.owner_username; //Owner
+ rows[3].querySelectorAll("td")[1].textContent =
+ workout.exercise_instances.length; // Exercises
- container.appendChild(aWorkout);
- });
- return workouts;
- }
+ container.appendChild(aWorkout);
+ });
+ return workouts;
+ }
}
function createWorkout() {
- window.location.replace("workout.html");
+ window.location.replace("workout.html");
}
window.addEventListener("DOMContentLoaded", async () => {
- let createButton = document.querySelector("#btn-create-workout");
- createButton.addEventListener("click", createWorkout);
- let ordering = "-date";
+ let createButton = document.querySelector("#btn-create-workout");
+ createButton.addEventListener("click", createWorkout);
+ let ordering = "-date";
+
+ const urlParams = new URLSearchParams(window.location.search);
+ if (urlParams.has("ordering")) {
+ let aSort = null;
+ ordering = urlParams.get("ordering");
+ if (ordering == "name" || ordering == "owner" || ordering == "date") {
+ let aSort = document.querySelector(`a[href="?ordering=${ordering}"`);
+ aSort.href = `?ordering=-${ordering}`;
+ }
+ }
- const urlParams = new URLSearchParams(window.location.search);
- if (urlParams.has('ordering')) {
- let aSort = null;
- ordering = urlParams.get('ordering');
- if (ordering == "name" || ordering == "owner" || ordering == "date") {
- let aSort = document.querySelector(`a[href="?ordering=${ordering}"`);
- aSort.href = `?ordering=-${ordering}`;
- }
- }
+ let currentSort = document.querySelector("#current-sort");
+ currentSort.innerHTML =
+ (ordering.startsWith("-") ? "Descending" : "Ascending") +
+ " " +
+ ordering.replace("-", "");
- let currentSort = document.querySelector("#current-sort");
- currentSort.innerHTML = (ordering.startsWith("-") ? "Descending" : "Ascending") + " " + ordering.replace("-", "");
+ let currentUser = await getCurrentUser();
+ // grab username
+ if (ordering.includes("owner")) {
+ ordering += "__username";
+ }
+ let workouts = await fetchWorkouts(ordering);
- let currentUser = await getCurrentUser();
- // grab username
- if (ordering.includes("owner")) {
- ordering += "__username";
- }
- let workouts = await fetchWorkouts(ordering);
-
- let tabEls = document.querySelectorAll('a[data-bs-toggle="list"]');
- for (let i = 0; i < tabEls.length; i++) {
- let tabEl = tabEls[i];
- tabEl.addEventListener('show.bs.tab', function (event) {
- let workoutAnchors = document.querySelectorAll('.workout');
- for (let j = 0; j < workouts.length; j++) {
- // I'm assuming that the order of workout objects matches
- // the other of the workout anchor elements. They should, given
- // that I just created them.
- let workout = workouts[j];
- let workoutAnchor = workoutAnchors[j];
+ let tabEls = document.querySelectorAll('a[data-bs-toggle="list"]');
+ for (let i = 0; i < tabEls.length; i++) {
+ let tabEl = tabEls[i];
+ tabEl.addEventListener("show.bs.tab", function(event) {
+ let workoutAnchors = document.querySelectorAll(".workout");
+ for (let j = 0; j < workouts.length; j++) {
+ // I'm assuming that the order of workout objects matches
+ // the other of the workout anchor elements. They should, given
+ // that I just created them.
+ let workout = workouts[j];
+ let workoutAnchor = workoutAnchors[j];
- switch (event.currentTarget.id) {
- case "list-my-workouts-list":
- if (workout.owner == currentUser.url) {
- workoutAnchor.classList.remove('hide');
- } else {
- workoutAnchor.classList.add('hide');
- }
- break;
- case "list-athlete-workouts-list":
- if (currentUser.athletes && currentUser.athletes.includes(workout.owner)) {
- workoutAnchor.classList.remove('hide');
- } else {
- workoutAnchor.classList.add('hide');
- }
- break;
- case "list-public-workouts-list":
- if (workout.visibility == "PU") {
- workoutAnchor.classList.remove('hide');
- } else {
- workoutAnchor.classList.add('hide');
- }
- break;
- default :
- workoutAnchor.classList.remove('hide');
- break;
- }
+ switch (event.currentTarget.id) {
+ case "list-my-workouts-list":
+ if (workout.owner == currentUser.url) {
+ workoutAnchor.classList.remove("hide");
+ } else {
+ workoutAnchor.classList.add("hide");
}
- });
- }
-});
\ No newline at end of file
+ break;
+ case "list-athlete-workouts-list":
+ if (
+ currentUser.athletes &&
+ currentUser.athletes.includes(workout.owner)
+ ) {
+ workoutAnchor.classList.remove("hide");
+ } else {
+ workoutAnchor.classList.add("hide");
+ }
+ break;
+ case "list-public-workouts-list":
+ if (workout.visibility == "PU") {
+ workoutAnchor.classList.remove("hide");
+ } else {
+ workoutAnchor.classList.add("hide");
+ }
+ break;
+ default:
+ workoutAnchor.classList.remove("hide");
+ break;
+ }
+ }
+ });
+ }
+ let templateWeek = document.querySelector("#template-workout");
+});
diff --git a/frontend/www/statistics.html b/frontend/www/statistics.html
new file mode 100644
index 0000000000000000000000000000000000000000..c44d81ffc96960ff065882f4f057794ca0ac46f2
--- /dev/null
+++ b/frontend/www/statistics.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Statistics</title>
+ <link rel="stylesheet" href="styles/style.css" />
+ <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>
+ <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">Statistics</h3>
+ <p>
+ Here you can view your own statistics of the number of workouts
+ completed for different time periods.
+ </p>
+ </div>
+ </div>
+ <div class="centering">
+ <div class="list-group list-group-horizontal d-inline-flex mt-2">
+ <div class="number">
+ <h1 id="week">Last seven days</h1>
+ <p>Last seven days</p>
+ </div>
+ <div class="number">
+ <h1 id="month">Last thirty days</h1>
+ <p>Last 30 days</p>
+ </div>
+ <div class="number">
+ <h1 id="year">Last 365 days</h1>
+ <p>Last 365 days</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <script src="scripts/defaults.js"></script>
+ <script src="scripts/scripts.js"></script>
+ <script src="scripts/statistics.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/styles/style.css b/frontend/www/styles/style.css
index 066705ce965bb162c61ebaf65ff77b9a0824eaf3..a87308a03a2545e4f3c7ecd0c316c4c611df998f 100644
--- a/frontend/www/styles/style.css
+++ b/frontend/www/styles/style.css
@@ -1,7 +1,3 @@
-.workout {
-
-}
-
.hide {
display: none !important;
}
@@ -16,7 +12,7 @@
.divider-text span {
padding: 7px;
font-size: 12px;
- position: relative;
+ position: relative;
z-index: 2;
}
.divider-text:after {
@@ -30,35 +26,50 @@
}
.btn-facebook {
- background-color: #405D9D;
+ background-color: #405d9d;
color: #fff;
}
.btn-twitter {
- background-color: #42AEEC;
+ background-color: #42aeec;
color: #fff;
}
/* Adapted from https://bootsnipp.com/snippets/z8699 END */
.comment-wrapper .panel-body {
- max-height:650px;
- overflow:auto;
+ max-height: 650px;
+ overflow: auto;
}
.comment-wrapper .media-list .media img {
- width:64px;
- height:64px;
- border:2px solid #e5e7e8;
+ width: 64px;
+ height: 64px;
+ border: 2px solid #e5e7e8;
}
.comment-wrapper .media-list .media {
- border-bottom:1px dashed #efefef;
- margin-bottom:25px;
+ border-bottom: 1px dashed #efefef;
+ margin-bottom: 25px;
}
-.entry:not(:first-of-type)
-{
- margin-top: 10px;
+.entry:not(:first-of-type) {
+ margin-top: 10px;
}
.link-block {
display: block;
}
+
+.number {
+ background-color: #0d6efd;
+ color: white;
+ width: 10vw;
+ height: 10vw;
+ padding: 3vh;
+ text-align: center;
+ margin: 1vh;
+}
+
+.centering {
+ margin: 5vh;
+ display: flex;
+ justify-content: center;
+}
diff --git a/frontend/www/workout.html b/frontend/www/workout.html
index 73747232adaea6ef4944cdd0fbec8693ca6b4a76..b3f6bbc7a1bb957d7b3cba58a683b9e4d4033345 100644
--- a/frontend/www/workout.html
+++ b/frontend/www/workout.html
@@ -1,43 +1,74 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Workout</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">
+ <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="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>
+ </head>
+ <body>
+ <navbar-el></navbar-el>
<div class="container">
- <div class="row">
- <div class="col-lg">
- <h3 class="mt-3">View/Edit Workout</h3>
- </div>
+ <div class="row">
+ <div class="col-lg">
+ <h3 class="mt-3">View/Edit Workout</h3>
</div>
- <form class="row g-3 mb-4" id="form-workout">
+ </div>
+ <form class="row g-3 mb-4" id="form-workout">
<div class="col-lg-6 ">
<label for="inputName" class="form-label">Name</label>
- <input type="text" class="form-control" id="inputName" name="name" readonly>
+ <input
+ type="text"
+ class="form-control"
+ id="inputName"
+ name="name"
+ readonly
+ />
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputDateTime" class="form-label">Date/Time</label>
- <input type="datetime-local" class="form-control" id="inputDateTime" name="date" readonly>
+ <input
+ type="datetime-local"
+ class="form-control"
+ id="inputDateTime"
+ name="date"
+ readonly
+ />
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
- <label for="inputOwner" class="form-label">Owner</label>
- <input type="text" class="form-control" id="inputOwner" name="owner_username" readonly>
+ <label for="inputOwner" class="form-label">Owner</label>
+ <input
+ type="text"
+ class="form-control"
+ id="inputOwner"
+ name="owner_username"
+ readonly
+ />
</div>
<div class="col-lg-6">
<label for="inputVisibility" class="form-label">Visibility</label>
- <select id="inputVisibility" class="form-select" name="visibility" disabled>
+ <select
+ id="inputVisibility"
+ class="form-select"
+ name="visibility"
+ disabled
+ >
<option value="PU">Public</option>
<option value="CO">Coach</option>
<option value="PR">Private</option>
@@ -45,59 +76,106 @@
</div>
<div class="col-lg-6">
<label for="inputNotes" class="form-label">Notes</label>
- <textarea class="form-control" id="inputNotes" name="notes" readonly></textarea>
+ <textarea
+ class="form-control"
+ id="inputNotes"
+ name="notes"
+ readonly
+ ></textarea>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-6">
<div class="input-group">
- <input type="file" class="form-control" id="customFile" name="files" multiple disabled>
- </div>
- <div id="uploaded-files" class="ms-1 mt-2">
+ <input
+ type="file"
+ class="form-control"
+ id="customFile"
+ name="files"
+ multiple
+ disabled
+ />
</div>
+ <div id="uploaded-files" class="ms-1 mt-2"></div>
</div>
+ <div class="col-lg-6"></div>
<div class="col-lg-6">
- </div>
- <div class="col-lg-6">
- <input type="button" class="btn btn-primary hide" id="btn-ok-workout" value=" OK ">
- <input type="button" class="btn btn-primary hide" id="btn-edit-workout" value=" Edit ">
- <input type="button" class="btn btn-secondary hide" id="btn-cancel-workout" value="Cancel">
- <input type="button" class="btn btn-danger float-end hide" id="btn-delete-workout" value="Delete">
+ <input
+ type="button"
+ class="btn btn-primary hide"
+ id="btn-ok-workout"
+ value=" OK "
+ />
+ <input
+ type="button"
+ class="btn btn-primary hide"
+ id="btn-edit-workout"
+ value=" Edit "
+ />
+ <input
+ type="button"
+ class="btn btn-secondary hide"
+ id="btn-cancel-workout"
+ value="Cancel"
+ />
+ <input
+ type="button"
+ class="btn btn-danger float-end hide"
+ id="btn-delete-workout"
+ value="Delete"
+ />
</div>
<div class="col-lg-6"></div>
<div class="col-lg-12">
- <h3 class="mt-3">Exercises</h3>
- </div>
- <div id="div-exercises" class="col-lg-12">
+ <h3 class="mt-3">Exercises</h3>
</div>
+ <div id="div-exercises" class="col-lg-12"></div>
<div class="col-lg-6">
- <input type="button" class="btn btn-primary hide" id="btn-add-exercise" value="Add exercise">
- <input type="button" class="btn btn-danger hide" id="btn-remove-exercise" value="Remove exercise">
+ <input
+ type="button"
+ class="btn btn-primary hide"
+ id="btn-add-exercise"
+ value="Add exercise"
+ />
+ <input
+ type="button"
+ class="btn btn-danger hide"
+ id="btn-remove-exercise"
+ value="Remove exercise"
+ />
</div>
<div class="col-lg-6"></div>
-
</form>
<div class="row bootstrap snippets bootdeys" id="div-comment-row">
- <div class="col-md-8 col-sm-12">
- <div class="comment-wrapper">
- <div class="card">
- <div class="card-header bg-primary text-light">
- Comment panel
- </div>
- <div class="card-body">
- <textarea class="form-control" id="comment-area" placeholder="write a comment..." rows="3"></textarea>
- <br>
- <button type="button" id="post-comment" class="btn btn-info pull-right">Post</button>
- <div class="clearfix"></div>
- <hr>
- <ul id="comment-list" class="list-unstyled">
- </ul>
- </div>
- </div>
- </div>
-
+ <div class="col-md-8 col-sm-12">
+ <div class="comment-wrapper">
+ <div class="card">
+ <div class="card-header bg-primary text-light">
+ Comment panel
+ </div>
+ <div class="card-body">
+ <textarea
+ class="form-control"
+ id="comment-area"
+ placeholder="write a comment..."
+ rows="3"
+ ></textarea>
+ <br />
+ <button
+ type="button"
+ id="post-comment"
+ class="btn btn-info pull-right"
+ >
+ Post
+ </button>
+ <div class="clearfix"></div>
+ <hr />
+ <ul id="comment-list" class="list-unstyled"></ul>
</div>
+ </div>
</div>
- </div>
+ </div>
+ </div>
+ </div>
<template id="template-exercise">
<div class="row div-exercise-container g-3 mb-3">
@@ -105,25 +183,28 @@
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label class="form-label exercise-type">Type</label>
- <select class="form-select" name="type">
- </select>
+ <select class="form-select" name="type"> </select>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-3">
<label class="form-label exercise-sets">Sets</label>
- <input type="number" class="form-control" name="sets">
+ <input type="number" class="form-control" name="sets" />
</div>
<div class="col-lg-3">
<label class="form-label exercise-number">Number</label>
- <input type="number" class="form-control" name="number">
+ <input type="number" class="form-control" name="number" />
</div>
<div class="col-lg-6"></div>
</div>
</template>
-
+
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
<script src="scripts/workout.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="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>
diff --git a/frontend/www/workouts.html b/frontend/www/workouts.html
index b34439d55031d7f029647d8a425669b795d8fde0..cee18778de349ab5537290d5a771e86775bd8159 100644
--- a/frontend/www/workouts.html
+++ b/frontend/www/workouts.html
@@ -1,63 +1,134 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Workouts</title>
- <link rel="stylesheet" href="styles/style.css">
- <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">
+ <link rel="stylesheet" href="styles/style.css" />
+ <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>
+ <script
+ src="https://kit.fontawesome.com/0ce6c392ca.js"
+ crossorigin="anonymous"
+ ></script>
<script src="scripts/navbar.js" type="text/javascript" defer></script>
-</head>
-<body>
+ </head>
+ <body>
<navbar-el></navbar-el>
<div class="container">
- <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,
- 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>
+ <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, 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>
- <div class="row">
- <div class="col-lg text-center">
- <div class="list-group list-group-horizontal d-inline-flex mt-2" id="list-tab" role="tablist">
- <a class="list-group-item list-group-item-action active" id="list-all-workouts-list" data-bs-toggle="list" href="#list-all-workouts" role="tab" aria-controls="all">All Workouts</a>
- <a class="list-group-item list-group-item-action" id="list-my-workouts-list" data-bs-toggle="list" href="#list-my-workouts" role="tab" aria-controls="my">My Workouts</a>
- <a class="list-group-item list-group-item-action" id="list-athlete-workouts-list" data-bs-toggle="list" href="#list-athlete-workouts" role="tab" aria-controls="athlete">Athlete Workouts</a>
- <a class="list-group-item list-group-item-action" id="list-public-workouts-list" data-bs-toggle="list" href="#list-public-workouts" role="tab" aria-controls="public">Public Workouts</a>
- </div>
- <div class="mt-1">Sort by: <a href="?ordering=date">Date</a> <a href="?ordering=owner">Owner</a> <a href="?ordering=name">Name</a>
- <br>Currently sorting by: <span id="current-sort"></span>
- </div>
- <div class="list-group mt-1" id="div-content"></div>
- </div>
+ </div>
+ <div class="row">
+ <div class="col-lg text-center">
+ <div
+ class="list-group list-group-horizontal d-inline-flex mt-2"
+ id="list-tab"
+ role="tablist"
+ >
+ <a
+ class="list-group-item list-group-item-action active"
+ id="list-all-workouts-list"
+ data-bs-toggle="list"
+ href="#list-all-workouts"
+ role="tab"
+ aria-controls="all"
+ >All Workouts</a
+ >
+ <a
+ class="list-group-item list-group-item-action"
+ id="list-my-workouts-list"
+ data-bs-toggle="list"
+ href="#list-my-workouts"
+ role="tab"
+ aria-controls="my"
+ >My Workouts</a
+ >
+ <a
+ class="list-group-item list-group-item-action"
+ id="list-athlete-workouts-list"
+ data-bs-toggle="list"
+ href="#list-athlete-workouts"
+ role="tab"
+ aria-controls="athlete"
+ >Athlete Workouts</a
+ >
+ <a
+ class="list-group-item list-group-item-action"
+ id="list-public-workouts-list"
+ data-bs-toggle="list"
+ href="#list-public-workouts"
+ role="tab"
+ aria-controls="public"
+ >Public Workouts</a
+ >
+ </div>
+ <div class="mt-1">
+ Sort by: <a href="?ordering=date">Date</a>
+ <a href="?ordering=owner">Owner</a>
+ <a href="?ordering=name">Name</a> <br />Currently sorting by:
+ <span id="current-sort"></span>
+ </div>
+ <div class="list-group mt-1" id="div-content"></div>
</div>
-
+ </div>
</div>
<template id="template-workout">
- <a class="list-group-item list-group-item-action flex-column align-items-start my-1 workout">
- <div class="d-flex w-100 justify-content-between align-items-center">
- <h5 class="mb-1"></h5>
- </div>
- <div class="d-flex">
- <table class="mb-1 text-start">
- <tr><td>Date:</td><td></td></tr>
- <tr><td>Time:</td><td></td></tr>
- <tr><td>Owner:</td><td></td></tr>
- <tr><td>Exercises:</td><td></td></tr>
- </table>
- </div>
- </a>
+ <a
+ class="list-group-item list-group-item-action flex-column align-items-start my-1 workout"
+ >
+ <div class="d-flex w-100 justify-content-between align-items-center">
+ <h5 class="mb-1"></h5>
+ </div>
+ <div class="d-flex">
+ <table class="mb-1 text-start">
+ <tr>
+ <td>Date:</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>Time:</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>Owner:</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td>Exercises:</td>
+ <td></td>
+ </tr>
+ </table>
+ </div>
+ </a>
</template>
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
<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
+ <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>