89 lines
2.6 KiB
HTML
89 lines
2.6 KiB
HTML
@if (isLoading()) {
|
|
<div class="flex flex-col gap-6">
|
|
<p-skeleton height="3.5rem" />
|
|
<p-skeleton height="3.5rem" />
|
|
<p-skeleton height="3.5rem" />
|
|
<p-skeleton height="3.5rem" />
|
|
<div class="flex flex-row gap-4">
|
|
<p-skeleton height="3.5rem" width="10rem" />
|
|
<p-skeleton height="3.5rem" width="10rem" />
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<form [formGroup]="formGroup" class="flex flex-col gap-4" (ngSubmit)="onSubmit()">
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label [for]="formFieldNames.car">
|
|
Auto
|
|
<app-required-marker />
|
|
</label>
|
|
@if (cars(); as cars) {
|
|
<p-select
|
|
[options]="cars"
|
|
placeholder="Auto auswählen"
|
|
[formControlName]="formFieldNames.car"
|
|
optionLabel="name"
|
|
[inputId]="formFieldNames.car"
|
|
styleClass="w-full" />
|
|
}
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex gap-2 items-center">
|
|
<label [for]="formFieldNames.date">
|
|
Datum
|
|
<app-required-marker />
|
|
</label>
|
|
</div>
|
|
<p-datepicker [iconDisplay]="'input'"
|
|
[firstDayOfWeek]="1"
|
|
placeholder="Datum auswählen"
|
|
[showIcon]="true"
|
|
[inputId]="formFieldNames.date"
|
|
[formControlName]="formFieldNames.date"
|
|
styleClass="w-full"
|
|
dateFormat="dd.mm.yy" />
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label [for]="formFieldNames.mileage">
|
|
Kilometerstand
|
|
<app-required-marker />
|
|
</label>
|
|
<p-inputGroup>
|
|
<input
|
|
id="mileage"
|
|
placeholder="Kilometerstand eingeben"
|
|
type="number"
|
|
min="1"
|
|
pInputText
|
|
[formControlName]="formFieldNames.mileage" />
|
|
<p-inputGroupAddon>km</p-inputGroupAddon>
|
|
</p-inputGroup>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label [for]="formFieldNames.amount">
|
|
Menge
|
|
<app-required-marker />
|
|
</label>
|
|
<p-inputGroup>
|
|
<input
|
|
id="amount"
|
|
placeholder="Menge eingeben"
|
|
type="number"
|
|
min="1"
|
|
pInputText
|
|
[formControlName]="formFieldNames.amount" />
|
|
<p-inputGroupAddon>ℓ</p-inputGroupAddon>
|
|
</p-inputGroup>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<p-button type="button" label="Abbrechen" (click)="navigateToOverviewPage()" severity="warn" />
|
|
<p-button type="submit" label="Abschicken" severity="success" [disabled]="formGroup.invalid" />
|
|
</div>
|
|
|
|
</form>
|
|
}
|