web app: Move date and time formatting to a common module.

MythTV · Jul 1, 2023 · 14bdbec · 14bdbec
1 parent e735ec4
commit 14bdbec
Show file tree

Hide file tree

Showing 14 changed files with 69 additions and 84 deletions.
diff --git a/mythtv/html/backend/src/app/dashboard/recordings/recordings.component.html b/mythtv/html/backend/src/app/dashboard/recordings/recordings.component.html
@@ -68,9 +68,9 @@ <h2>{{ 'dashboard.recordings.heading' | translate }}</h2>
                         </div>
                     </td>
                     <td style="flex-basis: 8%" class="justify-content-end p-1">
-                        {{formatDate(program.Airdate)}}</td>
+                        {{utility.formatDate(program.Airdate)}}</td>
                     <td style="flex-basis: 8%" class="justify-content-end p-1">
-                        {{formatDate(program.StartTime)}}</td>
+                        {{utility.formatDate(program.StartTime)}}</td>
                     <td style="flex-basis: 10%" class="p-1">
                         {{program.Channel.ChanNum}} {{program.Channel.CallSign}}</td>
                     <td style="flex-basis: 8%" class="p-1">{{program.Recording.RecGroup}}</td>

diff --git a/mythtv/html/backend/src/app/dashboard/recordings/recordings.component.ts b/mythtv/html/backend/src/app/dashboard/recordings/recordings.component.ts
@@ -10,6 +10,7 @@ import { ScheduleOrProgram } from 'src/app/services/interfaces/program.interface
 import { ProgramList } from 'src/app/services/interfaces/program.interface';
 import { JobQCommands } from 'src/app/services/interfaces/setup.interface';
 import { SetupService } from 'src/app/services/setup.service';
+import { UtilityService } from 'src/app/services/utility.service';
 
 @Component({
   selector: 'app-recordings',
@@ -67,7 +68,8 @@ export class RecordingsComponent implements OnInit {
   menuToShow: MenuItem[] = [];
 
   constructor(private dvrService: DvrService, private messageService: MessageService,
-    public translate: TranslateService, private setupService: SetupService) {
+    public translate: TranslateService, private setupService: SetupService,
+    public utility: UtilityService) {
     this.loadRecordings();
     this.JobQCmds = this.setupService.getJobQCommands();
 
@@ -99,14 +101,6 @@ export class RecordingsComponent implements OnInit {
     });
   }
 
-  formatDate(date: string): string {
-    if (!date)
-      return '';
-    if (date.length == 10)
-      date = date + ' 00:00';
-    return new Date(date).toLocaleDateString()
-  }
-
   getDuration(program: ScheduleOrProgram): number {
     const starttm = new Date(program.Recording.StartTs).getTime();
     const endtm = new Date(program.Recording.EndTs).getTime();

diff --git a/mythtv/html/backend/src/app/dashboard/recrules/recrules.component.html b/mythtv/html/backend/src/app/dashboard/recrules/recrules.component.html
@@ -41,9 +41,9 @@ <h2>{{ 'dashboard.recrules.heading' | translate }}</h2>
                 <td style="flex-basis: 10%" class="p-1">{{recrule.RecGroup}}</td>
                 <td style="flex-basis: 10%" class="p-1">{{recrule.StorageGroup}}</td>
                 <td style="flex-basis: 10%" class="justify-content-end p-1 pr-5">
-                    {{formatDate(recrule.LastRecorded)}}</td>
+                    {{utility.formatDate(recrule.LastRecorded)}}</td>
                 <td style="flex-basis: 15%" class="justify-content-end p-1 pr-5">
-                    {{formatDate(recrule.NextRecording)}} {{formatTime(recrule.NextRecording)}}</td>
+                    {{utility.formatDate(recrule.NextRecording)}} {{utility.formatTime(recrule.NextRecording)}}</td>
                 <td style="flex-basis: 5%" class="p-1">
                     <i class="pi pi-times" style="color:red" *ngIf="recrule.Inactive else checkmark"></i>
                     <ng-template #checkmark>

diff --git a/mythtv/html/backend/src/app/dashboard/recrules/recrules.component.ts b/mythtv/html/backend/src/app/dashboard/recrules/recrules.component.ts
@@ -3,6 +3,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { ScheduleComponent, ScheduleLink, SchedulerSummary } from 'src/app/schedule/schedule.component';
 import { DvrService } from 'src/app/services/dvr.service';
 import { RecRule } from 'src/app/services/interfaces/recording.interface';
+import { UtilityService } from 'src/app/services/utility.service';
 
 interface StringAssociativeArray {
   [key: string]: string
@@ -35,10 +36,11 @@ export class RecrulesComponent implements OnInit, SchedulerSummary {
   rulesLoaded = false;
   errorCount = 0;
 
-  constructor(private dvrService: DvrService, private translate: TranslateService) {
+  constructor(private dvrService: DvrService, private translate: TranslateService,
+    public utility: UtilityService) {
     // translations
     for (const [key, value] of Object.entries(this.typeValue)) {
-      const label = 'recrule.' + key.replace(' ','');
+      const label = 'recrule.' + key.replace(' ', '');
       this.translate.get(label).subscribe(data => {
         Object.defineProperty(this.typeValue, key, { value: data });
       });
@@ -71,24 +73,7 @@ export class RecrulesComponent implements OnInit, SchedulerSummary {
 
   updateRecRule(recRule: RecRule) {
     if (this.inter.sched)
-      this.inter.sched.open(undefined,undefined,recRule);
-  }
-
-  formatDate(date: string): string {
-    if (!date)
-      return '';
-    if (date.length == 10)
-      date = date + ' 00:00';
-    return new Date(date).toLocaleDateString()
-  }
-
-  formatTime(date: string): string {
-    if (!date)
-      return '';
-    // Get the locale specific time and remove the seconds
-    const t = new Date(date);
-    const tWithSecs = t.toLocaleTimeString() + ' ';
-    return tWithSecs.replace(/:.. /, ' ');
+      this.inter.sched.open(undefined, undefined, recRule);
   }
 
 }
diff --git a/mythtv/html/backend/src/app/dashboard/videos/videos.component.html b/mythtv/html/backend/src/app/dashboard/videos/videos.component.html
@@ -70,7 +70,7 @@ <h2>{{ 'dashboard.videos.heading' | translate }}</h2>
                         <div *ngIf="video.Season>0 || video.Episode>0"> {{video.Season}}x{{video.Episode}} </div>
                     </td>
                     <td style="flex-basis: 12%" class="justify-content-end p-1">
-                        {{formatDate(video.ReleaseDate)}}</td>
+                        {{utility.formatDate(video.ReleaseDate)}}</td>
                     <td style="flex-basis: 10%" class="justify-content-end p-1">
                         <div *ngIf="video.Length > 0"> {{ video.Length }} min </div>
                     </td>

diff --git a/mythtv/html/backend/src/app/dashboard/videos/videos.component.ts b/mythtv/html/backend/src/app/dashboard/videos/videos.component.ts
@@ -5,6 +5,7 @@ import { MenuItem, MessageService } from 'primeng/api';
 import { Menu } from 'primeng/menu';
 import { PartialObserver } from 'rxjs';
 import { UpdateVideoMetadataRequest, VideoMetadataInfo } from 'src/app/services/interfaces/video.interface';
+import { UtilityService } from 'src/app/services/utility.service';
 import { VideoService } from 'src/app/services/video.service';
 
 @Component({
@@ -44,7 +45,7 @@ export class VideosComponent implements OnInit {
 
 
   constructor(private videoService: VideoService, private translate: TranslateService,
-    private messageService: MessageService) {
+    private messageService: MessageService, public utility: UtilityService) {
     this.loadVideos();
 
     // translations
@@ -78,14 +79,6 @@ export class VideosComponent implements OnInit {
     });
   }
 
-  formatDate(date: string): string {
-    if (!date)
-      return '';
-    if (date.length == 10)
-      date = date + ' 00:00';
-    return new Date(date).toLocaleDateString()
-  }
-
   filterVideos() {
     this.videos = [];
     let prior = '';

diff --git a/mythtv/html/backend/src/app/schedule/schedule.component.html b/mythtv/html/backend/src/app/schedule/schedule.component.html
@@ -3,8 +3,8 @@
         <p-dialog header="{{ 'dashboard.sched.heading' | translate }}" [(visible)]="displayDlg" [modal]="true"
             [style]="{height: '75vw', width: '500px'}" [closable]="false" [closeOnEscape]="false">
             <p> {{ channel?.ChanNum }} {{ channel?.CallSign }}</p>
-            <p> {{ formatDate(recRule.StartTime) }} {{ formatTime(recRule.StartTime) }} -
-                {{ formatTime(recRule.EndTime )}}
+            <p> {{ utility.formatDate(recRule.StartTime) }} {{ utility.formatTime(recRule.StartTime) }} -
+                {{ utility.formatTime(recRule.EndTime )}}
             </p>
             <b> {{ recRule.Title }} </b>
             <p> {{ recRule.SubTitle }} </p>

diff --git a/mythtv/html/backend/src/app/schedule/schedule.component.ts b/mythtv/html/backend/src/app/schedule/schedule.component.ts
@@ -9,6 +9,7 @@ import { MythService } from '../services/myth.service';
 import { NgForm } from '@angular/forms';
 import { RecordScheduleRequest } from '../services/interfaces/dvr.interface';
 import { Observable, of } from 'rxjs';
+import { UtilityService } from '../services/utility.service';
 
 export interface SchedulerSummary {
   refresh(): void;
@@ -106,7 +107,7 @@ export class ScheduleComponent implements OnInit {
   templateId = 0;
 
   constructor(private dvrService: DvrService, private translate: TranslateService,
-    public mythService: MythService) {
+    private mythService: MythService, public utility: UtilityService) {
   }
 
   ngOnInit(): void {
@@ -362,24 +363,6 @@ export class ScheduleComponent implements OnInit {
     recRule.FindTime = date.toTimeString().slice(0, 8);
   }
 
-
-  formatDate(date?: string): string {
-    if (!date)
-      return '';
-    if (date.length == 10)
-      date = date + ' 00:00';
-    return new Date(date).toLocaleDateString()
-  }
-
-  formatTime(date?: string): string {
-    if (!date)
-      return '';
-    // Get the locale specific time and remove the seconds
-    const t = new Date(date);
-    const tWithSecs = t.toLocaleTimeString() + ' ';
-    return tWithSecs.replace(/:.. /, ' ');
-  }
-
   filterFromRec(recRule: RecRule) {
     this.selectedFilters = [];
     this.recRuleFilters.forEach((filter) => {

diff --git a/mythtv/html/backend/src/app/services/utility.service.spec.ts b/mythtv/html/backend/src/app/services/utility.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UtilityService } from './utility.service';
+
+describe('UtilityService', () => {
+  let service: UtilityService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UtilityService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/mythtv/html/backend/src/app/services/utility.service.ts b/mythtv/html/backend/src/app/services/utility.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UtilityService {
+
+  constructor() { }
+
+  formatDate(date: string): string {
+    if (!date)
+      return '';
+    if (date.length == 10)
+      date = date + ' 00:00';
+    return new Date(date).toLocaleDateString()
+  }
+
+  formatTime(date: string): string {
+    if (!date)
+      return '';
+    // Get the locale specific time and remove the seconds
+    const t = new Date(date);
+    const tWithSecs = t.toLocaleTimeString() + ' ';
+    return tWithSecs.replace(/:.. /, ' ');
+  }
+
+
+}
diff --git a/mythtv/html/backend/src/app/status/components/jobqueue/jobqueue.component.html b/mythtv/html/backend/src/app/status/components/jobqueue/jobqueue.component.html
@@ -4,7 +4,7 @@ <h2>{{ 'dashboard.status.jobs_title' | translate }}</h2>
         <p>{{ 'dashboard.status.jobs_text' | translate }}:</p>
         <ul>
             <div *ngFor="let job of jobqueue">
-                <p>{{ job.StatusTime }} - {{ job.Program.Title }} - {{ JobTypeText(job.Type) }} -
+                <p>{{ utility.formatDate(job.StatusTime) }} {{ utility.formatTime(job.StatusTime) }} - {{ job.Program.Title }} - {{ JobTypeText(job.Type) }} -
                     {{ 'dashboard.status.jobs_status' | translate }}: {{ JobStatusText(job.Status) }} </p>
                 <!-- Add details of failed job -->
             </div>

diff --git a/mythtv/html/backend/src/app/status/components/jobqueue/jobqueue.component.ts b/mythtv/html/backend/src/app/status/components/jobqueue/jobqueue.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { JobQueueJob } from 'src/app/services/interfaces/jobqueue.interface';
+import { UtilityService } from 'src/app/services/utility.service';
 
 @Component({
   selector: 'app-status-jobqueue',
@@ -9,7 +10,7 @@ import { JobQueueJob } from 'src/app/services/interfaces/jobqueue.interface';
 export class JobqueueComponent implements OnInit {
   @Input() jobqueue?: JobQueueJob[];
 
-  constructor() { }
+  constructor(public utility: UtilityService) { }
 
   ngOnInit(): void {
   }

diff --git a/mythtv/html/backend/src/app/status/components/scheduled/scheduled.component.html b/mythtv/html/backend/src/app/status/components/scheduled/scheduled.component.html
@@ -6,7 +6,7 @@ <h2>{{ 'dashboard.status.schedule_title' | translate }}</h2>
         <ul>
             <li *ngFor="let schedule of scheduled" class="flex">
                 <div pTooltip="{{schedule.Description}}" tooltipPosition="bottom">
-                    {{ formatDate(schedule.StartTime) }} {{ formatTime(schedule.StartTime) }} - {{schedule.Recording.EncoderId}} - {{schedule.Channel.CallSign}} -
+                    {{ utility.formatDate(schedule.StartTime) }} {{ utility.formatTime(schedule.StartTime) }} - {{schedule.Recording.EncoderId}} - {{schedule.Channel.CallSign}} -
                     {{schedule.Title}}
                 </div>
             </li>

diff --git a/mythtv/html/backend/src/app/status/components/scheduled/scheduled.component.ts b/mythtv/html/backend/src/app/status/components/scheduled/scheduled.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { MatTooltipModule, TooltipPosition } from '@angular/material/tooltip';
 import { ScheduleOrProgram } from 'src/app/services/interfaces/program.interface';
+import { UtilityService } from 'src/app/services/utility.service';
 
 @Component({
   selector: 'app-status-scheduled',
@@ -10,26 +11,10 @@ import { ScheduleOrProgram } from 'src/app/services/interfaces/program.interface
 export class ScheduledComponent implements OnInit {
   @Input() scheduled?: ScheduleOrProgram[];
 
-  constructor() { }
+  constructor(public utility: UtilityService) { }
 
   ngOnInit(): void {
   }
 
-  formatDate(date: string): string {
-    if (!date)
-      return '';
-    if (date.length == 10)
-      date = date + ' 00:00';
-    return new Date(date).toLocaleDateString()
-  }
-
-  formatTime(date: string): string {
-    if (!date)
-      return '';
-    // Get the locale specific time and remove the seconds
-    const t = new Date(date);
-    const tWithSecs = t.toLocaleTimeString() + ' ';
-    return tWithSecs.replace(/:.. /, ' ');
-  }
 
 }