From e149f4c2ae040a62312cc69223c15488f23f84d1 Mon Sep 17 00:00:00 2001 From: Brieuc Dubois <git@bhasher.com> Date: Tue, 19 Mar 2024 10:24:30 +0100 Subject: [PATCH] frontend: hide ended sessions & multiday sessions --- backend/app/crud.py | 3 +++ frontend/src/lib/utils/date.ts | 30 +++++++++++++++++++----------- frontend/src/routes/+page.svelte | 18 ++++++++++++------ frontend/static/lang/fr.json | 3 ++- 4 files changed, 36 insertions(+), 18 deletions(-) diff --git a/backend/app/crud.py b/backend/app/crud.py index 32944e33..3320b942 100644 --- a/backend/app/crud.py +++ b/backend/app/crud.py @@ -1,3 +1,4 @@ +import datetime from sqlalchemy.orm import Session import secrets @@ -55,6 +56,8 @@ def get_sessions(db: Session, user: schemas.User, skip: int = 0, limit: int = 10 db.query(models.Session) .filter(models.Session.users.any(models.User.id == user.id)) .filter(models.Session.is_active or user.type < 2) + .filter(models.Session.end_time <= datetime.datetime.now()) + .filter(models.Session.start_time >= datetime.datetime.now()) .offset(skip) .limit(limit) .all() diff --git a/frontend/src/lib/utils/date.ts b/frontend/src/lib/utils/date.ts index c50330e6..6a1f777c 100644 --- a/frontend/src/lib/utils/date.ts +++ b/frontend/src/lib/utils/date.ts @@ -64,32 +64,40 @@ export function displayTime(date: Date): string { const now = new Date(); - if (now.getTime() - date.getTime() < 1000 * 60 * 60) { - if (now.getTime() - date.getTime() < 1000 * 60) { - const seconds = Math.floor((now.getTime() - date.getTime()) / 1000); + if (now.getDate() - date.getDate() < 1000 * 60 * 60 * 24) { + if (now.getTime() - date.getTime() < 1000 * 60 * 60) { + if (now.getTime() - date.getTime() < 1000 * 60) { + const seconds = Math.floor((now.getTime() - date.getTime()) / 1000); - if (seconds === 0) return 'now'; + if (seconds === 0) return 'now'; - return seconds + 's'; + return seconds + 's'; + } + + const minutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60)); + + return minutes + 'm'; } - const minutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60)); + const hours = date.getHours().toString().padStart(2, '0'); + const minutes = date.getMinutes().toString().padStart(2, '0'); - return minutes + 'm'; + return hours + ':' + minutes; } - const hours = date.getHours().toString().padStart(2, '0'); - const minutes = date.getMinutes().toString().padStart(2, '0'); + const days = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)); - return hours + ':' + minutes; + return days + 'd'; } -export function displayDuration(start: Date, end: Date): string { +export function displayDuration(start: Date, end: Date): string | null { 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 || minutes < 0) return null; + 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 c225b3b2..37319a2a 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -60,17 +60,23 @@ </thead> <tbody> {#each $sessions.sort((a, b) => a.created_at.getTime() - b.created_at.getTime()) as session (session.id)} + {@const isHidden = + !session.is_active || session.end_time < new Date() || session.start_time > new Date()} <tr on:click={() => (window.location.href = '/session?id=' + session.id)} tabindex="0" class="odd:bg-white even:bg-gray-100 text-center hover:cursor-pointer" - class:text-gray-500={!session.is_active} + class:text-gray-500={isHidden} > - <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} - >{displayDuration(new Date(), session.end_time)}</td - > - <td class="py-3 px-6" class:line-through={!session.is_active}>{session.usersList()}</td> + <td class="py-3 px-6" class:line-through={isHidden}>{session.id}</td> + <td class="py-3 px-6" class:line-through={isHidden}> + {#if session.end_time < new Date()} + {$_('home.sessionEnded')} + {:else} + {displayDuration(new Date(), session.end_time)} + {/if} + </td> + <td class="py-3 px-6" class:line-through={isHidden}>{session.usersList()}</td> {#if JWTSession.user()?.is_tutor} <td class="py-3 px-6"> diff --git a/frontend/static/lang/fr.json b/frontend/static/lang/fr.json index d826e6f2..e66c6fbf 100644 --- a/frontend/static/lang/fr.json +++ b/frontend/static/lang/fr.json @@ -19,7 +19,8 @@ "remainingDuration": "Durée restante", "nickname": "Pseudo", "learningLanguage": "Langue d'apprentissage", - "confirm": "Confirmer" + "confirm": "Confirmer", + "sessionEnded": "Terminée" }, "login": { "email": "Email", -- GitLab