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..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/frontend/www/statistics.html b/frontend/www/statistics.html new file mode 100644 index 0000000000000000000000000000000000000000..3f42b7cabed206688640818eb4469b4b9c7a02ab --- /dev/null +++ b/frontend/www/statistics.html @@ -0,0 +1,80 @@ +<!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 + 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">Statistics</h3> + <p> + Here you can access your workout statistics for different time + periods. + </p> + </div> + </div> + <div class="row"></div> + <div + class="list-group list-group-vertical d-inline-flex mt-2" + id="list-tab" + role="tablist" + > + <a + class="list-group-item list-group-item-action active" + id="list-statistics-week" + data-bs-toggle="list" + href="#list-statistics-week" + role="tab" + aria-controls="week" + > + Week</a + > + <a + class="list-group-item list-group-item-action" + id="list-statistics-month" + data-bs-toggle="list" + href="#list-statistics-month" + role="tab" + aria-controls="month" + > + Month</a + > + <a + class="list-group-item list-group-item-action" + id="list-statistics-year" + data-bs-toggle="list" + href="#list-statistics-year" + role="tab" + aria-controls="year" + > + Year</a + > + </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/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>