213 lines
11 KiB
HTML
213 lines
11 KiB
HTML
<back-btn></back-btn>
|
|
|
|
<div class="page-header">
|
|
<h1 class="text-center">{{ 'personal_information'|translate|uppercase }}</h1>
|
|
</div>
|
|
|
|
<h2 class="text-center mb-3">{{ user.surname }} {{ user.name }}</h2>
|
|
|
|
<form [formGroup]="profileForm" (ngSubmit)="formSubmit()" class="row g-4 m-3">
|
|
<div class="col-md-6">
|
|
<label for="name" class="form-label">{{ 'name'|translate|ftitlecase }}</label>
|
|
<input formControlName="name" autocomplete="name" type="text" class="form-control" id="name">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="surname" class="form-label">{{ 'surname'|translate|ftitlecase }}</label>
|
|
<input formControlName="surname" autocomplete="additional-name" type="text" class="form-control" id="surname">
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="username" class="form-label">{{ 'username'|translate|ftitlecase }}</label>
|
|
<input formControlName="username" autocomplete="username" type="text" class="form-control" id="username">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="ssn" class="form-label">{{ 'ssn'|translate|ftitlecase }}</label>
|
|
<input formControlName="ssn" autocomplete="ssn" type="text" class="form-control" id="ssn">
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="birthday" class="form-label">{{ 'birthday'|translate|ftitlecase }}</label>
|
|
<input formControlName="birthday" autocomplete="bday" type="text" class="form-control" [placeholder]="'press_to_select_a_date'|translate|ftitlecase" id="birthday" bsDatepicker [bsConfig]="{ adaptivePosition: true, dateInputFormat: 'DD/MM/YYYY' }" [maxDate]="birthdayMaxDate">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="birthplace" class="form-label">{{ 'birthplace'|translate|ftitlecase }}</label>
|
|
<div class="input-group" id="birthplace">
|
|
<input formControlName="birthplace" type="text" class="form-control" [placeholder]="'place'|translate|ftitlecase">
|
|
<input formControlName="birthplace_province" type="text" class="form-control" [placeholder]="'province'|translate|ftitlecase">
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-center mt-5"><i class="fas fa-fire-extinguisher"></i> {{ 'service_information'|translate|ftitlecase }}</h2>
|
|
<div class="col-md-12">
|
|
<label for="course_date" class="form-label">{{ 'course_date'|translate|ftitlecase }}</label>
|
|
<input formControlName="course_date" type="text" class="form-control" [placeholder]="'press_to_select_a_date'|translate|ftitlecase" id="course_date" bsDatepicker [bsConfig]="{ adaptivePosition: true, dateInputFormat: 'DD/MM/YYYY' }" [maxDate]="birthdayMaxDate">
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="driver" class="form-label">{{ 'driver'|translate|ftitlecase }}</label>
|
|
<div class="form-check form-switch">
|
|
<input formControlName="driver" class="form-check-input custom-check-input" type="checkbox" role="switch" id="driver">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="chief" class="form-label">{{ 'chief'|translate|ftitlecase }}</label>
|
|
<div class="form-check form-switch">
|
|
<input formControlName="chief" class="form-check-input custom-check-input" type="checkbox" role="switch" id="chief">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="banned" class="form-label">{{ 'banned'|translate|ftitlecase }}</label>
|
|
<div class="form-check form-switch">
|
|
<input formControlName="banned" class="form-check-input custom-check-input" type="checkbox" role="switch" id="banned">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="hidden" class="form-label">{{ 'hidden'|translate|ftitlecase }}</label>
|
|
<div class="form-check form-switch">
|
|
<input formControlName="hidden" class="form-check-input custom-check-input" type="checkbox" role="switch" id="hidden">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="creation_date" class="form-label">{{ 'edit_user.creation_date'|translate|ftitlecase }}</label>
|
|
<input type="text" class="form-control" disabled id="creation_date" [value]="creation_date">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="update_date" class="form-label">{{ 'edit_user.last_update'|translate|ftitlecase }}</label>
|
|
<input type="text" class="form-control" disabled id="update_date" [value]="update_date">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label for="last_access_date" class="form-label">{{ 'edit_user.last_access'|translate|ftitlecase }}</label>
|
|
<input type="text" class="form-control" disabled id="last_access_date" [value]="last_access_date">
|
|
</div>
|
|
|
|
<h2 class="text-center mt-5"><i class="fas fa-phone"></i> {{ 'contact_information'|translate|ftitlecase }}</h2>
|
|
<div class="col-md-8">
|
|
<label for="address" class="form-label">{{ 'address'|translate|ftitlecase }}</label>
|
|
<input formControlName="address" type="text" class="form-control" id="address">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="address_zip_code" class="form-label">{{ 'zip_code'|translate|ftitlecase }}</label>
|
|
<input formControlName="address_zip_code" type="number" class="form-control" id="address_zip_code" placeholder="12345">
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="phone_number" class="form-label">{{ 'phone_number'|translate|ftitlecase }}</label>
|
|
<input formControlName="phone_number" type="number" class="form-control" id="phone_number">
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="email" class="form-label">{{ 'email'|translate|ftitlecase }}</label>
|
|
<input formControlName="email" type="email" class="form-control" id="email">
|
|
</div>
|
|
|
|
<h2 class="text-center mt-5"><i class="fas fa-id-card"></i> {{ 'documents'|translate|ftitlecase }}</h2>
|
|
<ng-container formGroupName="driving_license">
|
|
<h3 class="text-center mt-3">{{ 'driving_license'|translate|ftitlecase }} <i class="fas fa-car-side"></i></h3>
|
|
<div class="col-md-12" *ngIf="dlCurrScanUrl !== null">
|
|
<img [src]="dlCurrScanUrl" class="img-fluid rounded mx-auto d-block w-50">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="dl_number" class="form-label">{{ 'driving_license_number'|translate|ftitlecase }}</label>
|
|
<input formControlName="number" autocomplete="dl-number" type="text" class="form-control" id="dl_number" placeholder="AB1234567">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="dl_type" class="form-label">{{ 'driving_license_type'|translate|ftitlecase }}</label>
|
|
<input formControlName="type" autocomplete="dl-type" type="text" class="form-control" id="dl_type">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="dl_expiration_date" class="form-label">{{ 'driving_license_expiration_date'|translate|ftitlecase }}</label>
|
|
<input formControlName="expiration_date" autocomplete="dl-expiration-date" type="text" class="form-control" [placeholder]="'press_to_select_a_date'|translate|ftitlecase" id="dl_expiration_date" bsDatepicker [bsConfig]="{ adaptivePosition: true, dateInputFormat: 'DD/MM/YYYY' }" [minDate]="dlExpirationMinDate">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="dl_scan" class="form-label">{{ 'driving_license_scan'|translate|ftitlecase }}</label>
|
|
<input class="form-control" type="file" id="dl_scan" (change)="onDrivingLicenseScanSelected($event)" #drivingLicenseFileUpload>
|
|
<div *ngIf="tmpDrivingLicenseImgData !== null">
|
|
<img [src]="tmpDrivingLicenseImgData" class="img-fluid p-1 w-75">
|
|
<button type="button" class="btn btn-primary" *ngIf="dlScanNotUploadedYet" (click)="uploadDrivingLicenseScan(drivingLicenseFileUpload)">
|
|
<i class="fas fa-upload"></i> {{ 'upload_scan'|translate|ftitlecase }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<h2 class="text-center mt-5"><i class="fas fa-tshirt"></i> {{ 'clothings'|translate|ftitlecase }}</h2>
|
|
<div class="col-md-6">
|
|
<label for="suit_size" class="form-label">{{ 'suit_size'|translate|ftitlecase }}</label>
|
|
<input formControlName="suit_size" type="text" class="form-control" id="suit_size" placeholder="M, L, XL...">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="boot_size" class="form-label">{{ 'boot_size'|translate|ftitlecase }}</label>
|
|
<input formControlName="boot_size" type="text" class="form-control" id="boot_size" placeholder="41, 42, 43...">
|
|
</div>
|
|
|
|
<div class="col-12 m-3 mt-4">
|
|
<button type="submit" class="btn btn-lg btn-primary">{{ 'update'|translate|ftitlecase }}</button>
|
|
</div>
|
|
</form>
|
|
|
|
<hr>
|
|
|
|
<div class="text-center">
|
|
<h3>{{ 'training_courses'|translate|uppercase }}</h3>
|
|
<button *ngIf="!hideTCAddBtn" class="btn btn-sm btn-outline-success m-2" (click)="openModalAddTrainingCourse()">
|
|
<i class="fas fa-plus"></i> {{ 'add'|translate|ftitlecase }}
|
|
</button>
|
|
<table class="mx-auto table table-striped table-bordered table-responsive">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ 'type'|translate|uppercase }}</th>
|
|
<th>{{ 'date'|translate|uppercase }}</th>
|
|
<th>{{ 'training_course_modal.doc_number'|translate|uppercase }}</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr *ngFor="let row of user.training_courses">
|
|
<td>{{ row.type }}</td>
|
|
<td>{{ row.date | date:'dd/MM/YYYY' }}</td>
|
|
<td>
|
|
<ng-container *ngIf="row.doc_url">
|
|
<a [href]='row.doc_url' target="_blank">{{ row.doc_number }}</a>
|
|
</ng-container>
|
|
<ng-container *ngIf="!row.doc_url">
|
|
{{ row.doc_number }}
|
|
</ng-container>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="text-center">
|
|
<h3>{{ 'medical_examinations'|translate|uppercase }}</h3>
|
|
<button *ngIf="!hideMEAddBtn" class="btn btn-sm btn-outline-success m-2" (click)="openModalAddMedicalExamination()">
|
|
<i class="fas fa-plus"></i> {{ 'add'|translate|ftitlecase }}
|
|
</button>
|
|
<table class="mx-auto table table-striped table-bordered table-responsive">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ 'date'|translate|uppercase }}</th>
|
|
<th>{{ 'certifier'|translate|uppercase }}</th>
|
|
<th>{{ 'expiration_date'|translate|uppercase }}</th>
|
|
<th *ngIf="!hideMECertCol">{{ 'certificate_short'|translate|uppercase }}</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr *ngFor="let row of user.medical_examinations">
|
|
<td>{{ row.date | date:'dd/MM/YYYY' }}</td>
|
|
<td>{{ row.certifier }}</td>
|
|
<td>{{ row.expiration_date | date:'dd/MM/YYYY' }}</td>
|
|
<td *ngIf="!hideMECertCol">
|
|
<a *ngIf="row.cert_url" [href]='row.cert_url' target="_blank"><i class='fas fa-clipboard-list'></i></a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|