klausur-practice-3

demo/src/app/Product.ts

@@ -0,0 +1,5 @@
+export interface Product {
+  id: number;
+  name: string;
+  stock: number; // Anzahl an Lager
+}

demo/src/app/app.routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '@angular/router';
 import { StudentForm } from './student-form/student-form';
 import { StudentFormReactive } from './student-form-reactive/student-form-reactive';
+import { OrderComponent } from './order-component/order-component';
 
 export const routes: Routes = [
   { path: 'student', component: StudentForm },
-  { path: 'student-reactive', component: StudentFormReactive }
+  { path: 'student-reactive', component: StudentFormReactive },
+  { path: 'order', component: OrderComponent },
 ];

demo/src/app/order-component/order-component.html

@@ -0,0 +1,25 @@
+<ul>
+  @for (product of products; track product.id) {
+  <li>
+    {{ product.name }} - Bestand: {{ product.stock }}
+    @if (product.stock == 0) { <span>(AUSVERKAUFT)</span> }
+  </li>
+  }
+
+  <hr>
+
+</ul>
+
+<form [formGroup]="orderForm" (ngSubmit)="submitOrder()">
+  <label for="name">Produktname: </label>
+  <input id="name" formControlName="productName" type="text" />
+
+  <br>
+
+  <label for="menge">Menge: </label>
+  <input id="menge" formControlName="amount" type="number" />
+
+  <br>
+
+  <input type="submit" value="Bestellen" />
+</form>

demo/src/app/order-component/order-component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderComponent } from './order-component';
+
+describe('OrderComponent', () => {
+  let component: OrderComponent;
+  let fixture: ComponentFixture<OrderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [OrderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OrderComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

demo/src/app/order-component/order-component.ts

@@ -0,0 +1,45 @@
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { Product } from '../Product';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+const API_URL = 'https://api.lager.de';
+
+@Component({
+  selector: 'app-order-component',
+  imports: [ReactiveFormsModule],
+  templateUrl: './order-component.html',
+  styleUrl: './order-component.css',
+})
+export class OrderComponent {
+  products: Product[];
+  orderForm: FormGroup = null!;
+
+  constructor(private readonly httpClient: HttpClient) {
+    this.products = [];
+  }
+
+  ngOnInit() {
+    this.orderForm = new FormGroup({
+      productName: new FormControl<string>('', Validators.required),
+      amount: new FormControl<number>(1),
+    });
+
+    this.loadProducts();
+  }
+
+  loadProducts() {
+    this.httpClient.get<Product[]>(API_URL + '/products').subscribe((products) => {
+      this.products = products;
+    });
+  }
+
+  submitOrder() {
+    console.log('Sende Bestellung...');
+    const name = this.orderForm?.value.productName;
+    const body = this.orderForm?.value;
+    this.httpClient.post<any>(API_URL + '/orders/' + name, body).subscribe((response) => {
+      console.log('Erfolg', response);
+    });
+  }
+}