published shows are readonly

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

@@ -3,7 +3,7 @@
     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>
+    <p *ngIf="!show.published">
       <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
     </p>
     <div *ngIf="showSongs && songs" class="song-list">
@@ -12,11 +12,12 @@
                 [showSongs]="showSongs"
                 [showText]="showText"
                 [song]="getSong(song.songId)"
+                [show]="show"
                 class="song-row"
       ></app-song>
     </div>
 
-    <div *ngIf="songs" class="add-row">
+    <div *ngIf="songs && !show.published" class="add-row">
       <mat-form-field appearance="outline">
         <mat-label>Lied hinzufügen...</mat-label>
         <mat-select (selectionChange)="onAddSongSelectionChanged($event)">

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

@@ -1,5 +1,7 @@
 <div *ngIf="_song">
-  <div class="song">
+  <div *ngIf="show.published" class="title published">{{_song.title}}</div>
+
+  <div *ngIf="!show.published" class="song">
     <app-menu-button (click)="reorder(true)" [icon]="faUp" class="btnUp"></app-menu-button>
     <app-menu-button (click)="reorder(false)" [icon]="faDown" class="btnDown"></app-menu-button>
     <span class="title">{{_song.title}}</span>
@@ -13,6 +15,7 @@
   </span>
     <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button>
   </div>
-  <app-song-text (chordModeChanged)="onChordModeChanged($event)" *ngIf="showText" [chordMode]="showSong.chordMode"
-                 [showSwitch]="true" [text]="_song.text"></app-song-text>
+  <app-song-text (chordModeChanged)="onChordModeChanged($event)" *ngIf="showText || show.published"
+                 [chordMode]="showSong.chordMode"
+                 [showSwitch]="!show.published" [text]="_song.text"></app-song-text>
 </div>

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

@@ -30,6 +30,11 @@ mat-form-field {
 
 .title {
   grid-area: title;
+
+  &.published {
+    margin: 10px 0;
+    font-weight: bold;
+  }
 }
 
 .keys {

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

@@ -8,6 +8,7 @@ import {ShowSong} from '../../services/showSong';
 import {getScale} from '../../../songs/services/key.helper';
 import {FormControl} from '@angular/forms';
 import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
+import {Show} from '../../services/show';
 
 @Component({
   selector: 'app-song',
@@ -15,6 +16,7 @@ import {ChordMode} from '../../../../widget-modules/components/song-text/song-te
   styleUrls: ['./song.component.less']
 })
 export class SongComponent implements OnInit {
+  @Input() public show: Show;
   @Input() public showSong: ShowSong;
   @Input() public showSongs: ShowSong[];
   @Input() public showId: string;