diff --git a/itenium-socks/angular.json b/itenium-socks/angular.json index e7cfa50..f61caf2 100644 --- a/itenium-socks/angular.json +++ b/itenium-socks/angular.json @@ -100,5 +100,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/itenium-socks/package-lock.json b/itenium-socks/package-lock.json index 295c374..4ea53fd 100644 --- a/itenium-socks/package-lock.json +++ b/itenium-socks/package-lock.json @@ -18,6 +18,7 @@ "@angular/router": "^18.0.0", "@fortawesome/angular-fontawesome": "^0.15.0", "@fortawesome/fontawesome-free": "^6.5.2", + "ngx-timeago": "^3.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" @@ -9054,6 +9055,18 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "node_modules/ngx-timeago": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ngx-timeago/-/ngx-timeago-3.0.0.tgz", + "integrity": "sha512-oz+X8qbPJD6uFHXVWUTE+scjLPskOKbrAVlUG0pUwrn8wru7woryGdK/xdjvS74n187tbo5+e8AXgLCqEvUSjw==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": ">=16.0.0", + "rxjs": ">=7.0.0" + } + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", diff --git a/itenium-socks/package.json b/itenium-socks/package.json index 6b3a9d6..ab28ffc 100644 --- a/itenium-socks/package.json +++ b/itenium-socks/package.json @@ -20,6 +20,7 @@ "@angular/router": "^18.0.0", "@fortawesome/angular-fontawesome": "^0.15.0", "@fortawesome/fontawesome-free": "^6.5.2", + "ngx-timeago": "^3.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" diff --git a/itenium-socks/src/app/app.config.ts b/itenium-socks/src/app/app.config.ts index 3450030..49adc98 100644 --- a/itenium-socks/src/app/app.config.ts +++ b/itenium-socks/src/app/app.config.ts @@ -1,13 +1,16 @@ -import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { ApplicationConfig, DEFAULT_CURRENCY_CODE, importProvidersFrom, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideHttpClient, withFetch } from '@angular/common/http'; import { routes } from './app.routes'; +import { TimeagoModule } from 'ngx-timeago'; export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient(withFetch()), + {provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' }, + importProvidersFrom(TimeagoModule.forRoot()) ] }; diff --git a/itenium-socks/src/app/home/latest-socks.component.html b/itenium-socks/src/app/home/latest-socks.component.html index 9cd2eb7..359116d 100644 --- a/itenium-socks/src/app/home/latest-socks.component.html +++ b/itenium-socks/src/app/home/latest-socks.component.html @@ -6,22 +6,11 @@

-
-
- -
- -
-
-
{{ sock.name }}
-
{{ sock.price }}
-
-
- -
- -
-
+ @for (sock of socks$ | async; track sock.id) { +
+ +
+ }
diff --git a/itenium-socks/src/app/home/latest-socks.component.ts b/itenium-socks/src/app/home/latest-socks.component.ts index 9b03950..c25a6de 100644 --- a/itenium-socks/src/app/home/latest-socks.component.ts +++ b/itenium-socks/src/app/home/latest-socks.component.ts @@ -2,13 +2,14 @@ import { Component, OnInit } from '@angular/core'; import { SocksService } from '../socks/socks.service'; import { Observable } from 'rxjs'; import { Sock } from '../socks/sock.model'; -import { AsyncPipe, NgFor } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; import { RouterLink } from '@angular/router'; +import { SockLayoutComponent } from '../sock-layout/sock-layout.component'; @Component({ selector: 'app-latest-socks', standalone: true, - imports: [NgFor, AsyncPipe, RouterLink], + imports: [AsyncPipe, RouterLink, SockLayoutComponent], templateUrl: './latest-socks.component.html' }) export class LatestSocksComponent implements OnInit { diff --git a/itenium-socks/src/app/sock-layout/sock-layout.component.html b/itenium-socks/src/app/sock-layout/sock-layout.component.html new file mode 100644 index 0000000..42d95e5 --- /dev/null +++ b/itenium-socks/src/app/sock-layout/sock-layout.component.html @@ -0,0 +1,14 @@ +
+ +
+ +
+
+
{{ sock.name }}
+
{{ sock.price | currency }}
+
+
+ +
+ +
\ No newline at end of file diff --git a/itenium-socks/src/app/sock-layout/sock-layout.component.ts b/itenium-socks/src/app/sock-layout/sock-layout.component.ts new file mode 100644 index 0000000..67edeea --- /dev/null +++ b/itenium-socks/src/app/sock-layout/sock-layout.component.ts @@ -0,0 +1,14 @@ +import { Component, Input } from '@angular/core'; +import { Sock } from '../socks/sock.model'; +import { CurrencyPipe } from '@angular/common'; + +@Component({ + selector: 'app-sock-layout', + standalone: true, + imports: [CurrencyPipe], + templateUrl: './sock-layout.component.html' +}) + +export class SockLayoutComponent { + @Input() sock! : Sock; +} diff --git a/itenium-socks/src/app/socks/shop.component.html b/itenium-socks/src/app/socks/shop.component.html index a0139e2..6adebed 100644 --- a/itenium-socks/src/app/socks/shop.component.html +++ b/itenium-socks/src/app/socks/shop.component.html @@ -6,22 +6,11 @@

-
-
- -
- -
-
-
{{ sock.name }}
-
{{ sock.price }}
-
-
- -
- + @for (sock of socks$ | async; track sock.id) { +
+
-
+ }
diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts index 33c897b..9b44b71 100644 --- a/itenium-socks/src/app/socks/shop.component.ts +++ b/itenium-socks/src/app/socks/shop.component.ts @@ -2,12 +2,13 @@ import { Component } from '@angular/core'; import { SocksService } from './socks.service'; import { Observable } from 'rxjs'; import { Sock } from './sock.model'; -import { AsyncPipe, NgFor } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; +import { SockLayoutComponent } from '../sock-layout/sock-layout.component'; @Component({ selector: 'app-shop', standalone: true, - imports: [NgFor, AsyncPipe], + imports: [AsyncPipe, SockLayoutComponent], templateUrl: './shop.component.html' }) export class ShopComponent { diff --git a/itenium-socks/src/app/socks/sock-reviews.component.html b/itenium-socks/src/app/socks/sock-reviews.component.html index 696aab3..57497fd 100644 --- a/itenium-socks/src/app/socks/sock-reviews.component.html +++ b/itenium-socks/src/app/socks/sock-reviews.component.html @@ -9,15 +9,18 @@