opt-cc/static/src/app/request/award/req-award.component.html

113 lines
3.4 KiB
HTML

<form #form="ngForm" class="overview">
<h3>Auszeichnung beantragen</h3>
<div class="form-group">
<label for="user">Teilnehmer</label>
<select class="form-control"
name="user"
id="user"
[(ngModel)]="user"
[compareWith]="equals"
(change)="toggleUser()"
required>
<option [ngValue]="{_id: '0'}">Auswählen...</option>
<option *ngFor="let user of users" [ngValue]="user">
{{user.username}}
</option>
</select>
</div>
<div class="form-group">
<label for="decoration">Auszeichnung</label>
<select class="form-control"
name="decoration"
id="decoration"
[(ngModel)]="decoration"
[compareWith]="equals"
(change)="toggleDecoPreview(decoDescription, decoPreview)"
required>
<option [ngValue]="{_id: '0'}">Auswählen...</option>
<option *ngFor="let deco of decorations" [ngValue]="deco">
{{deco.name}}
</option>
</select>
</div>
<div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
<div class="col-sm-1 decoration-preview">
<img class="center-block" #decoPreview>
</div>
<div class="col-sm-2"
style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
&nbsp;
</div>
</div>
<div class="form-group">
<label for="reason">Begründung</label>
<textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
id="reason" placeholder="Begründung eingeben..." rows="3"></textarea>
</div>
<button id="cancel"
(click)="cancel()"
class="btn btn-default">
Abbrechen
</button>
<button id="save"
(click)="addAwarding(decoPreview, decoDescription)"
class="btn btn-default"
[disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
Bestätigen
</button>
<span *ngIf="showSuccessLabel"
class="label label-success label-small"
style="margin-left: inherit">
Erfolgreich gespeichert
</span>
<div class="table-container" *ngIf="showForm">
<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 ">Antragsteller</th>
<th class="col-sm-1 text-right">Datum</th>
<th class="col-sm-1 text-center">Status</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>
{{award.proposer?.username}}
</td>
<td class="text-right">
{{award.date | date: 'dd.MM.yyyy'}}
</td>
<td class="text-center">
{{award.confirmed === 0? 'In Bearbeitung' : (award.confirmed === 1? 'Genehmigt' : 'Abgelehnt')}}
</td>
</tr>
</tbody>
</table>
</div>
</form>