Converted top-readers.component.html

Kareadita · Jul 28, 2023 · f3c938a · f3c938a
1 parent 6ff1e28
commit f3c938a
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 25 deletions.
diff --git a/UI/Web/src/app/statistics/_components/top-readers/top-readers.component.html b/UI/Web/src/app/statistics/_components/top-readers/top-readers.component.html
@@ -1,35 +1,38 @@
-<div class="row g-0 mb-2 align-items-center">
+<ng-container *transloco="let t; read:'top-readers'">
+  <div class="row g-0 mb-2 align-items-center">
     <div class="col-4">
-        <h4>Top Readers</h4>
+      <h4>{{t('title')}}</h4>
     </div>
     <div class="col-8">
-        <form [formGroup]="formGroup" class="d-inline-flex float-end">
-            <div class="d-flex">
-                <label for="time-select-top-reads" class="form-check-label"></label>
-                <select id="time-select-top-reads" class="form-select" formControlName="days"
-                [class.is-invalid]="formGroup.get('days')?.invalid && formGroup.get('days')?.touched">
-                    <option *ngFor="let item of timePeriods" [value]="item.value">{{item.title}}</option>
-                </select>
-            </div>
-        </form>
+      <form [formGroup]="formGroup" class="d-inline-flex float-end">
+        <div class="d-flex">
+          <label for="time-select-top-reads" class="form-check-label visually-hidden">{{t('time-selection-label')}}</label>
+          <select id="time-select-top-reads" class="form-select" formControlName="days"
+                  [class.is-invalid]="formGroup.get('days')?.invalid && formGroup.get('days')?.touched">
+            <option *ngFor="let item of timePeriods" [value]="item.value">{{t(item.title)}}</option>
+          </select>
+        </div>
+      </form>
     </div>
-</div>
+  </div>
 
 
-<ng-container>
+  <ng-container>
     <div class="grid row g-0">
-        <div class="card" *ngFor="let user of (users$ | async)">
-            <div class="card-header text-center">
-              {{user.username}}
-            </div>
-            <ul class="list-group list-group-flush">
-              <li class="list-group-item">Comics: {{user.comicsTime}} hrs</li>
-              <li class="list-group-item">Manga: {{user.mangaTime}} hrs</li>
-              <li class="list-group-item">Books: {{user.booksTime}} hrs</li>
-            </ul>
+      <div class="card" *ngFor="let user of (users$ | async)">
+        <div class="card-header text-center">
+          {{user.username}}
         </div>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">{{t('comics-label', {value: user.comicsTime})}}</li>
+          <li class="list-group-item">{{t('manga-label', {value: user.mangaTime})}}</li>
+          <li class="list-group-item">{{t('books-label', {value: user.booksTime})}}</li>
+        </ul>
+      </div>
     </div>
-</ng-container>
+  </ng-container>
 
 
 
+
+</ng-container>
diff --git a/UI/Web/src/app/statistics/_components/top-readers/top-readers.component.ts b/UI/Web/src/app/statistics/_components/top-readers/top-readers.component.ts
@@ -13,16 +13,23 @@ import { StatisticsService } from 'src/app/_services/statistics.service';
 import { TopUserRead } from '../../_models/top-reads';
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 import { NgFor, AsyncPipe } from '@angular/common';
+import {TranslocoModule} from "@ngneat/transloco";
 
-export const TimePeriods: Array<{title: string, value: number}> = [{title: 'This Week', value: new Date().getDay() || 1}, {title: 'Last 7 Days', value: 7}, {title: 'Last 30 Days', value: 30}, {title: 'Last 90 Days', value: 90}, {title: 'Last Year', value: 365}, {title: 'All Time', value: 0}];
+export const TimePeriods: Array<{title: string, value: number}> =
+  [{title: 'this-week', value: new Date().getDay() || 1},
+    {title: 'last-7-days', value: 7},
+    {title: 'last-30-days', value: 30},
+    {title: 'last-90-days', value: 90},
+    {title: 'last-year', value: 365},
+    {title: 'all-time', value: 0}];
 
 @Component({
     selector: 'app-top-readers',
     templateUrl: './top-readers.component.html',
     styleUrls: ['./top-readers.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [ReactiveFormsModule, NgFor, AsyncPipe]
+  imports: [ReactiveFormsModule, NgFor, AsyncPipe, TranslocoModule]
 })
 export class TopReadersComponent implements OnInit {
 

diff --git a/UI/Web/src/assets/langs/en.json b/UI/Web/src/assets/langs/en.json
@@ -316,6 +316,31 @@
         "read-percentage": "% Read"
     },
 
+    "top-readers": {
+        "title": "Top Readers",
+        "time-selection-label": "Timeframe",
+        "comics-label": "Comics: {{value}} hrs",
+        "manga-label": "Manga: {{value}} hrs",
+        "books-label": "Books: {{value}} hrs",
+
+        "this-week": "{{time-periods.this-week}}",
+        "last-7-days": "{{time-periods.last-7-days}}",
+        "last-30-days": "{{time-periods.last-30-days}}",
+        "last-90-days": "{{time-periods.last-90-days}}",
+        "last-year": "{{time-periods.last-year}}",
+        "all-time": "{{time-periods.all-time}}"
+    },
+
+    "time-periods": {
+        "this-week": "This Week",
+        "last-7-days": "Last 7 Days",
+        "last-30-days": "Last 30 Days",
+        "last-90-days": "Last 90 Days",
+        "last-year": "Last Year",
+        "all-time": "All Time"
+
+    },
+
     "validation": {
         "required-field": "This field is required",
         "valid-email": "This must be a valid email"