From e1d6917fac80d8ea55420869f6f0a2491d53467d Mon Sep 17 00:00:00 2001
From: ikvassil <ikvassil@stud.ntnu.no>
Date: Tue, 2 Mar 2021 11:57:23 +0100
Subject: [PATCH] Enable check week/month/year
---
frontend/www/scripts/statistics.js | 133 +++++++++++++++++++++++++++++
frontend/www/statistics.html | 77 +++++++++++++++++
2 files changed, 210 insertions(+)
diff --git a/frontend/www/scripts/statistics.js b/frontend/www/scripts/statistics.js
index e69de29..76ba960 100644
--- a/frontend/www/scripts/statistics.js
+++ b/frontend/www/scripts/statistics.js
@@ -0,0 +1,133 @@
+async function fetchWorkouts(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();
+ 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;
+ }
+}
+function isLastWeek(date) {
+ let lastWeek = new Date();
+ let today = new Date();
+ let past = lastWeek.getDate() - 7;
+ lastWeek.setDate(past);
+ console.log(today);
+ return date >= lastWeek && date <= today;
+}
+function isLastMonth(date) {
+ let lastMonth = new Date();
+ let today = new Date();
+ let past = lastMonth.getDate() - 30;
+ lastMonth.setDate(past);
+ return date >= lastMonth && date <= today;
+}
+function isLastYear(date) {
+ let lastYear = new Date();
+ let today = new Date();
+ let past = lastYear.getDate() - 365;
+ lastYear.setDate(past);
+ return date >= lastYear && date <= today;
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+ let ordering = "-date";
+ let sevenDays = 0;
+ let thirtyDays = 0;
+ let threeSixtyFive = 0;
+
+ let currentUser = await getCurrentUser();
+ if (ordering.includes("owner")) {
+ ordering += "__username";
+ }
+ 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];
+
+ 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++;
+ }
+
+ default:
+ break;
+ }
+ }
+ console.log(sevenDays, thirtyDays, threeSixtyFive);
+
+ switch (event.currentTarget.id) {
+ case "list-statistics-week":
+ if (workout.owner == currentUser.url) {
+ workoutAnchor.classList.remove("hide");
+ } else {
+ workoutAnchor.classList.add("hide");
+ }
+ break;
+
+ default:
+ workoutAnchor.classList.remove("hide");
+ break;
+ }
+ }
+ });
+ }
+});
diff --git a/frontend/www/statistics.html b/frontend/www/statistics.html
index 541d4ef..09037df 100644
--- a/frontend/www/statistics.html
+++ b/frontend/www/statistics.html
@@ -29,6 +29,83 @@
</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>
+ <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>
+ <script src="scripts/statistics.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>
--
GitLab