From 8bb2d8c2cb9809b2c347b98c2ac24fa760233383 Mon Sep 17 00:00:00 2001 From: Daniel Schadt Date: Sat, 6 Apr 2024 01:17:08 +0200 Subject: implement basic version of profile graph --- asset-sources/fietsboek.ts | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) (limited to 'asset-sources') diff --git a/asset-sources/fietsboek.ts b/asset-sources/fietsboek.ts index 1073ae4..c34e3d4 100644 --- a/asset-sources/fietsboek.ts +++ b/asset-sources/fietsboek.ts @@ -9,6 +9,10 @@ interface JsonFriend { id: number, } +interface YearSummary { + [index: string]: {[index: number]: number}, +} + interface Window { fietsboekImageIndex: number, fietsboekCurrentImage: HTMLDivElement | null, @@ -470,6 +474,45 @@ function toggleTrackFavourite(event: MouseEvent) { addHandler(".favourite-star", "click", toggleTrackFavourite); +/** + * Load and plot the user's summary. + */ +function loadProfileStats() { + let monthNames: string[] = []; + let date = new Date(2000, 0); + for (let i = 0; i < 12; i++) { + monthNames.push(date.toLocaleString(LOCALE, {month: 'long'})); + date.setMonth(i + 1); + } + + const url = new URL("/me/summary.json", window.location.href); + fetch(url) + .then(response => response.json()) + .then((response: YearSummary) => { + let datasets = []; + for (const [year, months] of Object.entries(response)) { + let data = []; + for (let i = 1; i <= 12; ++i) { + data.push((i in months) ? (months[i] / 1000) : 0); + } + datasets.push({ + data: data, + label: year, + }) + } + + new Chart( + "graph-month-summary", + { + type: "line", + data: { + datasets: datasets, + labels: monthNames, + }, + }, + ); + }); +} document.addEventListener('DOMContentLoaded', function() { window.fietsboekImageIndex = 0; -- cgit v1.2.3 From 89525eebab0d359e81a9e71e4a2ba5968a52bb1e Mon Sep 17 00:00:00 2001 From: Daniel Schadt Date: Sat, 6 Apr 2024 21:28:45 +0200 Subject: fix eslint warnings --- asset-sources/fietsboek.ts | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) (limited to 'asset-sources') diff --git a/asset-sources/fietsboek.ts b/asset-sources/fietsboek.ts index c34e3d4..3682f5f 100644 --- a/asset-sources/fietsboek.ts +++ b/asset-sources/fietsboek.ts @@ -475,30 +475,38 @@ function toggleTrackFavourite(event: MouseEvent) { addHandler(".favourite-star", "click", toggleTrackFavourite); /** - * Load and plot the user's summary. + * Returns an array of localized month names (Jan-Dec). */ -function loadProfileStats() { - let monthNames: string[] = []; - let date = new Date(2000, 0); +function getLocalizedMonthNames(): string[] { + const monthNames: string[] = []; + const date = new Date(2000, 0); for (let i = 0; i < 12; i++) { monthNames.push(date.toLocaleString(LOCALE, {month: 'long'})); date.setMonth(i + 1); } + return monthNames; +} + +/** + * Load and plot the user's summary. + */ +function loadProfileStats() { + const monthNames = getLocalizedMonthNames(); const url = new URL("/me/summary.json", window.location.href); fetch(url) .then(response => response.json()) .then((response: YearSummary) => { - let datasets = []; + const datasets = []; for (const [year, months] of Object.entries(response)) { - let data = []; + const data = []; for (let i = 1; i <= 12; ++i) { data.push((i in months) ? (months[i] / 1000) : 0); } datasets.push({ data: data, label: year, - }) + }); } new Chart( @@ -514,6 +522,9 @@ function loadProfileStats() { }); } +/* Used via in-page scripts, so make eslint happy */ +loadProfileStats; + document.addEventListener('DOMContentLoaded', function() { window.fietsboekImageIndex = 0; -- cgit v1.2.3 From eca141a1da3a69ce5cd17ab26f098caf0448edb7 Mon Sep 17 00:00:00 2001 From: Daniel Schadt Date: Sat, 6 Apr 2024 22:01:18 +0200 Subject: introduce tabbars to the profile --- asset-sources/theme.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'asset-sources') diff --git a/asset-sources/theme.scss b/asset-sources/theme.scss index 610e688..20708f3 100644 --- a/asset-sources/theme.scss +++ b/asset-sources/theme.scss @@ -156,6 +156,10 @@ strong { width: 25%; } +.chart-title { + text-align: center; +} + .list-group.list-group-root { padding: 0; overflow: hidden; -- cgit v1.2.3 From 12b2d960279d1e6be9b7352b34f04e1cfc72b8b3 Mon Sep 17 00:00:00 2001 From: Daniel Schadt Date: Sat, 6 Apr 2024 22:02:10 +0200 Subject: change line chart to bar chart Technically the correct chart type to use, but we'll see what looks better. --- asset-sources/fietsboek.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'asset-sources') diff --git a/asset-sources/fietsboek.ts b/asset-sources/fietsboek.ts index 3682f5f..e2d7d1f 100644 --- a/asset-sources/fietsboek.ts +++ b/asset-sources/fietsboek.ts @@ -512,7 +512,7 @@ function loadProfileStats() { new Chart( "graph-month-summary", { - type: "line", + type: "bar", data: { datasets: datasets, labels: monthNames, -- cgit v1.2.3 From a4fe67d968f002a8a08ef93eb5e8772dd6cf2116 Mon Sep 17 00:00:00 2001 From: Daniel Schadt Date: Sat, 6 Apr 2024 22:11:55 +0200 Subject: fix URL resolution for AJAX calls This also fixes a few spots from previous additions. --- asset-sources/fietsboek.ts | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) (limited to 'asset-sources') diff --git a/asset-sources/fietsboek.ts b/asset-sources/fietsboek.ts index e2d7d1f..d70890f 100644 --- a/asset-sources/fietsboek.ts +++ b/asset-sources/fietsboek.ts @@ -1,4 +1,5 @@ declare const FRIENDS_URL: string; +declare const BASE_URL: string; declare const LOCALE: string; /** @@ -39,6 +40,19 @@ function getCookie(name: string): string | undefined { ?.split("=")[1]; } + +/** + * Builds a URL with the correct application URL as base. + * + * Do not add the leading slash, otherwise the resolution will be wrong! + * + * @param path - Path to append to the base. + * @return The correct URL in regards to the application URL. + */ +function makeUrl(name: string): URL { + return new URL(name, BASE_URL); +} + /** * Installs a listener to the given DOM objects. * @@ -392,7 +406,7 @@ addHandler(".summary-toggler", "click", toggleSummary); */ addHandler("#archiveDownloadButton", "click", () => { const checked = document.querySelectorAll(".archive-checkbox:checked"); - const url = new URL("/track/archive", window.location.href); + const url = makeUrl("track/archive"); checked.forEach((c) => { url.searchParams.append("track_id[]", (c as HTMLInputElement).value); }); @@ -455,7 +469,7 @@ function toggleTrackFavourite(event: MouseEvent) { if (trackId === null) { return; } - const url = new URL("/me/toggle-favourite", window.location.href); + const url = makeUrl("me/toggle-favourite"); const formData = new URLSearchParams(); formData.append("track-id", trackId); formData.append("csrf_token", getCookie("csrf_token") ?? ""); @@ -493,7 +507,7 @@ function getLocalizedMonthNames(): string[] { function loadProfileStats() { const monthNames = getLocalizedMonthNames(); - const url = new URL("/me/summary.json", window.location.href); + const url = makeUrl("me/summary.json"); fetch(url) .then(response => response.json()) .then((response: YearSummary) => { -- cgit v1.2.3