angular/workshop
angular/workshop
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add contact

Browse Source
This commit is contained in:
Constantin Simonis 2025-01-14 08:40:03 +01:00
parent 5bd53baaf7
commit 1ed9186912
Signed by: csimonis
GPG Key ID: 758DD9C506603183
3 changed files with 92 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/app/hotel/component/edit-hotel.component.ts
View File

@ -10,7 +10,7 @@ import {
} from "@angular/forms";
import {Hotel} from "../model/hotel";
import {RouterLink} from "@angular/router";
import {NgForOf} from "@angular/common";
import {NgForOf, NgIf} from "@angular/common";
import {debounceTime} from "rxjs";
import {ErrorMsgComponent} from "./error-msg.component";
@ -23,6 +23,7 @@ import {ErrorMsgComponent} from "./error-msg.component";
RouterLink,
NgForOf,
ErrorMsgComponent,
NgIf,
],
template: `
<ng-form [formGroup]="form" (ngSubmit)="submit()">
@ -45,6 +46,46 @@ import {ErrorMsgComponent} from "./error-msg.component";
<br>
<input id="rating" type="number" formControlName="rating">
<app-error-msg [msg]="errorMsgs['rating']"></app-error-msg>
<br>
<br>
<label for="email">Email</label>
<input id="email" type="checkbox" name="contactType" value="Email" [checked]="activeContact == 'email'" (click)="changeContactType('email')">
<br>
<label for="phoneNumber">Phone Number</label>
<input id="phoneNumber" type="checkbox" name="contactType" value="PhoneNumber" [checked]="activeContact == 'phoneNumber'" (click)="changeContactType('phoneNumber')">
<br>
<label for="none">None</label>
<input id="none" type="checkbox" name="contactType" value="none" [checked]="activeContact == 'none'" (click)="changeContactType('none')">
<br>
<br>
@if (activeContact === 'email') {
<label for="email">Email</label>
<br>
<app-error-msg [msg]="errorMsgs['email']"></app-error-msg>
<br>
<input type="email" formControlName="email" required>
<br>
<label for="emailConfirm">Confirm Email</label>
<br>
<app-error-msg [msg]="errorMsgs['emailConfirm']"></app-error-msg>
<br>
<input type="email" formControlName="emailConfirm" required>
} @else if (activeContact === 'phoneNumber') {
<label for="phoneNumber">Phone Number</label>
<br>
<app-error-msg [msg]="errorMsgs['phoneNumber']"></app-error-msg>
<br>
<input type="number" formControlName="phoneNumber" required>
<br>
<label for="phoneNumberConfirm">Confirm Phone Number</label>
<br>
<app-error-msg [msg]="errorMsgs['phoneNumberConfirm']"></app-error-msg>
<br>
<input type="number" formControlName="phoneNumberConfirm" required>
}
<br>
<br>
<button (click)="addTag()">+</button>
@ -80,7 +121,17 @@ export class EditHotelComponent implements OnInit {
max: 'Value must be less than or equal to 5'
};
activeContact!: string;
ngOnInit(): void {
if (this.hotel?.email) {
this.activeContact = 'email';
} else if (this.hotel?.phoneNumber) {
this.activeContact = 'phoneNumber';
} else {
this.activeContact = 'none';
}
const tags = [];
for (const tag of this.hotel?.tags ?? []) {
@ -92,6 +143,10 @@ export class EditHotelComponent implements OnInit {
description: new FormControl(this.hotel?.description, [Validators.required]),
price: new FormControl(this.hotel?.price, [Validators.required]),
rating: new FormControl(this.hotel?.rating, [Validators.required, Validators.min(0), Validators.max(5)]),
email: new FormControl(this.hotel?.email, [Validators.required, Validators.email]),
emailConfirm: new FormControl(this.hotel?.email, [Validators.required, Validators.email]),
phoneNumber: new FormControl(this.hotel?.phoneNumber, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
phoneNumberConfirm: new FormControl(this.hotel?.phoneNumber, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
tags: new FormArray(tags),
})
@ -118,6 +173,21 @@ export class EditHotelComponent implements OnInit {
return;
}
switch (this.activeContact) {
case 'email':
if (this.form.value.email !== this.form.value.emailConfirm) {
this.errorMsgs['email'] = 'Emails do not match';
return;
}
break;
case 'phoneNumber':
if (this.form.value.phoneNumber !== this.form.value.phoneNumberConfirm) {
this.errorMsgs['phoneNumber'] = 'Phone numbers do not match';
return;
}
break;
}
const hotel: Hotel = {
imageUrl: this.hotel?.imageUrl ?? "",
hotelName: this.form.value.name,
@ -125,7 +195,9 @@ export class EditHotelComponent implements OnInit {
price: this.form.value.price,
rating: this.form.value.rating,
id: this.hotel?.id ?? 0,
tags: this.form.value.tags ?? []
tags: this.form.value.tags ?? [],
email: this.form.value.email,
phoneNumber: this.form.value.phoneNumber
};
this.updateHotel.emit(hotel)
@ -159,4 +231,8 @@ export class EditHotelComponent implements OnInit {
this.setErrorMessage(controlName, control);
});
}
changeContactType(type: string) {
this.activeContact = type;
}
}

2
src/app/hotel/model/hotel.ts
View File

@ -2,6 +2,8 @@ export interface Hotel {
id: number;
hotelName: string;
description: string;
email: string|null,
phoneNumber: string|null,
price: number;
imageUrl: string;
rating: number;

16
src/app/hotel/service/HotelData.service.ts
View File

@ -12,7 +12,9 @@ export class HotelDataService implements InMemoryDbService{
"price": 230.5,
"imageUrl": "assets/img/heisenberg.jpg",
"rating": 3.5,
"tags": ["Meer", "Berge"]
"tags": ["Meer", "Berge"],
"email": "buea@mail.com",
"phoneNumber": "1234567890"
},
{
"id": 2,
@ -21,7 +23,9 @@ export class HotelDataService implements InMemoryDbService{
"price": 145.5,
"imageUrl": "assets/img/kjan.png",
"rating": 5,
"tags": ["Meer", "Berge"]
"tags": ["Meer", "Berge"],
"email": "marrakesch@mail.com",
"phoneNumber": "1234567890"
},
{
"id": 3,
@ -30,7 +34,9 @@ export class HotelDataService implements InMemoryDbService{
"price": 120.12,
"imageUrl": "assets/img/huy.png",
"rating": 4,
"tags": ["Meer", "Berge"]
"tags": ["Meer", "Berge"],
"email": "abuja@mail.com",
"phoneNumber": "1234567890"
},
{
"id": 4,
@ -39,7 +45,9 @@ export class HotelDataService implements InMemoryDbService{
"price": 135.12,
"imageUrl": "assets/img/rat.png",
"rating": 2.5,
"tags": ["Meer", "Berge"]
"tags": ["Meer", "Berge"],
"email": "our@mail.com",
"phoneNumber": "1234567890"
}
];