Skip to content
Snippets Groups Projects
Commit 53d58adb authored by Irina Kera Gundersen's avatar Irina Kera Gundersen
Browse files

Display workout statistics

parent e1d6917f
Branches UC-2
No related tags found
3 merge requests!3Merge new master to dev,!2Uc 2,!1Uc 2
Hide whitespace changes
Inline Side-by-side
frontend/www/scripts/statistics.js
+ 22
− 75
View file @ 53d58adb
......@@ -9,34 +9,7 @@ async function fetchWorkouts(ordering) {
} 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 aWorkout = cloneWorkout.querySelector("a");
aWorkout.href = `workout.html?id=${workout.id}`;
let h5 = aWorkout.querySelector("h5");
h5.textContent = workout.name;
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
container.appendChild(aWorkout);
});
console.log(workouts);
return workouts;
}
}
......@@ -76,58 +49,32 @@ window.addEventListener("DOMContentLoaded", async () => {
let workouts = await fetchWorkouts(ordering);
console.log(workouts.length);
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++) {
let workout = workouts[j];
let workoutAnchor = workoutAnchors[j];
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));
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) {
switch (event.currentTarget.id) {
case "list-statistics-week":
if (isLastWeek(wDate)) {
sevenDays++;
}
break;
case "list-statistics-month":
if (isLastMonth(wDate)) {
thirtyDays++;
}
break;
case "list-statistics-year":
if (lastYear(wDate)) {
threeSixtyFive++;
}
if (workout.owner == currentUser.url) {
if (isLastWeek(wDate)) {
sevenDays++;
}
default:
break;
}
}
console.log(sevenDays, thirtyDays, threeSixtyFive);
if (isLastMonth(wDate)) {
thirtyDays++;
}
if (isLastYear(wDate)) {
threeSixtyFive++;
}
}
switch (event.currentTarget.id) {
case "list-statistics-week":
if (workout.owner == currentUser.url) {
workoutAnchor.classList.remove("hide");
} else {
workoutAnchor.classList.add("hide");
}
break;
document.getElementById("week").innerHTML = sevenDays;
document.getElementById("month").innerHTML = thirtyDays;
document.getElementById("year").innerHTML = threeSixtyFive;
default:
workoutAnchor.classList.remove("hide");
break;
}
}
});
console.log(sevenDays, thirtyDays, threeSixtyFive);
}
});
frontend/www/scripts/workouts.js
+ 102
− 87
View file @ 53d58adb
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");
});
frontend/www/statistics.html
+ 17
− 68
View file @ 53d58adb
......@@ -4,6 +4,7 @@
<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"
......@@ -24,79 +25,27 @@
<div class="col-lg text-center">
<h3 class="mt-5">Statistics</h3>
<p>
Here you can access your workout statistics for different time
periods.
Here you can view your own statistics of the number of workouts
completed 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 class="list-group mt-1" id="div-content"></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 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="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 class="number">
<h1 id="year">Last 365 days</h1>
<p>Last 365 days</p>
</div>
</a>
</template>
</div>
</div>
</div>
<script src="scripts/defaults.js"></script>
......
frontend/www/styles/style.css
+ 28
− 17
View file @ 53d58adb
.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;
}
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