fix linting
This commit is contained in:
@@ -1,13 +1,10 @@
|
||||
<div class="frame">
|
||||
<app-brand class="brand"></app-brand>
|
||||
@if (user$ | async; as user) {
|
||||
<div class="text">
|
||||
<div class="welcome">WILLKOMMEN</div>
|
||||
<div class="name">{{ user.name }}</div>
|
||||
<div class="roles">
|
||||
Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den
|
||||
Administrator!
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="welcome">WILLKOMMEN</div>
|
||||
<div class="name">{{ user.name }}</div>
|
||||
<div class="roles">Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den Administrator!</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -1,28 +1,23 @@
|
||||
@if (show$|async; as show) {
|
||||
<div class="page">
|
||||
<div class="title">
|
||||
<div class="left">{{ show.showType|showType }}</div>
|
||||
<div class="right">{{ show.date.toDate() | date: 'dd.MM.yyyy' }}</div>
|
||||
</div>
|
||||
<div class="view">
|
||||
<swiper-container scrollbar="true">
|
||||
@for (song of show.songs; track trackBy(i, song); let i = $index) {
|
||||
<swiper-slide
|
||||
class="song-swipe">
|
||||
<div class="song-title">{{ song.title }}</div>
|
||||
<div class="legal">
|
||||
@if (song.artist) {
|
||||
<p>{{ song.artist }}</p>
|
||||
}
|
||||
</div>
|
||||
<app-song-text
|
||||
[text]="song.text"
|
||||
></app-song-text>
|
||||
</swiper-slide>
|
||||
}
|
||||
</swiper-container>
|
||||
</div>
|
||||
<div class="page">
|
||||
<div class="title">
|
||||
<div class="left">{{ show.showType|showType }}</div>
|
||||
<div class="right">{{ show.date.toDate() | date: 'dd.MM.yyyy' }}</div>
|
||||
</div>
|
||||
<div class="view">
|
||||
<swiper-container scrollbar="true">
|
||||
@for (song of show.songs; track trackBy(i, song); let i = $index) {
|
||||
<swiper-slide class="song-swipe">
|
||||
<div class="song-title">{{ song.title }}</div>
|
||||
<div class="legal">
|
||||
@if (song.artist) {
|
||||
<p>{{ song.artist }}</p>
|
||||
}
|
||||
</div>
|
||||
<app-song-text [text]="song.text"></app-song-text>
|
||||
</swiper-slide>
|
||||
}
|
||||
</swiper-container>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,27 +1,17 @@
|
||||
@if (song) {
|
||||
@if (song.artist) {
|
||||
<p>{{ song.artist }}</p>
|
||||
@if (song) { @if (song.artist) {
|
||||
<p>{{ song.artist }}</p>
|
||||
} @if (song.label) {
|
||||
<p>{{ song.label }}</p>
|
||||
} @if (song.termsOfUse) {
|
||||
<p class="terms-of-use">{{ song.termsOfUse }}</p>
|
||||
} @if (song.origin) {
|
||||
<p>{{ song.origin }}</p>
|
||||
} @if (song.legalOwnerId) {
|
||||
<div>
|
||||
@if (song.legalOwner === 'CCLI' && config) {
|
||||
<p>CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer {{ config.ccliLicenseId }}</p>
|
||||
} @if (song.legalOwner !== 'CCLI') {
|
||||
<p>Liednummer {{ song.legalOwnerId }}</p>
|
||||
}
|
||||
@if (song.label) {
|
||||
<p>{{ song.label }}</p>
|
||||
}
|
||||
@if (song.termsOfUse) {
|
||||
<p class="terms-of-use">{{ song.termsOfUse }}</p>
|
||||
}
|
||||
@if (song.origin) {
|
||||
<p>{{ song.origin }}</p>
|
||||
}
|
||||
@if (song.legalOwnerId) {
|
||||
<div>
|
||||
@if (song.legalOwner === 'CCLI' && config) {
|
||||
<p>
|
||||
CCLI-Liednummer {{ song.legalOwnerId }}, CCLI-Lizenznummer
|
||||
{{ config.ccliLicenseId }}
|
||||
</p>
|
||||
}
|
||||
@if (song.legalOwner !== 'CCLI') {
|
||||
<p>Liednummer {{ song.legalOwnerId }}</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
} }
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
@@ -1,50 +1,43 @@
|
||||
<div class="fullscreen background"></div>
|
||||
@if (showType) {
|
||||
<div [style.font-size.px]="zoom" class="fullscreen background">
|
||||
<div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>
|
||||
<div
|
||||
[@songSwitch]="songId"
|
||||
[class.blur]="songId === 'title' || songId === 'dynamicText'"
|
||||
[class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
|
||||
[class.no-logo]="presentationBackground!=='none'"
|
||||
class="start fullscreen logo"
|
||||
>
|
||||
<app-logo></app-logo>
|
||||
</div>
|
||||
@if (songId === 'title') {
|
||||
<div @songSwitch class="start fullscreen">
|
||||
<div>{{ showType | showType }}</div>
|
||||
<div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (songId === 'dynamicText') {
|
||||
<div @songSwitch class="start fullscreen dynamic-text">
|
||||
<div>{{ presentationDynamicCaption }}</div>
|
||||
<div class="date">{{ presentationDynamicText }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
|
||||
<app-song-text
|
||||
[@songSwitch]="songId"
|
||||
[fullscreen]="true"
|
||||
[header]="song.title"
|
||||
[index]="index??0"
|
||||
[showComments]="false"
|
||||
[showSwitch]="false"
|
||||
[text]="song.text"
|
||||
chordMode="hide"
|
||||
></app-song-text>
|
||||
}
|
||||
@if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
|
||||
<app-legal
|
||||
[@songSwitch]="songId"
|
||||
[config]="config$ | async"
|
||||
[song]="song"
|
||||
></app-legal>
|
||||
}
|
||||
<div [style.font-size.px]="zoom" class="fullscreen background">
|
||||
<div [class.visible]="presentationBackground==='blue'" class="bg-blue fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='green'" class="bg-green fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='leder'" class="bg-leder fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='praise'" class="bg-praise fullscreen bg-image"></div>
|
||||
<div [class.visible]="presentationBackground==='bible'" class="bg-bible fullscreen bg-image"></div>
|
||||
<div
|
||||
[@songSwitch]="songId"
|
||||
[class.blur]="songId === 'title' || songId === 'dynamicText'"
|
||||
[class.hide]="songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText'"
|
||||
[class.no-logo]="presentationBackground!=='none'"
|
||||
class="start fullscreen logo"
|
||||
>
|
||||
<app-logo></app-logo>
|
||||
</div>
|
||||
@if (songId === 'title') {
|
||||
<div @songSwitch class="start fullscreen">
|
||||
<div>{{ showType | showType }}</div>
|
||||
<div class="date">{{ date | date: "dd.MM.yyyy" }}</div>
|
||||
</div>
|
||||
} @if (songId === 'dynamicText') {
|
||||
<div @songSwitch class="start fullscreen dynamic-text">
|
||||
<div>{{ presentationDynamicCaption }}</div>
|
||||
<div class="date">{{ presentationDynamicText }}</div>
|
||||
</div>
|
||||
} @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
|
||||
<app-song-text
|
||||
[@songSwitch]="songId"
|
||||
[fullscreen]="true"
|
||||
[header]="song.title"
|
||||
[index]="index??0"
|
||||
[showComments]="false"
|
||||
[showSwitch]="false"
|
||||
[text]="song.text"
|
||||
chordMode="hide"
|
||||
></app-song-text>
|
||||
} @if (song && songId !== 'title' && songId !== 'empty' && songId !== 'dynamicText') {
|
||||
<app-legal [@songSwitch]="songId" [config]="config$ | async" [song]="song"></app-legal>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,128 +1,83 @@
|
||||
@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 @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>
|
||||
@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.type + '-' + section.number + '-' + $index; let i = $index) {
|
||||
<div
|
||||
(click)="onSectionClick(song.id, i, show.id)"
|
||||
[class.active]="
|
||||
<div (click)="onSectionClick('empty', -1, show.id)" [class.active]="show.presentationSongId === 'empty'" class="song-part">
|
||||
<div class="head">Leer</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@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.type + '-' + section.number + '-' + $index; 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 }}
|
||||
</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>
|
||||
}
|
||||
<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>
|
||||
class="song-part"
|
||||
>
|
||||
<div class="head">{{ section.type | sectionType }} {{ section.number + 1 }}</div>
|
||||
<div class="fragment">{{ getFirstLine(section) }}</div>
|
||||
</div>
|
||||
@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>
|
||||
}
|
||||
@if (show) {
|
||||
<app-add-song
|
||||
[addedLive]="true"
|
||||
[showSongs]="showSongs"
|
||||
[show]="show"
|
||||
[songs]="songs$|async"
|
||||
></app-add-song>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</app-card>
|
||||
</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>
|
||||
}
|
||||
<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>
|
||||
@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>
|
||||
} @if (show) {
|
||||
<app-add-song [addedLive]="true" [showSongs]="showSongs" [show]="show" [songs]="songs$|async"></app-add-song>
|
||||
} }
|
||||
</app-card>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,25 +1,20 @@
|
||||
@if (shows$ | async; as shows) {
|
||||
<div @fade>
|
||||
@if (visible) {
|
||||
<app-card heading="Bitte eine Veranstaltung auswählen">
|
||||
@if (!shows.length) {
|
||||
<p>
|
||||
Es ist derzeit keine Veranstaltung vorhanden
|
||||
</p>
|
||||
}
|
||||
@if (shows.length>0) {
|
||||
<div class="list">
|
||||
@for (show of shows; track show.id) {
|
||||
<button (click)="selectShow(show)" mat-stroked-button>
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
,
|
||||
{{ show.showType | showType }},
|
||||
{{ show.date.toDate() | date: "dd.MM.yyyy" }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</app-card>
|
||||
<div @fade>
|
||||
@if (visible) {
|
||||
<app-card heading="Bitte eine Veranstaltung auswählen">
|
||||
@if (!shows.length) {
|
||||
<p>Es ist derzeit keine Veranstaltung vorhanden</p>
|
||||
} @if (shows.length>0) {
|
||||
<div class="list">
|
||||
@for (show of shows; track show.id) {
|
||||
<button (click)="selectShow(show)" mat-stroked-button>
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
, {{ show.showType | showType }}, {{ show.date.toDate() | date: "dd.MM.yyyy" }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</app-card>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -3,7 +3,5 @@
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<button [mat-dialog-close]="false" mat-button>Abbrechen</button>
|
||||
<button [mat-dialog-close]="true" cdkFocusInitial mat-button>
|
||||
Archivieren
|
||||
</button>
|
||||
<button [mat-dialog-close]="true" cdkFocusInitial mat-button>Archivieren</button>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<div mat-dialog-content>
|
||||
<p>
|
||||
Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt dafür, dass Songwriter und Verlage korrekt vergütet werden.
|
||||
</p>
|
||||
<p>Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt dafür, dass Songwriter und Verlage korrekt vergütet werden.</p>
|
||||
<p>
|
||||
Die Meldung erfolgt über
|
||||
<a [href]="reportingUrl" rel="noreferrer" target="_blank">{{ reportingUrl }}</a>.
|
||||
@@ -14,31 +12,29 @@
|
||||
</div>
|
||||
|
||||
@for (song of data.songs; track song.title + song.ccliNumber) {
|
||||
<div class="list-item">
|
||||
<div>{{ song.title }}</div>
|
||||
<div class="number-cell">
|
||||
<span>{{ song.ccliNumber }}</span>
|
||||
<a
|
||||
(click)="markOpened(song.ccliNumber)"
|
||||
[attr.aria-label]="'CCLI-Titel melden: ' + song.title"
|
||||
[href]="getSongReportingUrl(song.ccliNumber)"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
class="btn-icon report-link"
|
||||
>
|
||||
<fa-icon [icon]="faOpen"></fa-icon>
|
||||
</a>
|
||||
@if (wasOpened(song.ccliNumber)) {
|
||||
<fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="list-item">
|
||||
<div>{{ song.title }}</div>
|
||||
<div class="number-cell">
|
||||
<span>{{ song.ccliNumber }}</span>
|
||||
<a
|
||||
(click)="markOpened(song.ccliNumber)"
|
||||
[attr.aria-label]="'CCLI-Titel melden: ' + song.title"
|
||||
[href]="getSongReportingUrl(song.ccliNumber)"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
class="btn-icon report-link"
|
||||
>
|
||||
<fa-icon [icon]="faOpen"></fa-icon>
|
||||
</a>
|
||||
@if (wasOpened(song.ccliNumber)) {
|
||||
<fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<button [mat-dialog-close]="false" mat-button>Abbrechen</button>
|
||||
<button [mat-dialog-close]="true" cdkFocusInitial mat-button>
|
||||
Alle CCLI-Titel wurden gemeldet
|
||||
</button>
|
||||
<button [mat-dialog-close]="true" cdkFocusInitial mat-button>Alle CCLI-Titel wurden gemeldet</button>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,8 @@
|
||||
<div mat-dialog-content>
|
||||
<a [href]="data.url">{{ data.url }}</a>
|
||||
<div [style.background-image]="'url('+qrCode+')'" alt="qrcode" class="qrcode">
|
||||
</div>
|
||||
<div [style.background-image]="'url('+qrCode+')'" alt="qrcode" class="qrcode"></div>
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<button [mat-dialog-close]="true" cdkFocusInitial mat-button>
|
||||
Schließen
|
||||
</button>
|
||||
<button (click)="share()" mat-button>
|
||||
Teilen
|
||||
</button>
|
||||
<button [mat-dialog-close]="true" cdkFocusInitial mat-button>Schließen</button>
|
||||
<button (click)="share()" mat-button>Teilen</button>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@ export class ShareDialogComponent {
|
||||
const data = this.data;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
|
||||
QRCode.toDataURL(data.url, {
|
||||
void QRCode.toDataURL(data.url, {
|
||||
type: 'image/jpeg',
|
||||
quality: 0.92,
|
||||
width: 1280,
|
||||
|
||||
@@ -6,18 +6,12 @@
|
||||
<mat-select formControlName="showType">
|
||||
<mat-optgroup label="öffentlich">
|
||||
@for (key of showTypePublic; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | showType
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="key">{{ key | showType }} </mat-option>
|
||||
}
|
||||
</mat-optgroup>
|
||||
<mat-optgroup label="privat">
|
||||
@for (key of showTypePrivate; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | showType
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="key">{{ key | showType }} </mat-option>
|
||||
}
|
||||
</mat-optgroup>
|
||||
</mat-select>
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
<div [formGroup]="filterFormGroup">
|
||||
|
||||
<div class="third">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Zeitraum</mat-label>
|
||||
<mat-select formControlName="time">
|
||||
@for (time of times; track time) {
|
||||
<mat-option [value]="time.key">{{
|
||||
time.value
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="time.key">{{ time.value }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
@@ -18,10 +14,7 @@
|
||||
<mat-select formControlName="owner">
|
||||
<mat-option value="">Alle</mat-option>
|
||||
@for (owner of owners; track owner) {
|
||||
<mat-option [value]="owner.key">{{
|
||||
owner.value
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="owner.key">{{ owner.value }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
@@ -32,23 +25,16 @@
|
||||
<mat-option value="">Alle</mat-option>
|
||||
<mat-optgroup label="öffentlich">
|
||||
@for (key of showTypePublic; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | showType
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="key">{{ key | showType }} </mat-option>
|
||||
}
|
||||
</mat-optgroup>
|
||||
<mat-optgroup label="privat">
|
||||
@for (key of showTypePrivate; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | showType
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="key">{{ key | showType }} </mat-option>
|
||||
}
|
||||
</mat-optgroup>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<i>Anzahl der Suchergebnisse: {{ shows?.length ?? 0 }}</i>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
@if (show) {
|
||||
<div class="list-item">
|
||||
<div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
|
||||
<div>
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
</div>
|
||||
<div>{{ show.showType | showType }}</div>
|
||||
<div>
|
||||
@if (showStatusBadge) {
|
||||
<app-badge [type]="showStatusBadgeType">{{ showStatusBadge }}</app-badge>
|
||||
}
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
|
||||
<div>
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
</div>
|
||||
<div>{{ show.showType | showType }}</div>
|
||||
<div>
|
||||
@if (showStatusBadge) {
|
||||
<app-badge [type]="showStatusBadgeType">{{ showStatusBadge }}</app-badge>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -2,43 +2,30 @@
|
||||
<!-- <app-list-header *appRole="['leader']"></app-list-header>-->
|
||||
<app-list-header *appRole="['leader']">
|
||||
@if (shows$ | async; as shows) {
|
||||
<app-filter [shows]="publicShows$ | async"></app-filter>
|
||||
<app-filter [shows]="publicShows$ | async"></app-filter>
|
||||
}
|
||||
</app-list-header>
|
||||
|
||||
<ng-container *appRole="['leader']">
|
||||
@if (privateShows$ | async; as shows) {
|
||||
@if (shows.length > 0) {
|
||||
<app-card
|
||||
[padding]="false"
|
||||
heading="Meine Veranstaltungen"
|
||||
>
|
||||
@for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
|
||||
<app-list-item
|
||||
[routerLink]="show.id"
|
||||
[showStatusBadge]="show.published ? 'nicht gemeldet' : 'unveröffentlicht'"
|
||||
[showStatusBadgeType]="show.published ? 'error' : 'none'"
|
||||
[show]="show"
|
||||
></app-list-item>
|
||||
}
|
||||
</app-card>
|
||||
@if (privateShows$ | async; as shows) { @if (shows.length > 0) {
|
||||
<app-card [padding]="false" heading="Meine Veranstaltungen">
|
||||
@for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
|
||||
<app-list-item
|
||||
[routerLink]="show.id"
|
||||
[showStatusBadge]="show.published ? 'nicht gemeldet' : 'unveröffentlicht'"
|
||||
[showStatusBadgeType]="show.published ? 'error' : 'none'"
|
||||
[show]="show"
|
||||
></app-list-item>
|
||||
}
|
||||
}
|
||||
</app-card>
|
||||
} }
|
||||
</ng-container>
|
||||
|
||||
@if (publicShows$ | async; as shows) {
|
||||
@if (shows.length > 0) {
|
||||
<app-card
|
||||
[padding]="false"
|
||||
heading="Veröffentlichte Veranstaltungen"
|
||||
>
|
||||
@for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
|
||||
<app-list-item
|
||||
[routerLink]="show.id"
|
||||
[show]="show"
|
||||
></app-list-item>
|
||||
}
|
||||
</app-card>
|
||||
@if (publicShows$ | async; as shows) { @if (shows.length > 0) {
|
||||
<app-card [padding]="false" heading="Veröffentlichte Veranstaltungen">
|
||||
@for (show of shows | sortBy: 'desc':'date'; track trackBy($index, show)) {
|
||||
<app-list-item [routerLink]="show.id" [show]="show"></app-list-item>
|
||||
}
|
||||
}
|
||||
</app-card>
|
||||
} }
|
||||
</div>
|
||||
|
||||
@@ -34,11 +34,7 @@ export class ListComponent {
|
||||
public showType$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.showType));
|
||||
public shows$ = this.showService.list$();
|
||||
public privateShows$ = combineLatest([this.shows$, this.userService.user$]).pipe(
|
||||
map(([shows, user]) =>
|
||||
shows
|
||||
.filter(show => show.owner === user?.id)
|
||||
.filter(show => !show.published || show.reportedType === 'pending')
|
||||
)
|
||||
map(([shows, user]) => shows.filter(show => show.owner === user?.id).filter(show => !show.published || show.reportedType === 'pending'))
|
||||
);
|
||||
public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths)));
|
||||
public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
|
||||
|
||||
@@ -6,18 +6,12 @@
|
||||
<mat-select formControlName="showType">
|
||||
<mat-optgroup label="öffentlich">
|
||||
@for (key of showTypePublic; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | showType
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="key">{{ key | showType }} </mat-option>
|
||||
}
|
||||
</mat-optgroup>
|
||||
<mat-optgroup label="privat">
|
||||
@for (key of showTypePrivate; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | showType
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="key">{{ key | showType }} </mat-option>
|
||||
}
|
||||
</mat-optgroup>
|
||||
</mat-select>
|
||||
|
||||
@@ -16,11 +16,9 @@ describe('ShowService', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
user$ = new BehaviorSubject<unknown>({id: 'user-1'});
|
||||
showDataServiceSpy = jasmine.createSpyObj<ShowDataService>(
|
||||
'ShowDataService',
|
||||
['read$', 'listPublicSince$', 'update', 'add'],
|
||||
{list$: of(shows) as unknown as ShowDataService['list$']}
|
||||
);
|
||||
showDataServiceSpy = jasmine.createSpyObj<ShowDataService>('ShowDataService', ['read$', 'listPublicSince$', 'update', 'add'], {
|
||||
list$: of(shows) as unknown as ShowDataService['list$'],
|
||||
});
|
||||
showDataServiceSpy.read$.and.returnValue(of(shows[0]));
|
||||
showDataServiceSpy.listPublicSince$.and.returnValue(of([shows[1]]));
|
||||
showDataServiceSpy.update.and.resolveTo();
|
||||
|
||||
@@ -1,148 +1,110 @@
|
||||
@if (show$ | async; as show) {
|
||||
<div>
|
||||
<app-card
|
||||
[fullscreen]="useSwiper"
|
||||
closeLink="../"
|
||||
<div>
|
||||
<app-card
|
||||
[fullscreen]="useSwiper"
|
||||
closeLink="../"
|
||||
heading="{{ show.showType | showType }}, {{
|
||||
show.date.toDate() | date: 'dd.MM.yyyy'
|
||||
}} - {{ getStatus(show) }}"
|
||||
>
|
||||
@if (!useSwiper) {
|
||||
<p class="show-meta">{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
<ng-container *appOwner="show.owner">
|
||||
<app-badge [type]="getPublishedBadgeType(show)">{{ show.published | publishedType }}</app-badge>
|
||||
@if (show.reportedType) {
|
||||
<app-badge [type]="getReportedTypeBadgeType(show)">{{ show.reportedType | reportedType }}</app-badge>
|
||||
}
|
||||
</ng-container>
|
||||
</p>
|
||||
}
|
||||
<div class="head">
|
||||
<div>
|
||||
@if (!useSwiper) {
|
||||
<mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
<div [class.floating]="useSwiper">
|
||||
<app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
|
||||
matTooltip="Verkleinern"></app-menu-button>
|
||||
<app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
|
||||
matTooltip="Vergrößern"></app-menu-button>
|
||||
<app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
|
||||
[icon]="useSwiper ? faRestore : faMaximize" class="btn-delete btn-icon"
|
||||
matTooltip="Vollbild"></app-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
@if (showSongs && !useSwiper) {
|
||||
<div (cdkDropListDropped)="drop($event, show)"
|
||||
[cdkDropListDisabled]="show.published || showText"
|
||||
[style.--song-key-column-width]="getSongKeyColumnWidth(show)"
|
||||
[style.font-size]="textSize + 'em'"
|
||||
cdkDropList
|
||||
class="song-list">
|
||||
@for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
|
||||
<div cdkDrag class="song-row">
|
||||
<app-song
|
||||
[dragHandle]="!(show.published || showText)"
|
||||
[fullscreen]="useSwiper"
|
||||
[index]="i"
|
||||
[showId]="showId"
|
||||
[showSong]="song"
|
||||
[showText]="showText"
|
||||
[show]="show"
|
||||
></app-song>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (useSwiper) {
|
||||
<swiper-container scrollbar="true">
|
||||
@for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
|
||||
<swiper-slide
|
||||
[style.font-size]="textSize + 'em'"
|
||||
class="song-swipe">
|
||||
<app-song
|
||||
[fullscreen]="true"
|
||||
[index]="i"
|
||||
[showId]="showId"
|
||||
[showSong]="song"
|
||||
[showText]="true"
|
||||
[show]="show"
|
||||
></app-song>
|
||||
<div class="time">{{ currentTime | date: 'HH:mm' }}</div>
|
||||
@if (getNextSong(orderedShowSongs(show), i); as next) {
|
||||
<div class="next-song">{{ next }}
|
||||
<fa-icon [icon]="faNextSong"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
</swiper-slide>
|
||||
}
|
||||
</swiper-container>
|
||||
}
|
||||
@if (songs$ | async; as songs) {
|
||||
@if (songs && !show.published && !useSwiper) {
|
||||
<app-add-song
|
||||
[showSongs]="showSongs"
|
||||
[show]="show"
|
||||
[songs]="songs"
|
||||
></app-add-song>
|
||||
>
|
||||
@if (!useSwiper) {
|
||||
<p class="show-meta">
|
||||
{{ show.public ? 'öffentliche' : 'geschlossene' }} Veranstaltung von
|
||||
<app-user-name [userId]="show.owner"></app-user-name>
|
||||
<ng-container *appOwner="show.owner">
|
||||
<app-badge [type]="getPublishedBadgeType(show)">{{ show.published | publishedType }}</app-badge>
|
||||
@if (show.reportedType) {
|
||||
<app-badge [type]="getReportedTypeBadgeType(show)">{{ show.reportedType | reportedType }}</app-badge>
|
||||
}
|
||||
</ng-container>
|
||||
</p>
|
||||
}
|
||||
<div class="head">
|
||||
<div>
|
||||
@if (!useSwiper) {
|
||||
<mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
<div [class.floating]="useSwiper">
|
||||
<app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon" matTooltip="Verkleinern"></app-menu-button>
|
||||
<app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon" matTooltip="Vergrößern"></app-menu-button>
|
||||
<app-menu-button
|
||||
(click)="useSwiper=!useSwiper;fullscreen(useSwiper)"
|
||||
@fade
|
||||
[icon]="useSwiper ? faRestore : faMaximize"
|
||||
class="btn-delete btn-icon"
|
||||
matTooltip="Vollbild"
|
||||
></app-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
@if (showSongs && !useSwiper) {
|
||||
<div
|
||||
(cdkDropListDropped)="drop($event, show)"
|
||||
[cdkDropListDisabled]="show.published || showText"
|
||||
[style.--song-key-column-width]="getSongKeyColumnWidth(show)"
|
||||
[style.font-size]="textSize + 'em'"
|
||||
cdkDropList
|
||||
class="song-list"
|
||||
>
|
||||
@for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
|
||||
<div cdkDrag class="song-row">
|
||||
<app-song
|
||||
[dragHandle]="!(show.published || showText)"
|
||||
[fullscreen]="useSwiper"
|
||||
[index]="i"
|
||||
[showId]="showId"
|
||||
[showSong]="song"
|
||||
[showText]="showText"
|
||||
[show]="show"
|
||||
></app-song>
|
||||
</div>
|
||||
}
|
||||
@if (!useSwiper) {
|
||||
<app-button-row>
|
||||
<ng-container *appRole="['leader']">
|
||||
<ng-container *appOwner="show.owner">
|
||||
@if (!show.archived) {
|
||||
<app-button (click)="onArchive(true)" [icon]="faBox">
|
||||
Archivieren
|
||||
</app-button>
|
||||
}
|
||||
@if (show.archived) {
|
||||
<app-button (click)="onArchive(false)" [icon]="faBoxOpen">
|
||||
Wiederherstellen
|
||||
</app-button>
|
||||
}
|
||||
@if (!show.published) {
|
||||
<app-button (click)="onPublish(show, true)" [icon]="faPublish">
|
||||
Veröffentlichen
|
||||
</app-button>
|
||||
}
|
||||
@if (show.published) {
|
||||
<app-button (click)="onPublish(show, false)" [icon]="faUnpublish">
|
||||
Veröffentlichung zurückziehen
|
||||
</app-button>
|
||||
}
|
||||
@if (show.published) {
|
||||
<app-button (click)="onShare(show)" [icon]="faShare">
|
||||
Teilen
|
||||
</app-button>
|
||||
}
|
||||
@if (show.published && show.reportedType === 'pending') {
|
||||
<app-button (click)="onReport(show)" [icon]="faReport">
|
||||
Melden
|
||||
</app-button>
|
||||
}
|
||||
@if (!show.published) {
|
||||
<app-button (click)="onChange(show.id)" [icon]="faSliders">
|
||||
Ändern
|
||||
</app-button>
|
||||
}
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<app-button [icon]="faDownload" [matMenuTriggerFor]="menu">
|
||||
Herunterladen
|
||||
</app-button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<app-button (click)="onDownload()" [icon]="faUser">
|
||||
Ablauf für Lobpreisgruppe
|
||||
</app-button>
|
||||
<app-button (click)="onDownloadHandout()" [icon]="faUsers">
|
||||
Handout mit Copyright Infos
|
||||
</app-button>
|
||||
</mat-menu>
|
||||
</app-button-row>
|
||||
</div>
|
||||
} @if (useSwiper) {
|
||||
<swiper-container scrollbar="true">
|
||||
@for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
|
||||
<swiper-slide [style.font-size]="textSize + 'em'" class="song-swipe">
|
||||
<app-song [fullscreen]="true" [index]="i" [showId]="showId" [showSong]="song" [showText]="true" [show]="show"></app-song>
|
||||
<div class="time">{{ currentTime | date: 'HH:mm' }}</div>
|
||||
@if (getNextSong(orderedShowSongs(show), i); as next) {
|
||||
<div class="next-song">
|
||||
{{ next }}
|
||||
<fa-icon [icon]="faNextSong"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
</swiper-slide>
|
||||
}
|
||||
</app-card>
|
||||
</div>
|
||||
</swiper-container>
|
||||
} @if (songs$ | async; as songs) { @if (songs && !show.published && !useSwiper) {
|
||||
<app-add-song [showSongs]="showSongs" [show]="show" [songs]="songs"></app-add-song>
|
||||
} } @if (!useSwiper) {
|
||||
<app-button-row>
|
||||
<ng-container *appRole="['leader']">
|
||||
<ng-container *appOwner="show.owner">
|
||||
@if (!show.archived) {
|
||||
<app-button (click)="onArchive(true)" [icon]="faBox"> Archivieren </app-button>
|
||||
} @if (show.archived) {
|
||||
<app-button (click)="onArchive(false)" [icon]="faBoxOpen"> Wiederherstellen </app-button>
|
||||
} @if (!show.published) {
|
||||
<app-button (click)="onPublish(show, true)" [icon]="faPublish"> Veröffentlichen </app-button>
|
||||
} @if (show.published) {
|
||||
<app-button (click)="onPublish(show, false)" [icon]="faUnpublish"> Veröffentlichung zurückziehen </app-button>
|
||||
} @if (show.published) {
|
||||
<app-button (click)="onShare(show)" [icon]="faShare"> Teilen </app-button>
|
||||
} @if (show.published && show.reportedType === 'pending') {
|
||||
<app-button (click)="onReport(show)" [icon]="faReport"> Melden </app-button>
|
||||
} @if (!show.published) {
|
||||
<app-button (click)="onChange(show.id)" [icon]="faSliders"> Ändern </app-button>
|
||||
}
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<app-button [icon]="faDownload" [matMenuTriggerFor]="menu"> Herunterladen </app-button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<app-button (click)="onDownload()" [icon]="faUser"> Ablauf für Lobpreisgruppe </app-button>
|
||||
<app-button (click)="onDownloadHandout()" [icon]="faUsers"> Handout mit Copyright Infos </app-button>
|
||||
</mat-menu>
|
||||
</app-button-row>
|
||||
}
|
||||
</app-card>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -188,9 +188,12 @@ export class ShowComponent implements OnInit, OnDestroy {
|
||||
width: '350px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().pipe(take(1)).subscribe((archive: boolean) => {
|
||||
if (archive && this.showId != null) void this.setArchiveState(true);
|
||||
});
|
||||
dialogRef
|
||||
.afterClosed()
|
||||
.pipe(take(1))
|
||||
.subscribe((archive: boolean) => {
|
||||
if (archive && this.showId != null) void this.setArchiveState(true);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -230,11 +233,14 @@ export class ShowComponent implements OnInit, OnDestroy {
|
||||
data: {songs},
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().pipe(take(1)).subscribe((reported: boolean) => {
|
||||
if (reported) {
|
||||
void this.showService.update$(show.id, {reportedType: 'reported'});
|
||||
}
|
||||
});
|
||||
dialogRef
|
||||
.afterClosed()
|
||||
.pipe(take(1))
|
||||
.subscribe((reported: boolean) => {
|
||||
if (reported) {
|
||||
void this.showService.update$(show.id, {reportedType: 'reported'});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public getStatus(show: Show): string {
|
||||
|
||||
@@ -1,113 +1,81 @@
|
||||
@if (iSong && iSong && show) {
|
||||
<div>
|
||||
@if (show.published || fullscreen) {
|
||||
<div class="title published">
|
||||
<div class="key">{{ iSong.key }}</div>
|
||||
<div>{{ iSong.title }}</div>
|
||||
<div>
|
||||
@if (show.published || fullscreen) {
|
||||
<div class="title published">
|
||||
<div class="key">{{ iSong.key }}</div>
|
||||
<div>{{ iSong.title }}</div>
|
||||
</div>
|
||||
} @if (!show.published && !fullscreen) {
|
||||
<div class="song" [class.show-text-layout]="!!showText" [class.compact-layout]="!showText" [class.with-drag]="dragHandle && !edit">
|
||||
@if (dragHandle && !edit) {
|
||||
<button aria-label="Lied verschieben" cdkDragHandle class="drag-handle" type="button"></button>
|
||||
}
|
||||
<span class="title">{{ iSong.title }}</span>
|
||||
@if (!edit) {
|
||||
<div class="keys-container">
|
||||
<div (click)="openKeySelect()" class="keys">
|
||||
@if (iSong.keyOriginal !== iSong.key) {
|
||||
<span>{{ iSong.keyOriginal }} → </span>
|
||||
}
|
||||
<span>{{ iSong.key }}</span>
|
||||
</div>
|
||||
}
|
||||
@if (!show.published && !fullscreen) {
|
||||
<div
|
||||
class="song"
|
||||
[class.show-text-layout]="!!showText"
|
||||
[class.compact-layout]="!showText"
|
||||
[class.with-drag]="dragHandle && !edit"
|
||||
>
|
||||
@if (dragHandle && !edit) {
|
||||
<button
|
||||
aria-label="Lied verschieben"
|
||||
cdkDragHandle
|
||||
class="drag-handle"
|
||||
type="button"
|
||||
></button>
|
||||
}
|
||||
<span class="title">{{ iSong.title }}</span>
|
||||
@if (!edit) {
|
||||
<div class="keys-container">
|
||||
<div (click)="openKeySelect()" class="keys">
|
||||
@if (iSong.keyOriginal !== iSong.key) {
|
||||
<span>{{ iSong.keyOriginal }} → </span>
|
||||
}
|
||||
<span>{{ iSong.key }}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (!edit) {
|
||||
<app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon"
|
||||
matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
|
||||
}
|
||||
@if (!edit) {
|
||||
<app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"
|
||||
matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
|
||||
}
|
||||
</div>
|
||||
@if (!edit) {
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="song select"
|
||||
[class.show-text-layout]="!!showText"
|
||||
[class.compact-layout]="!showText"
|
||||
[class.with-drag]="dragHandle"
|
||||
>
|
||||
@if (dragHandle) {
|
||||
<span class="drag-handle-placeholder"></span>
|
||||
}
|
||||
@if (!showText) {
|
||||
<span class="keys">
|
||||
<mat-form-field class="keys-select">
|
||||
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{ key }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
<span class="title"></span>
|
||||
} @else {
|
||||
<span class="title"></span>
|
||||
<span class="keys">
|
||||
<mat-form-field class="keys-select">
|
||||
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{ key }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
}
|
||||
<span class="btn-edit"></span>
|
||||
<span class="btn-delete"></span>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@if (edit) {
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Songtext</mat-label>
|
||||
<textarea [cdkTextareaAutosize]="true"
|
||||
[formControl]="editSongControl"
|
||||
class="edit"
|
||||
matInput
|
||||
matTooltip="Tonart ändern"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
}
|
||||
@if (edit) {
|
||||
<div>Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
|
||||
}
|
||||
@if (edit) {
|
||||
<app-button-row>
|
||||
<app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
|
||||
<app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
|
||||
</app-button-row>
|
||||
}
|
||||
@if (!edit && (showText)) {
|
||||
<app-song-text
|
||||
(chordModeChanged)="onChordModeChanged($event)"
|
||||
[chordMode]="iSong.chordMode"
|
||||
[showSwitch]="!show.published"
|
||||
[text]="iSong.text"
|
||||
[transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
|
||||
></app-song-text>
|
||||
</div>
|
||||
} @if (!edit) {
|
||||
<app-menu-button (click)="onEdit()" [icon]="faEdit" class="btn-edit btn-icon" matTooltip="Lied für diese Veranstaltung bearbeiten"></app-menu-button>
|
||||
} @if (!edit) {
|
||||
<app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon" matTooltip="Lied aus Veranstaltung entfernen"></app-menu-button>
|
||||
}
|
||||
</div>
|
||||
@if (!edit) {
|
||||
<div aria-hidden="true" class="song select" [class.show-text-layout]="!!showText" [class.compact-layout]="!showText" [class.with-drag]="dragHandle">
|
||||
@if (dragHandle) {
|
||||
<span class="drag-handle-placeholder"></span>
|
||||
} @if (!showText) {
|
||||
<span class="keys">
|
||||
<mat-form-field class="keys-select">
|
||||
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{ key }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
<span class="title"></span>
|
||||
} @else {
|
||||
<span class="title"></span>
|
||||
<span class="keys">
|
||||
<mat-form-field class="keys-select">
|
||||
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{ key }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</span>
|
||||
}
|
||||
<span class="btn-edit"></span>
|
||||
<span class="btn-delete"></span>
|
||||
</div>
|
||||
} } @if (edit) {
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Songtext</mat-label>
|
||||
<textarea [cdkTextareaAutosize]="true" [formControl]="editSongControl" class="edit" matInput matTooltip="Tonart ändern"></textarea>
|
||||
</mat-form-field>
|
||||
} @if (edit) {
|
||||
<div>Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>
|
||||
} @if (edit) {
|
||||
<app-button-row>
|
||||
<app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
|
||||
<app-button (click)="onDiscard()" [icon]="faEraser">Verwerfen</app-button>
|
||||
</app-button-row>
|
||||
} @if (!edit && (showText)) {
|
||||
<app-song-text
|
||||
(chordModeChanged)="onChordModeChanged($event)"
|
||||
[chordMode]="iSong.chordMode"
|
||||
[showSwitch]="!show.published"
|
||||
[text]="iSong.text"
|
||||
[transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
|
||||
></app-song-text>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,7 @@
|
||||
<mat-select formControlName="type">
|
||||
<mat-option [value]="null">- kein Filter -</mat-option>
|
||||
@for (type of types; track type) {
|
||||
<mat-option [value]="type">{{
|
||||
type | songType
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="type">{{ type | songType }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
@@ -23,10 +20,7 @@
|
||||
<mat-select formControlName="key">
|
||||
<mat-option [value]="null">- kein Filter -</mat-option>
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | key
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="key">{{ key | key }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
@@ -36,10 +30,7 @@
|
||||
<mat-select formControlName="legalType">
|
||||
<mat-option [value]="null">- kein Filter -</mat-option>
|
||||
@for (key of legalType; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | legalType
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="key">{{ key | legalType }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
@@ -49,10 +40,7 @@
|
||||
<mat-select formControlName="flag">
|
||||
<mat-option [value]="null">- kein Filter -</mat-option>
|
||||
@for (flag of getFlags(); track flag) {
|
||||
<mat-option [value]="flag">{{
|
||||
flag
|
||||
}}
|
||||
</mat-option>
|
||||
<mat-option [value]="flag">{{ flag }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
@@ -1,45 +1,43 @@
|
||||
@if (songs$ | async; as songs) {
|
||||
<div>
|
||||
<app-list-header [anyFilterActive]="anyFilterActive">
|
||||
<app-filter [songs]="songs"></app-filter>
|
||||
</app-list-header>
|
||||
<app-card [padding]="false">
|
||||
@for (song of songs; track trackBy($index, song)) {
|
||||
<div [routerLink]="song.id" class="list-item">
|
||||
<div class="number">{{ song.number }}</div>
|
||||
<div class="title">
|
||||
<span>{{ song.title }}</span>
|
||||
@if (song.hasChordValidationIssues) {
|
||||
<span class="validation-star" title="Akkord-Validierungsfehler vorhanden">*</span>
|
||||
}
|
||||
<div>
|
||||
<app-list-header [anyFilterActive]="anyFilterActive">
|
||||
<app-filter [songs]="songs"></app-filter>
|
||||
</app-list-header>
|
||||
<app-card [padding]="false">
|
||||
@for (song of songs; track trackBy($index, song)) {
|
||||
<div [routerLink]="song.id" class="list-item">
|
||||
<div class="number">{{ song.number }}</div>
|
||||
<div class="title">
|
||||
<span>{{ song.title }}</span>
|
||||
@if (song.hasChordValidationIssues) {
|
||||
<span class="validation-star" title="Akkord-Validierungsfehler vorhanden">*</span>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<ng-container *appRole="['contributor']">
|
||||
@if (song.status === 'draft') {
|
||||
<div class="warning">
|
||||
<fa-icon [icon]="faDraft"></fa-icon>
|
||||
</div>
|
||||
<div>
|
||||
<ng-container *appRole="['contributor']">
|
||||
@if (song.status === 'draft') {
|
||||
<div class="warning">
|
||||
<fa-icon [icon]="faDraft"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
@if (song.status === 'set') {
|
||||
<div class="neutral">
|
||||
<fa-icon [icon]="faDraft"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
@if (song.status === 'final') {
|
||||
<div class="success">
|
||||
<fa-icon [icon]="faFinal"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
@if (song.legalType === 'open') {
|
||||
<div class="warning">
|
||||
<fa-icon [icon]="faLegal"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
} @if (song.status === 'set') {
|
||||
<div class="neutral">
|
||||
<fa-icon [icon]="faDraft"></fa-icon>
|
||||
</div>
|
||||
<div>{{ song.key }}</div>
|
||||
} @if (song.status === 'final') {
|
||||
<div class="success">
|
||||
<fa-icon [icon]="faFinal"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
</ng-container>
|
||||
@if (song.legalType === 'open') {
|
||||
<div class="warning">
|
||||
<fa-icon [icon]="faLegal"></fa-icon>
|
||||
</div>
|
||||
}
|
||||
</app-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div>{{ song.key }}</div>
|
||||
</div>
|
||||
}
|
||||
</app-card>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,33 +1,25 @@
|
||||
<app-card heading="Angehängte Dateien">
|
||||
@if (currentUpload) {
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div
|
||||
[ngStyle]="{ width: currentUpload?.progress + '%' }"
|
||||
class="progress-bar progress-bar-animated"
|
||||
></div>
|
||||
</div>
|
||||
Progress: {{ currentUpload?.name }} | {{ currentUpload?.progress }}%
|
||||
Complete
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div [ngStyle]="{ width: currentUpload?.progress + '%' }" class="progress-bar progress-bar-animated"></div>
|
||||
</div>
|
||||
Progress: {{ currentUpload?.name }} | {{ currentUpload?.progress }}% Complete
|
||||
</div>
|
||||
}
|
||||
<div class="upload">
|
||||
<label>
|
||||
<input (change)="detectFiles($event)" type="file" />
|
||||
</label>
|
||||
|
||||
<button
|
||||
(click)="uploadSingle()"
|
||||
[disabled]="!selectedFiles"
|
||||
mat-icon-button
|
||||
>
|
||||
<button (click)="uploadSingle()" [disabled]="!selectedFiles" mat-icon-button>
|
||||
<mat-icon>cloud_upload</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@for (file of files$ | async; track file.id) {
|
||||
<p>
|
||||
<app-file [file]="file" [songId]="songId"></app-file>
|
||||
</p>
|
||||
<p>
|
||||
<app-file [file]="file" [songId]="songId"></app-file>
|
||||
</p>
|
||||
}
|
||||
</app-card>
|
||||
|
||||
@@ -1,202 +1,173 @@
|
||||
@if (song) {
|
||||
<app-card [heading]="song.number + ' bearbeiten'" closeLink="../">
|
||||
<form [formGroup]="form" class="form">
|
||||
<app-card [heading]="song.number + ' bearbeiten'" closeLink="../">
|
||||
<form [formGroup]="form" class="form">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Titel</mat-label>
|
||||
<input formControlName="title" matInput />
|
||||
</mat-form-field>
|
||||
<div class="fourth">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Titel</mat-label>
|
||||
<input formControlName="title" matInput />
|
||||
</mat-form-field>
|
||||
<div class="fourth">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Typ</mat-label>
|
||||
<mat-select formControlName="type">
|
||||
@for (type of types; track type) {
|
||||
<mat-option [value]="type">{{
|
||||
type | songType
|
||||
}}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Tonart</mat-label>
|
||||
<mat-select formControlName="key">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | key
|
||||
}}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Tempo</mat-label>
|
||||
<input formControlName="tempo" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Status</mat-label>
|
||||
<mat-select formControlName="status">
|
||||
@for (status of status; track status) {
|
||||
<mat-option [value]="status">{{
|
||||
status | status
|
||||
}}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Songtext</mat-label>
|
||||
<textarea
|
||||
(focus)="songtextFocus = true"
|
||||
(focusout)="songtextFocus = false"
|
||||
[cdkTextareaAutosize]="true"
|
||||
formControlName="text"
|
||||
matInput
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
@if (chordValidationIssues.length > 0) {
|
||||
<div class="song-text-validation">
|
||||
<h3>Akkordschreibweise korrigieren</h3>
|
||||
@for (issue of chordValidationIssues; track issue.lineNumber + '-' + issue.token) {
|
||||
<div class="issue">
|
||||
<strong>Zeile {{ issue.lineNumber }}:</strong>
|
||||
<span>{{ issue.message }}</span>
|
||||
<code>{{ issue.token }}</code>
|
||||
@if (issue.suggestion) {
|
||||
<span>-></span>
|
||||
<code>{{ issue.suggestion }}</code>
|
||||
}
|
||||
</div>
|
||||
<mat-label>Typ</mat-label>
|
||||
<mat-select formControlName="type">
|
||||
@for (type of types; track type) {
|
||||
<mat-option [value]="type">{{ type | songType }} </mat-option>
|
||||
}
|
||||
</div>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Tonart</mat-label>
|
||||
<mat-select formControlName="key">
|
||||
@for (key of keys; track key) {
|
||||
<mat-option [value]="key">{{ key | key }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Tempo</mat-label>
|
||||
<input formControlName="tempo" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Status</mat-label>
|
||||
<mat-select formControlName="status">
|
||||
@for (status of status; track status) {
|
||||
<mat-option [value]="status">{{ status | status }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Songtext</mat-label>
|
||||
<textarea (focus)="songtextFocus = true" (focusout)="songtextFocus = false" [cdkTextareaAutosize]="true" formControlName="text" matInput></textarea>
|
||||
</mat-form-field>
|
||||
@if (chordValidationIssues.length > 0) {
|
||||
<div class="song-text-validation">
|
||||
<h3>Akkordschreibweise korrigieren</h3>
|
||||
@for (issue of chordValidationIssues; track issue.lineNumber + '-' + issue.token) {
|
||||
<div class="issue">
|
||||
<strong>Zeile {{ issue.lineNumber }}:</strong>
|
||||
<span>{{ issue.message }}</span>
|
||||
<code>{{ issue.token }}</code>
|
||||
@if (issue.suggestion) {
|
||||
<span>-></span>
|
||||
<code>{{ issue.suggestion }}</code>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (songtextFocus) {
|
||||
<div class="song-text-help">
|
||||
<h3>Vorschau</h3>
|
||||
<app-song-text [text]="form.value.text" [validateChordNotation]="true" chordMode="show"></app-song-text>
|
||||
<h3>Hinweise zur Bearbeitung</h3>
|
||||
<h4>Aufbau</h4>
|
||||
Der Liedtext wird hintereinander weg geschrieben. Dabei werden Strophen,
|
||||
Refrain und Bridge jeweils durch eine zusätzliche Zeile Markiert. z.B.
|
||||
<pre>
|
||||
</div>
|
||||
} @if (songtextFocus) {
|
||||
<div class="song-text-help">
|
||||
<h3>Vorschau</h3>
|
||||
<app-song-text [text]="form.value.text" [validateChordNotation]="true" chordMode="show"></app-song-text>
|
||||
<h3>Hinweise zur Bearbeitung</h3>
|
||||
<h4>Aufbau</h4>
|
||||
Der Liedtext wird hintereinander weg geschrieben. Dabei werden Strophen, Refrain und Bridge jeweils durch eine zusätzliche Zeile Markiert. z.B.
|
||||
<pre>
|
||||
Strophe
|
||||
Text der ersten Strophe
|
||||
Strophe
|
||||
Text der zweiten Strophe
|
||||
Refrain
|
||||
Und hier der Refrain
|
||||
</pre>
|
||||
<h3>Akkorde</h3>
|
||||
Die Akktorde werden jeweils in der Zeile über dem jeweiligen Liedtext
|
||||
geschrieben. Sie werden jeweils durch Leerzeichen an die entsprechende
|
||||
Position gebracht. Bitte keine Tabulatoren verwenden! Folgende
|
||||
Schreibweisen sind erlaubt:
|
||||
<pre>
|
||||
</pre
|
||||
>
|
||||
<h3>Akkorde</h3>
|
||||
Die Akktorde werden jeweils in der Zeile über dem jeweiligen Liedtext geschrieben. Sie werden jeweils durch Leerzeichen an die entsprechende Position gebracht. Bitte keine
|
||||
Tabulatoren verwenden! Folgende Schreibweisen sind erlaubt:
|
||||
<pre>
|
||||
Dur: C D E
|
||||
Moll: c d e
|
||||
Kreuz/B-Tonarten: C# f# Eb (Hb muss als B angegeben werden)
|
||||
Basstöne: C/E D/C
|
||||
Obertöne: c7 E9 f#maj7
|
||||
</pre>
|
||||
Beispiel:
|
||||
<pre>
|
||||
</pre
|
||||
>
|
||||
Beispiel:
|
||||
<pre>
|
||||
Strophe
|
||||
e C/E H7 a D C/E H7/E
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
|
||||
F# B Eb Cmaj7 C9 e
|
||||
sed diam nonumy eirmod tempor invidunt ut labore et dolore
|
||||
</pre>
|
||||
</div>
|
||||
}
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
}
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Kommentar</mat-label>
|
||||
<textarea [cdkTextareaAutosize]="true" formControlName="comment" matInput></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-chip-grid #chipList>
|
||||
@for (flag of flags; track flag) {
|
||||
<mat-chip-row (removed)="removeFlag(flag)" [removable]="true">
|
||||
{{ flag }}
|
||||
<fa-icon (click)="removeFlag(flag)" [icon]="faRemove"></fa-icon>
|
||||
</mat-chip-row>
|
||||
}
|
||||
<input
|
||||
(matChipInputTokenEnd)="addFlag($event)"
|
||||
[matChipInputAddOnBlur]="true"
|
||||
[matChipInputFor]="chipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
placeholder="Attribute"
|
||||
/>
|
||||
</mat-chip-grid>
|
||||
</mat-form-field>
|
||||
<div class="half">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Kommentar</mat-label>
|
||||
<textarea
|
||||
[cdkTextareaAutosize]="true"
|
||||
formControlName="comment"
|
||||
matInput
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-chip-grid #chipList>
|
||||
@for (flag of flags; track flag) {
|
||||
<mat-chip-row
|
||||
(removed)="removeFlag(flag)"
|
||||
[removable]="true"
|
||||
>
|
||||
{{ flag }}
|
||||
<fa-icon (click)="removeFlag(flag)" [icon]="faRemove"></fa-icon>
|
||||
</mat-chip-row>
|
||||
<mat-label>Rechtlicher Status</mat-label>
|
||||
<mat-select formControlName="legalType">
|
||||
@for (key of legalType; track key) {
|
||||
<mat-option [value]="key">{{ key | legalType }} </mat-option>
|
||||
}
|
||||
<input
|
||||
(matChipInputTokenEnd)="addFlag($event)"
|
||||
[matChipInputAddOnBlur]="true"
|
||||
[matChipInputFor]="chipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
placeholder="Attribute"
|
||||
/>
|
||||
</mat-chip-grid>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div class="half">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Rechtlicher Status</mat-label>
|
||||
<mat-select formControlName="legalType">
|
||||
@for (key of legalType; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | legalType
|
||||
}}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Rechteinhaber</mat-label>
|
||||
<mat-select formControlName="legalOwner">
|
||||
@for (key of legalOwner; track key) {
|
||||
<mat-option [value]="key">{{
|
||||
key | legalOwner
|
||||
}}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Rechteinhaber ID (z.B. CCLI Liednummer)</mat-label>
|
||||
<input formControlName="legalOwnerId" matInput />
|
||||
@if (form.value.legalOwner === 'CCLI') {
|
||||
<a
|
||||
class="link-ccli"
|
||||
href="https://songselect.ccli.com/Songs/{{ form.value.legalOwnerId }}"
|
||||
matSuffix
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Rechteinhaber</mat-label>
|
||||
<mat-select formControlName="legalOwner">
|
||||
@for (key of legalOwner; track key) {
|
||||
<mat-option [value]="key">{{ key | legalOwner }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Rechteinhaber ID (z.B. CCLI Liednummer)</mat-label>
|
||||
<input formControlName="legalOwnerId" matInput />
|
||||
@if (form.value.legalOwner === 'CCLI') {
|
||||
<a
|
||||
class="link-ccli"
|
||||
href="https://songselect.ccli.com/Songs/{{ form.value.legalOwnerId }}"
|
||||
matSuffix
|
||||
matTooltip="CCLI Link: https://songselect.ccli.com/Songs/{{
|
||||
form.value.legalOwnerId
|
||||
}}"
|
||||
matTooltipPosition="before"
|
||||
target="_blank"
|
||||
>
|
||||
<fa-icon [icon]="faLink"></fa-icon>
|
||||
</a>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Künstler</mat-label>
|
||||
<input formControlName="artist" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Verlag / Copyright</mat-label>
|
||||
<input formControlName="label" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Nutzungsbedingungen</mat-label>
|
||||
<input formControlName="termsOfUse" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>abweichende Quelle</mat-label>
|
||||
<input formControlName="origin" matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<app-button-row>
|
||||
<app-button (click)="onSave()" [disabled]="form.invalid" [icon]="faSave">Speichern</app-button>
|
||||
</app-button-row>
|
||||
</app-card>
|
||||
matTooltipPosition="before"
|
||||
target="_blank"
|
||||
>
|
||||
<fa-icon [icon]="faLink"></fa-icon>
|
||||
</a>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Künstler</mat-label>
|
||||
<input formControlName="artist" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Verlag / Copyright</mat-label>
|
||||
<input formControlName="label" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Nutzungsbedingungen</mat-label>
|
||||
<input formControlName="termsOfUse" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>abweichende Quelle</mat-label>
|
||||
<input formControlName="origin" matInput />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
<app-button-row>
|
||||
<app-button (click)="onSave()" [disabled]="form.invalid" [icon]="faSave">Speichern</app-button>
|
||||
</app-button-row>
|
||||
</app-card>
|
||||
}
|
||||
|
||||
@@ -4,7 +4,5 @@
|
||||
</div>
|
||||
<div mat-dialog-actions>
|
||||
<button [mat-dialog-close]="false" mat-button>Änderungen verwerfen</button>
|
||||
<button [mat-dialog-close]="true" cdkFocusInitial mat-button>
|
||||
Speichern
|
||||
</button>
|
||||
<button [mat-dialog-close]="true" cdkFocusInitial mat-button>Speichern</button>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@if (song && song.edits) {
|
||||
<app-card heading="letzte Änderungen">
|
||||
@for (edit of song.edits; track edit.username + '-' + edit.timestamp.toMillis()) {
|
||||
<div class="list">
|
||||
<div>{{ edit.username }}</div>
|
||||
<div>{{ edit.timestamp.toDate() | date: "dd.MM.yyyy" }}</div>
|
||||
</div>
|
||||
}
|
||||
</app-card>
|
||||
<app-card heading="letzte Änderungen">
|
||||
@for (edit of song.edits; track edit.username + '-' + edit.timestamp.toMillis()) {
|
||||
<div class="list">
|
||||
<div>{{ edit.username }}</div>
|
||||
<div>{{ edit.timestamp.toDate() | date: "dd.MM.yyyy" }}</div>
|
||||
</div>
|
||||
}
|
||||
</app-card>
|
||||
}
|
||||
|
||||
@@ -1,3 +1 @@
|
||||
<a [href]="url$ | async" target="_blank">
|
||||
{{ name }}
|
||||
</a>
|
||||
<a [href]="url$ | async" target="_blank"> {{ name }} </a>
|
||||
|
||||
@@ -1,110 +1,61 @@
|
||||
<div class="split">
|
||||
@if (song$ | async; as song) {
|
||||
<app-card
|
||||
[heading]="song.number + ' - ' + song.title"
|
||||
closeLink="../"
|
||||
>
|
||||
<div class="song">
|
||||
<div>
|
||||
<div *appRole="['leader', 'contributor']" class="detail">
|
||||
<div>Typ: {{ song.type | songType }}</div>
|
||||
<div>Tonart: {{ song.key }}</div>
|
||||
<div>Tempo: {{ song.tempo }}</div>
|
||||
<div>Status: {{ (song.status | status) || "entwurf" }}</div>
|
||||
@if (song.legalOwner) {
|
||||
<div>
|
||||
Rechteinhaber: {{ song.legalOwner | legalOwner }}
|
||||
</div>
|
||||
}
|
||||
@if (song.legalOwnerId && song.legalOwner === 'CCLI') {
|
||||
<div>
|
||||
<a
|
||||
href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}"
|
||||
target="_blank"
|
||||
>
|
||||
CCLI Nummer: {{ song.legalOwnerId }}
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
@if (song.legalOwnerId && song.legalOwner !== 'CCLI') {
|
||||
<div>
|
||||
Rechteinhaber ID: {{ song.legalOwnerId }}
|
||||
</div>
|
||||
}
|
||||
@if (song.artist) {
|
||||
<div>Künstler: {{ song.artist }}</div>
|
||||
}
|
||||
@if (song.label) {
|
||||
<div>Verlag: {{ song.label }}</div>
|
||||
}
|
||||
@if (song.origin) {
|
||||
<div>Quelle: {{ song.origin }}</div>
|
||||
}
|
||||
<div
|
||||
[matTooltip]="songUsageTooltip$ | async"
|
||||
matTooltipPosition="above"
|
||||
>
|
||||
Wie oft verwendet: {{ songCount$ | async }}
|
||||
</div>
|
||||
<app-card [heading]="song.number + ' - ' + song.title" closeLink="../">
|
||||
<div class="song">
|
||||
<div>
|
||||
<div *appRole="['leader', 'contributor']" class="detail">
|
||||
<div>Typ: {{ song.type | songType }}</div>
|
||||
<div>Tonart: {{ song.key }}</div>
|
||||
<div>Tempo: {{ song.tempo }}</div>
|
||||
<div>Status: {{ (song.status | status) || "entwurf" }}</div>
|
||||
@if (song.legalOwner) {
|
||||
<div>Rechteinhaber: {{ song.legalOwner | legalOwner }}</div>
|
||||
} @if (song.legalOwnerId && song.legalOwner === 'CCLI') {
|
||||
<div>
|
||||
<a href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}" target="_blank"> CCLI Nummer: {{ song.legalOwnerId }} </a>
|
||||
</div>
|
||||
</div>
|
||||
@if (user$ | async; as user) {
|
||||
<app-song-text
|
||||
[chordMode]="user.chordMode"
|
||||
[showSwitch]="true"
|
||||
[text]="song.text"
|
||||
[validateChordNotation]="true"
|
||||
></app-song-text>
|
||||
}
|
||||
<mat-chip-listbox
|
||||
*appRole="['leader', 'contributor']"
|
||||
aria-label="Attribute"
|
||||
>
|
||||
@for (flag of getFlags(song.flags); track flag) {
|
||||
<mat-chip-option>{{
|
||||
flag
|
||||
}}
|
||||
</mat-chip-option>
|
||||
} @if (song.legalOwnerId && song.legalOwner !== 'CCLI') {
|
||||
<div>Rechteinhaber ID: {{ song.legalOwnerId }}</div>
|
||||
} @if (song.artist) {
|
||||
<div>Künstler: {{ song.artist }}</div>
|
||||
} @if (song.label) {
|
||||
<div>Verlag: {{ song.label }}</div>
|
||||
} @if (song.origin) {
|
||||
<div>Quelle: {{ song.origin }}</div>
|
||||
}
|
||||
</mat-chip-listbox>
|
||||
<div *appRole="['leader', 'contributor']" class="text">
|
||||
{{ song.comment }}
|
||||
<div [matTooltip]="songUsageTooltip$ | async" matTooltipPosition="above">Wie oft verwendet: {{ songCount$ | async }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<app-button-row>
|
||||
<app-button
|
||||
(click)="onDelete(song.id)"
|
||||
*appRole="['admin']"
|
||||
[icon]="faDelete"
|
||||
>Löschen
|
||||
</app-button>
|
||||
<app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit"
|
||||
>Bearbeiten
|
||||
</app-button>
|
||||
<ng-container *appRole="['leader']">
|
||||
<app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu">
|
||||
Zu Veranstaltung hinzufügen
|
||||
</app-button>
|
||||
<mat-menu #menu="matMenu">
|
||||
@for (show of privateShows$|async; track show.id) {
|
||||
<app-button (click)="addSongToShow(show, song)">
|
||||
{{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }}
|
||||
</app-button>
|
||||
}
|
||||
</mat-menu>
|
||||
</ng-container>
|
||||
</app-button-row>
|
||||
</app-card>
|
||||
}
|
||||
@if (files$ | async; as files) {
|
||||
@if (files.length > 0) {
|
||||
<app-card heading="Anhänge">
|
||||
@for (file of files$ | async; track file.id) {
|
||||
<p>
|
||||
<app-file [file]="file"></app-file>
|
||||
</p>
|
||||
@if (user$ | async; as user) {
|
||||
<app-song-text [chordMode]="user.chordMode" [showSwitch]="true" [text]="song.text" [validateChordNotation]="true"></app-song-text>
|
||||
}
|
||||
<mat-chip-listbox *appRole="['leader', 'contributor']" aria-label="Attribute">
|
||||
@for (flag of getFlags(song.flags); track flag) {
|
||||
<mat-chip-option>{{ flag }} </mat-chip-option>
|
||||
}
|
||||
</app-card>
|
||||
</mat-chip-listbox>
|
||||
<div *appRole="['leader', 'contributor']" class="text">{{ song.comment }}</div>
|
||||
</div>
|
||||
<app-button-row>
|
||||
<app-button (click)="onDelete(song.id)" *appRole="['admin']" [icon]="faDelete">Löschen </app-button>
|
||||
<app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit">Bearbeiten </app-button>
|
||||
<ng-container *appRole="['leader']">
|
||||
<app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu"> Zu Veranstaltung hinzufügen </app-button>
|
||||
<mat-menu #menu="matMenu">
|
||||
@for (show of privateShows$|async; track show.id) {
|
||||
<app-button (click)="addSongToShow(show, song)"> {{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }} </app-button>
|
||||
}
|
||||
</mat-menu>
|
||||
</ng-container>
|
||||
</app-button-row>
|
||||
</app-card>
|
||||
} @if (files$ | async; as files) { @if (files.length > 0) {
|
||||
<app-card heading="Anhänge">
|
||||
@for (file of files$ | async; track file.id) {
|
||||
<p>
|
||||
<app-file [file]="file"></app-file>
|
||||
</p>
|
||||
}
|
||||
}
|
||||
</app-card>
|
||||
} }
|
||||
</div>
|
||||
|
||||
@@ -1,36 +1,25 @@
|
||||
@if (user$ | async; as user) {
|
||||
<app-card heading="Hallo {{ user.name }}">
|
||||
<p>
|
||||
@if (getUserRoles(user.role).length === 0) {
|
||||
<span class="warn"
|
||||
>Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den
|
||||
Administrator!</span
|
||||
>
|
||||
}
|
||||
<span>{{ transdormUserRoles(user.role) }}</span>
|
||||
</p>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>bevorzugte Anzeige der Akkorde</mat-label>
|
||||
<mat-select
|
||||
(ngModelChange)="onChordModeChanged(user.id, $event)"
|
||||
[ngModel]="user.chordMode"
|
||||
>
|
||||
<mat-option [value]="null"></mat-option>
|
||||
<mat-option value="hide">nur den Liedtext anzeigen</mat-option>
|
||||
<mat-option value="onlyFirst"
|
||||
>in Strophen die Akkorde nur für die erste anzeigen
|
||||
</mat-option>
|
||||
<mat-option value="show">alle anzeigen</mat-option>
|
||||
</mat-select>
|
||||
<mat-hint
|
||||
>Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert
|
||||
werden.
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
<app-button-row>
|
||||
<app-button [icon]="faSignOut" routerLink="../logout">Abmelden</app-button>
|
||||
</app-button-row>
|
||||
</app-card>
|
||||
}
|
||||
<app-card heading="Hallo {{ user.name }}">
|
||||
<p>
|
||||
@if (getUserRoles(user.role).length === 0) {
|
||||
<span class="warn">Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den Administrator!</span>
|
||||
}
|
||||
<span>{{ transdormUserRoles(user.role) }}</span>
|
||||
</p>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>bevorzugte Anzeige der Akkorde</mat-label>
|
||||
<mat-select (ngModelChange)="onChordModeChanged(user.id, $event)" [ngModel]="user.chordMode">
|
||||
<mat-option [value]="null"></mat-option>
|
||||
<mat-option value="hide">nur den Liedtext anzeigen</mat-option>
|
||||
<mat-option value="onlyFirst">in Strophen die Akkorde nur für die erste anzeigen </mat-option>
|
||||
<mat-option value="show">alle anzeigen</mat-option>
|
||||
</mat-select>
|
||||
<mat-hint>Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert werden. </mat-hint>
|
||||
</mat-form-field>
|
||||
<app-button-row>
|
||||
<app-button [icon]="faSignOut" routerLink="../logout">Abmelden</app-button>
|
||||
</app-button-row>
|
||||
</app-card>
|
||||
}
|
||||
|
||||
<app-users *appRole="['admin']"></app-users>
|
||||
<app-users *appRole="['admin']"></app-users>
|
||||
|
||||
@@ -1,37 +1,28 @@
|
||||
@if (edit) {
|
||||
<div class="users">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Name</mat-label>
|
||||
<input (change)="onNameChanged(id, $event)" [ngModel]="name" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Rolle</mat-label>
|
||||
<mat-select
|
||||
(ngModelChange)="onRoleChanged(id, $event)"
|
||||
[ngModel]="roles"
|
||||
multiple
|
||||
>
|
||||
@for (role of ROLE_TYPES; track role) {
|
||||
<mat-option [value]="role">{{
|
||||
role | role
|
||||
}}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button (click)="edit = false" mat-icon-button>
|
||||
<fa-icon [icon]="faClose"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="users">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Name</mat-label>
|
||||
<input (change)="onNameChanged(id, $event)" [ngModel]="name" matInput />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Rolle</mat-label>
|
||||
<mat-select (ngModelChange)="onRoleChanged(id, $event)" [ngModel]="roles" multiple>
|
||||
@for (role of ROLE_TYPES; track role) {
|
||||
<mat-option [value]="role">{{ role | role }} </mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button (click)="edit = false" mat-icon-button>
|
||||
<fa-icon [icon]="faClose"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
} @if (!edit) {
|
||||
<div (click)="edit = true" class="users list-item">
|
||||
<span>{{ name }}</span>
|
||||
<span
|
||||
>@for (role of roles; track role) {
|
||||
<span>{{ role | role }}, </span>
|
||||
}</span
|
||||
>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (!edit) {
|
||||
<div (click)="edit = true" class="users list-item">
|
||||
<span>{{ name }}</span>
|
||||
<span
|
||||
>@for (role of roles; track role) {
|
||||
<span>{{ role | role }}, </span>
|
||||
}</span
|
||||
>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<app-card heading="registrierte Benutzer">
|
||||
@for (user of users$ | async | sortBy: 'asc':'name'; track user.id) {
|
||||
<app-user [user]="user"></app-user>
|
||||
<app-user [user]="user"></app-user>
|
||||
}
|
||||
</app-card>
|
||||
|
||||
@@ -9,34 +9,14 @@
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Passwort</mat-label>
|
||||
<input
|
||||
(keyup.enter)="onLogin()"
|
||||
formControlName="pass"
|
||||
matInput
|
||||
type="password"
|
||||
/>
|
||||
<input (keyup.enter)="onLogin()" formControlName="pass" matInput type="password" />
|
||||
</mat-form-field>
|
||||
@if (errorMessage) {
|
||||
<p class="error">{{ errorMessage | authMessage }}</p>
|
||||
<p class="error">{{ errorMessage | authMessage }}</p>
|
||||
}
|
||||
<button
|
||||
(click)="onLogin()"
|
||||
class="btn-login"
|
||||
color="primary"
|
||||
mat-stroked-button
|
||||
>
|
||||
Anmelden
|
||||
</button>
|
||||
<button
|
||||
class="btn-password"
|
||||
mat-stroked-button
|
||||
routerLink="/user/password"
|
||||
>
|
||||
Passwort zurücksetzen
|
||||
</button>
|
||||
<button class="btn-user" mat-stroked-button routerLink="/user/new">
|
||||
neuen Benutzer anlegen
|
||||
</button>
|
||||
<button (click)="onLogin()" class="btn-login" color="primary" mat-stroked-button>Anmelden</button>
|
||||
<button class="btn-password" mat-stroked-button routerLink="/user/password">Passwort zurücksetzen</button>
|
||||
<button class="btn-user" mat-stroked-button routerLink="/user/new">neuen Benutzer anlegen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,12 +12,10 @@
|
||||
<input formControlName="password" matInput type="password" />
|
||||
</mat-form-field>
|
||||
@if (errorMessage) {
|
||||
<p class="error">{{ errorMessage | authMessage }}</p>
|
||||
<p class="error">{{ errorMessage | authMessage }}</p>
|
||||
}
|
||||
|
||||
<app-button-row>
|
||||
<app-button (click)="onCreate()" [icon]="faNewUser"
|
||||
>Benutzer anlegen
|
||||
</app-button>
|
||||
<app-button (click)="onCreate()" [icon]="faNewUser">Benutzer anlegen </app-button>
|
||||
</app-button-row>
|
||||
</app-card>
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
<app-card>
|
||||
Eine E-Mail mit dem neuen Passwort wurde gesendet. Darin ist der link
|
||||
enthalten, über den das neue Passwort eingegeben werden kann.
|
||||
</app-card>
|
||||
<app-card> Eine E-Mail mit dem neuen Passwort wurde gesendet. Darin ist der link enthalten, über den das neue Passwort eingegeben werden kann. </app-card>
|
||||
|
||||
@@ -2,19 +2,13 @@
|
||||
<div [formGroup]="form" class="form">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>E-Mail Addresse</mat-label>
|
||||
<input
|
||||
(keyup.enter)="onResetPassword()"
|
||||
formControlName="user"
|
||||
matInput
|
||||
/>
|
||||
<input (keyup.enter)="onResetPassword()" formControlName="user" matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<app-button-row>
|
||||
<app-button (click)="onResetPassword()" [icon]="faNewPassword"
|
||||
>neues Passwort anfordern
|
||||
</app-button>
|
||||
<app-button (click)="onResetPassword()" [icon]="faNewPassword">neues Passwort anfordern </app-button>
|
||||
@if (errorMessage) {
|
||||
<p class="error">{{ errorMessage | authMessage }}</p>
|
||||
<p class="error">{{ errorMessage | authMessage }}</p>
|
||||
}
|
||||
</app-button-row>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user