fix linting
This commit is contained in:
@@ -3,4 +3,3 @@
|
||||
<div [@fader]="o.isActivated ? o.activatedRoute : ''" class="content">
|
||||
<router-outlet #o="outlet"></router-outlet>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -36,6 +36,5 @@ export class UserService {
|
||||
public incSongCount = (songId: string): Promise<void | null> => this.songUsage.incSongCount(songId);
|
||||
public decSongCount = (songId: string): Promise<void | null> => this.songUsage.decSongCount(songId);
|
||||
public rebuildSongUsage = (): Promise<SongUsageMigrationResult> => this.songUsage.rebuildSongUsage();
|
||||
public rebuildShowSongIds = (onProgress?: (progress: MigrationProgress) => void): Promise<ShowSongIndexMigrationResult> =>
|
||||
this.showSongIndex.rebuildShowSongIds(onProgress);
|
||||
public rebuildShowSongIds = (onProgress?: (progress: MigrationProgress) => void): Promise<ShowSongIndexMigrationResult> => this.showSongIndex.rebuildShowSongIds(onProgress);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
@if (songs) {
|
||||
<div class="add-row">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Lied hinzufügen...</mat-label>
|
||||
<mat-select (selectionChange)="onAddSongSelectionChanged($event)">
|
||||
<mat-option>
|
||||
<ngx-mat-select-search [formControl]="filteredSongsControl"></ngx-mat-select-search>
|
||||
</mat-option>
|
||||
@for (song of filteredSongs(); track song.id) {
|
||||
<mat-option [value]="song.id">{{ song.title }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="add-row">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Lied hinzufügen...</mat-label>
|
||||
<mat-select (selectionChange)="onAddSongSelectionChanged($event)">
|
||||
<mat-option>
|
||||
<ngx-mat-select-search [formControl]="filteredSongsControl"></ngx-mat-select-search>
|
||||
</mat-option>
|
||||
@for (song of filteredSongs(); track song.id) {
|
||||
<mat-option [value]="song.id">{{ song.title }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,5 +1 @@
|
||||
<input
|
||||
(ngModelChange)="valueChange($event)"
|
||||
[ngModel]="value"
|
||||
placeholder="Suche"
|
||||
/>
|
||||
<input (ngModelChange)="valueChange($event)" [ngModel]="value" placeholder="Suche" />
|
||||
|
||||
@@ -1,24 +1,9 @@
|
||||
<nav [class.hidden]="isNavigationHidden(windowScroll$|async)" class="head">
|
||||
<div class="links">
|
||||
<app-brand routerLink="/brand"></app-brand>
|
||||
<app-link
|
||||
*appRole="['user', 'presenter', 'leader']"
|
||||
[icon]="faSongs"
|
||||
link="/songs"
|
||||
text="Lieder"
|
||||
></app-link>
|
||||
<app-link
|
||||
*appRole="['leader', 'member']"
|
||||
[icon]="faShows"
|
||||
link="/shows"
|
||||
text="Veranstaltungen"
|
||||
></app-link>
|
||||
<app-link
|
||||
*appRole="['presenter']"
|
||||
[icon]="faPresentation"
|
||||
link="/presentation"
|
||||
text="Präsentation"
|
||||
></app-link>
|
||||
<app-link *appRole="['user', 'presenter', 'leader']" [icon]="faSongs" link="/songs" text="Lieder"></app-link>
|
||||
<app-link *appRole="['leader', 'member']" [icon]="faShows" link="/shows" text="Veranstaltungen"></app-link>
|
||||
<app-link *appRole="['presenter']" [icon]="faPresentation" link="/presentation" text="Präsentation"></app-link>
|
||||
<app-link [icon]="faUser" link="/user" text="Benutzer"></app-link>
|
||||
</div>
|
||||
<div *appRole="['user', 'presenter', 'leader']" class="actions">
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<button [disabled]="disabled" mat-button>
|
||||
@if (icon) {
|
||||
<span
|
||||
><fa-icon [icon]="icon"></fa-icon><span class="content"> </span></span
|
||||
>
|
||||
}
|
||||
<span class="button-content">
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
</button>
|
||||
<span><fa-icon [icon]="icon"></fa-icon><span class="content"> </span></span>
|
||||
}
|
||||
<span class="button-content">
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
<div [class.fullscreen]="fullscreen" [class.padding]="padding" class="card">
|
||||
@if (closeLink && !fullscreen) {
|
||||
<button
|
||||
[routerLink]="closeLink"
|
||||
class="btn-close"
|
||||
mat-icon-button
|
||||
>
|
||||
<fa-icon [icon]="closeIcon"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
@if (heading && !fullscreen) {
|
||||
<div class="heading">{{ heading }}</div>
|
||||
}
|
||||
@if (subheading && !fullscreen) {
|
||||
<div class="subheading">{{ subheading }}</div>
|
||||
<button [routerLink]="closeLink" class="btn-close" mat-icon-button>
|
||||
<fa-icon [icon]="closeIcon"></fa-icon>
|
||||
</button>
|
||||
} @if (heading && !fullscreen) {
|
||||
<div class="heading">{{ heading }}</div>
|
||||
} @if (subheading && !fullscreen) {
|
||||
<div class="subheading">{{ subheading }}</div>
|
||||
}
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
<div class="header">
|
||||
<button
|
||||
(click)="onFilterClick()"
|
||||
[class.filter-active]="anyFilterActive"
|
||||
mat-icon-button
|
||||
>
|
||||
<button (click)="onFilterClick()" [class.filter-active]="anyFilterActive" mat-icon-button>
|
||||
<fa-icon [icon]="faFilter"></fa-icon>
|
||||
</button>
|
||||
<button mat-icon-button routerLink="new">
|
||||
@@ -12,9 +8,9 @@
|
||||
</div>
|
||||
|
||||
@if (filterVisible || anyFilterActive) {
|
||||
<div @fade>
|
||||
<app-card>
|
||||
<ng-content></ng-content>
|
||||
</app-card>
|
||||
</div>
|
||||
<div @fade>
|
||||
<app-card>
|
||||
<ng-content></ng-content>
|
||||
</app-card>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,9 +1,4 @@
|
||||
<svg
|
||||
height="1024"
|
||||
viewBox="0 0 270.93 270.93"
|
||||
width="1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<svg height="1024" viewBox="0 0 270.93 270.93" width="1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs></defs>
|
||||
<g fill="#fff">
|
||||
<path
|
||||
@@ -13,10 +8,7 @@
|
||||
d="m116.87 10.157-1.8882 4.7801-1.1823 4.7845-4.4402 0.29048-1.7967-4.5884-2.4969-4.4939-3.6268 0.47781-1.2476 4.9864-0.54906 4.8977-4.3633 0.86861-2.3806-4.3153-3.0618-4.1295-3.5339 0.94706-0.58683 5.1069 0.09583 4.9268-4.2121 1.4307-2.9239-3.9681-3.5745-3.6937-3.3799 1.4002 0.08404 5.1388 0.73936 4.8731-3.9914 1.9681-3.4163-3.5528-4.0248-3.1955-3.1693 1.8287 0.75527 5.0851 1.3683 4.7336-3.6995 2.4722-3.8506-3.0749-4.4083-2.6435-2.9035 2.2281 1.4118 4.9413 1.9739 4.5158-3.345 2.934-4.218-2.5462-4.7162-2.0466-2.5869 2.5883 2.0451 4.7147 2.5462 4.2195-2.934 3.345-4.5143-1.9739-4.9428-1.4118-2.2281 2.902 2.6435 4.4083 3.0763 3.8505-2.4721 3.6995-4.7351-1.3668-5.0837-0.75527-1.8301 3.1679 3.1969 4.0262 3.5513 3.4163-1.9681 3.9899-4.8716-0.73787-5.1403-0.08569-1.4002 3.3814 3.6951 3.5745 3.9667 2.9224-1.4307 4.2136-4.9268-0.09583-5.1069 0.58683-0.94699 3.5338 4.1294 3.0619 4.3153 2.3806-0.86853 4.3633-4.8963 0.54756-4.9864 1.2476-0.47788 3.6283 4.4925 2.4968 4.5899 1.7968-0.29196 4.4388-4.783 1.1838-4.7816 1.8882v3.6588l4.7816 1.8883 4.783 1.1823 0.29196 4.4402-4.5899 1.7967-4.4925 2.4954 0.47788 3.6283 4.9864 1.2476 4.8963 0.54905 0.86853 4.3632-4.3153 2.3806-4.1294 3.0618 0.94699 3.5338 5.1069 0.58686 4.9268-0.0958 1.4307 4.2122-3.9667 2.9239-3.6951 3.5745 1.4002 3.3799 5.1403-0.0857 4.8716-0.73787 1.9681 3.9914-3.5513 3.4162-3.1969 4.0249 1.8301 3.1693 5.0837-0.75535 4.7351-1.3682 2.4721 3.6994-3.0763 3.8505-2.6435 4.4083 2.2281 2.9035 4.9428-1.4133 4.5143-1.9739 2.934 3.345-2.5462 4.2195-2.0451 4.7162 2.5869 2.5868 4.7162-2.0451 4.218-2.5463 3.345 2.9326-1.9739 4.5158-1.4118 4.9428 2.9035 2.2281 4.4083-2.645 3.8506-3.0749 3.6995 2.4722-1.3683 4.7336-0.75527 5.0851 3.1693 1.8301 4.0248-3.1969 3.4163-3.5513 3.9914 1.9681-0.73936 4.8717-0.08404 5.1403 3.3799 1.4002 3.5745-3.6952 2.9239-3.9666 4.2121 1.4292-0.09583 4.9283 0.58683 5.1069 3.5339 0.94699 3.0618-4.1309 2.3806-4.3139 4.3633 0.8686 0.54906 4.8963 1.2476 4.9864 3.6268 0.47787 2.4969-4.494 1.7967-4.5884 4.4402 0.29189 1.1823 4.7831 1.8882 4.7816h3.6588l1.8882-4.7816 1.1823-4.7831 4.4402-0.29189 1.7967 4.5884 2.4969 4.494 3.6268-0.47787 1.2491-4.9864 0.54757-4.8963 4.3633-0.8686 2.3806 4.3139 3.0619 4.1309 3.5338-0.94699 0.58682-5.1069-0.0958-4.9283 4.2136-1.4292 2.9224 3.9666 3.5745 3.6952 3.3799-1.4002-0.0843-5.1403-0.73787-4.8717 3.9899-1.9681 3.4163 3.5513 4.0262 3.1969 3.1679-1.8301-0.75528-5.0851-1.3668-4.7336 3.6995-2.4722 3.8505 3.0749 4.4083 2.645 2.902-2.2281-1.4118-4.9428-1.9739-4.5158 3.345-2.9326 4.2194 2.5463 4.7148 2.0451 2.5883-2.5868-2.0465-4.7162-2.5462-4.2195 2.934-3.345 4.5157 1.9739 4.9414 1.4133 2.2281-2.9035-2.6435-4.4083-3.0749-3.8505 2.4707-3.6994 4.7351 1.3682 5.0837 0.75535 1.8301-3.1693-3.1969-4.0249-3.5513-3.4162 1.9681-3.9914 4.8716 0.73787 5.1403 0.0857 1.4002-3.3799-3.6951-3.5745-3.9668-2.9239 1.4307-4.2122 4.9268 0.0958 5.107-0.58686 0.94698-3.5338-4.1294-3.0618-4.3153-2.3806 0.86852-4.3632 4.8978-0.54905 4.9864-1.2476 0.47781-3.6283-4.4939-2.4954-4.5884-1.7967 0.29058-4.4402 4.7845-1.1823 4.7801-1.8883v-3.6588l-4.7801-1.8882-4.7845-1.1838-0.29058-4.4388 4.5884-1.7968 4.4939-2.4968-0.47781-3.6283-4.9864-1.2476-4.8978-0.54757-0.86852-4.3633 4.3153-2.3806 4.1294-3.0619-0.94698-3.5338-5.107-0.58683-4.9268 0.09583-1.4307-4.2136 3.9668-2.9224 3.6951-3.5745-1.4002-3.3814-5.1403 0.08569-4.8716 0.73787-1.9681-3.9899 3.5513-3.4163 3.1969-4.0262-1.8301-3.1679-5.0837 0.75527-4.7351 1.3668-2.4707-3.6995 3.0749-3.8505 2.6435-4.4083-2.2281-2.902-4.9414 1.4118-4.5157 1.9739-2.934-3.345 2.5462-4.2195 2.0465-4.7147-2.5883-2.5883-4.7148 2.0466-4.2194 2.5462-3.345-2.934 1.9739-4.5158 1.4118-4.9413-2.902-2.2281-4.4083 2.6435-3.8505 3.0749-3.6995-2.4722 1.3668-4.7336 0.75528-5.0851-3.1679-1.8287-4.0262 3.1955-3.4163 3.5528-3.9899-1.9681 0.73787-4.8731 0.0843-5.1388-3.3799-1.4002-3.5745 3.6937-2.9224 3.9681-4.2136-1.4307 0.0958-4.9268-0.58682-5.1069-3.5338-0.94706-3.0619 4.1295-2.3806 4.3153-4.3633-0.86861-0.54757-4.8977-1.2491-4.9864-3.6268-0.47781-2.4969 4.4939-1.7967 4.5884-4.4402-0.29048-1.1823-4.7845-1.8882-4.7801zm1.8301 21.667a96.677 96.677 0 0 1 96.677 96.677 96.677 96.677 0 0 1-96.677 96.677 96.677 96.677 0 0 1-96.677-96.677 96.677 96.677 0 0 1 96.677-96.677z"
|
||||
id="gear-lg"
|
||||
/>
|
||||
<g
|
||||
aria-label="WORSHIP GENERATOR"
|
||||
transform="matrix(.92405 0 0 1.164 -6.4481 5.9862)"
|
||||
>
|
||||
<g aria-label="WORSHIP GENERATOR" transform="matrix(.92405 0 0 1.164 -6.4481 5.9862)">
|
||||
<path
|
||||
d="m26.155 213.81q-1.5697 4.1147-2.9258 8.0808-1.3468 3.9568-1.4118 4.1333h-1.2911q-0.04644-0.17647-1.0031-2.9537-0.9474-2.7865-2.5078-6.9291h-0.01858q-1.3654 3.4274-2.5171 6.5575-1.1425 3.1209-1.2168 3.3252h-1.3189q-0.07431-0.26936-1.1982-3.641-1.1146-3.3809-2.9815-8.4523l1.5233-0.59445q0.037153 0.13004 1.0867 3.2695 1.0496 3.1394 2.4057 7.0498h0.01858q1.4304-3.6038 2.4893-6.604 1.0682-3.0001 1.1146-3.1394h1.4397q0.03715 0.15791 1.1239 3.3995 1.096 3.2416 2.2199 6.3439h0.01858q1.4861-4.059 2.5078-7.1148 1.0217-3.0558 1.0589-3.2045z"
|
||||
/>
|
||||
|
||||
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@@ -1,89 +1,49 @@
|
||||
@if (sections && !fullscreen) {
|
||||
<div
|
||||
(click)="onClick()"
|
||||
[class.chords]="iChordMode !== 'hide'"
|
||||
class="song-text"
|
||||
>
|
||||
@if (showSwitch) {
|
||||
<button
|
||||
(click)="onChordClick()"
|
||||
class="menu"
|
||||
mat-icon-button
|
||||
>
|
||||
<fa-icon [icon]="faLines"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
<div [class.offset]="fullscreen" [style.top.px]="offset + 50">
|
||||
@for (section of sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
|
||||
<div
|
||||
#section
|
||||
[class.chorus]="section.type === 1"
|
||||
class="section"
|
||||
>
|
||||
@for (line of getLines(section); track (line.lineNumber ?? $index) + '-' + line.type + '-' + $index) {
|
||||
<div
|
||||
[class.chord]="line.type === 0"
|
||||
[class.comment]="isComment(line.text)"
|
||||
[class.disabled]="checkDisabled(i)"
|
||||
class="line"
|
||||
>
|
||||
@for (segment of getDisplaySegments(line); track $index) {
|
||||
<span [class.invalid-chord-token]="segment.invalid" [class.invalid-tab-token]="segment.isTab">{{ segment.text }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (sections.length===0) {
|
||||
<div class="error">
|
||||
Es wurden keine Liedabschnitte gefunden! Bitte mindestens einen Abschnitt festlegen!
|
||||
</div>
|
||||
<div (click)="onClick()" [class.chords]="iChordMode !== 'hide'" class="song-text">
|
||||
@if (showSwitch) {
|
||||
<button (click)="onChordClick()" class="menu" mat-icon-button>
|
||||
<fa-icon [icon]="faLines"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
<div [class.offset]="fullscreen" [style.top.px]="offset + 50">
|
||||
@for (section of sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
|
||||
<div #section [class.chorus]="section.type === 1" class="section">
|
||||
@for (line of getLines(section); track (line.lineNumber ?? $index) + '-' + line.type + '-' + $index) {
|
||||
<div [class.chord]="line.type === 0" [class.comment]="isComment(line.text)" [class.disabled]="checkDisabled(i)" class="line">
|
||||
@for (segment of getDisplaySegments(line); track $index) {
|
||||
<span [class.invalid-chord-token]="segment.invalid" [class.invalid-tab-token]="segment.isTab">{{ segment.text }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (sections && fullscreen) {
|
||||
<div
|
||||
(click)="onClick()"
|
||||
[@songSwitch]="sections"
|
||||
[class.chords]="iChordMode !== 'hide'"
|
||||
class="song-text"
|
||||
>
|
||||
@if (showSwitch) {
|
||||
<button
|
||||
(click)="onChordClick()"
|
||||
class="menu"
|
||||
mat-icon-button
|
||||
>
|
||||
<fa-icon [icon]="faLines"></fa-icon>
|
||||
</button>
|
||||
} @if (sections.length===0) {
|
||||
<div class="error">Es wurden keine Liedabschnitte gefunden! Bitte mindestens einen Abschnitt festlegen!</div>
|
||||
}
|
||||
<div [class.offset]="fullscreen" [style.top.px]="offset + 50">
|
||||
@if (header) {
|
||||
<h1>{{ header }}</h1>
|
||||
}
|
||||
@for (section of sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
|
||||
<div
|
||||
#section
|
||||
[class.chorus]="section.type === 1"
|
||||
class="section"
|
||||
>
|
||||
@for (line of getLines(section); track (line.lineNumber ?? $index) + '-' + line.type + '-' + $index) {
|
||||
<div
|
||||
[class.chord]="line.type === 0"
|
||||
[class.disabled]="checkDisabled(i)"
|
||||
class="line"
|
||||
>
|
||||
@for (segment of getDisplaySegments(line, true); track $index) {
|
||||
<span [class.invalid-chord-token]="segment.invalid" [class.invalid-tab-token]="segment.isTab">{{ segment.text }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
} @if (sections && fullscreen) {
|
||||
<div (click)="onClick()" [@songSwitch]="sections" [class.chords]="iChordMode !== 'hide'" class="song-text">
|
||||
@if (showSwitch) {
|
||||
<button (click)="onChordClick()" class="menu" mat-icon-button>
|
||||
<fa-icon [icon]="faLines"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
<div [class.offset]="fullscreen" [style.top.px]="offset + 50">
|
||||
@if (header) {
|
||||
<h1>{{ header }}</h1>
|
||||
} @for (section of sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
|
||||
<div #section [class.chorus]="section.type === 1" class="section">
|
||||
@for (line of getLines(section); track (line.lineNumber ?? $index) + '-' + line.type + '-' + $index) {
|
||||
<div [class.chord]="line.type === 0" [class.disabled]="checkDisabled(i)" class="line">
|
||||
@for (segment of getDisplaySegments(line, true); track $index) {
|
||||
<span [class.invalid-chord-token]="segment.invalid" [class.invalid-tab-token]="segment.isTab">{{ segment.text }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<ng-content></ng-content>
|
||||
}
|
||||
</div>
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user