mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
79 lines
2.5 KiB
HTML
79 lines
2.5 KiB
HTML
@if (cardCode() && !bookingReasonsLoading()) {
|
|
<div class="flex flex-col gap-1 text-isa-neutral-900">
|
|
<span class="isa-text-body-1-bold">Lesepunkte verpunkten</span>
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<span class="isa-text-body-2-regular">1€ entspricht 10 Lesepunkten</span>
|
|
<ui-tooltip-icon
|
|
class="relative bottom-1"
|
|
title="Lesepunkte umrechnen"
|
|
content="1€ entspricht 10 Lesepunkten.
|
|
Beträge werden kaufmännisch gerundet:
|
|
Beispiel:
|
|
14,41€ = 144 Lesepunkte
|
|
14,49€ = 145 Lesepunkte"
|
|
></ui-tooltip-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="grid grid-cols-[1fr,auto] items-center justify-between gap-4 border rounded-lg border-isa-neutral-900 px-4 py-1"
|
|
>
|
|
<div class="isa-text-body-1-bold">Buchen</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex items-center">
|
|
@if (selectedReason(); as reason) {
|
|
<span class="isa-text-body-2-bold text-isa-neutral-900 px-2">
|
|
{{ reason.value > 0 ? '+' : '-' }}
|
|
</span>
|
|
}
|
|
<input
|
|
name="points"
|
|
placeholder="Punkte"
|
|
type="number"
|
|
[ngModel]="points()"
|
|
(ngModelChange)="points.set($event)"
|
|
min="0"
|
|
data-what="input"
|
|
data-which="points"
|
|
class="w-20 isa-text-body-2-bold bg-isa-neutral-200 placeholder:isa-text-body-2-regular placeholder:text-isa-neutral-500 text-isa-neutral-900 focus:outline-none px-4 text-right border-none"
|
|
/>
|
|
</div>
|
|
<ui-dropdown
|
|
[ngModel]="selectedReasonKey()"
|
|
(ngModelChange)="selectedReasonKey.set($event)"
|
|
class="border-none w-[14rem] truncate"
|
|
[label]="dropdownLabel()"
|
|
data-what="dropdown"
|
|
data-which="booking-reason"
|
|
>
|
|
@if (bookingReasons(); as reasons) {
|
|
@for (reason of reasons; track reason.key) {
|
|
<ui-dropdown-option
|
|
[value]="reason.label"
|
|
data-what="dropdown-option"
|
|
data-which="reason-option"
|
|
[attr.data-reason-key]="reason.key"
|
|
>
|
|
{{ reason.label }}
|
|
</ui-dropdown-option>
|
|
}
|
|
}
|
|
</ui-dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="w-40"
|
|
uiButton
|
|
type="button"
|
|
color="primary"
|
|
(click)="booking()"
|
|
[disabled]="disableBooking()"
|
|
[pending]="isBooking()"
|
|
data-what="button"
|
|
data-which="booking-submit"
|
|
>
|
|
Jetzt buchen
|
|
</button>
|
|
}
|