songtext help

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

@@ -21,6 +21,9 @@ import {LogoComponent} from './monitor/logo/logo.component';
 
 @NgModule({
   declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent],
+  exports: [
+    RemoteComponent
+  ],
   imports: [
     CommonModule,
     PresentationRoutingModule,

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

@@ -33,8 +33,44 @@
 
     <mat-form-field appearance="outline">
       <mat-label>Songtext</mat-label>
-      <textarea [mat-autosize]="true" formControlName="text" matInput></textarea>
+      <textarea (focus)="songtextFocus=true" (focusout)="songtextFocus=false" [mat-autosize]="true"
+                formControlName="text" matInput></textarea>
     </mat-form-field>
+    <div *ngIf="songtextFocus" class="song-text-help">
+      <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>
+        Dur: C  D  E
+        Moll: c  d  e
+        Kreuz/B-Tonarten: C#  f#  Eb  (Erlaubt ist auch B statt Hb)
+        Basstöne: C/E  D/C
+        Obertöne: c7  E9  f#maj7
+      </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>
 
     <mat-form-field appearance="outline">
       <mat-label>Kommentar</mat-label>

src/app/modules/songs/song/edit/edit-song/edit-song.component.less

@@ -31,3 +31,15 @@
   right: 0;
   position: absolute;
 }
+
+h3 {
+  margin: 10px 0 0 0;
+}
+
+h4 {
+  margin: 0;
+}
+
+.song-text-help {
+  font-size: 11px;
+}

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -32,6 +32,7 @@ export class EditSongComponent implements OnInit {
   public faRemove = faTimesCircle;
   public faSave = faSave;
   public faLink = faExternalLinkAlt;
+  public songtextFocus = false;
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -58,6 +59,7 @@ export class EditSongComponent implements OnInit {
   public async onSave(): Promise<void> {
     const data = this.form.value;
     await this.songService.update$(this.song.id, data);
+    this.form.markAsPristine();
     await this.router.navigateByUrl('songs/' + this.song.id);
   }
 

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

@@ -1,4 +1,22 @@
-<div (click)="onClick()" *ngIf="sections" [@songSwitch]="sections" [class.chords]="_chordMode!=='hide'"
+<div (click)="onClick()" *ngIf="sections && !fullscreen" [class.chords]="_chordMode!=='hide'"
+     class="song-text">
+
+  <button (click)="onChordClick()" *ngIf="showSwitch" class="menu" mat-icon-button>
+    <fa-icon [icon]="faLines"></fa-icon>
+  </button>
+
+
+  <div [class.offset]="fullscreen" [style.top.px]="offset + 50">
+    <div #section *ngFor="let section of sections; let i = index" [class.chorus]="section.type===1" class="section">
+      <div *ngFor="let line of getLines(section)" [class.chord]="line.type===0" [class.disabled]="checkDisabled(i)"
+           class="line">{{line.text}}</div>
+    </div>
+  </div>
+
+  <ng-content></ng-content>
+</div>
+
+<div (click)="onClick()" *ngIf="sections && fullscreen" [@songSwitch]="sections" [class.chords]="_chordMode!=='hide'"
      class="song-text">
 
   <button (click)="onChordClick()" *ngIf="showSwitch" class="menu" mat-icon-button>