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
No related branches found
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