Adding a basic Feed (#40)

mobergmann · Feb 27, 2024 · c4de341 · c4de341
1 parent d247499
commit c4de341
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 11 deletions.
diff --git a/public/auth/login.js b/public/auth/login.js
@@ -8,7 +8,7 @@ document.querySelector("#form").addEventListener("submit", async (e) => {
 
     const res = await login(username, password);
     if (res.ok) {
-        window.location = "/home.html";
+        window.location = "/index.html";
     } else {
         console.error(res.value);
         alert(`Login not successful: ${res.value}`);

diff --git a/public/auth/sign_up.js b/public/auth/sign_up.js
@@ -15,7 +15,7 @@ document.querySelector("#form").addEventListener("submit", async (e) => {
     const account = new NewAccount(username, password1);
     const res = await create(account);
     if (res.ok) {
-        window.location = "/auth/login.html";
+        window.location = "/index.html";
     } else {
         console.error(res.value);
         alert(`SignUp not successful: ${res.value}`);

diff --git a/public/home.html → public/challenge.html b/public/home.html → public/challenge.html
@@ -4,15 +4,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Home: Sports Challenge</title>
+    <title>Challenge: Sports Challenge</title>
 
     <!-- Font Awesome -->
     <link href="/assets/fontawesome6/css/fontawesome.css" rel="stylesheet">
     <link href="/assets/fontawesome6/css/brands.css" rel="stylesheet">
     <link href="/assets/fontawesome6/css/solid.css" rel="stylesheet">
 
     <link rel="stylesheet" type="text/css" href="/style/base.css">
-    <link rel="stylesheet" type="text/css" href="style/home.css">
+    <link rel="stylesheet" type="text/css" href="style/challenge.css">
 </head>
 
 <body class="center-vertically flex-column">
@@ -126,7 +126,7 @@ <h2>Log</h2>
 
 <!-- todo: npm -->
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script type="module" src="home.js"></script>
+<script type="module" src="challenge.js"></script>
 
 </body>
 

diff --git a/public/home.js → public/challenge.js b/public/home.js → public/challenge.js
diff --git a/public/feed.html b/public/feed.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Feed: Sports Challenge</title>
+
+    <!-- Font Awesome -->
+    <link href="/assets/fontawesome6/css/fontawesome.css" rel="stylesheet">
+    <link href="/assets/fontawesome6/css/brands.css" rel="stylesheet">
+    <link href="/assets/fontawesome6/css/solid.css" rel="stylesheet">
+
+    <link rel="stylesheet" type="text/css" href="/style/base.css">
+    <link rel="stylesheet" type="text/css" href="style/feed.css">
+</head>
+
+<body class="center-vertically flex-column">
+
+<header>
+    <h1>Feed</h1>
+    <p>This is your Feed, a collection of the activities of your Sportsfriends.</p>
+</header>
+
+<main class="main">
+    <div class="challenges container" id="challenge-list">
+        <!--Currently we only have one challenge, therefore we statically display one challenge-->
+        <h1><a href="/challenge.html">Weekly PushUps Challenge</a></h1>
+    </div>
+
+    <div class="feed container" id="feed-list">
+    </div>
+</main>
+
+<template id="post-template">
+  <div class="container post">
+      <div class="container">
+          <div><b>Athlet:&nbsp;</b></div>
+          <a class="post-athlete-link"><div class="post-name"></div></a>
+      </div>
+
+      <div class="container">
+          <div><b>Type:&nbsp;</b></div>
+          <div class="post-activity-type"></div>
+      </div>
+
+      <div class="container">
+          <div><b>Start Date and Time:&nbsp;</b></div>
+          <div class="post-start-time"></div>
+      </div>
+
+      <div class="container">
+          <div><b>Duration:&nbsp;</b></div>
+          <div class="post-duration"></div>
+      </div>
+
+      <div class="container">
+          <div><b>Distance:&nbsp;</b></div>
+          <div class="post-distance"></div>
+      </div>
+  </div>
+</template>
+
+<footer></footer>
+
+<!-- todo: npm -->
+<script type="module" src="/feed.js"></script>
+
+</body>
+
+</html>
diff --git a/public/feed.js b/public/feed.js
@@ -0,0 +1,89 @@
+import "/scripts/helper.js";
+import "/scripts/helpers.js"
+import {get_from_to as get_activities} from "/scripts/api/activities.js";
+import {get_id as get_user_by_id} from "/scripts/api/users.js";
+import {get as get_account} from "/scripts/api/account.js";
+
+async function main() {
+    let res = await get_account();
+    if (!res.ok) {
+        alert("You are not signed in. Sign in first.");
+        window.location = "/auth/login.html";
+    }
+
+    // test to see if the browser supports the HTML template element by checking
+    // for the presence of the template element's content attribute.
+    if (!("content" in document.createElement("template"))) {
+        alert("Your browser doesn't support templates. We cannot display the site properly. Try updating it or using a more up to date browser.");
+        return;
+    }
+
+    let current_week = new Date();
+    let feed_to_time = current_week.toRFC3339();
+    let feed_from_time = new Date(new Date().setDate(current_week.getDate() - 7)).toRFC3339();
+
+    const post_list = document.querySelector("#feed-list");
+    const post_template = document.querySelector("#post-template");
+
+    let activities = await get_activities(feed_from_time, feed_to_time);
+    if (!activities.ok) {
+        alert("Error while fetching Activities:\n" + activities.value);
+        return;
+    }
+
+    // prepare the user by id map
+    let user_by_id = new Map();
+    for (const activity of activities.value) {
+        if (user_by_id.has(activity.author_id)) {
+            continue;
+        }
+
+        let user = await get_user_by_id(activity.author_id);
+        if (!user.ok) {
+            alert("Error while fetching Activities:\n" + activities.value);
+        }
+        user_by_id.set(activity.author_id, user.value);
+    }
+
+    for (const activity of activities.value) {
+        let clone = post_template.content.cloneNode(true);
+
+        const athlete_link = `/athletes/${activity.author_id}`;
+        const author_name = user_by_id.get(activity.author_id).username;
+        let duration = "";
+        {
+            const diff = new Date(activity.end_time) - new Date(activity.start_time);
+            if (diff == 0) {
+                duration = "no duration";
+            }
+            else {
+                const ss = Math.floor(diff / 1000) % 60;
+                const mm = Math.floor(diff / 1000 / 60) % 60;
+                const hh = Math.floor(diff / 1000 / 60 / 60);
+
+                // append all values after the first non zero value
+                let tmp = [hh, mm, ss];
+                for (let i = 0; i < tmp.length; ++i) {
+                    if (tmp[i] > 0) {
+                        for (let j = i; j < tmp.length; ++j) {
+                            duration += `${String(tmp[j]).padStart(2, '0')}:`;
+                        }
+                        break;
+                    }
+                }
+                duration = duration.substring(0, duration.length - 1); // remove last ':'
+            }
+        }
+
+        clone.querySelector(".post-name").innerHTML = author_name;
+        clone.querySelector(".post-athlete-link").href = athlete_link;
+        clone.querySelector(".post-activity-type").innerHTML = activity.activity_type;
+        clone.querySelector(".post-start-time").innerHTML = activity.start_time;
+        clone.querySelector(".post-duration").innerHTML = duration;
+        clone.querySelector(".post-distance").innerHTML = activity.amount;
+
+        post_list.append(clone);
+    }
+}
+
+await main();
diff --git a/public/index.html b/public/index.html
@@ -25,12 +25,22 @@ <h1>Sport Challenge</h1>
     </header>
 
     <article>
-        <div id="dashboard-link" style="display: none">
-            <h2>Go to your Dasboards</h2>
-            <p>You are already loogged in and you can just open your Dasboard!</p>
+        <div class="dashboard-link" style="display: none">
+            <h2>Open Feed</h2>
+            <p>You are already loogged in and you can open your Feed!</p>
+            <button onclick="window.location = '/feed.html'" class="button button-primary">
+                <i class="fa-solid fa-table-columns"></i>
+                Feed
+            </button>
+        </div>
+
+
+        <div class="dashboard-link" style="display: none">
+            <h2>Open Challenges</h2>
+            <p>You are already loogged in and you can open the challenges!</p>
             <button onclick="window.location = '/home.html'" class="button button-primary">
                 <i class="fa-solid fa-table-columns"></i>
-                Dashboard
+                Challenge
             </button>
         </div>
 
@@ -63,4 +73,4 @@ <h2>Disclaimer</h2>
 <script src="index.js" type="module"></script>
 </body>
 
-</html>
+</html>
diff --git a/public/index.js b/public/index.js
@@ -2,5 +2,9 @@ import {get} from "/scripts/api/account.js"
 
 let res = await get();
 if (res.ok) {
-    document.querySelector("#dashboard-link").style.display = "block";
+    let links = document.querySelectorAll(".dashboard-link");
+
+    for (const elem of links) {
+        elem.style.display = "block";
+    }
 }
diff --git a/public/style/home.css → public/style/challenge.css b/public/style/home.css → public/style/challenge.css
diff --git a/public/style/feed.css b/public/style/feed.css
@@ -0,0 +1,5 @@
+.post {
+    margin: 1rem;
+    padding: 1rem;
+    border: solid 1px black;
+}