Files
keyvault/client/src/app/modules/cylinder/components/create-cylinder/create-cylinder.component.html
2026-02-24 15:04:31 +01:00

49 lines
2.1 KiB
HTML

<h2 mat-dialog-title>Neuen Zylinder anlegen</h2>
<mat-dialog-content>
<div class="mat-body" style="margin-bottom: 24px;">Hier können Zylinder angelegt werden. Jeder Zylinder muss genau einer Schließanlage zugeordnet werden. Es können mehrere Schlüssel zu einem Zylinder zugeordnet werden.</div>
<form [formGroup]="createForm" class="flex flex-col gap-3">
<mat-form-field>
<mat-label>Name</mat-label>
<input type="text" matInput formControlName="name" maxlength="100" placeholder="Bsp.: Haustür Ferienhaus">
@if ((createForm.controls.name.value || '').length > 20) {
<mat-hint>{{ (createForm.controls.name.value || '').length }} / 100 Zeichen</mat-hint>
} @else {
<mat-hint>Wie soll der Zylinder heißen?</mat-hint>
}
</mat-form-field>
<div class="flex items-center gap-6">
<mat-form-field class="flex-auto">
<mat-label>Beschreibung</mat-label>
<input type="text" matInput formControlName="description" maxlength="255" placeholder="Bsp.: 30/30">
<mat-hint>Zylinderlänge und co.</mat-hint>
</mat-form-field>
<mat-checkbox formControlName="digital">Digitales Schloss</mat-checkbox>
</div>
<mat-form-field>
<mat-label>Schließanlage</mat-label>
<mat-select formControlName="system">
@for (item of systems; track $index) {
<mat-option [value]="item">{{ item.name }}</mat-option>
}
</mat-select>
<mat-hint>Zu welcher Schließanlage gehört der Zylinder?</mat-hint>
@if (isLoading) {
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
}
</mat-form-field>
</form>
</mat-dialog-content>
<mat-dialog-actions>
<button matButton mat-dialog-close>Abbrechen</button>
<button matButton="elevated" (click)="save()" [disabled]="createForm.disabled || createForm.invalid" class="btn-primary">
<mat-icon>save</mat-icon>
Speichern
</button>
</mat-dialog-actions>