Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
web-app: Improvements to Program Guide page
- Do not display question mark icons on channels that have no icon - Add page-left (<<) and page-right (>>) links in the grid. - Show program recording status in the grid. - Show actual date in the grid, instead of "Today" always. - If you mess up entering the date, go to current date rather than 1969.
- Loading branch information
1 parent
eaaa820
commit e5acde6
Showing
17 changed files
with
243 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 4 additions & 3 deletions
7
mythtv/html/backend/src/app/guide/components/channelicon/channelicon.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,9 @@ | ||
| <div class="flex flex-column align-items-center channelBox"> | ||
| <div class="channelIcon"> | ||
| <img alt="{{ channel.IconURL }} Icon" height="57" src="{{IconUrl(channel.IconURL)}}"/> | ||
| <img src="{{channel.IconURL}}" height="57" *ngIf="channel.IconURL; else nullIcon"> | ||
| <ng-template #nullIcon><img height="0" width="0"></ng-template> | ||
| </div> | ||
| <div class="channelText"> | ||
| <span>{{ channel.CallSign }}</span> | ||
| <span>{{ channel.ChanNum}} {{ channel.CallSign }}</span> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 10 additions & 9 deletions
19
mythtv/html/backend/src/app/guide/components/programentry/programentry.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,21 @@ | ||
| <div class="programBox" [style.width.%]=durationToWidth() (click)="showDetailsDialog()"> | ||
| <div class="programBox cursor-pointer" [style.width.%]=durationToWidth() (click)="showDetailsDialog()"> | ||
| <div class="programTitle">{{ program.Title }}</div> | ||
| <div class="programBody"> | ||
| <div *ngIf="program.SubTitle.length != 0"> | ||
| <div class="programSubtitle">{{ program.SubTitle }}</div> | ||
| </div> | ||
| <div *ngIf="program.Recording"> | ||
| <div class="programSubtitle" [ngStyle]="['WillRecord','Recording'].indexOf(program.Recording.StatusName)>-1? | ||
| {'background-color':'palegreen'}:{'background-color':'pink'}"> | ||
| {{ guide.recStatusText[program.Recording.StatusName] }}</div> | ||
| </div> | ||
| <div class="programDescription">{{ program.Description }}</div> | ||
| </div> | ||
| </div> | ||
| <p-dialog header=" {{ program.Title }}" [(visible)]="displayDetails" [style]="{width: '50vw'}"> | ||
| <div class="programSubtitle">{{ toLocalShortTime(program.StartTime) }} - {{ toLocalShortTime(program.EndTime) }} | ||
| <ng-container *ngIf="program.SubTitle.length != 0"> | ||
| : {{ program.SubTitle }} | ||
| </ng-container> | ||
| </div> | ||
| <p>{{ program.Description }}</p> | ||
| <p-dialog header=" {{ program.Title }} : {{ program.SubTitle }}" [(visible)]="editSchedule" [modal]="true" | ||
| [style]="{height: '75vw', width: '50vw'}" [closable]="false" [closeOnEscape]="false"> | ||
| <app-schedule></app-schedule> | ||
| <ng-template pTemplate="footer"> | ||
| <p-button icon="pi pi-check" (click)="displayDetails=false" label="Ok" styleClass="p-button-text"></p-button> | ||
| <p-button icon="pi pi-check" (click)="editSchedule=false" label="Ok" styleClass="p-button-text"></p-button> | ||
| </ng-template> | ||
| </p-dialog> |
45 changes: 15 additions & 30 deletions
45
mythtv/html/backend/src/app/guide/components/programentry/programentry.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,58 +1,43 @@ | ||
| import { Component, Input, OnInit } from '@angular/core'; | ||
| import { ScheduleOrProgram } from 'src/app/services/interfaces/program.interface'; | ||
| import { GuideComponent } from '../../guide.component'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-guide-programentry', | ||
| templateUrl: './programentry.component.html', | ||
| styleUrls: ['./programentry.component.css'] | ||
| }) | ||
| export class ProgramEntryComponent implements OnInit { | ||
| @Input() program! : ScheduleOrProgram; | ||
| @Input() guideStartTime! : string; | ||
| @Input() guideEndTime! : string; | ||
| displayDetails : boolean = false; | ||
| @Input() program!: ScheduleOrProgram; | ||
| @Input() guideStartTime!: string; | ||
| @Input() guideEndTime!: string; | ||
| @Input() guide!: GuideComponent; | ||
|
|
||
| constructor() { } | ||
| editSchedule: boolean = false; | ||
|
|
||
| constructor() { | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| } | ||
|
|
||
| durationToWidth() : number { | ||
| durationToWidth(): number { | ||
| let p_start = new Date(this.program.StartTime); | ||
| let p_end = new Date(this.program.EndTime); | ||
| let p_end = new Date(this.program.EndTime); | ||
| let w_start = new Date(this.guideStartTime); | ||
| let w_end = new Date(this.guideEndTime); | ||
| let w_end = new Date(this.guideEndTime); | ||
| let beginsBefore = p_start < w_start; | ||
| let endsAfter = p_end > w_end; | ||
| let startPoint = (beginsBefore ? w_start : p_start); | ||
| let endPoint = (endsAfter ? w_end: p_end); | ||
| let endPoint = (endsAfter ? w_end : p_end); | ||
| let timeWindow = w_end.getTime() - w_start.getTime(); | ||
| let programWindow = endPoint.getTime() - startPoint.getTime(); | ||
| let program_width = ((programWindow / timeWindow)*100); | ||
| let program_width = ((programWindow / timeWindow) * 100); | ||
| return program_width; | ||
| } | ||
|
|
||
| // Taken from timebar.components.ts, but takes string arg, not Date. TODO: Refactor | ||
| toLocalShortTime(date : string) : string { | ||
| let d = new Date(date); | ||
| let ampm = 'AM'; | ||
| let h; | ||
| let m = d.getMinutes().toString().padStart(2, '0'); | ||
| let hour = d.getHours(); | ||
| if (hour == 0) { | ||
| h = 12; | ||
| } else if (hour > 12) { | ||
| h = hour - 12; | ||
| } else { | ||
| h = hour; | ||
| } | ||
| if (hour >= 12) { | ||
| ampm = 'PM'; | ||
| } | ||
| return h + ":" + m + " " + ampm; | ||
| } | ||
|
|
||
| showDetailsDialog() { | ||
| this.displayDetails = true; | ||
| this.editSchedule = true; | ||
| } | ||
| } |
17 changes: 14 additions & 3 deletions
17
mythtv/html/backend/src/app/guide/components/timebar/timebar.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,19 @@ | ||
| <div class="grid"> | ||
| <!-- TODO: Use today or date--> | ||
| <div class="col-1 datebox">{{ 'primeng.today' | translate }}</div> | ||
| <div class="col segmentbox">{{ segmentToStartTime(0) }}</div> | ||
| <div class="col-1 datebox">{{ guide.m_startDate.toLocaleDateString() }}</div> | ||
| <div class="col segmentbox"> | ||
| <div class="flex"> | ||
| <div class="flex-none cursor-pointer" (click)="pageLeft()"><<</div> | ||
| <div class="flex-none"> {{ segmentToStartTime(0) }}</div> | ||
| </div> | ||
| </div> | ||
| <div class="col segmentbox">{{ segmentToStartTime(1) }}</div> | ||
| <div class="col segmentbox">{{ segmentToStartTime(2) }}</div> | ||
| <div class="col segmentbox">{{ segmentToStartTime(3) }}</div> | ||
| <div class="col segmentbox"> | ||
| <div class="flex"> | ||
| <div class="flex-none">{{ segmentToStartTime(3) }}</div> | ||
| <div class="flex-grow-1"> </div> | ||
| <div class="flex-none cursor-pointer" (click)="pageRight()">>></div> | ||
| </div> | ||
| </div> | ||
| </div> |
44 changes: 20 additions & 24 deletions
44
mythtv/html/backend/src/app/guide/components/timebar/timebar.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,38 @@ | ||
| import { Component, OnInit, Input } from '@angular/core'; | ||
| import { TranslateService } from '@ngx-translate/core'; | ||
| import { GuideComponent } from '../../guide.component'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-guide-timebar', | ||
| templateUrl: './timebar.component.html', | ||
| styleUrls: ['./timebar.component.css'] | ||
| }) | ||
| export class TimebarComponent implements OnInit { | ||
| @Input() startTime! : string; | ||
| @Input() guide!: GuideComponent; | ||
|
|
||
| constructor(private translate : TranslateService) { } | ||
| constructor(private translate: TranslateService) { | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| } | ||
|
|
||
| toLocalShortTime(date : Date) : string { | ||
| let d = new Date(date); | ||
| let ampm = 'AM'; | ||
| let h; | ||
| let m = d.getMinutes().toString().padStart(2, '0'); | ||
| let hour = d.getHours(); | ||
| if (hour == 0) { | ||
| h = 12; | ||
| } else if (hour > 12) { | ||
| h = hour - 12; | ||
| } else { | ||
| h = hour; | ||
| } | ||
| if (hour >= 12) { | ||
| ampm = 'PM'; | ||
| } | ||
| return h + ":" + m + " " + ampm; | ||
| segmentToStartTime(segment: number) { | ||
| // let st = new Date(this.startTime); | ||
| const offset = segment * 1800000; /* 30 mins */ | ||
| const t = new Date(this.guide.m_startDate.getTime() + offset); | ||
| // return this.toLocalShortTime(t); | ||
| // Get the locale specific time and remove the seconds | ||
| const tWithSecs = t.toLocaleTimeString() + ' '; | ||
| return tWithSecs.replace(/:.. /, ' '); | ||
| } | ||
|
|
||
| pageLeft() { | ||
| this.guide.m_pickerDate = new Date(this.guide.m_startDate.getTime() - 7200000); | ||
| this.guide.onDatePickerClose(); | ||
| } | ||
|
|
||
| segmentToStartTime(segment : number) { | ||
| let st = new Date(this.startTime); | ||
| const offset = segment * 1800000; /* 30 mins */ | ||
| const t = new Date(st.getTime() + offset); | ||
| return this.toLocalShortTime(t); | ||
| pageRight() { | ||
| this.guide.m_pickerDate = new Date(this.guide.m_startDate.getTime() + 7200000); | ||
| this.guide.onDatePickerClose(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.