diff --git a/webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.html b/webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.html index 0db6bd8e..83297456 100644 --- a/webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.html +++ b/webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.html @@ -1,11 +1,21 @@ - - - - - - - @for (option of options(); track option.id) { - {{ option.label }} - } - - +
+
+ + + + Weeks starting Tuesday, 9:00 AM + +
+ + + + + + @for (option of options(); track option.id) { + {{ option.label }} + } + + +
diff --git a/webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.ts b/webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.ts index 9691dffe..02909fce 100644 --- a/webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.ts +++ b/webapp/src/app/home/leaderboard/filter/timeframe/timeframe.component.ts @@ -6,6 +6,11 @@ import isoWeek from 'dayjs/plugin/isoWeek'; import { BrnSelectModule } from '@spartan-ng/ui-select-brain'; import { HlmSelectModule } from '@spartan-ng/ui-select-helm'; import { HlmLabelModule } from '@spartan-ng/ui-label-helm'; +import { BrnTooltipContentDirective } from '@spartan-ng/ui-tooltip-brain'; +import { HlmTooltipComponent, HlmTooltipTriggerDirective } from '@spartan-ng/ui-tooltip-helm'; +import { HlmIconComponent } from '@spartan-ng/ui-icon-helm'; +import { provideIcons } from '@spartan-ng/ui-icon-helm'; +import { lucideHelpCircle } from '@ng-icons/lucide'; interface SelectOption { id: number; @@ -15,24 +20,21 @@ interface SelectOption { dayjs.extend(isoWeek); -function formatLabel(startDate: dayjs.Dayjs, endDate: dayjs.Dayjs | undefined) { - const calendarWeek = startDate.isoWeek(); - if (!endDate || endDate.isSame(dayjs(), 'day')) { - return `CW\xa0${calendarWeek}:\xa0${startDate.format('MMM D, h[am]')}\xa0-\xa0Today`; +function formatLabel(weekIndex: number) { + if (weekIndex === 0) { + return 'Current week'; } - - const sameMonth = startDate.month() === endDate.month(); - if (sameMonth) { - return `CW\xa0${calendarWeek}:\xa0${startDate.format('MMM D, h[am]')}\xa0-\xa0${endDate.format('D, h[am]')}`; - } else { - return `CW\xa0${calendarWeek}:\xa0${startDate.format('MMM D, h[am]')}\xa0-\xa0${endDate.format('MMM D, h[am]')}`; + if (weekIndex === 1) { + return 'Last week'; } + return `${weekIndex} weeks ago`; } @Component({ selector: 'app-leaderboard-filter-timeframe', standalone: true, - imports: [BrnSelectModule, HlmSelectModule, HlmLabelModule, FormsModule], + imports: [BrnSelectModule, HlmSelectModule, HlmLabelModule, FormsModule, HlmTooltipComponent, HlmTooltipTriggerDirective, BrnTooltipContentDirective, HlmIconComponent], + providers: [provideIcons({ lucideHelpCircle })], templateUrl: './timeframe.component.html' }) export class LeaderboardFilterTimeframeComponent { @@ -41,7 +43,7 @@ export class LeaderboardFilterTimeframeComponent { value = signal(`${this.after()}.${this.before()}`); placeholder = computed(() => { - return formatLabel(dayjs(this.after()) ?? dayjs().day(2).startOf('hour').hour(9), !this.before() ? undefined : dayjs(this.before())); + return formatLabel(dayjs(dayjs()).diff(this.after(), 'week')); }); options = computed(() => { @@ -51,17 +53,16 @@ export class LeaderboardFilterTimeframeComponent { { id: now.unix(), value: `${currentDate.format()}.${now.format()}`, - label: formatLabel(currentDate, undefined) + label: formatLabel(0) } ]; for (let i = 0; i < 4; i++) { const startDate = currentDate.subtract(7, 'day'); - const endDate = currentDate.subtract(1, 'day'); options.push({ id: startDate.unix(), - value: `${startDate.format()}.${endDate.format()}`, - label: formatLabel(startDate, endDate) + value: `${startDate.format()}.${currentDate.format()}`, + label: formatLabel(i+1) }); currentDate = startDate; }