Refactor frontend to a simple ecommerce site

frontend/src/app/app.component.html

@@ -333,4 +333,14 @@ <h1>Hello, {{ title }}</h1>
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 
 
+<nav>
+  <ul>
+    <li><a routerLink="/catalog">Catalog</a></li>
+    <li><a routerLink="/product">Products</a></li>
+    <li><a routerLink="/product-detail">Product Detail</a></li>
+    <li><a routerLink="/shopping-cart">Shopping Cart</a></li>
+    <li><a routerLink="/checkout">Checkout</a></li>
+  </ul>
+</nav>
+
 <router-outlet />

frontend/src/app/app.routes.ts

@@ -1,3 +1,14 @@
 import { Routes } from '@angular/router';
+import { CatalogComponent } from './catalog/catalog.component';
+import { ProductComponent } from './product/product.component';
+import { ProductDetailComponent } from './product-detail/product-detail.component';
+import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
+import { CheckoutComponent } from './checkout/checkout.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: 'catalog', component: CatalogComponent },
+  { path: 'product', component: ProductComponent },
+  { path: 'product-detail', component: ProductDetailComponent },
+  { path: 'shopping-cart', component: ShoppingCartComponent },
+  { path: 'checkout', component: CheckoutComponent },
+];

frontend/src/app/catalog/catalog.component.html

@@ -0,0 +1,10 @@
+<div class="catalog">
+  <h2>Product Catalog</h2>
+  <ul>
+    <li *ngFor="let product of products">
+      <h3>{{ product.name }}</h3>
+      <p>{{ product.description }}</p>
+      <p>Price: ${{ product.price }}</p>
+    </li>
+  </ul>
+</div>

frontend/src/app/catalog/catalog.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-catalog',
+  templateUrl: './catalog.component.html',
+  styleUrls: ['./catalog.component.css']
+})
+export class CatalogComponent {
+  // Hardcoded list of products for the catalog
+  products = [
+    { id: 1, name: 'Product 1', description: 'Description of Product 1', price: 10.99 },
+    { id: 2, name: 'Product 2', description: 'Description of Product 2', price: 20.99 },
+    { id: 3, name: 'Product 3', description: 'Description of Product 3', price: 30.99 }
+  ];
+}

frontend/src/app/checkout/checkout.component.html

@@ -0,0 +1,15 @@
+<div class="checkout">
+  <h2>Checkout</h2>
+  <form (ngSubmit)="onSubmit()">
+    <label for="name">Name:</label>
+    <input type="text" id="name" [(ngModel)]="name" name="name" required>
+
+    <label for="address">Address:</label>
+    <input type="text" id="address" [(ngModel)]="address" name="address" required>
+
+    <label for="cardNumber">Card Number:</label>
+    <input type="text" id="cardNumber" [(ngModel)]="cardNumber" name="cardNumber" required>
+
+    <button type="submit">Submit</button>
+  </form>
+</div>

frontend/src/app/checkout/checkout.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-checkout',
+  templateUrl: './checkout.component.html',
+  styleUrls: ['./checkout.component.css']
+})
+export class CheckoutComponent {
+  name: string = '';
+  address: string = '';
+  cardNumber: string = '';
+
+  onSubmit() {
+    // Process the checkout form submission
+    console.log('Checkout form submitted', {
+      name: this.name,
+      address: this.address,
+      cardNumber: this.cardNumber
+    });
+  }
+}

frontend/src/app/product-detail/product-detail.component.html

@@ -0,0 +1,5 @@
+<div class="product-detail">
+  <h2>{{ product.name }}</h2>
+  <p>{{ product.description }}</p>
+  <p>Price: ${{ product.price }}</p>
+</div>

frontend/src/app/product-detail/product-detail.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-product-detail',
+  templateUrl: './product-detail.component.html',
+  styleUrls: ['./product-detail.component.css']
+})
+export class ProductDetailComponent {
+  // Hardcoded product details for the product detail component
+  product = {
+    id: 1,
+    name: 'Product 1',
+    description: 'Detailed description of Product 1',
+    price: 10.99
+  };
+}

frontend/src/app/product/product.component.html

@@ -0,0 +1,5 @@
+<div class="product">
+  <h2>{{ product.name }}</h2>
+  <p>{{ product.description }}</p>
+  <p>Price: ${{ product.price }}</p>
+</div>

frontend/src/app/product/product.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-product',
+  templateUrl: './product.component.html',
+  styleUrls: ['./product.component.css']
+})
+export class ProductComponent {
+  // Hardcoded product details for the product component
+  product = {
+    id: 1,
+    name: 'Product 1',
+    description: 'Description of Product 1',
+    price: 10.99
+  };
+}

frontend/src/app/shopping-cart/shopping-cart.component.html

@@ -0,0 +1,11 @@
+<div class="shopping-cart">
+  <h2>Shopping Cart</h2>
+  <ul>
+    <li *ngFor="let item of items">
+      <h3>{{ item.name }}</h3>
+      <p>Price: ${{ item.price }}</p>
+      <p>Quantity: {{ item.quantity }}</p>
+    </li>
+  </ul>
+  <p>Total: ${{ getTotal() }}</p>
+</div>

frontend/src/app/shopping-cart/shopping-cart.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-shopping-cart',
+  templateUrl: './shopping-cart.component.html',
+  styleUrls: ['./shopping-cart.component.css']
+})
+export class ShoppingCartComponent {
+  items = [
+    { name: 'Product 1', price: 10.99, quantity: 1 },
+    { name: 'Product 2', price: 5.99, quantity: 2 },
+    { name: 'Product 3', price: 20.99, quantity: 1 }
+  ];
+
+  getTotal() {
+    return this.items.reduce((total, item) => total + item.price * item.quantity, 0);
+  }
+}

frontend/src/styles.css

@@ -1 +1,100 @@
 /* You can add global styles to this file, and also import other style files */
+
+/* Styles for Catalog Component */
+.catalog {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.catalog h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.catalog ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.catalog li {
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+/* Styles for Product Component */
+.product {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.product h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.product p {
+  font-size: 16px;
+}
+
+/* Styles for Product Detail Component */
+.product-detail {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.product-detail h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.product-detail p {
+  font-size: 16px;
+}
+
+/* Styles for Shopping Cart Component */
+.shopping-cart {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.shopping-cart h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.shopping-cart ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.shopping-cart li {
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+/* Styles for Checkout Component */
+.checkout {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.checkout h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.checkout form {
+  display: flex;
+  flex-direction: column;
+}
+
+.checkout label {
+  margin-bottom: 5px;
+}
+
+.checkout input {
+  margin-bottom: 10px;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}