publish show

src/app/modules/presentation/monitor/legal/legal.component.less

@@ -1,3 +1,16 @@
+:host {
+  position: fixed;
+  display: block;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #000c;
+  padding: 50px;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 26px 10px #000;
+}
+
 p {
   font-size: 15px;
   margin: 10px 0 0 0;

src/app/modules/presentation/monitor/monitor.component.html

@@ -1,6 +1,4 @@
 <div [style.font-size.px]="zoom" class="fullscreen">
-
   <app-song-text [showSwitch]="false" [text]="song.text" chordMode="hide"></app-song-text>
-
   <app-legal [song]="song"></app-legal>
 </div>

src/app/modules/presentation/monitor/monitor.component.less

@@ -14,4 +14,5 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  transition: 300ms all ease-in-out;
 }

src/app/modules/presentation/monitor/monitor.component.ts

@@ -13,8 +13,8 @@ import {Song} from '../../songs/services/song';
 })
 export class MonitorComponent implements OnInit {
   public song: Song;
+  public zoom: number;
   private index: number;
-  private zoom: number;
   private sections: Section[];
 
   constructor(

src/app/modules/presentation/presentation.module.ts

@@ -13,6 +13,8 @@ import {SongTextModule} from '../../widget-modules/components/song-text/song-tex
 import {LegalComponent} from './monitor/legal/legal.component';
 import {MatButtonModule} from '@angular/material/button';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {MatSliderModule} from '@angular/material/slider';
+import {FormsModule} from '@angular/forms';
 
 
 @NgModule({
@@ -27,7 +29,9 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
     SectionTypeTranslatorModule,
     SongTextModule,
     MatButtonModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    MatSliderModule,
+    FormsModule
   ]
 })
 export class PresentationModule {

src/app/modules/presentation/remote/remote.component.html

@@ -1,6 +1,9 @@
 <div *ngIf="shows$|async as shows">
   <app-card>
-    <mat-form-field appearance="outline">
+
+    <p *ngIf="!shows.length">Es ist derzeit keine Veranstaltung vorhanden</p>
+
+    <mat-form-field *ngIf="shows.length>0" appearance="outline">
       <mat-label>Veranstaltung</mat-label>
       <mat-select (selectionChange)="onShowChanged($event)">
         <mat-option *ngFor="let show of shows" [value]="show.id">
@@ -21,18 +24,20 @@
       </div>
     </div>
 
-    <div *ngIf="show">
+    <div *ngIf="show" class="div-bottom">
       <button [routerLink]="'/presentation/monitor/' + currentShowId" mat-icon-button>
         <fa-icon [icon]="faDesktop"></fa-icon>
       </button>
 
-      <button (click)="onZoomIn()" mat-icon-button>
-        <fa-icon [icon]="faZoomIn"></fa-icon>
-      </button>
-      {{show.presentationZoom}}px
-      <button (click)="onZoomOut()" mat-icon-button>
-        <fa-icon [icon]="faZoomOut"></fa-icon>
-      </button>
+      <mat-slider
+        (ngModelChange)="onZoom($event)"
+        [max]="100"
+        [min]="10"
+        [ngModel]="show.presentationZoom"
+        [step]="2"
+        [thumbLabel]="true"
+      >
+      </mat-slider>
     </div>
   </app-card>
 

src/app/modules/presentation/remote/remote.component.less

@@ -65,3 +65,8 @@
 .fragment {
   padding: 10px;
 }
+
+.div-bottom {
+  display: grid;
+  grid-template-columns: 40px auto;
+}

src/app/modules/presentation/remote/remote.component.ts

@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {ShowDataService} from '../../shows/services/show-data.service';
 import {Observable} from 'rxjs';
 import {Show} from '../../shows/services/show';
 import {MatSelectChange} from '@angular/material/select';
@@ -7,9 +6,8 @@ import {ShowSongService} from '../../shows/services/show-song.service';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
 import {Section, TextRenderingService} from '../../songs/services/text-rendering.service';
-import {faSearchPlus} from '@fortawesome/free-solid-svg-icons/faSearchPlus';
-import {faSearchMinus} from '@fortawesome/free-solid-svg-icons/faSearchMinus';
 import {faDesktop} from '@fortawesome/free-solid-svg-icons/faDesktop';
+import {ShowService} from '../../shows/services/show.service';
 
 export interface PresentationSong {
   id: string;
@@ -29,23 +27,21 @@ export class RemoteComponent {
   public presentationSongs: PresentationSong[];
   public currentShowId: string;
 
-  public faZoomIn = faSearchPlus;
-  public faZoomOut = faSearchMinus;
   public faDesktop = faDesktop;
 
   constructor(
-    private showDataService: ShowDataService,
+    private showService: ShowService,
     private showSongService: ShowSongService,
     private songService: SongService,
     private textRenderingService: TextRenderingService
   ) {
-    this.shows$ = showDataService.list$();
+    this.shows$ = showService.list$(true);
     songService.list$().subscribe(_ => this.songs = _);
   }
 
   public onShowChanged(change: MatSelectChange): void {
     this.currentShowId = change.value;
-    this.showDataService.read$(change.value).subscribe(_ => this.show = _);
+    this.showService.read$(change.value).subscribe(_ => this.show = _);
     this.showSongService.list$(change.value).subscribe(_ => {
       this.presentationSongs = _
         .map(song => this.songs.filter(f => f.id == song.songId)[0])
@@ -62,22 +58,15 @@ export class RemoteComponent {
   }
 
   public async onSectionClick(id: string, index: number): Promise<void> {
-    await this.showDataService.update(this.currentShowId, {
+    await this.showService.update$(this.currentShowId, {
       presentationSongId: id,
       presentationSection: index
     })
   }
 
-  public async onZoomIn() {
-    debugger
-    await this.showDataService.update(this.currentShowId, {
-      presentationZoom: (this.show.presentationZoom ?? 30) + 2,
-    });
-  }
-
-  public async onZoomOut() {
-    await this.showDataService.update(this.currentShowId, {
-      presentationZoom: (this.show.presentationZoom ?? 30) - 2,
+  public async onZoom(zoom: number) {
+    await this.showService.update$(this.currentShowId, {
+      presentationZoom: zoom,
     });
   }
 }

src/app/modules/shows/list/list.component.ts

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
-import {ShowDataService} from '../services/show-data.service';
 import {fade} from '../../../animations';
+import {ShowService} from '../services/show.service';
 
 @Component({
   selector: 'app-list',
@@ -13,8 +13,8 @@ import {fade} from '../../../animations';
 export class ListComponent {
   public shows$: Observable<Show[]>;
 
-  constructor(showDataService: ShowDataService) {
-    this.shows$ = showDataService.list$();
+  constructor(showService: ShowService) {
+    this.shows$ = showService.list$();
   }
 
 }

src/app/modules/shows/services/show-data.service.ts

@@ -12,7 +12,7 @@ export class ShowDataService {
   constructor(private dbService: DbService) {
   }
 
-  public list$ = (): Observable<Show[]> => this.dbService.col$(this.collection);
+  public list$ = (queryFn?): Observable<Show[]> => this.dbService.col$(this.collection, queryFn);
   public read$ = (showId: string): Observable<Show | undefined> => this.dbService.doc$(`${this.collection}/${showId}`);
   public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}`).update(data);
   public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id

src/app/modules/shows/services/show.service.ts

@@ -2,6 +2,9 @@ import {Injectable} from '@angular/core';
 import {ShowDataService} from './show-data.service';
 import {Show} from './show';
 import {Observable} from 'rxjs';
+import {UserService} from '../../../services/user.service';
+import {map, switchMap} from 'rxjs/operators';
+import {User} from '../../../services/user';
 
 @Injectable({
   providedIn: 'root'
@@ -11,15 +14,32 @@ export class ShowService {
   public static SHOW_TYPE = ['service-worship', 'service-praise', 'home-group-big', 'home-group', 'prayer-group', 'teens-group', 'kids-group', 'misc-public', 'misc-private'];
   public static SHOW_TYPE_PUBLIC = ['service-worship', 'service-praise', 'home-group-big', 'teens-group', 'kids-group', 'misc-public'];
   public static SHOW_TYPE_PRIVATE = ['home-group', 'prayer-group', 'misc-private',];
+  private user: User;
 
-  constructor(private showDataService: ShowDataService) {
+  constructor(private showDataService: ShowDataService, private userService: UserService) {
+    userService.user$.subscribe(_ => this.user = _);
   }
 
   public read$ = (showId: string): Observable<Show> => this.showDataService.read$(showId);
 
+  public list$(publishedOnly: boolean = false): Observable<Show[]> {
+
+    return this.userService.user$.pipe(
+      switchMap(_ => this.showDataService.list$(), (user: User, shows: Show[]) => ({user, shows})),
+      map(_ => _.shows
+        .filter(_ => !_.archived)
+        .filter(show => show.published || (show.owner === _.user.id && !publishedOnly))
+      )
+    )
+
+  }
+
+  public update$ = async (showId: string, data: Partial<Show>): Promise<void> => this.showDataService.update(showId, data);
+
   public async new$(data: Partial<Show>): Promise<string> {
     const calculatedData: Partial<Show> = {
       ...data,
+      owner: this.user.id,
       public: ShowService.SHOW_TYPE_PUBLIC.indexOf(data.showType) !== -1,
     };
     return await this.showDataService.add(calculatedData);

src/app/modules/shows/services/show.ts

@@ -8,6 +8,8 @@ export interface Show {
   owner: string;
   public: boolean;
   reported: boolean;
+  published: boolean;
+  archived: boolean;
 
   presentationSongId: string;
   presentationSection: number;

src/app/modules/shows/show/show.component.html

@@ -1,16 +1,18 @@
 <div *ngIf="(show$|async) as show">
   <app-card
-    heading="{{show.showType|showType}}, {{show.date.toDate()|date:'dd.MM.yyyy'}}">
-
-    <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
-
+    heading="{{show.showType|showType}}, {{show.date.toDate()|date:'dd.MM.yyyy'}} - {{getStatus(show)}}">
+    <i *ngIf="show.public">öffentliche Veranstaltung</i>
+    <i *ngIf="!show.public">geschlossene Veranstaltung</i>
+    <p>
+      <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
+    </p>
     <div *ngIf="showSongs && songs" class="song-list">
-      <app-song *ngFor="let song of showSongs" class="song-row"
-                [showId]="showId"
+      <app-song *ngFor="let song of showSongs" [showId]="showId"
                 [showSong]="song"
                 [showSongs]="showSongs"
-                [song]="getSong(song.songId)"
                 [showText]="showText"
+                [song]="getSong(song.songId)"
+                class="song-row"
       ></app-song>
     </div>
 
@@ -23,5 +25,11 @@
       </mat-form-field>
       <button mat-button>aus Übersicht</button>
     </div>
+    <app-button-row>
+      <button (click)="onArchive(true)" *ngIf="!show.archived" mat-button>Archivieren</button>
+      <button (click)="onArchive(false)" *ngIf="show.archived" mat-button>Wiederherstellen</button>
+      <button (click)="onPublish(true)" *ngIf="!show.published" mat-button>Veröffentlichen</button>
+      <button (click)="onPublish(false)" *ngIf="show.published" mat-button>Veröffentlichung zurückziehen</button>
+    </app-button-row>
   </app-card>
 </div>

src/app/modules/shows/show/show.component.ts

@@ -69,4 +69,18 @@ export class ShowComponent implements OnInit {
     const filtered = this.songs.filter(_ => _.id === songId);
     return filtered.length > 0 ? filtered[0] : null;
   }
+
+  public async onArchive(archived: boolean): Promise<void> {
+    await this.showService.update$(this.showId, {archived});
+  }
+
+  public async onPublish(published: boolean): Promise<void> {
+    await this.showService.update$(this.showId, {published});
+  }
+
+  public getStatus(show: Show): string {
+    if (show.published) return 'veröffentlicht';
+    if (show.reported) return 'gemeldet';
+    return 'entwurf';
+  }
 }

src/app/modules/shows/show/song/song.component.html

@@ -14,5 +14,5 @@
     <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
   </div>
   <app-song-text (chordModeChanged)="onChordModeChanged($event)" *ngIf="showText" [chordMode]="showSong.chordMode"
-                 [text]="_song.text"></app-song-text>
+                 [showSwitch]="true" [text]="_song.text"></app-song-text>
 </div>

src/app/modules/shows/show/song/song.component.less

@@ -1,6 +1,4 @@
 
-
-
 .song {
   display: grid;
   grid-template-columns: 20px 20px auto 70px 25px;

src/app/modules/songs/song/song.component.html

@@ -16,7 +16,8 @@
       </div>
 
       <!-- <div class="text">{{song.text}}</div>-->
-      <app-song-text *ngIf="user$|async as user" [chordMode]="user.chordMode" [text]="song.text"></app-song-text>
+      <app-song-text *ngIf="user$|async as user" [chordMode]="user.chordMode" [showSwitch]="true"
+                     [text]="song.text"></app-song-text>
 
       <div class="text">{{song.comment}}</div>
       <div>

src/app/services/user.service.ts

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {AngularFireAuth} from '@angular/fire/auth';
-import {Observable} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 import {filter, switchMap} from 'rxjs/operators';
 import {User} from './user';
 import {DbService} from './db.service';
@@ -10,13 +10,16 @@ import {DbService} from './db.service';
 })
 export class UserService {
   constructor(private afAuth: AngularFireAuth, private db: DbService) {
+    this.afAuth.authState.pipe(
+      filter(_ => !!_),
+      switchMap(auth => this.db.doc$<User>('user/' + auth.uid)),
+    ).subscribe(_ => this._user$.next(_));
   }
 
+  private _user$ = new BehaviorSubject<User>(null);
+
   public get user$(): Observable<User> {
-    return this.afAuth.authState.pipe(
-      filter(_ => !!_),
-      switchMap(auth => this.db.doc$<User>('user/' + auth.uid))
-    );
+    return this._user$.pipe(filter(_ => !!_));
   }
 
   public async update$(uid: string, data: Partial<User>): Promise<void> {

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -17,19 +17,21 @@ export type ChordMode = 'show' | 'hide' | 'onlyFirst'
 })
 export class SongTextComponent implements OnInit {
   public sections: Section[];
-  public _chordMode: ChordMode = 'hide';
+  @Input() public scrollIndex = 0;
   @Input() showSwitch = false;
-  @Input()
-  public set chordMode(value: ChordMode) {
-    this._chordMode = value ?? 'hide';
-  }
-
   @Output() public chordModeChanged = new EventEmitter<ChordMode>();
   public faLines = faGripLines;
 
   constructor(private textRenderingService: TextRenderingService, private elRef: ElementRef) {
   }
 
+  public _chordMode: ChordMode = 'hide';
+
+  @Input()
+  public set chordMode(value: ChordMode) {
+    this._chordMode = value ?? 'hide';
+  }
+
   @Input()
   public set text(value: string) {
     this.sections = this.textRenderingService.parse(value).sort((a, b) => a.type - b.type);
@@ -61,6 +63,10 @@ export class SongTextComponent implements OnInit {
     this.chordModeChanged.emit(next);
   }
 
+  public onClick() {
+    scrollTo(0, this.elRef.nativeElement.offsetTop - 20);
+  }
+
   private getNextChordMode(): ChordMode {
     switch (this._chordMode) {
       case 'show':
@@ -71,8 +77,4 @@ export class SongTextComponent implements OnInit {
         return 'show';
     }
   }
-
-  public onClick() {
-    scrollTo(0, this.elRef.nativeElement.offsetTop - 20);
-  }
 }