new shizzle for nizzle

src/app/components/new-item/new-item.component.html

@@ -1,4 +1,4 @@
-<form [formGroup]="testForm">
+<form [formGroup]="appointmentForm">
   <tui-input formControlName="title">
     Titel
     <input
@@ -8,7 +8,7 @@
     />
   </tui-input>
   <div
-    *ngIf="testForm.get('title').value == ''"
+    *ngIf="appointmentForm.get('title').value == ''"
     tuiGroup
     class="group"
     [collapsed]="true">
@@ -25,7 +25,7 @@
   <br>
   <div class="toolbar">
     <tui-combo-box
-      [formControl]="control"
+      [formControl]="customerControl"
       [stringify]="stringify"
       tuiTextfieldSize="m">
       Klant
@@ -43,18 +43,17 @@
       type="button">
     </button>
   </div>
+
   <br>
   <div
     tuiGroup
-    class="group"
-  >
+    class="group">
     <div>
       <tui-input-date
         formControlName="date"
         tuiTextfieldSize="m"
         class="tui-space_vertical-4"
-        [tuiTextfieldLabelOutside]="false"
-      >
+        [tuiTextfieldLabelOutside]="false">
         Datum
       </tui-input-date>
     </div>
@@ -72,12 +71,38 @@
         formControlName="endTime"
         tuiTextfieldSize="m"
         class="tui-space_top-2"
-        [tuiTextfieldLabelOutside]="false"
-      >
+        [tuiTextfieldLabelOutside]="false">
         Tot
       </tui-input-time>
     </div>
   </div>
+  <span *ngIf="appointmentForm.get('endTime')?.errors?.['endTimeInvalid']">
+      	<tui-error [error]="timeError"/>
+    </span>
+  <br>
+  <ng-container *ngIf="appointments.length > 0">
+    <h3>Geplande afspraken die dag:</h3>
+    <div class="appointments-container">
+      <div *ngFor="let appointment of appointments" class="appointment-object">
+        <span class="title">{{ appointment.title }}</span>
+        <span class="name">
+        <tui-icon
+          icon="@tui.user"
+          [style.font-size.rem]="1"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+          {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</span>
+        <span class="time">
+        <tui-icon
+          icon="@tui.clock"
+          [style.font-size.rem]="1"
+          [style.color]="'var(--tui-background-accent-1)'"/>
+          {{ getFormattedTime(appointment.startHour, appointment.startMinute) }} -
+          {{ getFormattedTime(appointment.endHour, appointment.endMinute) }}
+    </span>
+      </div>
+    </div>
+  </ng-container>
+
   <br>
   <tui-textarea formControlName="notes">Notities</tui-textarea>
 </form>
@@ -95,42 +120,35 @@
     <tui-input
       formControlName="firstName"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      [tuiTextfieldCleaner]="true">
       Voornaam
       <input
         tuiTextfieldLegacy
         type="text"
-        formControlName="firstName"
-      />
+        formControlName="firstName"/>
     </tui-input>
     <br>
-
     <tui-input
       formControlName="lastName"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      [tuiTextfieldCleaner]="true">
       Achternaam
       <input
         tuiTextfieldLegacy
         type="text"
-        formControlName="lastName"
-      />
+        formControlName="lastName"/>
     </tui-input>
     <br>
     <tui-input
       formControlName="email"
       tuiTextfieldSize="m"
-      [tuiTextfieldCleaner]="true"
-    >
+      [tuiTextfieldCleaner]="true">
       Email
       <input
         tuiTextfieldLegacy
         autocomplete="email"
         type="email"
-        formControlName="email"
-      />
+        formControlName="email"/>
     </tui-input>
     <br>
     <button
@@ -142,8 +160,7 @@
       type="button">
       <tui-icon
         icon="@tui.plus"
-        [style.height.rem]="1"
-      />
+        [style.height.rem]="1"/>
       Klant toevoegen
     </button>
   </form>