-
+
-
-
+ }
- 
-
-
-
-
- {{ sock.name }}
-{{ sock.price }}
-
-
-
-
+ @for(sock of socks$ | async; track sock.id){
+
-
+
+
+
+
-
diff --git a/itenium-socks/src/app/socks/sock-reviews.component.ts b/itenium-socks/src/app/socks/sock-reviews.component.ts
index fe89cb9..63722ca 100644
--- a/itenium-socks/src/app/socks/sock-reviews.component.ts
+++ b/itenium-socks/src/app/socks/sock-reviews.component.ts
@@ -3,11 +3,12 @@ import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { SocksService } from './socks.service';
import { Review } from './sock.model';
+import { TimeAgoPipe } from '../time-ago.pipe';
@Component({
selector: 'app-sock-reviews',
standalone: true,
- imports: [NgFor, AsyncPipe],
+ imports: [NgFor, AsyncPipe, TimeAgoPipe],
templateUrl: './sock-reviews.component.html'
})
export class SockReviewsComponent {
diff --git a/itenium-socks/src/app/time-ago.pipe.ts b/itenium-socks/src/app/time-ago.pipe.ts
new file mode 100644
index 0000000..1d1e3b9
--- /dev/null
+++ b/itenium-socks/src/app/time-ago.pipe.ts
@@ -0,0 +1,32 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'timeAgo',
+ standalone: true
+})
+export class TimeAgoPipe implements PipeTransform {
+
+ transform(value: number | Date | string): string {
+ if (!value) return 'N/A';
+
+ const time = new Date(value).getTime();
+ const now = new Date().getTime();
+ const difference = Math.floor((now - time) / 1000);
+
+ if (difference < 30) {
+ return 'Just now';
+ } else if (difference < 60) {
+ return 'A few seconds ago';
+ } else if (difference < 3600) {
+ const minutes = Math.floor(difference / 60);
+ return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+ } else if (difference < 86400) {
+ const hours = Math.floor(difference / 3600);
+ return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+ } else {
+ const days = Math.floor(difference / 86400);
+ return `${days} day${days > 1 ? 's' : ''} ago`;
+ }
+ }
+
+}
+
+ ;
+ filteredSocks$!: Observable;
+
+ public nameFilterSubject = new BehaviorSubject('');
+ public colorFilterSubject = new BehaviorSubject('');
+ public sortBySubject = new BehaviorSubject('name');
+ public currentPageSubject = new BehaviorSubject(1);
+ public pageSize = 10;
+
+ placeholderImageUrl = 'images/placeholder.jpg';
constructor(private socksService: SocksService) {}
ngOnInit(): void {
this.socks$ = this.socksService.get();
+
+ this.filteredSocks$ = combineLatest([
+ this.socks$,
+ this.nameFilterSubject.asObservable(),
+ this.colorFilterSubject.asObservable(),
+ this.sortBySubject.asObservable(),
+ this.currentPageSubject.asObservable()
+ ]).pipe(
+ map(([socks, nameFilter, colorFilter, sortBy, currentPage]) => {
+ let filtered = socks.filter(sock =>
+ sock.name.toLowerCase().includes(nameFilter.toLowerCase()) &&
+ sock.variant.toLowerCase().includes(colorFilter.toLowerCase())
+ );
+
+ filtered = filtered.sort((a, b) => {
+ if (sortBy === 'name') {
+ return a.name.localeCompare(b.name);
+ } else if (sortBy === 'price') {
+ return a.price - b.price;
+ }
+ return 0;
+ });
+
+ const startIndex = (currentPage - 1) * this.pageSize;
+ return filtered.slice(startIndex, startIndex + this.pageSize);
+ })
+ );
+ }
+
+ onFilterName(event: Event) {
+ const name = (event.target as HTMLInputElement).value;
+ this.nameFilterSubject.next(name);
+ }
+
+ onFilterColor(event: Event) {
+ const color = (event.target as HTMLInputElement).value;
+ this.colorFilterSubject.next(color);
+ }
+
+ onSortBy(event: Event) {
+ const sortBy = (event.target as HTMLInputElement).value;
+ this.sortBySubject.next(sortBy);
+ }
+
+ onPageChange(page: number) {
+ this.currentPageSubject.next(page);
+ }
+
+ onImageError(event: Event) {
+ (event.target as HTMLImageElement).src = this.placeholderImageUrl;
}
}
diff --git a/itenium-socks/src/app/socks/sock-reviews.component.html b/itenium-socks/src/app/socks/sock-reviews.component.html
index 696aab3..774dafd 100644
--- a/itenium-socks/src/app/socks/sock-reviews.component.html
+++ b/itenium-socks/src/app/socks/sock-reviews.component.html
@@ -17,7 +17,7 @@
+
+
+
diff --git a/itenium-socks/src/app/socks/shop.component.ts b/itenium-socks/src/app/socks/shop.component.ts
index 33c897b..7424621 100644
--- a/itenium-socks/src/app/socks/shop.component.ts
+++ b/itenium-socks/src/app/socks/shop.component.ts
@@ -1,21 +1,83 @@
import { Component } from '@angular/core';
import { SocksService } from './socks.service';
-import { Observable } from 'rxjs';
+import { Observable,BehaviorSubject, combineLatest } from 'rxjs';
import { Sock } from './sock.model';
import { AsyncPipe, NgFor } from '@angular/common';
+import { NgxPaginationModule } from 'ngx-pagination';
+import { map } from 'rxjs/operators';
+import { PricePipe } from '../price.pipe';
@Component({
selector: 'app-shop',
standalone: true,
- imports: [NgFor, AsyncPipe],
+ imports: [NgFor, AsyncPipe, NgxPaginationModule, PricePipe],
templateUrl: './shop.component.html'
})
export class ShopComponent {
socks$!: Observable