allerta-vvf/frontend/src/app/_routes/edit-training/edit-training.component.html

73 lines
3.6 KiB
HTML

<back-btn></back-btn>
<br>
<form method="post" [formGroup]="trainingForm" (ngSubmit)="formSubmit()">
<div class="container">
<div class="form-group has-validation">
<label for="date-picker-start">{{ 'start'|translate|ftitlecase }}</label>
<datetime-picker formControlName="start" [class.is-invalid]="!isFieldValid('start')" id="date-picker-start"></datetime-picker>
<div class="invalid-feedback" *ngIf="start.errors?.['required']" translate>
edit_training.select_start_datetime
</div>
</div>
<div class="form-group has-validation">
<label for="date-picker-end">{{ 'end'|translate|ftitlecase }}</label>
<datetime-picker formControlName="end" [class.is-invalid]="!isFieldValid('end')" id="date-picker-end"></datetime-picker>
<div class="invalid-feedback" *ngIf="end.errors?.['required']" translate>
edit_training.select_end_datetime
</div>
</div>
<div class="form-group has-validation">
<label for="name">{{ 'name'|translate|ftitlecase }}</label>
<input formControlName="name" [class.is-invalid]="!isFieldValid('name')" id="name" class="form-control"
type="text" [placeholder]="'edit_training.name_placeholder'|translate">
<div class="invalid-feedback" *ngIf="name.errors?.['required']" translate>
edit_training.insert_name
</div>
</div>
<div class="form-group has-validation" [class.is-invalid-div]="!isFieldValid('chief')">
<label>{{ 'chief'|translate|ftitlecase }}</label>
<br>
<ng-container *ngFor="let user of users">
<div class="form-check">
<input formControlName="chief" [class.is-invalid]="!isFieldValid('chief')"
class="form-check-input" id="chief-{{ user.id }}" type="radio" value='{{ user.id }}'>
<label class="form-check-label" for="chief-{{ user.id }}">
{{ user.surname }} {{ user.name }}
</label>
</div>
</ng-container>
</div>
<div class="form-group has-validation" [class.is-invalid-div]="!isFieldValid('crew')">
<label translate>edit_training.other_crew_members</label>
<br>
<ng-container *ngFor="let user of users">
<div class="form-check">
<input class="form-check-input" id="crew-{{ user.id }}" [class.is-invalid]="!isFieldValid('crew')"
(change)="onCrewCheckboxChange($event)" [checked]="isCrewSelected(user.id)" type="checkbox" value='{{ user.id }}'>
<label class="form-check-label" for="crew-{{ user.id }}">
{{ user.surname }} {{ user.name }}
</label>
</div>
</ng-container>
</div>
<div class="form-group has-validation">
<label for="place">{{ 'place'|translate|ftitlecase }}</label>
<input formControlName="place" [class.is-invalid]="!isFieldValid('place')" id="place" class="form-control"
type="text">
<div class="invalid-feedback" *ngIf="place.errors?.['required']" translate>
edit_training.insert_place
</div>
</div>
<div class="form-group">
<label for="notes">{{ 'notes'|translate|ftitlecase }}</label><br>
<textarea formControlName="notes" class="form-control" id="notes"></textarea>
</div>
<br>
<br>
<button id="submit_button" type="submit" class="btn btn-primary" [disabled]="submittingForm">{{ 'submit'|translate|ftitlecase }}</button>
<button class="btn" type="button" (click)="formReset()" [disabled]="submittingForm">{{ 'reset'|translate|ftitlecase }}</button>
<div class="d-flex justify-content-center mt-2 pt-2 mb-3" *ngIf="submittingForm">
<div class="spinner spinner-border"></div>
</div>
</div>
</form>