fixed classes and module names

front-end/src/app/app.component.html

@@ -1,12 +1,3 @@
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
-<!-- * * * * * * * to get started with your project! * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
 <style>
   :host {
     --bright-blue: oklch(51.01% 0.274 263.83);

front-end/src/app/app.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { RecipeListComponent } from './recipe-list/recipe-list.component';
+import { RecipeService } from './recipe.service';
+
+@NgModule({
+  declarations: [
+    RecipeListComponent,
+  ],
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot([]), 
+    HttpClientModule, 
+    ReactiveFormsModule, 
+  ],
+  providers: [
+    RecipeService, 
+  ],
+  bootstrap: [RecipeListComponent], 
+})
+export class AppModule {}

front-end/src/app/recipe-list/recipe-list.component.html

@@ -0,0 +1,29 @@
+<article>
+    <img class="recipe-photo" [src]="recipe?.photo" alt="Exterior photo of {{recipe?.name}}"/>
+    <section class="recipe-description">
+      <h2 class="recipe-heading">{{recipe?.name}}</h2>
+      <p class="recipe-category">{{recipe?.category}}</p>
+    </section>
+    <section>
+      <p class="recipe-location">{{recipe?.ingredients}}</p>
+      <p class="recipe-location">{{recipe?.method}}</p>
+    </section>
+    <section class="recipe-apply">
+      <h2 class="recipe-feedback">We would appreciate your feedback on this dish:</h2>
+      <form [formGroup]="applyForm" (submit)="submitApplication()">
+        <label for="first-name">First Name:</label>
+        <input id="first-name" type="text" formControlName="firstName">
+
+        <label for="last-name">Last Name:</label>
+        <input id="last-name" type="text" formControlName="lastName">
+
+        <label for="email">Email:</label>
+        <input id="email" type="email" formControlName="email">
+
+        <label for="feedback">Feedback:</label>
+        <input id="feedback" type="text" formControlName="feedback">
+        <button type="submit" class="primary">Apply now</button>
+      </form>
+    </section>
+  </article>
+

front-end/src/app/recipe-list/recipe-list.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { RecipeService } from '../recipe.service';
+import { Recipe } from '../recipe.model';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-recipe-list',
+  templateUrl: './recipe-list.component.html',
+  styleUrls: ['./recipe-list.component.css']
+})
+export class RecipeListComponent implements OnInit {
+  recipe: Recipe | undefined;  
+
+
+  applyForm = new FormGroup({
+    firstName: new FormControl('', Validators.required),
+    lastName: new FormControl('', Validators.required),
+    email: new FormControl('', [Validators.required, Validators.email]),
+    feedback: new FormControl('')
+  });
+
+  constructor(private route: ActivatedRoute, private recipeService: RecipeService) {}
+
+  ngOnInit(): void {
+    const recipesLocationId = parseInt(this.route.snapshot.params['id'], 10);
+    this.recipeService.getRecipeById(recipesLocationId).subscribe(
+      (recipe: Recipe) => {
+        this.recipe = recipe;
+      },
+      (error) => {
+        console.error('Error fetching recipe details:', error);
+      }
+    );
+  }
+
+  submitApplication(): void {
+    if (this.applyForm.valid) {
+      const firstName = this.applyForm.value.firstName as string;
+      const lastName = this.applyForm.value.lastName as string;
+      const email = this.applyForm.value.email as string;
+      const feedback = this.applyForm.value.feedback as string;
+
+      this.recipeService.submitApplication(firstName, lastName, email, feedback).subscribe(
+        () => {
+          console.log('Feedback submitted successfully');
+          this.applyForm.reset();
+        },
+        (error) => {
+          console.error('Error submitting feedback:', error);
+        }
+      );
+    } else {
+      console.error('Form is invalid. Please fill in all required fields.');
+    }
+  }
+}

front-end/src/app/recipeslocation.ts → front-end/src/app/recipe.model.ts

@@ -1,4 +1,4 @@
-export interface Recipeslocation {
+export interface Recipe {
     id: number;
   name: string;
   category: string;
@@ -8,5 +8,5 @@ export interface Recipeslocation {
   time: string,
   vegan: string,
   tricky: string,
-  portions:number,
+  portions: number,
 }

front-end/src/app/recipe.service.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Recipe } from './recipe.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RecipeService {
+
+  private apiUrl = 'http://localhost:8080/api/recipes'; 
+
+  constructor(private http: HttpClient) { }
+
+  getAllRecipes(): Observable<Recipe[]> {
+    return this.http.get<Recipe[]>(this.apiUrl);
+  }
+
+  getRecipeById(id: number): Observable<Recipe> {
+    return this.http.get<Recipe>(`${this.apiUrl}/${id}`);
+  }
+
+  createRecipe(recipe: Recipe): Observable<Recipe> {
+    return this.http.post<Recipe>(this.apiUrl, recipe);
+  }
+
+  updateRecipe(id: number, recipe: Recipe): Observable<Recipe> {
+    return this.http.put<Recipe>(`${this.apiUrl}/${id}`, recipe);
+  }
+
+  deleteRecipe(id: number): Observable<void> {
+    return this.http.delete<void>(`${this.apiUrl}/${id}`);
+  }
+
+  submitApplication(firstName: string, lastName: string, email: string, feedback: string): Observable<any> {
+    const application = { firstName, lastName, email, feedback };
+    return this.http.post(`${this.apiUrl}/feedback`, application);
+  }
+}
+
+

front-end/src/app/recipe/recipe.component.ts

@@ -1,15 +1,19 @@
 import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
 import { RecipesLocationComponent } from '../recipes-location/recipes-location.component';
-import { Recipeslocation } from '../recipeslocation';
-import { RecipesService } from '../recipes.service';
+import { Recipe } from '../recipe.model';
+import { RecipeService } from '../recipe.service';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-recipe',
   standalone: true,
   imports: [
     CommonModule,
-    RecipesLocationComponent
+    HttpClientModule,
+    RecipesLocationComponent,
+    ReactiveFormsModule
   ],  
   template: `
     <section>
@@ -20,29 +24,32 @@ import { RecipesService } from '../recipes.service';
     </section>
     <section class="results">
       <app-recipes-location
-        *ngFor="let recipeslocation of filteredLocationList"
-        [recipesLocation]="recipeslocation">
+        *ngFor="let recipeslocation of filteredList"
+        [recipe="recipe">
       </app-recipes-location>
     </section>
   `,
   styleUrl: './recipe.component.css'
 })
 export class RecipeComponent {
 
-  recipesLocationList: Recipeslocation[] = [];
-  recipesService: RecipesService = inject(RecipesService);
-  filteredLocationList: Recipeslocation[] = [];
+  recipesList: Recipe[] = [];
+  recipeService: RecipeService = inject(RecipeService);
+  filteredList: Recipe[] = [];
 
-constructor() {
-  this.recipesLocationList = this.recipesService.getAllRecipesLocations();
-  this.filteredLocationList = this.recipesLocationList;
+  constructor() {
+    this.recipeService.getAllRecipes().subscribe(data => {
+      this.recipesList = data;
+      this.filteredList = data;
+    });
   }
+
   filterResults(text: string) {
     if (!text) {
-      this.filteredLocationList = this.recipesLocationList;
+      this.filteredList = this.recipesList;
       return;
     }
 
-    this.filteredLocationList = this.recipesLocationList.filter(recipesLocation => recipesLocation?.category.toLowerCase().includes(text.toLowerCase()));
+    this.filteredList = this.recipesList.filter(recipe => recipe?.category.toLowerCase().includes(text.toLowerCase()));
   }
 }

front-end/src/app/recipes-location/recipes-location.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Recipeslocation } from '../recipeslocation';
+import { Recipe } from '../recipe.model';
 import { RouterModule } from '@angular/router';
 
 @Component({
@@ -12,22 +12,22 @@ import { RouterModule } from '@angular/router';
   ],
   template: `
   <section class="recipe">
-    <img class="recipe-photo" [src]="recipesLocation.photo" alt="Exterior photo of {{recipesLocation.name}}">
-    <h1 class="recipe-heading">{{ recipesLocation.name }}</h1>
-    <h2 class="recipe-category">{{ recipesLocation.category }}</h2>
+    <img class="recipe-photo" [src]="recipe.photo" alt="Exterior photo of {{recipe.name}}">
+    <h1 class="recipe-heading">{{ recipe.name }}</h1>
+    <h2 class="recipe-category">{{ recipe.category }}</h2>
     <section class="recipe-features">
       <ul>
-        <li>Cooks in: {{recipesLocation.time}}</li>
-        <li>Vegan: {{recipesLocation.vegan}}</li>
-        <li>Difficulty: {{recipesLocation.tricky}}</li>
-        <li>Serves: {{recipesLocation.portions}}</li>
+        <li>Cooks in: {{recipe.time}}</li>
+        <li>Vegan: {{recipe.vegan}}</li>
+        <li>Difficulty: {{recipe.tricky}}</li>
+        <li>Serves: {{recipe.portions}}</li>
       </ul>
     </section>    
-    <a [routerLink]="['/details', recipesLocation.id]">Tap for method and ingredients</a>
+    <a [routerLink]="['/details', recipe.id]">Tap for method and ingredients</a>
   </section>
   `,
   styleUrl: './recipes-location.component.css'
 })
 export class RecipesLocationComponent {
-  @Input() recipesLocation!: Recipeslocation;
+  @Input() recipe!: Recipe;
 }