deploy to test toegevoegd

# Conflicts:
#	src/app/services/appointment.service.ts
#	src/app/services/customer.service.ts

.github/workflows/deploy-docker-to-tst.yml

@@ -0,0 +1,85 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches:
+      - develop
+    tags:
+      - "docker-build-*"
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Stap 1: Code ophalen
+      - uses: actions/checkout@v4
+
+      # Stap 2: Versienummer ophalen uit package.json en opslaan als artifact
+      - name: Extract Angular version
+        run: |
+          echo "$(cat package.json | jq -r '.version')" > version.txt
+      - name: Save version as artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: version
+          path: version.txt
+
+      # Stap 3: Inloggen bij Docker Hub
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      # Stap 4: Docker-image bouwen en taggen met Angular-versie
+      - name: Build the Docker image
+        run: |
+          VERSION=$(cat version.txt)
+          docker buildx build . --file Dockerfile-tst --tag veenm/paypoint:$VERSION-SNAPSHOT --platform linux/amd64
+
+      # Stap 5: Docker-image pushen naar Docker Hub (huidige versie tag)
+      - name: Push the Docker image (version-snapshot)
+        run: |
+          VERSION=$(cat version.txt)
+          docker push veenm/paypoint:$VERSION-SNAPSHOT
+
+  deploy:
+    needs: build-and-push
+    runs-on: ubuntu-latest
+
+    steps:
+      # Stap 1: Artifact ophalen
+      - name: Download version artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: version
+
+      # Stap 2: Lees versie uit het artifact
+      - name: Read version
+        id: read_version
+        run: echo "VERSION=$(cat version.txt)" >> $GITHUB_ENV
+
+      # Stap 3: Maak verbinding via SSH naar de Alpine server en update de container
+      - name: SSH into Alpine and update Docker container
+        uses: appleboy/ssh-action@v0.1.10
+        with:
+          host: ${{ secrets.ALPINE_HOST }}
+          username: ${{ secrets.ALPINE_USER }}
+          password: ${{ secrets.ALPINE_PASSWORD }}
+          script: |
+            VERSION=${{ env.VERSION }}
+            echo "Gekozen versie: $VERSION-SNAPSHOT"
+
+            # Stop en verwijder de huidige container
+            docker stop paypoint || true
+            docker rm paypoint || true
+
+            # Haal de nieuwste image binnen
+            docker pull veenm/paypoint:$VERSION-SNAPSHOT
+
+            # Start een nieuwe container
+            docker run -d --name paypoint --restart unless-stopped -p 15001:80 veenm/paypoint:$VERSION-SNAPSHOT
+
+            # Opruimen oude images
+            docker image prune -f

.github/workflows/deploy-docker.yml

@@ -1,7 +1,11 @@
 name: Docker Image CI
 
 on:
-  workflow_call:
+  push:
+    branches:
+      - main
+    tags:
+      - "docker-build-*"
 
 jobs:        
   build-and-push:

.github/workflows/increase-version.yml

@@ -31,5 +31,14 @@ jobs:
           # Push changes to remote main branch
           git push origin main
           
-  build-and-run:
-    uses: ./.github/workflows/deploy-docker.yml@main
+  trigger-pipeline-b:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3               
+      - name: Create and push tag
+        run: |
+             git config --global user.name "Gitea Actions"
+             git config --global user.email "actions@gitea.local"
+             git tag docker-build-$(date +%s)
+             git push --tags

Dockerfile-tst

@@ -0,0 +1,22 @@
+# Gebruik een multi-architecture versie van Node
+FROM node:23.0.0 as build
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+RUN npm install -g @angular/cli
+
+COPY . .
+
+RUN ng build --configuration=production
+
+# Gebruik een multi-architecture versie van Nginx
+FROM nginx:latest
+
+# Kopieer de gecompileerde bestanden van Angular naar de Nginx-webserver
+COPY --from=build app/dist/pay-point/browser /usr/share/nginx/html
+
+EXPOSE 80

angular.json

@@ -53,8 +53,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "500MB",
+                  "maximumError": "1000MB"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -67,7 +67,21 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
+            },
+            "test": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.test.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pay-point",
-  "version": "0.0.15",
+  "version": "0.0.21",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pay-point",
-      "version": "0.0.15",
+      "version": "0.0.21",
       "dependencies": {
         "@angular/animations": "^19.0.0",
         "@angular/cdk": "^19.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pay-point",
-  "version": "0.0.15",
+  "version": "0.0.21",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/components/edit-item/edit-item.component.ts

@@ -58,7 +58,6 @@ export class EditItemComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    console.log(this.appointment);
     let date = new Date(this.appointment.startDate);
     this.testForm = new FormGroup({
       title: new FormControl(this.appointment.title, Validators.required),

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>

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

@@ -13,3 +13,48 @@
   justify-content: center;
 
 }
+
+[tuiAppearance][data-appearance='custom'] {
+  background: #526ed3;
+  color: white;
+  margin-right: 8px;
+}
+
+.appointments-container {
+  display: flex;
+  gap: 5px; /* Ruimte tussen de objecten */
+  overflow-x: auto; /* Alleen horizontaal scrollen als nodig */
+  white-space: nowrap; /* Voorkomt dat items naar een nieuwe regel springen */
+  padding-bottom: 5px; /* Ruimte voor scrollbar */
+}
+
+.appointment-object {
+  background-color: #f5f5f5;
+  padding: 5px;
+  border-radius: 3px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+  min-width: 120px;
+  text-align: left;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex-shrink: 0; /* Voorkomt dat items kleiner worden bij weinig ruimte */
+}
+
+
+/* Optioneel: Specifieke styling voor de tekstregels */
+.name {
+  color: #555;
+}
+
+.title {
+  font-weight: bold;
+}
+
+.time {
+  font-size: 11px;
+  color: #777;
+}
+
+

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

@@ -1,7 +1,7 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {NgForOf, NgIf} from "@angular/common";
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {TuiButton, TuiGroup, TuiIcon} from "@taiga-ui/core";
+import {TuiButton, TuiError, TuiGroup, TuiIcon} from "@taiga-ui/core";
 import {
   TuiComboBoxModule,
   TuiInputDateModule,
@@ -11,7 +11,7 @@ import {
   TuiTextfieldControllerModule
 } from "@taiga-ui/legacy";
 import {Appointment} from '../../models/appointment';
-import {TuiDay} from '@taiga-ui/cdk';
+import {TuiDay, TuiTime, TuiValidationError} from '@taiga-ui/cdk';
 import {AppointmentService} from '../../services/appointment.service';
 import {
   TuiButtonLoading,
@@ -22,6 +22,7 @@ import {
 import {Customer} from '../../models/customer';
 import {CustomerService} from '../../services/customer.service';
 import {ModalComponent} from '../modal/modal.component';
+import {timeAfterStartValidator} from '../../models/validators/time-after-start-validator';
 
 @Component({
   selector: 'app-new-item',
@@ -42,42 +43,65 @@ import {ModalComponent} from '../modal/modal.component';
     TuiFilterByInputPipe,
     ModalComponent,
     TuiIcon,
-    TuiButtonLoading
+    TuiButtonLoading,
+    TuiError
   ],
   templateUrl: './new-item.component.html',
   styleUrl: './new-item.component.scss'
 })
 export class NewItemComponent implements OnInit {
 
-  @Input() testForm: FormGroup;
+  @Input() appointmentForm: FormGroup;
+  @Input() appointments: Appointment[];
   quickActions = ['Knippen', 'Kleuren', 'Knippen + Kleuren']
   waiting: boolean = false;
   protected value: TuiDay | null = null;
   @Output() appointmentAddedEvent = new EventEmitter();
   showNewCustomer = false;
   customerForm: FormGroup;
+  today: Date;
+  timeError = new TuiValidationError('Begintijd moet voor de eindtijd liggen.');
+
 
   constructor(private appointmentService: AppointmentService, private customerService: CustomerService) {
   }
 
   ngOnInit(): void {
     this.getCustomers()
+    this.today = new Date();
     this.customerForm = new FormGroup({
       firstName: new FormControl('', Validators.required),
       lastName: new FormControl('', Validators.required),
       email: new FormControl('', Validators.required),
     })
+    this.appointmentForm.get('startTime').setValue(new TuiTime(this.today.getHours(), this.today.getMinutes()), Validators.required)
+    this.appointmentForm.get('endTime').setValue(new TuiTime(this.getEndTime().getHours(), this.getEndTime().getMinutes()), [Validators.required, timeAfterStartValidator('startTime')])
+    this.appointments.sort((a, b) => {
+      return a.startHour - b.startHour || a.startMinute - b.startMinute;
+    });
+  }
+
+  getEndTime(): Date {
+    const endTime = new Date(this.today); // Kopieer startTime
+    endTime.setMinutes(endTime.getMinutes() + 30); // 30 minuten toevoegen
+
+    // Controleer of de dag nog steeds hetzelfde is
+    if (endTime.getDate() !== this.today.getDate()) {
+      endTime.setHours(23, 59, 59, 999); // Zet naar 23:59:59 als het overloopt
+    }
+
+    return endTime;
   }
 
   registerAppointment() {
-    const title = this.testForm.get('title').value
-    const description = this.testForm.get('notes').value
-    const startTime = this.testForm.get('startTime').value
-    const endTime = this.testForm.get('endTime').value
-    let date = this.testForm.get('date').value
+    const title = this.appointmentForm.get('title').value
+    const description = this.appointmentForm.get('notes').value
+    const startTime = this.appointmentForm.get('startTime').value
+    const endTime = this.appointmentForm.get('endTime').value
+    let date = this.appointmentForm.get('date').value
     let correctDate = new Date(date.year, date.month, date.day, startTime.hours, startTime.minutes);
 
-    const customer = this.control.value;
+    const customer = this.customerControl.value;
 
     const appointment = new Appointment(title, description, startTime.hours, startTime.minutes, endTime.hours, endTime.minutes, correctDate, customer)
     this.waiting = true
@@ -88,15 +112,15 @@ export class NewItemComponent implements OnInit {
   }
 
   formIsValid() {
-    return this.testForm.valid ? 'active' : 'disabled'
+    return this.appointmentForm.valid && this.customerControl.valid ? 'active' : 'disabled'
   }
 
   addAction(action: string) {
-    this.testForm.get('title').setValue(`${action} `)
+    this.appointmentForm.get('title').setValue(`${action} `)
   }
 
-  protected readonly control = new FormControl<Customer | null>(
-    null,
+  protected readonly customerControl = new FormControl<Customer | null>(
+    null, Validators.required
   );
 
   toggleCustomerModal() {
@@ -125,4 +149,8 @@ export class NewItemComponent implements OnInit {
       this.items = response;
     })
   }
+
+  getFormattedTime(hour: number, minute: number): string {
+    return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+  }
 }

src/app/interceptors/auth-interceptor.ts

@@ -1,5 +1,5 @@
-import { HttpInterceptorFn } from '@angular/common/http';
-import { inject } from '@angular/core';
+import {HttpInterceptorFn} from '@angular/common/http';
+import {inject} from '@angular/core';
 import {AuthService} from '../services/auth.service';
 
 const excludedUrls = ['/auth/login'];

src/app/models/appointment.ts

@@ -22,8 +22,6 @@ export class Appointment {
     this.startDate = date;
     this.customer = customer;
 
-    console.log(this)
-
     // Bereken de totale duur in minuten
     this.durationInMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute);
   }

src/app/models/user-dto.ts

@@ -1,8 +1,8 @@
 export class UserDto {
-  username:string
-  fullName:string
-  email:string
-  token:string
+  username: string
+  fullName: string
+  email: string
+  token: string
 
   constructor() {
   }

src/app/models/validators/time-after-start-validator.ts

@@ -0,0 +1,18 @@
+import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';
+
+export function timeAfterStartValidator(startTimeField: string): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const startTime = control.parent?.get(startTimeField)?.value;
+    const endTime = control.value;
+
+    if (!startTime || !endTime) {
+      return null; // Niet valideren als een van beide leeg is
+    }
+
+    // Omzetten naar Date-objecten voor vergelijking
+    const start = new Date(`1970-01-01T${startTime}:00`);
+    const end = new Date(`1970-01-01T${endTime}:00`);
+
+    return end > start ? null : {endTimeInvalid: true};
+  };
+}

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/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;
 }
 

src/app/services/auth.service.ts

@@ -1,7 +1,7 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { JwtHelperService } from '@auth0/angular-jwt';
-import { Observable } from 'rxjs';
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {JwtHelperService} from '@auth0/angular-jwt';
+import {Observable} from 'rxjs';
 import {jwtDecode} from 'jwt-decode';
 
 @Injectable({
@@ -12,10 +12,11 @@ export class AuthService {
   baseApi = "https://api.melvanveen.nl/api/auth/login";
   jwtHelper = new JwtHelperService();
 
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) {
+  }
 
   login(username: string, password: string): Observable<any> {
-    return this.http.post(this.baseApi, { username, password });
+    return this.http.post(this.baseApi, {username, password});
   }
 
   isAuthenticated(): boolean {

src/app/utils/date-formatter.ts

@@ -7,7 +7,6 @@ export class DateFormatter {
 
   static getHours(date: Date) {
     let hours = date.getHours()
-    console.log(hours)
     if (hours > 23) {
       return 23
     }

src/environments/environment.development.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  baseApi: 'http://localhost:8080/api',
+  production: false
+};

src/environments/environment.test.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  baseApi: 'http://localhost:8080/api',
+  production: false
+};

src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  baseApi: 'https://api.melvanveen.nl/api',
+  production: true
+};