diff --git a/backend/src/translations/_en.tsx b/backend/src/translations/_en.tsx index a5bba55..873e757 100644 --- a/backend/src/translations/_en.tsx +++ b/backend/src/translations/_en.tsx @@ -1,10 +1,18 @@ import { TIMEZONE } from '~/constants' import type { TrainingDetailed } from '~/services/sport/types' +import { clockTime } from '~/utils/dates' import { tgxFromHtml } from '~/utils/tgx-from-html' -export default { - 'Welcome': 'Up and running!', +function dateLong(date: Date): string { + const day = date.toLocaleDateString('en-US', { weekday: 'long', timeZone: TIMEZONE }) + const month = date.toLocaleDateString('en-US', { month: 'long', timeZone: TIMEZONE }) + const dayOfMonth = date.getDate() + const year = date.getFullYear() + + return `${day}, ${month} ${dayOfMonth}, ${year}` +} +export default { 'Buttons.Back': '← Back', 'HowGoodAmI.Thinking': 'Hmm... Let me think 🤔', @@ -38,24 +46,31 @@ export default { endsAt, accredited, description, - }: TrainingDetailed) => { - const date = startsAt.toLocaleDateString('en-US', { timeZone: TIMEZONE }) - const timeStart = startsAt.toLocaleTimeString('en-US', { timeZone: TIMEZONE }) - const timeEnd = endsAt.toLocaleTimeString('en-US', { timeZone: TIMEZONE }) - - return ( - <> - {title}
-
- Date: {date}
- Time: {timeStart}—{timeEnd}
- Accreditted: {accredited ? 'Yes' : 'No'}
-
- Description:
- {tgxFromHtml(description)} - - ) - }, + teachers, + }: TrainingDetailed) => ( + <> + {title}
+
+ Date: {dateLong(startsAt)}
+ Time: {clockTime(startsAt)}—{clockTime(endsAt)}
+ Accreditted: {accredited ? 'Yes' : 'No'}
+ {(teachers.length > 0) && ( + <> + Teachers:
+ {teachers.map(teacher => ( + <>• {teacher.firstName} {teacher.lastName} ({teacher.email})
+ ))} + + )} + {(description.trim() && ( + <> +
+ Description:
+ {tgxFromHtml(description)} + + ))} + + ), 'Views.Training.Buttons.CheckIn': 'Check-in', 'Views.Training.Buttons.CancelCheckIn': 'Cancel check-in', } diff --git a/backend/src/utils/dates.ts b/backend/src/utils/dates.ts index 05c32c4..cea7f8c 100644 --- a/backend/src/utils/dates.ts +++ b/backend/src/utils/dates.ts @@ -80,3 +80,11 @@ export function getDayBoundaries({ return [boundaryStart, boundaryEnd] } + +export function clockTime(date: Date): string { + return `${ + date.getHours().toString().padStart(2, '0') + }:${ + date.getMinutes().toString().padStart(2, '0') + }` +}