From 315a0a6007bb2182ef89b3e22dd87fb95ccadf3f Mon Sep 17 00:00:00 2001
From: smuddyx <smuddyx@gmail.com>
Date: Mon, 1 Jun 2020 15:54:44 +0200
Subject: [PATCH] songtext help

---
 .../presentation/presentation.module.ts       |  3 ++
 .../edit/edit-song/edit-song.component.html   | 38 ++++++++++++++++++-
 .../edit/edit-song/edit-song.component.less   |  8 ++++
 .../edit/edit-song/edit-song.component.ts     |  1 +
 4 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/presentation/presentation.module.ts b/src/app/modules/presentation/presentation.module.ts
index 8a8665d..2b95080 100644
--- a/src/app/modules/presentation/presentation.module.ts
+++ b/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,
diff --git a/src/app/modules/songs/song/edit/edit-song/edit-song.component.html b/src/app/modules/songs/song/edit/edit-song/edit-song.component.html
index 6b35e90..eef664b 100644
--- a/src/app/modules/songs/song/edit/edit-song/edit-song.component.html
+++ b/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>
+    <small *ngIf="songtextFocus">
+      <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>
+    </small>
 
     <mat-form-field appearance="outline">
       <mat-label>Kommentar</mat-label>
diff --git a/src/app/modules/songs/song/edit/edit-song/edit-song.component.less b/src/app/modules/songs/song/edit/edit-song/edit-song.component.less
index 7f633c3..a127540 100644
--- a/src/app/modules/songs/song/edit/edit-song/edit-song.component.less
+++ b/src/app/modules/songs/song/edit/edit-song/edit-song.component.less
@@ -31,3 +31,11 @@
   right: 0;
   position: absolute;
 }
+
+h3 {
+  margin: 10px 0 0 0;
+}
+
+h4 {
+  margin: 0;
+}
diff --git a/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts b/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts
index 7118edd..ded9b2e 100644
--- a/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts
+++ b/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,