Commit ea90158c authored by Tomas Vaagen Gule's avatar Tomas Vaagen Gule
Browse files

#7 Add template for myPage

parent 2c7a24ca
Pipeline #162139 passed with stages
in 1 minute and 53 seconds
<!DOCTYPE html>
<html lang="en">
<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"
/>
<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">
<h1>My page</h1>
</div>
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
<script src="scripts/mypage.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>
......@@ -19,6 +19,7 @@ class NavBar extends HTMLElement {
<a class="nav-link hide" id="nav-mycoach" href="mycoach.html">Coach</a>
<a class="nav-link hide" id="nav-myathletes" href="myathletes.html">Athletes</a>
<a class="nav-link hide" id="nav-meals" href="meals.html">Meal registration</a>
<a class="nav-link hide" id="nav-mypage" href="mypage.html">My page</a>
<hr>
</div>
<div class="my-2 my-lg-0 me-5">
......
......@@ -5,25 +5,30 @@ 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 == "/meals.html") {
makeNavLinkActive("nav-myathletes");
} else if (window.location.pathname == "/mypage.html") {
makeNavLinkActive("nav-mypage");
}
if (isUserAuthenticated()) {
......@@ -35,15 +40,14 @@ function updateNavBar() {
document.querySelector('a[href="exercises.html"').classList.remove("hide");
document.querySelector('a[href="myathletes.html"').classList.remove("hide");
document.querySelector('a[href="meals.html"').classList.remove("hide");
document.querySelector('a[href="mypage.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}`;
}
......@@ -53,7 +57,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];
......@@ -62,7 +68,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);
}
......@@ -70,16 +81,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);
......@@ -88,13 +102,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");
}
}
......@@ -106,46 +122,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;
......@@ -153,9 +168,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);
......@@ -190,8 +205,6 @@ function createAlert(header, data) {
alertDiv.appendChild(ul);
return alertDiv;
}
window.addEventListener("DOMContentLoaded", updateNavBar);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment