127 lines
4.1 KiB
HTML
127 lines
4.1 KiB
HTML
<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>
|
|
</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"
|
|
[class.active]="
|
|
show.presentationSongId === song.id &&
|
|
show.presentationSection === i
|
|
"
|
|
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">
|
|
<div *ngIf="show"
|
|
[class.active]="show.presentationSongId === 'dynamicText'"
|
|
class="title song-part"
|
|
>
|
|
<div (click)="onSectionClick('dynamicText', -1, show.id)" class="head">
|
|
Freier Text
|
|
</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>
|