[webapp] add date/time picker to tv guide

mythtv/html/assets/i18n/en_GB.json

@@ -31,7 +31,7 @@
         "contains": "Contains",
         "dateAfter": "Date is after",
         "dateBefore": "Date is before",
-        "dateFormat": "mm/dd/yy",
+        "dateFormat": "dd/mm/yy",
         "dateIs": "Date is",
         "dateIsNot": "Date is not",
         "dayNames": [

mythtv/html/backend/src/app/guide/guide.component.html

@@ -2,7 +2,13 @@
     <p-dataView [value]="pg.Channels" [totalRecords]="pg.TotalAvailable">
         <ng-template pTemplate="header" styleClass="timeHeader">
             <div class="col-12">
-                Time Selector goes here
+                <p-calendar
+                    [(ngModel)]="m_startDate"
+                    [showTime]="true"
+                    [stepMinute]="30"
+                    [dateFormat]="m_dateFormat"
+                    (onClose)="onDatePickerClose()">
+                </p-calendar>
             </div>
         </ng-template>
         <ng-template let-channelrow let-i="rowIndex" pTemplate="listItem">
@@ -18,11 +24,11 @@
                     </div>
                     <div class="col">
                         <ng-container *ngFor="let program of channelrow.Programs">
-                            <div *ngIf="inDisplayWindow(program.StartTime, pg.EndTime)">
+                            <ng-container *ngIf="inDisplayWindow(program.StartTime, program.EndTime)">
                                 <app-guide-programentry [program]="program"
                                     [guideStartTime]="pg.StartTime" [guideEndTime]="pg.EndTime">
                                 </app-guide-programentry>
-                            </div>
+                            </ng-container>
                         </ng-container>
                     </div>
                 </div>

mythtv/html/backend/src/app/guide/guide.component.ts

@@ -12,33 +12,54 @@ import { ProgramGuide } from 'src/app/services/interfaces/programguide.interface
 })
 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_channelData:  Channel[] = [];
   m_channelTotal: number = 10;
   m_rows:         number = 10;
 
   constructor(private guideService : GuideService) { }
 
   ngOnInit(): void {
-    this.m_guideData$ = this.guideService.GetProgramGuide().pipe(
+    this.fetchData();
+  }
+
+  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);
-    this.m_guideData$ = this.guideService.GetProgramGuide().pipe(
-      tap(data => console.log(data)),
-      tap(data => this.m_channelData = data.ProgramGuide.Channels),
-      tap(data => this.m_channelTotal = data.ProgramGuide.TotalAvailable),
-    )
+    this.fetchData();
   }
 
   inDisplayWindow(startTime : string, endTime : string) : boolean {
     let p_start = new Date(startTime);
-    let w_end   = new Date(endTime);
+    let p_end   = new Date(endTime);
+    let w_start = new Date(this.m_startDate);
+    let w_end   = new Date(this.m_endDate);
+    if (p_end <= w_start) {
+      return false;
+    }
+    if (p_start >= w_end) {
+      return false;
+    }
     return (p_start < w_end);
   }
 
+  onDatePickerClose() : void {
+    console.log("New time is " + this.m_startDate);
+    this.fetchData(this.m_startDate);
+  }
 }

mythtv/html/backend/src/app/primeng.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 
 import { AccordionModule } from 'primeng/accordion';
 import { ButtonModule } from 'primeng/button';
+import { CalendarModule } from 'primeng/calendar';
 import { CardModule } from 'primeng/card';
 import { CheckboxModule } from 'primeng/checkbox'
 import { DataViewModule } from 'primeng/dataview';
@@ -28,8 +29,8 @@ import { TooltipModule } from 'primeng/tooltip';
 @NgModule({
     exports: [
         AccordionModule,
-
         ButtonModule,
+        CalendarModule,
         CardModule,
         CheckboxModule,
         DataViewModule,

mythtv/html/backend/src/app/services/guide.service.ts

@@ -9,7 +9,7 @@ import { GetProgramGuideRequest } from './interfaces/guide.interface';
   providedIn: 'root'
 })
 export class GuideService {
-  startDate : number = Date.now();
+  startDate : Date;
   guide_data$! : ProgramGuide;
 
   toTime(date : string) {
@@ -25,16 +25,21 @@ export class GuideService {
       let endAt = new Date(d.getTime()+7200000);
       return this.toTime(endAt.toISOString());
   }
-  toHalfHour(date : number) {
+  toHalfHour(date : Date) {
       let d = new Date(date);
       d.setMinutes((d.getMinutes() < 30) ? 0 : 30);
       d.setSeconds(0);
       return d;
   }
 
-  constructor(private httpClient: HttpClient) { }
+  constructor(private httpClient: HttpClient) {
+    this.startDate = new Date;
+  }
 
-  public GetProgramGuide() : Observable<ProgramGuide> {
+  public GetProgramGuide(reqDate?: Date) : Observable<ProgramGuide> {
+    if (typeof reqDate !== 'undefined') {
+      this.startDate = reqDate;
+    }
     let time : string = this.toHalfHour(this.startDate).toISOString();
     let params : GetProgramGuideRequest = {
       "StartTime": this.toStartTime(time),