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

update styling and fix search to include lowercase

Browse Source
This commit is contained in:
Jan-Marlon Leibl 2024-11-19 08:28:09 +01:00
parent dfadc7052b
commit 85dbe967ee
5 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/Button/button.component.html
View File

@ -1 +1 @@
<button type="button">{{ text }}</button>
<button type="button" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">{{ text }}</button>

8
src/app/Child/child.component.html
View File

@ -1,4 +1,4 @@
<h1>Child</h1>
<p>Balance: {{balance}}</p>
<p [class.hidden]="!isBroke">Im broke. Now im about as poor as Jan-Marlon.</p>
<button type="button" (click)=takeMoney() class="button">Take Money</button>
<h1 class="text-2xl font-bold mb-4">Child</h1>
<p class="text-lg mb-2">Balance: {{balance}}</p>
<p [class.hidden]="!isBroke" class="text-red-500 mb-4">I'm broke. Now I'm about as poor as Jan-Marlon.</p>
<button type="button" (click)="takeMoney()" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Take Money</button>

17
src/app/HotelItem/HotelItem.component.html
View File

@ -1,11 +1,8 @@
<p>Name: {{hotel.hotelName}}</p>
<p>Description: {{hotel.description}}</p>
<p>Price: {{hotel.price | currency : getCurrencyCode(selectedLanguage) : "symbol" : "2.2-2" : selectedLanguage}}</p>
<select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)">
@for (lang of langs; track lang.lang) {
<option value="{{lang.code}}" [selected]="lang.lang == 'de'">{{lang.lang}}</option>
}
<p class="text-2xl font-bold text-gray-800 mb-2">Name: {{hotel.hotelName}}</p>
<p class="text-base text-gray-600 mb-4">Description: {{hotel.description}}</p>
<p class="text-lg font-medium text-green-600 mb-4">Price: {{hotel.price | currency : getCurrencyCode(selectedLanguage) : "symbol" : "2.2-2" : selectedLanguage}}</p>
<select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)" class="block w-full p-2 border border-gray-300 rounded-md mb-4 focus:border-blue-500 focus:ring focus:ring-blue-200">
<option *ngFor="let lang of langs" [value]="lang.code" [selected]="lang.lang == 'de'">{{lang.lang}}</option>
</select>
<img src="{{hotel.imageUrl}}" alt="Hotel">
<a *ngIf="!isDetail" routerLink="/hotels/{{hotel.id}}">Details</a>
<app-star-rating [rating]="hotel.rating"></app-star-rating>
<img src="{{hotel.imageUrl}}" alt="Hotel" class="w-full h-auto rounded-lg shadow-lg mb-4">
<a *ngIf="!isDetail" routerLink="/hotels/{{hotel.id}}" class="text-blue-600 hover:text-blue-800 hover:underline mb-4 block">Details</a>

2
src/app/Search/search.component.html
View File

@ -1 +1 @@
<input [(ngModel)]="input" (ngModelChange)="update($event)" class="border border-black" type="search">
<input [(ngModel)]="input" (ngModelChange)="update($event)" class="border border-gray-300 rounded-md p-2 w-full focus:border-blue-500 focus:ring focus:ring-blue-200" type="search">

14
src/app/hotel-list/hotel-list.component.html
View File

@ -1,7 +1,9 @@
<h1>{{'hello' | uppercase | text}}</h1>
<app-search [(input)]="search"></app-search>
@if (hotels[0].hotelName) {
<div *ngFor="let hotel of hotels">
<app-hotel-item *ngIf="hotel.hotelName.includes(search)" [hotel]="hotel"></app-hotel-item>
<div class="container p-4 mx-auto max-w-4xl">
<h1>{{'hello' | uppercase | text}}</h1>
<app-search [(input)]="search"></app-search>
@if (hotels[0].hotelName) {
<div *ngFor="let hotel of hotels">
<app-hotel-item *ngIf="hotel.hotelName.toLowerCase().includes(search.toLowerCase())" [hotel]="hotel"></app-hotel-item>
</div>
}
</div>
}