Exercise buying socks

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",
+    "ng-angular-popup": "^0.6.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

itenium-socks/src/app/app.component.html

@@ -1 +1,2 @@
 <router-outlet />
+<ng-toast [position]="ToasterPosition.TOP_CENTER"></ng-toast>   

itenium-socks/src/app/app.component.ts

@@ -1,12 +1,16 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import {NgToastModule, ToasterPosition} from 'ng-angular-popup';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [
+    NgToastModule,
     RouterOutlet,
   ],
   templateUrl: './app.component.html',
 })
-export class AppComponent {}
+export class AppComponent {
+  ToasterPosition = ToasterPosition;
+}

itenium-socks/src/app/app.config.ts

@@ -3,11 +3,13 @@ import { provideRouter } from '@angular/router';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 
 import { routes } from './app.routes';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
     provideHttpClient(withFetch()),
+    provideAnimations()
   ]
 };

itenium-socks/src/app/socks/shop.component.css

@@ -0,0 +1,7 @@
+.soldOutItem {
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: red;
+    padding: 0.5em;
+}

itenium-socks/src/app/socks/shop.component.html

@@ -15,6 +15,9 @@ <h2>
             <div class="detail-box">
               <h6>{{ sock.name }}</h6>
               <h6><span>{{ sock.price }}</span></h6>
+              @if (sock.inventory == 0) {
+                <h6 class="soldOutItem">SOLD OUT</h6>
+              }
             </div>
             <div class="new">
               <span class="favourite" [style.color]="sock.color"><i class="fa fa-star"></i></span>

itenium-socks/src/app/socks/shop.component.ts

@@ -8,7 +8,8 @@ import { AsyncPipe, NgFor } from '@angular/common';
   selector: 'app-shop',
   standalone: true,
   imports: [NgFor, AsyncPipe],
-  templateUrl: './shop.component.html'
+  templateUrl: './shop.component.html',
+  styleUrls: ['./shop.component.css'],
 })
 export class ShopComponent {
   socks$!: Observable<Sock[]>;

itenium-socks/src/app/socks/sock.component.css

@@ -0,0 +1,6 @@
+.soldOutBadge {
+  background-color: red; 
+  color: white; 
+  padding: 0.2em; 
+  margin: 0.2em;
+}

itenium-socks/src/app/socks/sock.component.html

@@ -32,14 +32,20 @@ <h6><span>€</span><span>{{ sock.price }}</span></h6>
       </div>
       <div class="col-sm-6 col-md-6 col-lg-6">
         <h1 style="margin-top: 25px;">{{ sock.name }}</h1>
+        @if (sock.inventory == 0) {
+        <span class="soldOutBadge">SOLD OUT!! 😭</span>
+       }
+       @else {
         {{ sock.inventory }} in stock. FREE Shipping!
+       }
+
         <br>
         Color: {{ sock.variant | titlecase }}
 
         <br>
         <br>
 
-        <button type="button" class="buy-socks" (click)="buy()">
+        <button id="buyBtn" *ngIf="sock.inventory > 0" type="button" class="buy-socks" (click)="buy()">
           BUY NOW
         </button>
       </div>

itenium-socks/src/app/socks/sock.component.ts

@@ -3,27 +3,46 @@ import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { SocksService } from './socks.service';
 import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
+import { NgToastService } from 'ng-angular-popup';
 
 @Component({
   selector: 'app-sock',
   standalone: true,
   imports: [NgIf, AsyncPipe, TitleCasePipe],
-  templateUrl: './sock.component.html'
+  templateUrl: './sock.component.html',
+  styleUrl: './sock.component.css'
 })
 export class SockComponent {
   sock$!: Observable<Sock>;
 
-  constructor(private socksService: SocksService) {}
+  constructor(private socksService: SocksService,
+    private ngToastService: NgToastService
+  ) {}
 
   ngOnInit(): void {
     // HACK: This is not the way to get the sockId!!
     const sockId = +window.location.pathname.split('/')[2];
     this.sock$ = this.socksService.getById(sockId);
   }
 
+
   buy(): void {
     const sockId = +window.location.pathname.split('/')[2];
-    this.socksService.buySocks(sockId).subscribe();
+    const btn = <HTMLInputElement> document.getElementById("buyBtn");
+    btn.disabled = true;
+    let observer = {
+      next: (value:any) => {
+        btn.disabled = false;
+        console.log("Bought!");
+        this.ngToastService.success("Bought a pair of socks!", "Congrats!", 5000);
+      },
+      error: (err:any) => {
+        btn.disabled = false;
+        console.log("Uh oh!");
+        this.ngToastService.danger("Whoops, something went wrong...", "Uh oh!", 5000);
+      },
+    };
+    this.socksService.buySocks(sockId).subscribe( observer );
   }
 
   addReview(): void {

socks-backend/db/socks.json

@@ -16,7 +16,7 @@
             "variant": "blue",
             "color": "#23A3AC",
             "price": 20,
-            "inventory": 3
+            "inventory": 1
         },
         {
             "id": 3,
@@ -25,7 +25,7 @@
             "variant": "blue",
             "color": "#27384F",
             "price": 30,
-            "inventory": 9
+            "inventory": 6
         },
         {
             "id": 4,
@@ -79,7 +79,7 @@
             "variant": "Saffron",
             "color": "#f6c93a",
             "price": 12.5,
-            "inventory": 9
+            "inventory": 6
         },
         {
             "id": 10,