From 12b56fa93cb3d4207d07ca9ab59b045bfb58405d Mon Sep 17 00:00:00 2001 From: jvyden Date: Wed, 16 Oct 2024 16:57:44 -0400 Subject: [PATCH] Compact event listing --- .../items/compact-event.component.ts | 111 ++++++++++++++++++ .../components/items/event-page.component.ts | 17 ++- src/app/components/items/event.component.ts | 2 +- src/app/pages/level/level.component.html | 2 +- src/app/pages/level/level.component.ts | 2 +- 5 files changed, 121 insertions(+), 13 deletions(-) create mode 100644 src/app/components/items/compact-event.component.ts diff --git a/src/app/components/items/compact-event.component.ts b/src/app/components/items/compact-event.component.ts new file mode 100644 index 0000000..0afdf2d --- /dev/null +++ b/src/app/components/items/compact-event.component.ts @@ -0,0 +1,111 @@ +import {Component, Input} from '@angular/core'; +import {DateComponent} from "../ui/info/date.component"; +import {UserLinkComponent} from "../ui/text/links/user-link.component"; +import {ActivityEvent} from "../../api/types/activity/activity-event"; +import {User} from "../../api/types/users/user"; +import {EventType} from "../../api/types/activity/event-type"; +import {FaIconComponent} from "@fortawesome/angular-fontawesome"; +import { + faCertificate, + faCircleArrowUp, faComment, faCommentSlash, + faHeart, + faHeartBroken, faImages, faList, faListAlt, + faPlay, + faPlayCircle, faPlusCircle, faTag, + faUpDown +} from "@fortawesome/free-solid-svg-icons"; + +@Component({ + selector: 'app-compact-event', + standalone: true, + imports: [ + DateComponent, + UserLinkComponent, + FaIconComponent + ], + template: ` + + + @switch (event.eventType) { + @case (EventType.Level_Upload) { + + uploaded this level + } + @case (EventType.Level_Favourite) { + + hearted this level + } + @case (EventType.Level_Unfavourite) { + + unhearted this level + } + @case (EventType.Level_Play) { + + played this level + } + @case (EventType.Level_Rate) { + + rated this level + } + @case (EventType.Level_Tag) { + + tagged this level + } + @case (EventType.PostLevelComment) { + + posted a comment on this level + } + @case (EventType.DeleteLevelComment) { + + deleted their comment on this level + } + @case (EventType.Photo_Upload) { + + uploaded a photo on this level + } + @case (EventType.Level_TeamPick) { + + team picked this level + } + @case (EventType.Level_Rate) { + + rated this level + } + @case (EventType.Level_Review) { + + reviewed this level + } + @case (EventType.Playlist_AddLevel) { + + added this level to a playlist + } + @case (EventType.SubmittedScore_Create) { + + set a score on this level + } + } + + + + + + ` +}) +export class CompactEventComponent { + @Input({required: true}) event: ActivityEvent = null!; + @Input({required: true}) submittingUser: User = null!; + + protected readonly EventType = EventType; + protected readonly faCircleArrowUp = faCircleArrowUp; + protected readonly faHeart = faHeart; + protected readonly faHeartBroken = faHeartBroken; + protected readonly faPlayCircle = faPlayCircle; + protected readonly faUpDown = faUpDown; + protected readonly faTag = faTag; + protected readonly faComment = faComment; + protected readonly faCommentSlash = faCommentSlash; + protected readonly faImages = faImages; + protected readonly faCertificate = faCertificate; + protected readonly faPlusCircle = faPlusCircle; + protected readonly faListAlt = faListAlt; +} diff --git a/src/app/components/items/event-page.component.ts b/src/app/components/items/event-page.component.ts index 21d9071..a9383f2 100644 --- a/src/app/components/items/event-page.component.ts +++ b/src/app/components/items/event-page.component.ts @@ -7,18 +7,22 @@ import {Level} from "../../api/types/levels/level"; import {Score} from "../../api/types/levels/score"; import {Photo} from "../../api/types/photos/photo"; import {ContainerComponent} from "../ui/container.component"; +import {CompactEventComponent} from "./compact-event.component"; @Component({ selector: 'app-event-page', standalone: true, imports: [ EventComponent, - ContainerComponent + ContainerComponent, + CompactEventComponent ], template: `
@for (event of page.events; track event.eventId) { - @if(container) { + @if(compact) { + + } @else { - } @else { - - } }
@@ -41,7 +38,7 @@ import {ContainerComponent} from "../ui/container.component"; }) export class EventPageComponent { @Input({required: true}) page: ActivityPage = undefined!; - @Input() container: boolean = true; + @Input() compact: boolean = false; user(id: string | undefined): User | undefined { if(!id) return undefined; diff --git a/src/app/components/items/event.component.ts b/src/app/components/items/event.component.ts index 23a381f..38c3d9a 100644 --- a/src/app/components/items/event.component.ts +++ b/src/app/components/items/event.component.ts @@ -101,7 +101,7 @@ import {UserPreviewComponent} from "./user-preview.component"; - +
diff --git a/src/app/pages/level/level.component.html b/src/app/pages/level/level.component.html index 8d5f7d2..45454f0 100644 --- a/src/app/pages/level/level.component.html +++ b/src/app/pages/level/level.component.html @@ -33,7 +33,7 @@ @if(activityPage) { - + } diff --git a/src/app/pages/level/level.component.ts b/src/app/pages/level/level.component.ts index b06e9e8..72cdc97 100644 --- a/src/app/pages/level/level.component.ts +++ b/src/app/pages/level/level.component.ts @@ -66,7 +66,7 @@ export class LevelComponent { route.params.subscribe(params => { const id: number = +params['id']; this.client.getLevelById(id).subscribe(data => this.setDataFromLevel(data)); - this.client.getActivityPageForLevel(id, 0, 5).subscribe(page => this.activityPage = page); + this.client.getActivityPageForLevel(id, 0, 20).subscribe(page => this.activityPage = page); }); this.layout.isMobile.subscribe(v => {