[webapp] Add i18n, allows the dateFormat to match locale

MythTV · May 17, 2022 · 72509bd · 72509bd
1 parent 212c591
commit 72509bd
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 11 deletions.
diff --git a/mythtv/html/backend/src/app/guide/components/timebar/timebar.component.html b/mythtv/html/backend/src/app/guide/components/timebar/timebar.component.html
@@ -1,6 +1,6 @@
 <div class="grid">
     <!-- TODO: Use today or date-->
-    <div class="col-1 datebox">Today</div>
+    <div class="col-1 datebox">{{ 'primeng.today' | translate }}</div>
     <div class="col segmentbox">{{ segmentToStartTime(0) }}</div>
     <div class="col segmentbox">{{ segmentToStartTime(1) }}</div>
     <div class="col segmentbox">{{ segmentToStartTime(2) }}</div>

diff --git a/mythtv/html/backend/src/app/guide/components/timebar/timebar.component.ts b/mythtv/html/backend/src/app/guide/components/timebar/timebar.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-guide-timebar',
@@ -8,7 +9,7 @@ import { Component, OnInit, Input } from '@angular/core';
 export class TimebarComponent implements OnInit {
   @Input() startTime! : string;
 
-  constructor() { }
+  constructor(private translate : TranslateService) { }
 
   ngOnInit(): void {
   }

diff --git a/mythtv/html/backend/src/app/guide/guide.component.html b/mythtv/html/backend/src/app/guide/guide.component.html
@@ -6,7 +6,7 @@
                     [(ngModel)]="m_startDate"
                     [showTime]="true"
                     [stepMinute]="30"
-                    [dateFormat]="m_dateFormat"
+                    [dateFormat]=(m_dateFormat)
                     (onClose)="onDatePickerClose()">
                 </p-calendar>
             </div>

diff --git a/mythtv/html/backend/src/app/guide/guide.component.ts b/mythtv/html/backend/src/app/guide/guide.component.ts
@@ -4,6 +4,7 @@ import { tap } from 'rxjs/operators';
 import { GuideService } from 'src/app/services/guide.service';
 import { Channel } from '../services/interfaces/channel.interface';
 import { ProgramGuide } from 'src/app/services/interfaces/programguide.interface';
+import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-guide',
@@ -14,33 +15,48 @@ export class GuideComponent implements OnInit {
   m_guideData$!:  Observable<ProgramGuide>;
   m_startDate:    Date = new Date();
   m_endDate:      Date = new Date();
-  // TODO: dateFormat should come from i18n
-  //m_dateFormat:   string = primeng.dateFormat;
-  m_dateFormat:   string = "dd/mm/yy";
+  m_dateFormat:   string = ''
   m_channelData:  Channel[] = [];
   m_channelTotal: number = 10;
   m_rows:         number = 10;
 
-  constructor(private guideService : GuideService) { }
+  constructor(private guideService : GuideService,
+              private translate : TranslateService) {
+
+    this.setDateFormat();
+
+    this.translate.onLangChange.subscribe((event : TranslationChangeEvent) => {
+      console.log("Event: language change, new language (" + event.lang + ")");
+      this.switchLanguage(event.lang);
+      this.loadData();
+    })
+  }
 
   ngOnInit(): void {
     this.fetchData();
   }
 
+  setDateFormat() : void {
+    this.translate.get("primeng.dateFormat").subscribe(data => this.m_dateFormat = data);
+    console.log("Date format is (" + this.m_dateFormat + ")");
+  }
+
+  switchLanguage(language : string) : void {
+    this.translate.use(language);
+    this.setDateFormat();
+  }
+
   fetchData(reqDate?: Date) : void {
     this.m_guideData$ = this.guideService.GetProgramGuide(reqDate).pipe(
       tap(data => console.log(data)),
       tap(data => this.m_startDate = new Date(data.ProgramGuide.StartTime)),
-      tap(data => console.log(this.m_startDate)),
       tap(data => this.m_endDate = new Date(data.ProgramGuide.EndTime)),
-      tap(data => console.log(this.m_endDate)),
       tap(data => this.m_channelData = data.ProgramGuide.Channels),
       tap(data => this.m_channelTotal = data.ProgramGuide.TotalAvailable),
     )
   }
 
-  loadData(event: any): void {
-    console.log(event);
+  loadData(): void {
     this.fetchData();
   }