Add random meal to jarvis app

Caddyfile

@@ -1,4 +1,5 @@
 localhost {
-	reverse_proxy /v1/* http://127.0.0.1:8080
+	reverse_proxy /v1/* http://127.0.0.1:8081
+	reverse_proxy /api/* http://127.0.0.1:8080
 	reverse_proxy /* http://127.0.0.1:4200
 }

jarvis-fe/src/app/meal.service.ts

@@ -0,0 +1,17 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {MealCombo} from "./models/meal";
+
+const MEAL_URL = "api/meals";
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MealService {
+  constructor(private http: HttpClient) { }
+
+  getRandomMeals(): Observable<MealCombo> {
+    return this.http.get<MealCombo>(MEAL_URL + "/random");
+  }
+}

jarvis-fe/src/app/models/meal.ts

@@ -0,0 +1,11 @@
+
+export interface Meal {
+  name: string
+  category: string
+}
+
+export interface MealCombo {
+  first: Meal
+  second: Meal
+  withSupplement: boolean
+}

jarvis-fe/src/app/welcome/welcome.component.html

@@ -1,5 +1,21 @@
 <div style="text-align: center">
   <h1>Willkommen bei jARVIS!</h1>
 </div>
-<div style="padding: 2rem 0px">Wie kann ich helfen?</div>
+@if (!!mealCombo) {
+  <div style="text-align: center; margin: 3rem">
+    <h3>
+      Zufallsgericht
+    </h3>
+    <div>
+      <span style="font-weight: bold">{{ mealCombo.first.name }}</span> -
+      <span style="color: grey">{{ mealCombo.first.category }}</span>
+      <br>
+      <span style="font-weight: bold">{{ mealCombo.second.name }}</span> -
+      <span style="color: grey">{{ mealCombo.second.category }}</span>
+    </div>
+    <button mat-raised-button style="margin: 1rem 0" (click)="nextMeal()">Nächstes Gericht</button>
+  </div>
+} @else {
+  <div style="padding: 2rem 0px">Wie kann ich helfen?</div>
+}
 <img src="../../assets/images/jarvis.png" alt="jARVIS" class="responsive" />

jarvis-fe/src/app/welcome/welcome.component.ts

@@ -1,13 +1,29 @@
 import { Component, OnInit } from '@angular/core';
+import {MealService} from "../meal.service";
+import {MealCombo} from "../models/meal";
+import {MatButton} from "@angular/material/button";
 
 @Component({
     selector: 'app-welcome',
     templateUrl: './welcome.component.html',
     styleUrls: ['./welcome.component.css'],
     standalone: true,
+  imports: [
+    MatButton
+  ]
 })
 export class WelcomeComponent implements OnInit {
-  constructor() {}
+  constructor(
+    private mealService: MealService
+  ) {}
 
-  ngOnInit(): void {}
+  mealCombo?: MealCombo
+
+  ngOnInit(): void {
+    this.nextMeal();
+  }
+
+  nextMeal() {
+    this.mealService.getRandomMeals().subscribe(meals => this.mealCombo = meals);
+  }
 }