From 339d1a6092dae92cfdc23ebfdb3492e176a0b331 Mon Sep 17 00:00:00 2001
From: Freek Bes <freek.bes@codam.nl>
Date: Wed, 29 Jan 2025 17:35:42 +0100
Subject: [PATCH] feat: add season progress bar to home

---
 src/handlers/filters.ts | 10 ++++++++++
 src/routes/home.ts      | 12 ++++++++++++
 templates/home.njk      |  8 +++++++-
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/handlers/filters.ts b/src/handlers/filters.ts
index 8cf0bb8..9f4fc3b 100644
--- a/src/handlers/filters.ts
+++ b/src/handlers/filters.ts
@@ -51,6 +51,16 @@ export const setupNunjucksFilters = function(app: Express): void {
 		return date.toISOString().split('T')[0];
 	});
 
+	// Add formatting to get a percentage based on two numbers
+	nunjucksEnv.addFilter('perc', (num: number, total: number) => {
+		return +((num / total) * 100).toFixed(2); // + in front changes to string to a number again
+	});
+
+	// Add formatting to get a percentage based on three numbers
+	nunjucksEnv.addFilter('perc3', (value: number, min: number, max: number) => {
+		return +(((value - min) / (max - min) * 100).toFixed(2)); // + in front changes to string to a number again
+	});
+
 	// Add filter to replace hex color with RGBA color
 	nunjucksEnv.addFilter('rgba', (hex: string, alpha: number) => {
 		if (!hex || !hex.startsWith('#')) {
diff --git a/src/routes/home.ts b/src/routes/home.ts
index 34d69d0..1faadf5 100644
--- a/src/routes/home.ts
+++ b/src/routes/home.ts
@@ -44,6 +44,13 @@ export const setupHomeRoutes = function(app: Express, prisma: PrismaClient): voi
 		// Sort the coalitions by score
 		const sortedCoalitionScores = Object.entries(coalitionScores).sort((a, b) => b[1].score - a[1].score);
 
+		// Get current bloc deadline
+		const currentBlocDeadline = await prisma.intraBlocDeadline.findFirst({
+			orderBy: {
+				end_at: 'desc',
+			},
+		});
+
 		// Get the coalition of the current user
 		const my_coalition = await prisma.intraCoalitionUser.findFirst({
 			where: {
@@ -86,10 +93,15 @@ export const setupHomeRoutes = function(app: Express, prisma: PrismaClient): voi
 		// Check if quiz is currently available
 		const quiz_available = await isQuizAvailable(user, prisma);
 
+		// Current datetime
+		const now = new Date();
+
 		return res.render('home.njk', {
 			coalitions,
 			coalitionsObject,
 			my_coalition,
+			now,
+			currentBlocDeadline,
 			quiz_available,
 			sortedCoalitionScores,
 			rankingTypes,
diff --git a/templates/home.njk b/templates/home.njk
index e5f03dc..7f2f276 100644
--- a/templates/home.njk
+++ b/templates/home.njk
@@ -39,7 +39,13 @@
 				</div>
 			</div>
 			<div class="card-body">
-				<canvas height="300" class="codam-chart" data-url="/charts/coalitions/scores/history" id="coalition-score-history"></canvas>
+				<div class="mb-4">
+					<canvas height="300" class="codam-chart" data-url="/charts/coalitions/scores/history" id="coalition-score-history"></canvas>
+				</div>
+				<div class="progress mb-2" role="progressbar" aria-label="Progress of the current season" aria-valuenow="{{ now | timestamp }}" aria-valuemin="{{ currentBlocDeadline.begin_at | timestamp }}" aria-valuemax="{{ currentBlocDeadline.end_at | timestamp }}">
+					<div class="progress-bar" style="width: {{ now | timestamp | perc3(currentBlocDeadline.begin_at | timestamp, currentBlocDeadline.end_at | timestamp) }}%;"></div>
+				</div>
+				<p style="text-align: center;">The current season <b title="{{ currentBlocDeadline.end_at }}">ends {{ currentBlocDeadline.end_at | timeFromNow }}</b>!</p>
 			</div>
 		</div>