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

<app-card *ngIf="song" [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>Typ</mat-label>
        <mat-select formControlName="type">
          <mat-option *ngFor="let type of types" [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">
          <mat-option *ngFor="let key of keys" [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">
          <mat-option *ngFor="let status of status" [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" [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>
      <textarea [mat-autosize]="true" formControlName="comment" matInput></textarea>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-chip-list #chipList>
        <mat-chip (removed)="removeFlag(flag)" *ngFor="let flag of flags"
                  [removable]="true" [selectable]="false">
          {{flag}}&nbsp;
          <fa-icon (click)="removeFlag(flag)" [icon]="faRemove"></fa-icon>
        </mat-chip>
        <input (matChipInputTokenEnd)="addFlag($event)"
               [matChipInputAddOnBlur]="true"
               [matChipInputFor]="chipList"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
               placeholder="Attribute">
      </mat-chip-list>
    </mat-form-field>

    <div class="half">
      <mat-form-field appearance="outline">
        <mat-label>Rechtlicher Status</mat-label>
        <mat-select formControlName="legalType">
          <mat-option *ngFor="let key of legalType" [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">
          <mat-option *ngFor="let key of legalOwner" [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>
        <a *ngIf="form.value.legalOwner==='CCLI'" 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</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()" [icon]="faSave">Speichern</app-button>
  </app-button-row>
</app-card>