<form #form="ngForm" class="overview"> <h3>Teilnehmer auszeichnen</h3> <div class="form-group"> <label for="decoration">Auszeichnung</label> <select class="form-control" name="decoration" id="decoration" #decorationField (change)="toggleDecoPreview(decoDescription, decorationField.value, decoPreview)" [ngModel]="undefined" required style="min-width: 200px;"> <option *ngFor="let deco of decorations" [value]="deco._id"> {{deco.fraction == 'BLUFOR'? 'NATO' : 'CSAT'}}: {{deco.name}} </option> </select> <show-error text="Auszeichnung" path="decoration"></show-error> </div> <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px"> <div class="div-table-col content-s"> </div> <div class="div-table-col content-m-flex decoration-preview" style="border-radius: 15px 0px 0px 15px;"> <img class="center-block" #decoPreview> </div> <div class="div-table-col content-l decoration-preview" style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription> </div> <div class="div-table-col content-s"> </div> </div> <div class="form-group"> <label for="reason">Begründung</label> <textarea class="form-control center-block" name="reason" [ngModel]="undefined" required id="reason" placeholder="Begründung eingeben..." rows="3" #awardTextArea></textarea> <show-error text="Begründung" path="reason"></show-error> </div> <button id="cancel" (click)="cancel()" class="btn btn-default"> Abbrechen </button> <button id="save" (click)="addAwarding(decorationField, awardTextArea, decoPreview, decoDescription)" class="btn btn-default" [disabled]="!form.valid"> Bestätigen </button> <span *ngIf="showSuccessLabel" class="label label-success label-small" style="margin-left: inherit"> Erfolgreich gespeichert </span> <div class="table-container"> <table class="table table-hover"> <thead> <tr> <th class="col-sm-1">Bild</th> <th class="col-sm-2">Bezeichnung</th> <th class="col-sm-2">Begründung</th> <th class="col-sm-1 text-right">Datum</th> <th class="col-sm-1 text-center"></th> </tr> </thead> <tbody *ngFor="let award of awards"> <tr> <td class="table-cell-id" *ngIf="award.decorationId.isMedal"> <img height="40px" src="resource/decoration/{{award.decorationId._id}}.png"> </td> <td class="table-cell-id" *ngIf="!award.decorationId.isMedal"> <img width="60px" src="resource/decoration/{{award.decorationId._id}}.png"> </td> <td> {{award.decorationId.name}} </td> <td> {{award.reason}} </td> <td class="text-right"> <a class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</a> </td> <td class="text-center"> <span class="glyphicon glyphicon-trash trash" title="Löschen" (click)="deleteAwarding(award._id)"></span> </td> </tr> </tbody> </table> </div> </form>