52 changes: 30 additions & 22 deletions mythtv/html/backend/src/app/dashboard/upcoming/upcoming.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,7 @@
<div style="white-space: 'pre-line';">
<p-toast position="center"></p-toast>
</div>
<div class="flex">
<h2>{{ 'dashboard.upcoming.heading' | translate }}</h2>
<div class="flex flex-initial">
<div *ngIf="refreshing"><p-progressSpinner [style]="{width: '30px', height: '30px'}"></p-progressSpinner>
</div>
</div>
</div>
<h2>{{ 'dashboard.upcoming.heading' | translate }}</h2>
<div class="block card w-full" style="height: 90vh" *ngIf="recordings else loading">

<p-table [value]="recordings.Programs" scrollHeight="flex" [scrollable]="true" styleClass="p-datatable-striped"
Expand All @@ -19,8 +13,17 @@ <h2>{{ 'dashboard.upcoming.heading' | translate }}</h2>
<tr>
<th>
<p-checkbox inputId="showAllStatuses" [(ngModel)]="showAllStatuses" name="showAllStatuses"
#showAll="ngModel" [binary]="true" (onChange)="refresh()" label="{{ 'dashboard.upcoming.showall' | translate }}">
#showAll="ngModel" [binary]="true" (onChange)="refresh()"
label="{{ 'dashboard.upcoming.showall' | translate }} ">
</p-checkbox>
&nbsp;&nbsp;&nbsp;
<div *ngIf="refreshing else refreshBn"><p-progressSpinner
[style]="{width: '30px', height: '30px'}"></p-progressSpinner></div>
<ng-template #refreshBn>
<button pButton pRipple icon="pi pi-refresh" class="p-button-text .p-button-success"
(click)="refreshing=true;refresh()"
pTooltip="{{ 'common.refresh' | translate }}"></button>
</ng-template>

</th>
</tr>
Expand All @@ -29,8 +32,9 @@ <h2>{{ 'dashboard.upcoming.heading' | translate }}</h2>
{{ 'dashboard.upcoming.date' | translate }} </th>
<th style="flex-grow: 15; flex-basis: 0;" class="justify-content-end p-1">
{{ 'dashboard.upcoming.time' | translate }} </th>
<th style="flex-grow: 10; flex-basis: 0;" class="justify-content-end pl-1 pr-3 pt-1 pb-1"></th>
<th style="flex-grow: 20; flex-basis: 0;" class="p-1">{{ 'dashboard.upcoming.encoder' | translate }} </th>
<th style="flex-grow: 15; flex-basis: 0;" class="justify-content-end pl-1 pr-3 pt-1 pb-1"></th>
<th style="flex-grow: 20; flex-basis: 0;" class="p-1">{{ 'dashboard.upcoming.encoder' | translate }}
</th>
<th style="flex-grow: 40; flex-basis: 0;" class="p-1">
{{ 'dashboard.recordings.title' | translate }}</th>
<th style="flex-grow: 3; flex-basis: 0;" class="p-1"></th>
Expand All @@ -47,26 +51,30 @@ <h2>{{ 'dashboard.upcoming.heading' | translate }}</h2>
{{ 'dashboard.recordings.recgrp' | translate }} </th>
<th style="flex-grow: 18; flex-basis: 0;" class="p-1">
{{ 'dashboard.upcoming.status' | translate }} </th>
<th style="flex-grow: 3; flex-basis: 0;" class="p-1"> <button pButton pRipple
icon="pi pi-pencil" [disabled]="true" class="p-button-text p-button-primary"></button>
<th style="flex-grow: 3; flex-basis: 0;" class="p-1"> <button pButton pRipple icon="pi pi-pencil"
[disabled]="true" class="p-button-text p-button-primary"></button>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-program>
<tr height="40">
<td style="flex-grow: 20; flex-basis: 0;" class="justify-content-end p-1">
{{formatDate(program.StartTime)}}&nbsp;</td>
<td style="flex-grow: 15; flex-basis: 0;" class="justify-content-end p-1">
{{formatTime(program.StartTime)}}&nbsp;</td>
<td style="flex-grow: 10; flex-basis: 0;" class="justify-content-end pl-1 pr-3 pt-1 pb-1">{{
getDuration(program) |
number:'1.0-0' }} min</td>
<tr height="25">
<td style="flex-grow: 20; flex-basis: 0;"
class="justify-content-end p-1 white-space-nowrap overflow-hidden">
{{formatDate(program.StartTime)}}</td>
<td style="flex-grow: 15; flex-basis: 0;"
class="justify-content-end p-1 white-space-nowrap overflow-hidden">
{{formatTime(program.StartTime)}}</td>
<td style="flex-grow: 15; flex-basis: 0;"
class="justify-content-end pl-1 pr-3 pt-1 pb-1 white-space-nowrap overflow-hidden">
{{ getDuration(program) | number:'1.0-0' }} min</td>
<td style="flex-grow: 20; flex-basis: 0;" class="p-1">{{program.Recording.EncoderName}}</td>
<td style="flex-grow: 40; flex-basis: 0;" class="p-1">{{program.Title}}</td>
<td style="flex-grow: 40; flex-basis: 0;" class="p-1 white-space-nowrap overflow-hidden">
{{program.Title}}</td>
<td style="flex-grow: 3; flex-basis: 0;" class="p-1">
<i class="pi pi-eye" *ngIf="program.ProgramFlagNames.indexOf('WATCHED') > -1"></i>
</td>
<td style="flex-grow: 45; flex-basis: 0;" class="p-1">{{program.SubTitle}}</td>
<td style="flex-grow: 45; flex-basis: 0;" class="p-1 white-space-nowrap overflow-hidden">
{{program.SubTitle}}</td>
<td style="flex-grow: 10; flex-basis: 0;" class="p-1">{{program.Season}}x{{program.Episode}}</td>
<td style="flex-grow: 20; flex-basis: 0;" class="justify-content-end p-1">
{{formatDate(program.Airdate)}}</td>
Expand Down
12 changes: 8 additions & 4 deletions mythtv/html/backend/src/app/guide/guide.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,12 @@ <h2>{{ 'dashboard.programguide' | translate }} </h2>
</p-calendar>
</div>
<div class="flex flex-initial">
<div *ngIf="refreshing"><p-progressSpinner
<div *ngIf="refreshing else refreshBn"><p-progressSpinner
[style]="{width: '30px', height: '30px'}"></p-progressSpinner></div>
<ng-template #refreshBn>
<button pButton pRipple icon="pi pi-refresh" class="p-button-text .p-button-success"
(click)="refreshing=true;refresh()" pTooltip="{{ 'common.refresh' | translate }}"></button>
</ng-template>
</div>
</div>
</ng-template>
Expand All @@ -28,11 +32,11 @@ <h2>{{ 'dashboard.programguide' | translate }} </h2>
</div>
<div class="col">
<ng-container *ngFor="let program of channelrow.Programs">
<ng-container *ngIf="!refreshing && inDisplayWindow(program.StartTime, program.EndTime)">
<ng-container *ngIf="!timeChange && inDisplayWindow(program.StartTime, program.EndTime)">
<app-guide-programentry [program]="program"
[guideStartTime]="m_programGuide.ProgramGuide.StartTime"
[guideEndTime]="m_programGuide.ProgramGuide.EndTime"
[guideComponent]="this" [channel]="channelrow">
[guideEndTime]="m_programGuide.ProgramGuide.EndTime" [guideComponent]="this"
[channel]="channelrow">
</app-guide-programentry>
</ng-container>
</ng-container>
Expand Down
8 changes: 6 additions & 2 deletions mythtv/html/backend/src/app/guide/guide.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export class GuideComponent implements OnInit, SchedulerSummary {
m_programGuide!: ProgramGuide;
loaded = false;
refreshing = false;
timeChange = false;
inter: ScheduleLink = { summaryComponent: this };

constructor(private guideService: GuideService,
Expand Down Expand Up @@ -65,6 +66,7 @@ export class GuideComponent implements OnInit, SchedulerSummary {
this.m_channelTotal = data.ProgramGuide.TotalAvailable;
this.loaded = true;
this.refreshing = false;
this.timeChange = false;
});
}

Expand All @@ -88,12 +90,14 @@ export class GuideComponent implements OnInit, SchedulerSummary {
else
this.m_startDate = new Date();
console.log("New time is " + this.m_startDate);
this.refreshing = true;
this.timeChange = true;
this.refresh();
}

refresh() : void {
if (this.m_startDate)
if (this.m_startDate) {
this.fetchData(this.m_startDate);
this.refreshing = true;
}
}
}