web app: Support for URL parameters in Program Guide

Supports parameters in the URL to invoke the guide at a particular
point, and also to open the schedule dialog for a particular channel and
time.

Fixes #888

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

@@ -1,4 +1,5 @@
-<div class="flex flex-column align-items-center channelBox cursor-pointer" (click)="guideComponent.onChannel(channel)">
+<div class="flex flex-column align-items-center channelBox cursor-pointer" (click)="guideComponent.onChannel(channel)"
+    id="{{'Chan'+channel.ChanId}}">
     <div class="channelIcon">
         <img src="{{channel.IconURL}}" height="57" *ngIf="channel.IconURL; else nullIcon">
         <ng-template #nullIcon><img height="0" width="0"></ng-template>

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

@@ -12,8 +12,8 @@ <h2>{{ 'dashboard.programguide' | translate }} </h2>
             <p-calendar [(ngModel)]="m_pickerDate" [showTime]="true" [stepMinute]="30" [dateFormat]="'yy/mm/dd'"
                 (onClose)="onDateChange()" (keyup.enter)="onDateChange()" (onBlur)="onDateChange()"
                 [selectOtherMonths]="true" [showIcon]="true" [showOnFocus]="true" [showButtonBar]="true"
-                [clearButtonStyleClass]="'hidden'"
-                pTooltip="{{ 'dashboard.guide.calendar_tip' | translate }}" tooltipPosition="top">
+                [clearButtonStyleClass]="'hidden'" pTooltip="{{ 'dashboard.guide.calendar_tip' | translate }}"
+                tooltipPosition="top">
             </p-calendar>
         </div>
 
@@ -64,6 +64,12 @@ <h2>{{ 'dashboard.programguide' | translate }} </h2>
             <button type="text" pButton label="{{ 'dashboard.guide.colors' | translate }}"
                 (click)="showLegend = true"></button>
         </div>
+        <div class="flex align-items-center">
+            <a href="https://www.mythtv.org/wiki/Web_Application:Program_Guide" target="mythtv_wiki">
+            <button pButton pRipple icon="pi pi-question-circle" class="p-button-text"
+                pTooltip="{{ 'common.help' | translate }}" tooltipPosition="top"></button>
+            </a>
+        </div>
     </div>
     <div *ngIf="displayType == GRID">
         <p-scrollPanel [style]="{width: '100%', height: '90vh'}">

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

@@ -8,6 +8,7 @@ import { ScheduleLink, SchedulerSummary } from '../schedule/schedule.component';
 import { ScheduleOrProgram } from '../services/interfaces/program.interface';
 import { GetProgramListRequest } from '../services/interfaces/guide.interface';
 import { ChannelGroup } from '../services/interfaces/channelgroup.interface';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-guide',
@@ -47,35 +48,68 @@ export class GuideComponent implements OnInit, SchedulerSummary {
   displayType = this.GRID;
   searchValue = '';
   showLegend = false;
+  startChanid?: number;
+  startTime?: Date;
+  startSchedule?: boolean;
+  startGroup?: number;
 
-  constructor(private guideService: GuideService,
+  constructor(private guideService: GuideService, private route: ActivatedRoute,
     private translate: TranslateService) {
     this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => {
       console.log("Event: language change, new language (" + event.lang + ")");
       this.switchLanguage(event.lang);
-      this.fetchData();
+      // this.fetchData();
     })
   }
 
 
   ngOnInit(): void {
-    this.fetchData();
+    this.startChanid = this.route.snapshot.queryParams.Chanid;
+    let reqDate;
+    reqDate = new Date(this.route.snapshot.queryParams.StartTime);
+    if (Number.isNaN(reqDate.valueOf())) {
+      reqDate = new Date(Number(this.route.snapshot.queryParams.StartTime));
+    }
+    if (Number.isNaN(reqDate.valueOf()))
+      reqDate = undefined;
+    if (reqDate)
+      this.startTime = reqDate;
+    else
+      this.startTime = undefined;
+    // if (this.startChanid)
+    //   this.channelGroup = this.allGroup;
+    this.startSchedule = this.route.snapshot.queryParams.Schedule;
+    this.fetchData(this.startTime);
   }
 
   switchLanguage(language: string): void {
     this.translate.use(language);
-    // this.setDateFormat();
   }
 
   fetchData(reqDate?: Date): void {
     if (this.channelGroups.length == 0) {
       this.guideService.GetChannelGroupList(false).subscribe(
         data => {
-          console.log(data)
           this.channelGroups = data.ChannelGroupList.ChannelGroups;
           this.channelGroups.unshift(this.allGroup);
+          let wantedGroup = localStorage.getItem("ChannelGroup");
+          if (!wantedGroup)
+            wantedGroup = this.allGroup.Name;
+          if (this.route.snapshot.queryParams.ChannelGroup)
+            wantedGroup = this.route.snapshot.queryParams.ChannelGroup;
+          let group = this.channelGroups.find((entry) =>
+            entry.Name == wantedGroup);
+          if (group)
+            this.channelGroup = group;
+          localStorage.setItem("ChannelGroup",this.channelGroup.Name);
+          this.fetchGuide(reqDate);
         });
-    };
+    }
+    else
+      this.fetchGuide(reqDate);
+  }
+
+  fetchGuide(reqDate?: Date) {
     this.guideService.GetProgramGuide(reqDate, this.channelGroup.GroupId).subscribe(data => {
       this.m_programGuide = data;
       this.m_startDate = new Date(data.ProgramGuide.StartTime);
@@ -86,6 +120,23 @@ export class GuideComponent implements OnInit, SchedulerSummary {
       this.loaded = true;
       this.refreshing = false;
       this.timeChange = false;
+      if (this.startChanid) {
+        setTimeout(() => {
+          const element = document.getElementById('Chan' + this.startChanid);
+          element?.scrollIntoView();
+          if (this.startSchedule) {
+            let chan = this.m_programGuide.ProgramGuide.Channels
+              .find((entry) => entry.ChanId == this.startChanid);
+            if (chan) {
+              let prog = chan.Programs.find((entry) =>
+                this.startTime?.valueOf() == new Date(entry.StartTime).valueOf());
+              if (prog)
+                this.inter.sched?.open(prog, chan);
+            }
+          }
+          this.startChanid = undefined;
+        }, 100);
+      }
     });
   }
 
@@ -149,6 +200,7 @@ export class GuideComponent implements OnInit, SchedulerSummary {
 
   refresh(): void {
     this.refreshing = true;
+    localStorage.setItem("ChannelGroup",this.channelGroup.Name);
     switch (this.displayType) {
       case this.GRID:
         if (this.m_startDate) {