From c4de3417b5f2890577c87acaf49f038c801d0872 Mon Sep 17 00:00:00 2001 From: Moritz Bergmann Date: Tue, 27 Feb 2024 21:24:09 +0100 Subject: [PATCH] Adding a basic Feed (#40) --- public/auth/login.js | 2 +- public/auth/sign_up.js | 2 +- public/{home.html => challenge.html} | 6 +- public/{home.js => challenge.js} | 0 public/feed.html | 71 +++++++++++++++++++ public/feed.js | 89 ++++++++++++++++++++++++ public/index.html | 20 ++++-- public/index.js | 6 +- public/style/{home.css => challenge.css} | 0 public/style/feed.css | 5 ++ 10 files changed, 190 insertions(+), 11 deletions(-) rename public/{home.html => challenge.html} (95%) rename public/{home.js => challenge.js} (100%) create mode 100644 public/feed.html create mode 100644 public/feed.js rename public/style/{home.css => challenge.css} (100%) create mode 100644 public/style/feed.css diff --git a/public/auth/login.js b/public/auth/login.js index bda7a45..9e837f2 100644 --- 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 index 1b82c34..9e0cf51 100644 --- 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 b/public/challenge.html similarity index 95% rename from public/home.html rename to public/challenge.html index b25eb90..d15b289 100644 --- a/public/home.html +++ b/public/challenge.html @@ -4,7 +4,7 @@ - Home: Sports Challenge + Challenge: Sports Challenge @@ -12,7 +12,7 @@ - + @@ -126,7 +126,7 @@

Log

- + diff --git a/public/home.js b/public/challenge.js similarity index 100% rename from public/home.js rename to public/challenge.js diff --git a/public/feed.html b/public/feed.html new file mode 100644 index 0000000..9a7fed8 --- /dev/null +++ b/public/feed.html @@ -0,0 +1,71 @@ + + + + + + + Feed: Sports Challenge + + + + + + + + + + + + +
+

Feed

+

This is your Feed, a collection of the activities of your Sportsfriends.

+
+ +
+ + +
+
+
+ + + + + + + + + + + diff --git a/public/feed.js b/public/feed.js new file mode 100644 index 0000000..fcebca9 --- /dev/null +++ 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 index 0404b45..07bd84d 100644 --- a/public/index.html +++ b/public/index.html @@ -25,12 +25,22 @@

Sport Challenge

-