Use own level relations included in Level

src/app/api/client.service.ts

@@ -151,10 +151,6 @@ export class ClientService extends ApiImplementation {
     return this.http.get<Photo>(`/photos/id/${id}`);
   }
 
-  getLevelRelations(id: number) {
-    return this.http.get<LevelRelations>(`/levels/id/${id}/relations`);
-  }
-
   setLevelAsHearted(id: number) {
     return this.http.post<Response>(`/levels/id/${id}/heart`, null);
   }

src/app/api/types/levels/level-relations.ts

@@ -1,5 +1,8 @@
 export interface LevelRelations {
     isHearted: boolean;
     isQueued: boolean;
+    levelRating: number;
     myPlaysCount: number;
+    completionCount: number;
+    photoCount: number;
 }

src/app/api/types/levels/level.ts

@@ -1,4 +1,5 @@
 import {User} from "../users/user";
+import { LevelRelations } from "./level-relations";
 
 export interface Level {
     levelId: number;
@@ -22,4 +23,6 @@ export interface Level {
     hearts: number;
     totalPlays: number;
     uniquePlays: number;
+
+    ownRelations: LevelRelations | undefined;
 }

src/app/components/items/level-statistics.component.ts

@@ -2,7 +2,6 @@ import {Component, Input} from '@angular/core';
 import {Level} from "../../api/types/levels/level";
 import {faHeart, faPlay, faStar, faThumbsDown, faThumbsUp} from "@fortawesome/free-solid-svg-icons";
 import {StatisticComponent} from "../ui/info/statistic.component";
-import { getFormattedDateTime, getShortDateTime } from '../../helpers/date-time';
 import { LevelTeamPickStatusComponent } from "./level-team-pick-status.component";
 
 @Component({
@@ -13,10 +12,10 @@ import { LevelTeamPickStatusComponent } from "./level-team-pick-status.component
 ],
     template: `
     <div class="flex flex-wrap gap-x-1.5">
-      <app-statistic [value]=level.yayRatings name="Yays" [icon]=faThumbsUp></app-statistic>
-      <app-statistic [value]=level.booRatings name="Boos" [icon]=faThumbsDown></app-statistic>
-      <app-statistic [value]=level.hearts name="Hearts" [icon]=faHeart></app-statistic>
-      <app-statistic [value]=level.uniquePlays name="Plays" [icon]=faPlay></app-statistic>
+      <app-statistic [value]=level.yayRatings name="Yays" [icon]=faThumbsUp [emphasize]="(level.ownRelations?.levelRating ?? 0 ) > 0"></app-statistic>
+      <app-statistic [value]=level.booRatings name="Boos" [icon]=faThumbsDown [emphasize]="(level.ownRelations?.levelRating ?? 0 ) < 0"></app-statistic>
+      <app-statistic [value]=level.hearts name="Hearts" [icon]=faHeart [emphasize]="(level.ownRelations?.isHearted ?? false )"></app-statistic>
+      <app-statistic [value]=level.uniquePlays name="Plays" [icon]=faPlay [emphasize]="(level.ownRelations?.myPlaysCount ?? 0 ) > 0"></app-statistic>
       <app-statistic [value]=level.score name="Cool Rating (CR)" [icon]=faStar [truncate]=true></app-statistic>
       @if (level.teamPicked) {
         <app-level-team-pick-status [level]="level" [short]="short"></app-level-team-pick-status>

src/app/components/ui/info/statistic.component.ts

@@ -3,23 +3,24 @@ import {IconProp} from "@fortawesome/fontawesome-svg-core";
 import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
 import {TooltipComponent} from "../text/tooltip.component";
 import {FaIconComponent} from "@fortawesome/angular-fontawesome";
-import { DecimalPipe } from "@angular/common";
+import { DecimalPipe, NgClass } from "@angular/common";
 
 @Component({
     selector: 'app-statistic',
     imports: [
         TooltipComponent,
         FaIconComponent,
-        DecimalPipe
+        DecimalPipe,
+        NgClass
     ],
     template: `
     <app-tooltip [text]="name" class="text-secondary-bright">
-      <fa-icon [icon]="icon" class="mr-0.5"></fa-icon>
+      <fa-icon [icon]="icon" class="mr-0.5" [ngClass]="emphasize ? 'text-emphasized-primary' : ''"></fa-icon>
       @if (truncate) {
-        <span>{{value | number:'1.0-1'}}</span>
+        <span [ngClass]="emphasize ? 'text-emphasized-primary' : ''">{{value | number:'1.0-1'}}</span>
       }
       @else {
-        <span>{{value}}</span>
+        <span [ngClass]="emphasize ? 'text-emphasized-primary' : ''">{{value}}</span>
       }
     </app-tooltip>
     `
@@ -29,4 +30,5 @@ export class StatisticComponent {
   @Input({required: true}) name: string = "Statistic";
   @Input({required: true}) icon: IconProp = faExclamationTriangle;
   @Input() truncate: boolean = false;
+  @Input() emphasize: boolean = false;
 }

src/app/pages/level/level.component.html

@@ -52,11 +52,11 @@
     }
 
     <app-level-statistics [level]="level" class="mb-1.5 block" statistics></app-level-statistics>
-    @if(relations && !isMobile) {
-      <app-fancy-header-level-buttons [level]="level" [ownUser]="ownUser!" [relations]="relations" buttonArea></app-fancy-header-level-buttons>
+    @if(ownUser && relations && !isMobile) {
+      <app-fancy-header-level-buttons [level]="level" [ownUser]="ownUser" [relations]="relations" buttonArea></app-fancy-header-level-buttons>
     }
-    @else if(relations && isMobile) {
-      <app-fancy-header-level-buttons [level]="level" [ownUser]="ownUser!" [relations]="relations" buttonAreaMobile></app-fancy-header-level-buttons>
+    @else if(ownUser && relations && isMobile) {
+      <app-fancy-header-level-buttons [level]="level" [ownUser]="ownUser" [relations]="relations" buttonAreaMobile></app-fancy-header-level-buttons>
     }
   </app-fancy-header>
 

src/app/pages/level/level.component.ts

@@ -81,7 +81,6 @@ export class LevelComponent {
       this.auth.user.subscribe(user => {
         if(user) {
           this.ownUser = user;
-          this.client.getLevelRelations(id).subscribe(relations => this.relations = relations);
         }
       });
     });
@@ -91,6 +90,7 @@ export class LevelComponent {
 
   setDataFromLevel(data: Level) {
     this.level = data;
+    this.relations = data.ownRelations;
     if(this.isBrowser) {
       window.history.replaceState({}, '', `/level/${data.levelId}/${this.slug.transform(data.title)}`);
     }