opt-cc/opt-cc-static/src/app/decorations/decoration-overview/decoration-overview.component.html

<div class="overview">
  <h3 style="margin-bottom: 25px">Auszeichnung-Details
    <span *ngIf="showSuccessLabel"
          class="label label-success label-small"
          style="margin-left: inherit">
        Erfolgreich gespeichert
    </span>
  </h3>
  <div *ngIf="decoration">
    <div class="col-xs-12">


      <div class="div-table">
        <div class="div-table-row">
          <div class="div-table-col content-s">
            <label>Name:</label>
          </div>
          <div class="div-table-col content content-m">
            {{decoration.name}}
          </div>
          <div class="div-table-col content-l">
            <input class="form-control" type="text" width="250px" placeholder="Neuer Name" #newNameInput>
          </div>
          <div class="div-table-col content-s">
            <a class="pull-right btn btn-sm btn-block btn-default" (click)="update('name', newNameInput)">Bestätigen</a>
          </div>
        </div>
        <div class="div-table-row">
          <div class="div-table-col content-s">
            <label>Fraktion:</label>
          </div>
          <div class="div-table-col fraction-opfor content-m" *ngIf="decoration.fraction == 'OPFOR'">
            CSAT
          </div>
          <div class="div-table-col fraction-blufor content-m" *ngIf="decoration.fraction == 'BLUFOR'">
            NATO
          </div>
          <div class="div-table-col">
          </div>
        </div>
        <div class="div-table-row">
          <div class="div-table-col content-s">
            <label>Art:</label>
          </div>
          <div class="div-table-col content content-m" *ngIf="decoration.isMedal">
            Orden
          </div>
          <div class="div-table-col content content-m" *ngIf="!decoration.isMedal">
            Ribbon
          </div>
          <div class="div-table-col">
          </div>
        </div>
      </div>

      <hr>
      <div class="div-table">
        <div class="div-table-row">
          <div class="div-table-col content-s">
            <label>Sortierung:</label>
          </div>
          <div class="div-table-col content content-m">
            {{decoration.sortingNumber}}
          </div>
          <div class="div-table-col content-l">
            <input type="number" class="form-control" width="250px" placeholder="Neue Sortierung" #sortingNumberInput>
          </div>
          <div class="div-table-col content-s">
            <a class="pull-right btn btn-sm btn-block btn-default" (click)="update('sortingNumber', sortingNumberInput)">Bestätigen</a>
          </div>
        </div>
      </div>

      <hr>
      <div class="div-table">
        <div class="div-table-row">
          <div class="div-table-col content-s">
            <label>Beschreibung:</label>
          </div>
          <div class="div-table-col" style="width: 500px;">
            <textarea #inputDescription [(ngModel)]="decoration.description" class="form-control" rows="2" cols="53">{{decoration.description}}</textarea>
          </div>
          <div class="div-table-col content-s">
            <a class="pull-right btn btn-sm btn-block btn-default" (click)="update('description', inputDescription)">Bestätigen</a>
          </div>
        </div>
      </div>

      <hr>
      <div class="div-table">
        <div class="div-table-row">
          <div class="div-table-col content-s">
            <label>Bild:</label>
          </div>
          <div class="div-table-col content-m-flex">
            <img src="{{previewImage}}">
          </div>
          <div class="div-table-col content-l">
            <label class="control-label">Neues Bild</label>
            <input class="form-control" type="file"
                   accept="image/png"
                   #newLogoInput
                   (change)="fileChange($event)">
            <span class="label label-bg label-danger center-block" style="font-size:small" *ngIf="showImageError">
              Bild muss im PNG Format vorliegen
            </span>
          </div>
          <div class="div-table-col content-s">
            <label>&nbsp;</label>
            <a class="pull-right btn btn-sm btn-block btn-default"(click)="updateGraphic(newLogoInput)">Bestätigen</a>
          </div>
        </div>
      </div>

      <hr>
      <div class="div-table">
        <div class="div-table-row">
          <div class="div-table-col content-s">
            <label>Löschen:</label>
          </div>
          <div class="div-table-col content-xl">
            <input class="form-control" #confirmInput placeholder="Auszeichnungsnamen zur Bestätigung eingeben" style="width:330px">
          </div>
          <div class="div-table-col content-l">
            <a class="pull-right btn btn-sm btn-block btn-default" (click)="deleteDecoration(confirmInput.value)">Auszeichnung Löschen</a>
          </div>

        </div>
      </div>


    </div>
  </div>
</div>