diff --git a/frontend/www/profile.html b/frontend/www/profile.html index 355fed6e71bf34a7ee44cf5bfb81836b98fe7826..f673d456acbeb9f1fc66234092ed99af460d69ad 100644 --- a/frontend/www/profile.html +++ b/frontend/www/profile.html @@ -66,6 +66,41 @@ </article> </div> <!-- card.// --> + + <div class="col-lg text-center"> + <h4 class="card-title mt-3 text-center">My athletes</h4> + <div class="list-group mt-1" id="athlete-content"></div> + </div> + + <div class="col-lg text-center"> + <h4 class="card-title mt-3 text-center">My coach</h4> + <div class="list-group mt-1" id="coach-content"></div> + </div> + + + <template id="template-exercise"> + <a class="list-group-item flex-column align-items-start my-1 exercise"> + <div class="d-flex w-100 justify-content-between align-items-center"> + <h5 class="mb-1"></h5> + </div> + <div class="d-flex"> + <p class="mb-1"> + </p> + </div> + </a> + </template> + + <template id="template-coach"> + <a class="list-group-item flex-column align-items-start my-1 exercise"> + <div class="d-flex w-100 justify-content-between align-items-center"> + <h5 class="mb-1"></h5> + </div> + <div class="d-flex"> + <p class="mb-1"> + </p> + </div> + </a> + </template> </div> <!--container end.//--> <!-- Adapted from https://bootsnipp.com/snippets/z8699 END --> diff --git a/frontend/www/scripts/profile.js b/frontend/www/scripts/profile.js index 92e520406df71744d5e94ccd4adc0520bbc2f571..6a1a070516c2a2f0fb192b2ab91c00aadbb0c2ac 100644 --- a/frontend/www/scripts/profile.js +++ b/frontend/www/scripts/profile.js @@ -1,10 +1,9 @@ async function init() { - console.log("Running init") const username = sessionStorage.getItem("username"); let userResponse = await sendRequest("GET", `${HOST}/api/users/${username}/`); - let user = await userResponse.json().then((val) => { + await userResponse.json().then(async (val) => { if(val){ console.log(val); document.getElementById("username").value = `${val.username}`; @@ -15,9 +14,53 @@ async function init() { document.getElementById("street_address").value = `${val.street_address}`; document.getElementById("main_gym").value = `${val.main_gym}`; document.getElementById("favourite_exercise").value = `${val.favourite_exercise}`; + + let athletes = val.athletes; + let athleteContainer = document.getElementById('athlete-content'); + let athleteTemplate = document.querySelector("#template-exercise"); + athletes.forEach(async (athleteUrl) => { + let athleteResponse = await sendRequest("GET", `${athleteUrl}`); + await athleteResponse.json().then((athlete) => { + if(athlete){ + console.log(athlete.username); + const athleteAnchor = athleteTemplate.content.firstElementChild.cloneNode(true); + + const h5 = athleteAnchor.querySelector("h5"); + h5.textContent = athlete.username; + + const p = athleteAnchor.querySelector("p"); + p.textContent = athlete.phone_number; + + athleteContainer.appendChild(athleteAnchor); + + } + }).catch(console.log); + }); + + + let coach = val.coach; + let coachContainer = document.getElementById('coach-content'); + let coachTemplate = document.querySelector("#template-coach"); + let coachResponse = await sendRequest("GET", `${coach}`); + await coachResponse.json().then((val) => { + if(val){ + console.log(val); + const coachAnchor = coachTemplate.content.firstElementChild.cloneNode(true); + + const h5 = coachAnchor.querySelector("h5"); + h5.textContent = val.username; + + const p = coachAnchor.querySelector("p"); + p.textContent = val.phone_number; + + coachContainer.appendChild(coachAnchor); + + } + }); } - }).catch(console.log) + }).catch(console.log); + }