jank/angular-hotel-manager
1
0
Fork 0
Code Issues 1 Pull requests 5 Projects Releases Packages Wiki Activity Actions

update styling and do stuff

Browse source
This commit is contained in:
Jan-Marlon Leibl 2024-11-26 09:37:20 +01:00
parent 21eb309acc
commit dd4faea712
19 changed files with 266 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/app/hotel-form/hotel-form.component.html Normal file
View file

@ -0,0 +1,58 @@
<form class="space-y-4 max-w-md mx-auto mt-4" [formGroup]="form">
<div class="form-group">
<label for="hotelName" class="block text-sm font-medium text-gray-700">Hotel Name</label>
<input type="text" formControlName="name"
class="form-control mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
id="hotelName" placeholder="Enter hotel name">
<div *ngIf="form.get('name')?.invalid && (form.get('name')?.dirty || form.get('name')?.touched)"
class="text-red-500 text-sm mt-1">
<div *ngIf="form.get('name')?.errors?.['required']">Hotel Name is required.</div>
<div *ngIf="form.get('name')?.errors?.['minlength']">Hotel Name must be at least 3 characters long.</div>
</div>
</div>
<div class="form-group">
<label for="hotelDescription" class="block text-sm font-medium text-gray-700">Hotel Description</label>
<input type="text" formControlName="description"
class="form-control mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
id="hotelDescription" placeholder="Enter hotel description">
<div
*ngIf="form.get('description')?.invalid && (form.get('description')?.dirty || form.get('description')?.touched)"
class="text-red-500 text-sm mt-1">
<div *ngIf="form.get('description')?.errors?.['required']">Hotel Description is required.</div>
<div *ngIf="form.get('description')?.errors?.['minlength']">Hotel Description must be at least 3 characters long.
</div>
</div>
</div>
<div class="form-group">
<label for="hotelPrice" class="block text-sm font-medium text-gray-700">Hotel Price</label>
<input type="number" formControlName="price"
class="form-control mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
id="hotelPrice" placeholder="Enter hotel price">
<div *ngIf="form.get('price')?.invalid && (form.get('price')?.dirty || form.get('price')?.touched)"
class="text-red-500 text-sm mt-1">
<div *ngIf="form.get('price')?.errors?.['required']">Hotel Price is required.</div>
<div *ngIf="form.get('price')?.errors?.['min']">Hotel Price must be a positive number.</div>
</div>
</div>
<div class="form-group">
<label for="hotelRating" class="block text-sm font-medium text-gray-700">Hotel Rating</label>
<input type="number" formControlName="rating"
class="form-control mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"
id="hotelRating" placeholder="Enter hotel rating">
<div *ngIf="form.get('rating')?.invalid && (form.get('rating')?.dirty || form.get('rating')?.touched)"
class="text-red-500 text-sm mt-1">
<div *ngIf="form.get('rating')?.errors?.['required']">Hotel Rating is required.</div>
<div *ngIf="form.get('rating')?.errors?.['min']">Hotel Rating must be at least 0.</div>
<div *ngIf="form.get('rating')?.errors?.['max']">Hotel Rating cannot be more than 5.</div>
</div>
</div>
<div class="flex justify-between">
<div class="flex space-x-1">
<button type="submit" mat-flat-button (click)="submit()">Submit</button>
<button type="button" mat-stroked-button routerLink="/">Cancel</button>
</div>
<button mat-icon-button aria-label="Delete hotel" *ngIf="hotel" (click)="delete(hotel.id)">
<mat-icon class="text-red-500">delete</mat-icon>
</button>
</div>
</form>