mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-08 17:06:15 -08:00
4gray
400f97baf4
Ref the EPG item to directly display the category and description values instead of accessing the first element of the arrays. Update the EpgListComponent to improve the handling of EPG data and selected date filtering. Change references from Electron to Tauri in the component to reflect the current framework usage.
145 lines
4.9 KiB
HTML
145 lines
4.9 KiB
HTML
<div id="epg-navigation">
|
|
<button
|
|
[matTooltip]="'CLOSE' | translate"
|
|
mat-button
|
|
(click)="close()"
|
|
color="accent"
|
|
>
|
|
<mat-icon>close</mat-icon> {{ 'CLOSE' | translate }}
|
|
</button>
|
|
<button
|
|
[matTooltip]="'EPG.NEXT_DAY' | translate"
|
|
mat-icon-button
|
|
(click)="switchDay('prev')"
|
|
>
|
|
<mat-icon>navigate_before</mat-icon>
|
|
</button>
|
|
<button
|
|
[matTooltip]="'EPG.PREVIOUS_DAY' | translate"
|
|
mat-icon-button
|
|
(click)="switchDay('next')"
|
|
>
|
|
<mat-icon>navigate_next</mat-icon>
|
|
</button>
|
|
<div class="today-date">
|
|
{{ today | momentDate: 'YYYYMMDD' : 'MMMM Do, dddd' }}
|
|
</div>
|
|
<button mat-icon-button (click)="zoomIn()" [disabled]="hourWidth >= 800">
|
|
<mat-icon>zoom_in</mat-icon>
|
|
</button>
|
|
<button mat-icon-button [disabled]="hourWidth <= 50" (click)="zoomOut()">
|
|
<mat-icon>zoom_out</mat-icon>
|
|
</button>
|
|
<button
|
|
mat-button
|
|
[disabled]="channelsLowerRange === 0"
|
|
(click)="previousChannels()"
|
|
>
|
|
Previous channels
|
|
</button>
|
|
<button mat-button (click)="nextChannels()">Next channels</button>
|
|
</div>
|
|
<div class="parent" #epgContainer>
|
|
<svg id="channels-column">
|
|
<g *ngFor="let item of channels; let i = index">
|
|
<!-- channel name -->
|
|
<g class="channel">
|
|
<rect
|
|
width="100"
|
|
[attr.height]="barHeight"
|
|
[attr.y]="barHeight * i + barHeight"
|
|
stroke="black"
|
|
></rect>
|
|
@if (item.icon) {
|
|
<image
|
|
[attr.y]="barHeight * i + barHeight + 1"
|
|
[attr.href]="item.icon"
|
|
[attr.height]="barHeight - 2"
|
|
width="100"
|
|
[matTooltip]="item.name"
|
|
></image>
|
|
}
|
|
@if (!item.icon) {
|
|
<foreignObject
|
|
[attr.y]="barHeight * i + barHeight"
|
|
width="100"
|
|
[attr.height]="barHeight"
|
|
>
|
|
<div class="channel-name">
|
|
{{ item.name }}
|
|
</div>
|
|
</foreignObject>
|
|
}
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<div id="epg-container">
|
|
<svg [attr.width]="24 * hourWidth" height="100%" id="epg-svg">
|
|
<!-- time headline -->
|
|
<g *ngFor="let a of timeHeader; let i = index">
|
|
<rect
|
|
[matTooltip]="i + ':00'"
|
|
[attr.width]="hourWidth"
|
|
[attr.height]="barHeight"
|
|
[attr.x]="i * hourWidth"
|
|
fill="#000"
|
|
></rect>
|
|
<text
|
|
[attr.x]="i * hourWidth"
|
|
y="10"
|
|
font-size="14"
|
|
fill="white"
|
|
transform="translate(20,20)"
|
|
>
|
|
{{ i }}:00
|
|
</text>
|
|
</g>
|
|
|
|
<!-- epg channels with programs -->
|
|
<g *ngFor="let item of channels; let i = index">
|
|
<g
|
|
*ngFor="let program of item.programs; let a = index"
|
|
[matTooltip]="program.title"
|
|
class="program-item"
|
|
>
|
|
<!-- program item -->
|
|
<rect
|
|
[attr.width]="program.width"
|
|
[attr.height]="barHeight"
|
|
[attr.x]="program.startPosition"
|
|
[attr.y]="barHeight * i + barHeight"
|
|
fill="#000"
|
|
></rect>
|
|
<foreignObject
|
|
(click)="showDescription(program)"
|
|
[attr.width]="program.width"
|
|
[attr.height]="barHeight"
|
|
[attr.y]="barHeight * i + barHeight"
|
|
[attr.x]="program.startPosition"
|
|
>
|
|
<div
|
|
[innerHtml]="program.title"
|
|
class="program-name"
|
|
></div>
|
|
</foreignObject>
|
|
</g>
|
|
<line
|
|
[attr.x1]="0"
|
|
[attr.y1]="barHeight * i + barHeight"
|
|
[attr.x2]="24 * hourWidth"
|
|
[attr.y2]="barHeight * i + barHeight"
|
|
stroke="#676767"
|
|
/>
|
|
</g>
|
|
<line
|
|
[attr.x1]="currentTimeLine"
|
|
[attr.y1]="barHeight"
|
|
[attr.x2]="currentTimeLine"
|
|
id="current-time-line"
|
|
y2="1000"
|
|
stroke="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|