new shizzle for nizzle

src/app/pages/agenda/agenda.component.html

@@ -74,7 +74,8 @@
 </div>
 
 <app-modal title="Nieuwe afspraak" (close)="closeNewItemModal()" *ngIf="isModalOpen">
-  <app-new-item [testForm]="appointmentForm" (appointmentAddedEvent)="registerAppointment($event)"></app-new-item>
+  <app-new-item [appointments]="appointments" [appointmentForm]="appointmentForm"
+                (appointmentAddedEvent)="registerAppointment($event)"></app-new-item>
 </app-modal>
 
 <app-modal title="{{selectedAppointment.title}}" (close)="selectedAppointment = undefined"

src/app/pages/agenda/agenda.component.ts

@@ -17,6 +17,7 @@ import {DetailsComponent} from '../../components/details/details.component';
 import {DateFormatter} from '../../utils/date-formatter';
 import {WeekDay} from '../../models/week-day';
 import {NewItemComponent} from '../../components/new-item/new-item.component';
+import {timeAfterStartValidator} from '../../models/validators/time-after-start-validator';
 
 @Component({
   selector: 'app-agenda',
@@ -52,7 +53,7 @@ export class AgendaComponent implements OnInit {
     title: new FormControl('', Validators.required),
     notes: new FormControl(''),
     startTime: new FormControl(new TuiTime(this.today.getHours(), this.today.getMinutes()), Validators.required),
-    endTime: new FormControl(new TuiTime(this.getHours(), this.getMinutes()), Validators.required),
+    endTime: new FormControl(new TuiTime(this.getHours(), this.getMinutes()), [Validators.required, timeAfterStartValidator('startTime')]),
     date: new FormControl(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()), Validators.required),
   });
 
@@ -90,7 +91,7 @@ export class AgendaComponent implements OnInit {
       title: new FormControl('', Validators.required),
       notes: new FormControl(''),
       startTime: new FormControl(new TuiTime(this.today.getHours(), this.today.getMinutes()), Validators.required),
-      endTime: new FormControl(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), Validators.required),
+      endTime: new FormControl(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), [Validators.required, timeAfterStartValidator('startTime')]),
       date: new FormControl(new TuiDay(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()), Validators.required),
     });
   }
@@ -109,7 +110,6 @@ export class AgendaComponent implements OnInit {
 
   getHours() {
     let hours = this.today.getHours()
-    console.log(hours)
     if (hours > 23) {
       return 23
     }

src/app/pages/home/home.component.html

@@ -23,7 +23,7 @@
       <tui-avatar src="{{getInitials()}}"/>
       <ng-template #dropdownContent>
         <div class="dropdown">
-          <h3>{{fullName}}</h3>
+          <h3>{{ fullName }}</h3>
           <button
             size="m"
             tuiButton

src/app/pages/home/home.component.scss

@@ -52,11 +52,11 @@ tui-avatar {
   margin-bottom: 8px;
 }
 
-.t-content{
+.t-content {
   margin-right: 24px;
 }
 
-button{
+button {
   background: transparent;
   border: none;
 }

src/app/pages/klanten/klanten.component.scss

@@ -18,25 +18,25 @@ h2 {
 }
 
 .styled-table {
-  width: 100%;               /* Tabel breedte */
-  border-collapse: collapse;  /* Verwijdert dubbele randen */
-  margin: 20px 0;            /* Ruimte rondom de tabel */
+  width: 100%; /* Tabel breedte */
+  border-collapse: collapse; /* Verwijdert dubbele randen */
+  margin: 20px 0; /* Ruimte rondom de tabel */
   font-size: 16px;
-  text-align: left;          /* Tekst uitlijning */
+  text-align: left; /* Tekst uitlijning */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Zachte schaduw */
-  border-radius: 10px;       /* Afgeronde hoeken */
-  overflow: hidden;          /* Hoeken correct afronden */
+  border-radius: 10px; /* Afgeronde hoeken */
+  overflow: hidden; /* Hoeken correct afronden */
 }
 
 .styled-table thead {
   background-color: #868383; /* Blauwe kopregel */
-  color: #ffffff;           /* Witte tekst */
+  color: #ffffff; /* Witte tekst */
   //text-transform: uppercase; /* Hoofdletters */
   font-weight: bold;
 }
 
 .styled-table th, .styled-table td {
-  padding: 12px 15px;        /* Ruimte binnen de cellen */
+  padding: 12px 15px; /* Ruimte binnen de cellen */
 }
 
 .styled-table tbody tr {

src/app/pages/login/login.component.html

@@ -12,7 +12,7 @@
         <label tuiLabel>Wachtwoord</label>
         <input formControlName="password" type="password" placeholder="Voer je wachtwoord in" tuiTextfield/>
       </tui-textfield>
-      <tui-error [error]="computedError" />
+      <tui-error [error]="computedError"/>
       <footer>
         <button tuiButton class="custom-button" type="submit" [disabled]="form.invalid" (click)="login()">
           Inloggen

src/app/pages/login/login.component.scss

@@ -6,7 +6,7 @@
   /* Adjust as needed */
 }
 
-tui-error{
+tui-error {
   text-align: center;
 }