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

104 lines
5.3 KiB
HTML

<back-btn></back-btn>
<br>
<form method="post" [formGroup]="serviceForm" (ngSubmit)="formSubmit()">
<div class="container">
<div class="form-group has-validation">
<label for="date-picker-start">{{ 'start'|translate|titlecase }}</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_service.select_start_datetime
</div>
</div>
<div class="form-group has-validation">
<label for="date-picker-end">{{ 'end'|translate|titlecase }}</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_service.select_end_datetime
</div>
</div>
<div class="form-group has-validation">
<label for="code">{{ 'code'|translate|titlecase }}</label>
<input formControlName="code" [class.is-invalid]="!isFieldValid('code')" id="code" class="form-control"
type="text" placeholder="1234/5">
<div class="invalid-feedback" *ngIf="code.errors?.['required']" translate>
edit_service.insert_code
</div>
</div>
<div class="form-group has-validation" [class.is-invalid-div]="!isFieldValid('chief')">
<label>{{ 'chief'|translate|titlecase }}</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.name }}
</label>
</div>
</ng-container>
</div>
<div class="form-group has-validation" [class.is-invalid-div]="!isFieldValid('drivers')">
<label>{{ 'drivers'|translate|titlecase }}</label>
<br>
<ng-container *ngFor="let user of users">
<div class="form-check" *ngIf="user.driver">
<input class="form-check-input" id="driver-{{ user.id }}" [class.is-invalid]="!isFieldValid('drivers')"
(change)="onDriversCheckboxChange($event)" [checked]="isDriverSelected(user.id)" type="checkbox" value='{{ user.id }}'>
<label class="form-check-label" for="driver-{{ user.id }}">
{{ user.name }}
</label>
</div>
</ng-container>
</div>
<div class="form-group has-validation" [class.is-invalid-div]="!isFieldValid('crew')">
<label translate>edit_service.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.name }}
</label>
</div>
</ng-container>
</div>
<div [class.is-invalid-div]="!isFieldValid('lat')" class="mb-2">
<label>{{ 'place'|translate|titlecase }}</label>
<map-picker *ngIf="addingService" (onMarkerSet)="setPlace($event.lat, $event.lng)"></map-picker>
<map-picker *ngIf="!addingService && loadedServiceLat !== ''" (onMarkerSet)="setPlace($event.lat, $event.lng)" [selectLat]="loadedServiceLat" [selectLng]="loadedServiceLng"></map-picker>
</div>
<div class="form-group">
<label for="notes">{{ 'notes'|translate|titlecase }}</label><br>
<textarea formControlName="notes" class="form-control" id="notes"></textarea>
</div>
<br>
<div class="form-group">
<label>{{ 'type'|translate|titlecase }}</label>
<br>
<div class="input-group has-validation">
<select formControlName="type" [class.is-invalid]="!isFieldValid('type')" class="form-control mr-2">
<option selected disabled translate>edit_service.select_type</option>
<option *ngFor="let service_type of types" value="{{ service_type.id }}">{{ service_type.name }}</option>
</select>
<button class="btn btn-outline-secondary" type="button" tabindex="-1" (click)="addingType = true">
{{ 'add'|translate|titlecase }}
</button>
<div class="invalid-feedback" *ngIf="type.errors?.['required']">
edit_service.select_service_type
</div>
</div>
<div class="input-group mb-2 mt-2" *ngIf="addingType">
<input type="text" class="form-control" [placeholder]="'type'|translate" [(ngModel)]="newType"
[ngModelOptions]="{standalone: true}">
<button class="btn btn-secondary" type="button" (click)="addType()">{{ 'submit'|translate|titlecase }}</button>
</div>
</div>
<br>
<button id="submit_button" type="submit" class="btn btn-primary" [disabled]="submittingForm">{{ 'submit'|translate|titlecase }}</button>
<button class="btn" type="button" (click)="formReset()" [disabled]="submittingForm">{{ 'reset'|translate|titlecase }}</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>