opt-cc/static/src/app/manage/users/award-user/award-user.component.html

114 lines
4.4 KiB
HTML

<form #form="ngForm" class="overview">
<h3>{{'users.award.headline' | translate}}</h3>
<div class="form-group">
<label for="decoration">{{'users.award.field.decoration' | translate}}</label>
<select class="form-control"
name="decoration"
id="decoration"
#decorationField
(change)="toggleDecoPreview(decoDescription, decorationField.value, decoPreview)"
[ngModel]="0"
required
style="min-width: 200px;">
<option [value]="0">{{'users.award.field.decoration.placeholder' | translate}}</option>
<option *ngFor="let deco of decorations" [value]="deco._id">
{{deco.fraction == 'BLUFOR' ? fraction.BLUFOR : deco.fraction == 'OPFOR' ? fraction.OPFOR : deco.fraction ==
'ARF' ? fraction.ARF : deco.fraction == 'SWORD' ? fraction.SWORD : 'Global'}}:
{{deco.name}}
</option>
</select>
<show-error displayName="{{'users.award.field.decoration' | translate}}" controlPath="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">
&nbsp;
</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>
&nbsp;
</div>
<div class="div-table-col content-s">
&nbsp;
</div>
</div>
<div class="form-group">
<label for="reason">{{'users.award.field.reason' | translate}}</label>
<textarea class="form-control center-block" name="reason" [ngModel]="undefined" required
id="reason" placeholder="{{'users.award.field.reason.placeholder' | translate}}"
rows="3" #awardTextArea>
</textarea>
<show-error displayName="{{'users.award.field.reason' | translate}}" controlPath="reason"></show-error>
</div>
<button id="cancel"
(click)="cancel()"
class="btn btn-default">
{{'users.award.button.cancel' | translate}}
</button>
<button id="save"
(click)="addAwarding(decorationField, awardTextArea, decoPreview, decoDescription)"
class="btn btn-default"
[disabled]="decorationField.value === '0' || !form.valid">
{{'users.award.button.submit' | translate}}
</button>
<div class="table-container">
<table class="table table-hover">
<thead>
<tr>
<th class="col-sm-1">{{'users.award.table.head.image' | translate}}</th>
<th class="col-sm-2">{{'users.award.table.head.name' | translate}}</th>
<th class="col-sm-2">{{'users.award.table.head.reason' | translate}}</th>
<th class="col-sm-1 text-right">{{'users.award.table.head.date' | translate}}</th>
<th class="col-sm-1 text-center">{{'users.award.table.head.status' | translate}}</th>
<th class="col-sm-1 text-center">
<span class="btn btn-default" (click)="deleteAwarding()">
{{'users.award.table.button.delete' | translate}}
</span>
</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">
{{award.confirmed === 0 ?
awardStatus['users.award.table.status.in.progress'] : (award.confirmed === 1 ?
awardStatus['users.award.table.status.approved'] : awardStatus['users.award.table.status.rejected'])}}
</td>
<td class="text-center">
<label>
<input name="deleteAward"
type="checkbox"
value="{{award._id}}"
[(ngModel)]="award.checked">
</label>
</td>
</tr>
</tbody>
</table>
</div>
</form>