Converted user-scrobble-history.component.html

Kareadita · Jul 28, 2023 · a83cf28 · a83cf28
1 parent d1e3743
commit a83cf28
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 63 deletions.
diff --git a/API/Controllers/LocaleController.cs b/API/Controllers/LocaleController.cs
@@ -22,7 +22,6 @@ public LocaleController(IUnitOfWork unitOfWork, ILocalizationService localizatio
     [HttpGet]
     public ActionResult<IEnumerable<string>> GetAllLocales()
     {
-        // TODO: cache this
         var languages = _localizationService.GetLocales().Select(c => new CultureInfo(c)).Select(c =>
             new LanguageDto()
             {

diff --git a/UI/Web/src/app/_single-module/scrobble-event-type.pipe.ts b/UI/Web/src/app/_single-module/scrobble-event-type.pipe.ts
@@ -1,19 +1,27 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import {inject, Pipe, PipeTransform} from '@angular/core';
 import {ScrobbleEventType} from "../_models/scrobbling/scrobble-event";
+import {TranslocoPipe, TranslocoService} from "@ngneat/transloco";
 
 @Pipe({
   name: 'scrobbleEventType',
   standalone: true
 })
 export class ScrobbleEventTypePipe implements PipeTransform {
 
+  translocoService = inject(TranslocoService);
+
   transform(value: ScrobbleEventType): string {
     switch (value) {
-      case ScrobbleEventType.ChapterRead: return 'Reading Progress';
-      case ScrobbleEventType.ScoreUpdated: return 'Rating Update';
-      case ScrobbleEventType.AddWantToRead: return 'Want To Read: Add';
-      case ScrobbleEventType.RemoveWantToRead: return 'Want To Read: Remove';
-      case ScrobbleEventType.Review: return 'Review update';
+      case ScrobbleEventType.ChapterRead:
+        return this.translocoService.translate('scrobble-event-type-pipe.chapter-read');
+      case ScrobbleEventType.ScoreUpdated:
+        return this.translocoService.translate('scrobble-event-type-pipe.score-updated');
+      case ScrobbleEventType.AddWantToRead:
+        return this.translocoService.translate('scrobble-event-type-pipe.want-to-read-add');
+      case ScrobbleEventType.RemoveWantToRead:
+        return this.translocoService.translate('scrobble-event-type-pipe.want-to-read-remove');
+      case ScrobbleEventType.Review:
+        return this.translocoService.translate('scrobble-event-type-pipe.review');
     }
   }
 

diff --git a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.html b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.html
@@ -1,51 +1,50 @@
-<h5>Scrobble History</h5>
-<p>Here you will find any scrobble events linked with your account. In order for events to exist, you must have an active
-  scrobble provider configured. All events that have been processed will clear after a month. If there are non-processed events, it
-  is likely these cannot form matches upstream. Please reach out to your admin to get them corrected.</p>
-<div class="row g-0 mb-2">
-  <div class="col-md-10">
-    <form [formGroup]="formGroup">
-      <div class="form-group pe-1">
-        <label for="filter">Filter</label>
-        <input id="filter" type="text" class="form-control" formControlName="filter" autocomplete="off"/>
-      </div>
-    </form>
+<ng-container *transloco="let t; read:'user-scrobble-history'">
+  <h5>{{t('title')}}</h5>
+  <p>{{t('description')}}</p>
+  <div class="row g-0 mb-2">
+    <div class="col-md-10">
+      <form [formGroup]="formGroup">
+        <div class="form-group pe-1">
+          <label for="filter">{{t('filter-label')}}</label>
+          <input id="filter" type="text" class="form-control" formControlName="filter" autocomplete="off"/>
+        </div>
+      </form>
+    </div>
+    <div class="col-md-2 mt-4">
+      <ngb-pagination *ngIf="pagination"
+                      [(page)]="pagination.currentPage"
+                      [pageSize]="pagination.itemsPerPage"
+                      [collectionSize]="pagination.totalItems"
+                      (pageChange)="onPageChange($event)"
+      ></ngb-pagination>
+    </div>
   </div>
-  <div class="col-md-2 mt-4">
-    <ngb-pagination *ngIf="pagination"
-                    [(page)]="pagination.currentPage"
-                    [pageSize]="pagination.itemsPerPage"
-                    [collectionSize]="pagination.totalItems"
-                    (pageChange)="onPageChange($event)"
-    ></ngb-pagination>
-  </div>
-</div>
   <table class="table table-striped table-hover table-sm scrollable">
     <thead>
     <tr>
       <th scope="col" sortable="created" (sort)="updateSort($event)">
-        Created
+        {{t('created-header')}}
       </th>
       <th scope="col" sortable="lastModified" (sort)="updateSort($event)" direction="desc">
-        Last Modified
+        {{t('last-modified-header')}}
       </th>
       <th scope="col">
-        Type
+        {{t('type-header')}}
       </th>
       <th scope="col" sortable="seriesName" (sort)="updateSort($event)">
-        Series
+        {{t('series-header')}}
       </th>
       <th scope="col">
-        Data
+        {{t('data-header')}}
       </th>
       <th scope="col">
-        Is Processed
+        {{t('is-processed-header')}}
       </th>
     </tr>
     </thead>
     <tbody>
     <tr *ngIf="events.length === 0">
-      <td colspan="6">No Data</td>
+      <td colspan="6">{{t('no-data')}}/td>
     </tr>
     <tr *ngFor="let item of events; let idx = index;">
       <td>
@@ -63,22 +62,24 @@ <h5>Scrobble History</h5>
       <td>
         <ng-container [ngSwitch]="item.scrobbleEventType">
           <ng-container *ngSwitchCase="ScrobbleEventType.ChapterRead">
-            Volume {{item.volumeNumber}} Chapter {{item.chapterNumber}}
+            {{t('volume-and-chapter-num', {v: item.volumeNumber, c: item.chapterNumber})}}
           </ng-container>
           <ng-container *ngSwitchCase="ScrobbleEventType.ScoreUpdated">
-            Rating {{item.rating}}
+            {{t('rating', {r: item.rating})}}
           </ng-container>
           <ng-container *ngSwitchDefault>
-            Not Applicable
+            {{t('not-applicable')}}
           </ng-container>
         </ng-container>
       </td>
       <td>
         <i class="fa-regular fa-circle icon" aria-hidden="true" *ngIf="!item.isProcessed"></i>
         <i class="fa-solid fa-check-circle icon" aria-hidden="true" *ngIf="item.isProcessed"></i>
-        <span class="visually-hidden" attr.aria-labelledby="scrobble-history--{{idx}}">{{item.isProcessed ? 'Processed' : 'Not Processed'}}</span>
+        <span class="visually-hidden" attr.aria-labelledby="scrobble-history--{{idx}}">
+          {{item.isProcessed ? t('processed') : t('not-processed')}}
+        </span>
       </td>
     </tr>
     </tbody>
   </table>
-
+</ng-container>
diff --git a/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts b/UI/Web/src/app/_single-module/user-scrobble-history/user-scrobble-history.component.ts
@@ -2,21 +2,21 @@ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, injec
 import {CommonModule} from '@angular/common';
 
 import {ScrobblingService} from "../../_services/scrobbling.service";
-import {shareReplay} from "rxjs";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import {ScrobbleEvent, ScrobbleEventType} from "../../_models/scrobbling/scrobble-event";
 import {ScrobbleEventTypePipe} from "../scrobble-event-type.pipe";
 import {NgbPagination} from "@ng-bootstrap/ng-bootstrap";
 import {ScrobbleEventSortField} from "../../_models/scrobbling/scrobble-event-filter";
-import {debounceTime, map, take, tap} from "rxjs/operators";
+import {debounceTime, take} from "rxjs/operators";
 import {PaginatedResult, Pagination} from "../../_models/pagination";
 import {SortableHeader, SortEvent} from "../table/_directives/sortable-header.directive";
 import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {TranslocoModule} from "@ngneat/transloco";
 
 @Component({
   selector: 'app-user-scrobble-history',
   standalone: true,
-  imports: [CommonModule, ScrobbleEventTypePipe, NgbPagination, ReactiveFormsModule, SortableHeader],
+  imports: [CommonModule, ScrobbleEventTypePipe, NgbPagination, ReactiveFormsModule, SortableHeader, TranslocoModule],
   templateUrl: './user-scrobble-history.component.html',
   styleUrls: ['./user-scrobble-history.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush

diff --git a/UI/Web/src/assets/langs/en.json b/UI/Web/src/assets/langs/en.json
@@ -27,5 +27,36 @@
         "cancel": "Cancel",
         "saving": "Saving...",
         "update": "Update"
+    },
+
+    "user-scrobble-history": {
+        "title": "Scrobble History",
+        "description": "Here you will find any scrobble events linked with your account. In order for events to exist, you must have an active\n  scrobble provider configured. All events that have been processed will clear after a month. If there are non-processed events, it\n  is likely these cannot form matches upstream. Please reach out to your admin to get them corrected.",
+        "filter-label": "Filter",
+        "created-header": "Created",
+        "last-modified-header": "Last Modified",
+        "type-header": "Type",
+        "series-header": "Series",
+        "data-header": "Data",
+        "is-processed-header": "Is Processed",
+        "no-data": "No Data",
+        "volume-and-chapter-num": "Volume {{v}} Chapter {{n}}",
+        "rating": "Rating {{r}}",
+        "not-applicable": "Not Applicable",
+        "processed": "Processed",
+        "not-processed": "Not Processed"
+    },
+
+    "scrobble-event-type-pipe": {
+        "chapter-read": "Reading Progress",
+        "score-updated": "Rating Update",
+        "want-to-read-add": "Want to Read: Add",
+        "want-to-read-remove": "Want to Read: Remove",
+        "review": "Review update"
+    },
+
+    "common": {
+
     }
+
 }
diff --git a/UI/Web/src/httpLoader.ts b/UI/Web/src/httpLoader.ts
@@ -1,33 +1,16 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {Translation, TRANSLOCO_LOADER, TranslocoLoader} from "@ngneat/transloco";
-import {AccountService} from "./app/_services/account.service";
-import {distinct, of, switchMap} from "rxjs";
-import {catchError, distinctUntilChanged} from "rxjs/operators";
 
 
 @Injectable({ providedIn: 'root' })
 export class HttpLoader implements TranslocoLoader {
-  constructor(private http: HttpClient, private accountService: AccountService) {}
+  constructor(private http: HttpClient) {}
 
   getTranslation(langPath: string) {
-    console.log('loading language: ', langPath);
     const tokens = langPath.split('/');
-    console.log('\ttokens: ', tokens);
     return this.http.get<Translation>(`assets/langs/${tokens[tokens.length - 1]}.json`);
-    // return this.accountService.currentUser$.pipe(
-    //   distinctUntilChanged(),
-    //   switchMap(user => {
-    //     // Get the user's selected locale from the currentUser$.
-    //     // If no user or no locale is available, fallback to 'en'.
-    //     const locale = user?.preferences.locale || 'en';
-    //
-    //     // Load the translation file based on the user's locale (e.g., 'en.json', 'es.json', etc.).
-    //     return this.http.get<Translation>(`assets/langs/${locale}.json`).pipe(
-    //       catchError(() => of({})), // Return an empty object if the translation file is not found.
-    //     );
-    //   }),
-    // );
+
   }
 }
 

diff --git a/UI/Web/src/main.ts b/UI/Web/src/main.ts
@@ -57,7 +57,7 @@ bootstrapApplication(AppComponent, {
           provide: TRANSLOCO_CONFIG,
           useValue: {
             reRenderOnLangChange: true,
-            availableLangs: ['en', 'es'],
+            availableLangs: ['en', 'es'], // TODO: Derive this from the directory
             prodMode: environment.production,
             defaultLang: 'en',
             fallbackLang: 'en',