migrate angular 21
This commit is contained in:
@@ -1,126 +1,128 @@
|
||||
<div *ngIf="show" @fade>
|
||||
<app-card [closeIcon]="faIcon" [heading]="show.showType | showType"
|
||||
[subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
|
||||
|
||||
<ng-container *ngIf="!progress">
|
||||
<div class="song">
|
||||
<div *ngIf="show" class="song-parts">
|
||||
<div
|
||||
(click)="onSectionClick('title', -1, show.id)"
|
||||
[class.active]="show.presentationSongId === 'title'"
|
||||
class="song-part"
|
||||
>
|
||||
<div class="head">Veranstaltung</div>
|
||||
</div>
|
||||
<div
|
||||
(click)="onSectionClick('empty', -1, show.id)"
|
||||
[class.active]="show.presentationSongId === 'empty'"
|
||||
class="song-part"
|
||||
>
|
||||
<div class="head">Leer</div>
|
||||
</div>
|
||||
@if (show) {
|
||||
<div @fade>
|
||||
<app-card [closeIcon]="faIcon" [heading]="show.showType | showType"
|
||||
[subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
|
||||
@if (!progress) {
|
||||
<div class="song">
|
||||
@if (show) {
|
||||
<div class="song-parts">
|
||||
<div
|
||||
(click)="onSectionClick('title', -1, show.id)"
|
||||
[class.active]="show.presentationSongId === 'title'"
|
||||
class="song-part"
|
||||
>
|
||||
<div class="head">Veranstaltung</div>
|
||||
</div>
|
||||
<div
|
||||
(click)="onSectionClick('empty', -1, show.id)"
|
||||
[class.active]="show.presentationSongId === 'empty'"
|
||||
class="song-part"
|
||||
>
|
||||
<div class="head">Leer</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngFor="let song of presentationSongs; trackBy: trackBy" class="song">
|
||||
<div *ngIf="show"
|
||||
[class.active]="show.presentationSongId === song.id"
|
||||
class="title song-part"
|
||||
>
|
||||
<div (click)="onSectionClick(song.id, -1, show.id)" class="head">
|
||||
{{ song.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="show" class="song-parts">
|
||||
<div
|
||||
(click)="onSectionClick(song.id, i, show.id)"
|
||||
*ngFor="let section of song.sections; index as i"
|
||||
@for (song of presentationSongs; track trackBy($index, song)) {
|
||||
<div class="song">
|
||||
@if (show) {
|
||||
<div
|
||||
[class.active]="show.presentationSongId === song.id"
|
||||
class="title song-part"
|
||||
>
|
||||
<div (click)="onSectionClick(song.id, -1, show.id)" class="head">
|
||||
{{ song.title }}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (show) {
|
||||
<div class="song-parts">
|
||||
@for (section of song.sections; track section; let i = $index) {
|
||||
<div
|
||||
(click)="onSectionClick(song.id, i, show.id)"
|
||||
[class.active]="
|
||||
show.presentationSongId === song.id &&
|
||||
show.presentationSection === i
|
||||
"
|
||||
class="song-part"
|
||||
>
|
||||
<div class="head">
|
||||
{{ section.type | sectionType }} {{ section.number + 1 }}
|
||||
class="song-part"
|
||||
>
|
||||
<div class="head">
|
||||
{{ section.type | sectionType }} {{ section.number + 1 }}
|
||||
</div>
|
||||
<div class="fragment">{{ getFirstLine(section) }}</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div class="song">
|
||||
@if (show) {
|
||||
<div
|
||||
[class.active]="show.presentationSongId === 'dynamicText'"
|
||||
class="title song-part"
|
||||
>
|
||||
<div (click)="onSectionClick('dynamicText', -1, show.id)" class="head">
|
||||
Freier Text
|
||||
</div>
|
||||
</div>
|
||||
<div class="fragment">{{ getFirstLine(section) }}</div>
|
||||
</div>
|
||||
}
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Überschrift</mat-label>
|
||||
<input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
|
||||
autocomplete="off" id="dynamic-caption"
|
||||
matInput
|
||||
type="text">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Text</mat-label>
|
||||
<textarea (ngModelChange)="onDynamicText($event, show.id)" [ngModel]="show.presentationDynamicText"
|
||||
autocomplete="off" id="dynamic-text"
|
||||
matInput></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="song">
|
||||
<div *ngIf="show"
|
||||
[class.active]="show.presentationSongId === 'dynamicText'"
|
||||
class="title song-part"
|
||||
>
|
||||
<div (click)="onSectionClick('dynamicText', -1, show.id)" class="head">
|
||||
Freier Text
|
||||
@if (show) {
|
||||
<div class="div-bottom">
|
||||
<button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
|
||||
<fa-icon [icon]="faDesktop"></fa-icon>
|
||||
Präsentation starten
|
||||
</button>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Hintergrund</mat-label>
|
||||
<mat-select
|
||||
(ngModelChange)="onBackground($event, show.id)"
|
||||
[ngModel]="show.presentationBackground">
|
||||
<mat-option value="none">kein Hintergrund</mat-option>
|
||||
<mat-option value="blue">Sternenhimmel</mat-option>
|
||||
<mat-option value="green">Blätter</mat-option>
|
||||
<mat-option value="leder">Leder</mat-option>
|
||||
<mat-option value="praise">Lobpreis</mat-option>
|
||||
<mat-option value="bible">Bibel</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-slider
|
||||
#slider
|
||||
[max]="100"
|
||||
[min]="10"
|
||||
[step]="2"
|
||||
class="zoom-slider"
|
||||
color="primary"
|
||||
ngDefaultControl
|
||||
><input (ngModelChange)="onZoom($event, show.id)"
|
||||
[ngModel]="show.presentationZoom"
|
||||
matSliderThumb>
|
||||
</mat-slider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Überschrift</mat-label>
|
||||
<input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
|
||||
autocomplete="off" id="dynamic-caption"
|
||||
matInput
|
||||
type="text">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Text</mat-label>
|
||||
<textarea (ngModelChange)="onDynamicText($event, show.id)" [ngModel]="show.presentationDynamicText"
|
||||
autocomplete="off" id="dynamic-text"
|
||||
matInput></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="show" class="div-bottom">
|
||||
|
||||
<button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
|
||||
<fa-icon [icon]="faDesktop"></fa-icon>
|
||||
Präsentation starten
|
||||
</button>
|
||||
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Hintergrund</mat-label>
|
||||
<mat-select
|
||||
(ngModelChange)="onBackground($event, show.id)"
|
||||
[ngModel]="show.presentationBackground">
|
||||
<mat-option value="none">kein Hintergrund</mat-option>
|
||||
<mat-option value="blue">Sternenhimmel</mat-option>
|
||||
<mat-option value="green">Blätter</mat-option>
|
||||
<mat-option value="leder">Leder</mat-option>
|
||||
<mat-option value="praise">Lobpreis</mat-option>
|
||||
<mat-option value="bible">Bibel</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-slider
|
||||
#slider
|
||||
[max]="100"
|
||||
[min]="10"
|
||||
[step]="2"
|
||||
class="zoom-slider"
|
||||
color="primary"
|
||||
ngDefaultControl
|
||||
><input (ngModelChange)="onZoom($event, show.id)"
|
||||
[ngModel]="show.presentationZoom"
|
||||
matSliderThumb>
|
||||
</mat-slider>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<app-add-song
|
||||
*ngIf="show"
|
||||
[addedLive]="true"
|
||||
[showSongs]="showSongs"
|
||||
[show]="show"
|
||||
[songs]="songs$|async"
|
||||
></app-add-song>
|
||||
</ng-container>
|
||||
</app-card>
|
||||
</div>
|
||||
}
|
||||
@if (show) {
|
||||
<app-add-song
|
||||
[addedLive]="true"
|
||||
[showSongs]="showSongs"
|
||||
[show]="show"
|
||||
[songs]="songs$|async"
|
||||
></app-add-song>
|
||||
}
|
||||
}
|
||||
</app-card>
|
||||
</div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user