Buying socks

itenium-socks/angular.json

@@ -32,6 +32,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/cyan-orange.css",
               "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
               "src/styles.scss",
               "public/bootstrap.css"
@@ -93,6 +94,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/cyan-orange.css",
               "src/styles.scss"
             ],
             "scripts": []

itenium-socks/package.json

@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.1",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.1",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
@@ -37,4 +39,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.4.2"
   }
-}
+}

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

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

itenium-socks/src/app/components/bank-account-modal/bank-account-modal.component.html

@@ -0,0 +1,9 @@
+<mat-dialog-content>
+    <label for="IBANinput">IBAN:</label>
+    <input [formControl]="ibanInput" type="text" name="IBANinput">
+    <p> We ship our socks without fee(t)s!
+        Not what you were looking for? Send them back free of charge!</p>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button (click)="addBankAccountNumber()">Submit</button>
+</mat-dialog-actions>

itenium-socks/src/app/components/bank-account-modal/bank-account-modal.component.ts

@@ -0,0 +1,27 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {ReactiveFormsModule} from "@angular/forms";
+import {
+  MatDialogRef,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogTitle,
+  MatDialogContent,
+} from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-bank-account-modal',
+  standalone: true,
+  imports: [ReactiveFormsModule, MatDialogActions, MatDialogContent],
+  templateUrl: './bank-account-modal.component.html'
+})
+export class BankAccountModalComponent {
+  ibanInput = new FormControl('');
+  @Output() onSubmitBankAccount = new EventEmitter<boolean>();
+
+  addBankAccountNumber() {
+    console.log('Dummy method');
+    console.log('printing: ' + this.ibanInput.value);
+    this.onSubmitBankAccount.emit(true);
+  }
+}

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

@@ -13,7 +13,7 @@ <h2>
               <img src="sock-images/Socks-{{ sock.brand }}-{{ sock.variant }}.png" />
             </div>
             <div class="detail-box">
-              <h6>{{ sock.name }}</h6>
+              <h6>{{ sock.name }}<span matBadge="SOLD OUT" [matBadgeHidden]="sock.inventory > 0"></span></h6>
               <h6><span>{{ sock.price }}</span></h6>
             </div>
             <div class="new">
@@ -24,4 +24,4 @@ <h6><span>{{ sock.price }}</span></h6>
       </div>
     </div>
   </div>
-</section>
+</section>

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

@@ -3,19 +3,22 @@ import { SocksService } from './socks.service';
 import { Observable } from 'rxjs';
 import { Sock } from './sock.model';
 import { AsyncPipe, NgFor } from '@angular/common';
+import { MatBadgeModule } from '@angular/material/badge';
 
 @Component({
   selector: 'app-shop',
   standalone: true,
-  imports: [NgFor, AsyncPipe],
+  imports: [NgFor, AsyncPipe, MatBadgeModule],
   templateUrl: './shop.component.html'
 })
 export class ShopComponent {
+
   socks$!: Observable<Sock[]>;
 
   constructor(private socksService: SocksService) {}
 
   ngOnInit(): void {
     this.socks$ = this.socksService.get();
   }
+
 }

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

@@ -32,23 +32,33 @@ <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) {
         {{ sock.inventory }} in stock. FREE Shipping!
+        } @else {
+        SOLD OUT
+        }
+
         <br>
         Color: {{ sock.variant | titlecase }}
 
         <br>
         <br>
 
-        <button type="button" class="buy-socks" (click)="buy()">
+        @if (sock.inventory>0) {
+        <button type="button" class="buy-socks" (click)="buy(sock.id)">
           BUY NOW
         </button>
+        <app-bank-account-modal *ngIf="showModal" (onSubmitBankAccount)="doBuy(sock.id)"></app-bank-account-modal>
+        }
       </div>
     </div>
   </div>
 </section>
 
 
 
+
+
 <section class="contact_section" style="margin-bottom: 36px">
   <div class="container px-0">
     <div class="heading_container">
@@ -91,4 +101,4 @@ <h3 style="text-align: center">
       </div>
     </div>
   </div>
-</section>
+</section>

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

@@ -1,29 +1,69 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { Sock } from './sock.model';
-import { SocksService } from './socks.service';
-import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
+import {Component, Input} from '@angular/core';
+import {Observable, catchError, map, tap} from 'rxjs';
+import {Sock} from './sock.model';
+import {SocksService} from './socks.service';
+import {AsyncPipe, NgIf, TitleCasePipe} from '@angular/common';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {ActivatedRoute} from '@angular/router';
+import {BankAccountModalComponent} from "../components/bank-account-modal/bank-account-modal.component";
+import {
+  MatDialog
+} from '@angular/material/dialog';
 
 @Component({
   selector: 'app-sock',
   standalone: true,
-  imports: [NgIf, AsyncPipe, TitleCasePipe],
-  templateUrl: './sock.component.html'
+  templateUrl: './sock.component.html',
+  imports: [NgIf, AsyncPipe, TitleCasePipe, BankAccountModalComponent]
 })
 export class SockComponent {
+
   sock$!: Observable<Sock>;
+  showAlert: boolean = false;
+  showModal = false;
+  @Input() closedModal = false;
 
-  constructor(private socksService: SocksService) {}
+  constructor(private socksService: SocksService, 
+    private snackBar: MatSnackBar, 
+    private route: ActivatedRoute, 
+    private dialog: MatDialog) { }
 
   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);
+    this.route.params.pipe(
+      map(params => {
+        const sockId = params['id'];
+        this.sock$ = this.socksService.getById(sockId);
+      })
+    ).subscribe();
   }
 
-  buy(): void {
-    const sockId = +window.location.pathname.split('/')[2];
-    this.socksService.buySocks(sockId).subscribe();
+  buy(id: number): void {
+    this.dialog.open(BankAccountModalComponent);
+  }
+
+  doBuy(id: number) {
+    this.socksService.buySocks(id)
+      .pipe(
+        tap(response => {
+
+          let snackMessage = 'Success! The socks are yours';
+          if (response.msg !== 'Socks bought!') {
+            snackMessage = 'Darn, no socks :('
+          }
+          this.displayAlert(snackMessage);
+        }),
+      )
+      .subscribe();
+  }
+
+  toggleModal() {
+    this.showModal = false;
+  }
+
+  displayAlert(message: string) {
+    this.snackBar.open(message, undefined, {
+      duration: 3000
+    });
   }
 
   addReview(): void {

itenium-socks/src/index.html

@@ -7,8 +7,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.png">
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
   <script src="js/jquery-3.4.1.min.js"></script>
   <script src="js/bootstrap.js"></script>

itenium-socks/src/styles.scss

@@ -943,3 +943,6 @@ a:focus {
       max-width: 1170px;
   }
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }