Enable check week/month/year

frontend/www/scripts/statistics.js

+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;
+        }
+      }
+    });
+  }
+});

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>