From a8c153e67826729d26f6f1668422d720f63056a4 Mon Sep 17 00:00:00 2001
From: ikvassil <ikvassil@stud.ntnu.no>
Date: Thu, 4 Mar 2021 11:27:40 +0100
Subject: [PATCH] Display workout statistics
---
frontend/www/scripts/statistics.js | 97 ++++-----------
frontend/www/scripts/workouts.js | 189 ++++++++++++++++-------------
frontend/www/statistics.html | 85 +++----------
frontend/www/styles/style.css | 45 ++++---
4 files changed, 168 insertions(+), 248 deletions(-)
diff --git a/frontend/www/scripts/statistics.js b/frontend/www/scripts/statistics.js
index 76ba960..b69a3ab 100644
--- a/frontend/www/scripts/statistics.js
+++ b/frontend/www/scripts/statistics.js
@@ -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);
}
});
diff --git a/frontend/www/scripts/workouts.js b/frontend/www/scripts/workouts.js
index 772be1e..a02b3df 100644
--- a/frontend/www/scripts/workouts.js
+++ b/frontend/www/scripts/workouts.js
@@ -1,106 +1,121 @@
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");
+});
diff --git a/frontend/www/statistics.html b/frontend/www/statistics.html
index 2aeb610..3a7cef4 100644
--- a/frontend/www/statistics.html
+++ b/frontend/www/statistics.html
@@ -25,80 +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 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="number">
+ <h1 id="year">Last 365 days</h1>
+ <p>Last 365 days</p>
+ </div>
</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>
- <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>
</div>
+
<script src="scripts/defaults.js"></script>
<script src="scripts/scripts.js"></script>
diff --git a/frontend/www/styles/style.css b/frontend/www/styles/style.css
index 066705c..a87308a 100644
--- a/frontend/www/styles/style.css
+++ b/frontend/www/styles/style.css
@@ -1,7 +1,3 @@
-.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;
+}
--
GitLab