Digitale Zylinder eingebaut

client/src/app/modules/cylinder/components/create-cylinder/create-cylinder.component.html

@@ -1,10 +1,11 @@
 <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">
+            <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 {
@@ -12,11 +13,16 @@
             }
         </mat-form-field>
 
-        <mat-form-field>
-            <mat-label>Beschreibung</mat-label>
-            <input type="text" matInput formControlName="description" maxlength="255">
-              <mat-hint>Zylinderlänge und co.</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="isDigital">Digitales Schloss</mat-checkbox>
+        </div>
+
 
         
         <mat-form-field>
@@ -27,9 +33,11 @@
                 }
             </mat-select>
             <mat-hint>Zu welcher Schließanlage gehört der Zylinder?</mat-hint>
-            <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
+            @if (isLoading) {
+              <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+            }
+            
         </mat-form-field>
-
     </form>
 </mat-dialog-content>
 <mat-dialog-actions>