From aaaf4dc73785a67be960fa6ee38e343136677072 Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Mon, 18 Mar 2024 15:50:45 +0100
Subject: [PATCH] frontend: remaining times

---
 frontend/src/lib/components/sessions/message.svelte |  2 +-
 frontend/src/lib/types/session.ts                   |  5 +++++
 frontend/src/lib/utils/date.ts                      | 10 ++++++++++
 frontend/src/routes/+page.svelte                    |  6 +++---
 frontend/static/lang/en.json                        |  3 ++-
 frontend/static/lang/fr.json                        |  3 ++-
 6 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/sessions/message.svelte b/frontend/src/lib/components/sessions/message.svelte
index 15209fd3..64a496d7 100644
--- a/frontend/src/lib/components/sessions/message.svelte
+++ b/frontend/src/lib/components/sessions/message.svelte
@@ -26,7 +26,7 @@
 		class:rounded-tr-xl={!isSender}
 	>
 		<div class="font-bold mb-1 capitalize">
-			{message.user.email}
+			{message.user.nickname}
 		</div>
 		<div class="max-w-3xl">{message.content}</div>
 		<div class="text-right text-gray-500">
diff --git a/frontend/src/lib/types/session.ts b/frontend/src/lib/types/session.ts
index 989b92ed..0f4636d4 100644
--- a/frontend/src/lib/types/session.ts
+++ b/frontend/src/lib/types/session.ts
@@ -218,6 +218,11 @@ export default class Session {
 		return true;
 	}
 
+	remainTime(): number {
+		const now = new Date();
+		return this._end_time.getTime() - now.getTime();
+	}
+
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	static parse(json: any): Session | null {
 		if (json === null || json === undefined) {
diff --git a/frontend/src/lib/utils/date.ts b/frontend/src/lib/utils/date.ts
index 679fea00..c50330e6 100644
--- a/frontend/src/lib/utils/date.ts
+++ b/frontend/src/lib/utils/date.ts
@@ -83,3 +83,13 @@ export function displayTime(date: Date): string {
 
 	return hours + ':' + minutes;
 }
+
+export function displayDuration(start: Date, end: Date): string {
+	const duration = end.getTime() - start.getTime();
+
+	const hours = Math.floor(duration / (1000 * 60 * 60));
+	const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
+
+	if (hours === 0) return minutes + 'm';
+	else return hours + 'h ' + minutes + 'm';
+}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 9e03f304..c225b3b2 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -5,7 +5,7 @@
 	import Session, { sessions } from '$lib/types/session';
 	import { requireLogin } from '$lib/utils/login';
 	import { onMount } from 'svelte';
-	import { displayDate } from '$lib/utils/date';
+	import { displayDate, displayDuration } from '$lib/utils/date';
 	import JWTSession from '$lib/stores/JWTSession';
 	import { Eye, EyeSlash, Icon, Trash, User } from 'svelte-hero-icons';
 	import { _ } from '$lib/services/i18n';
@@ -51,7 +51,7 @@
 			<thead class="bg-gray-200 uppercase text-sm">
 				<tr>
 					<th class="py-2 px-6">#</th>
-					<th class="py-2 px-6">{$_('home.date')}</th>
+					<th class="py-2 px-6">{$_('home.remainingDuration')}</th>
 					<th class="py-2 px-6">{$_('home.participants')}</th>
 					{#if JWTSession.user()?.is_tutor}
 						<th class="py-2 px-6">{$_('home.actions')}</th>
@@ -68,7 +68,7 @@
 					>
 						<td class="py-3 px-6" class:line-through={!session.is_active}>{session.id}</td>
 						<td class="py-3 px-6" class:line-through={!session.is_active}
-							>{displayDate(session.start_time)} → {displayDate(session.end_time)}</td
+							>{displayDuration(new Date(), session.end_time)}</td
 						>
 						<td class="py-3 px-6" class:line-through={!session.is_active}>{session.usersList()}</td>
 
diff --git a/frontend/static/lang/en.json b/frontend/static/lang/en.json
index 0c26f612..0931054a 100644
--- a/frontend/static/lang/en.json
+++ b/frontend/static/lang/en.json
@@ -15,7 +15,8 @@
 		"add": "Add",
 		"deleteSessionConfirm": "Are you sure you want to delete this session? This action cannot be undone.",
 		"createSession": "Create a new session",
-		"participantPlaceholder": "Please select"
+		"participantPlaceholder": "Please select",
+		"remainingDuration": "Remaining duration"
 	},
 	"utils": {
 		"month": {
diff --git a/frontend/static/lang/fr.json b/frontend/static/lang/fr.json
index f0963217..9b4b0447 100644
--- a/frontend/static/lang/fr.json
+++ b/frontend/static/lang/fr.json
@@ -15,7 +15,8 @@
 		"add": "Ajouter",
 		"deleteSessionConfirm": "Êtes-vous sûr de vouloir supprimer cette session ? Cette action est irréversible.",
 		"createSession": "Créer une nouvelle session",
-		"participantPlaceholder": "Selectionnez"
+		"participantPlaceholder": "Selectionnez",
+		"remainingDuration": "Durée restante"
 	},
 	"utils": {
 		"month": {
-- 
GitLab