parent
007772da75
commit
b985dd6fd1
@ -1 +1,37 @@
|
||||
<p>ingredient-list works!</p>
|
||||
<ng-container *ngIf="ingredients">
|
||||
<div *ngFor="let ingre of ingredients">
|
||||
<p>-----------</p>
|
||||
<p><a>{{ ingre.name}}</a></p>
|
||||
<p>Description: {{ ingre.description}}</p>
|
||||
<p><button (click)="edit(ingre)">Modifier</button></p>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<div class="general-form-add">
|
||||
<h2>Ajouter un ingrédient</h2>
|
||||
<div class="form-group">
|
||||
<label for="newName">Nom:</label>
|
||||
<input id="newName" [(ngModel)]="newIngredient.name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newDescription">Description:</label>
|
||||
<textarea id="newDescription" [(ngModel)]="newIngredient.description" required></textarea>
|
||||
</div>
|
||||
<button class="button-form" (click)="addIngredient()">Ajouter</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="editIngredient" class="general-form-edit">
|
||||
<h2>Modifier l'ingrédient</h2>
|
||||
<div class="form-group">
|
||||
<label for="editName">Nom:</label>
|
||||
<input id="editName" [(ngModel)]="editIngredient.name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editDescription">Description:</label>
|
||||
<textarea id="editDescription" [(ngModel)]="editIngredient.description"></textarea>
|
||||
</div>
|
||||
<button class="button-form" (click)="updateIngredient()">Enregistrer</button>
|
||||
<button class="button-form" (click)="cancelEdit()">Annuler</button>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,54 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Ingredient } from '../../model/ingredient.model';
|
||||
import { IngredientService } from '../../services/ingredient.service';
|
||||
import { OnInit } from '@angular/core';
|
||||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-ingredient-list',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [NgIf, NgFor, FormsModule],
|
||||
providers: [],
|
||||
templateUrl: './ingredient-list.component.html',
|
||||
styleUrl: './ingredient-list.component.css'
|
||||
})
|
||||
export class IngredientListComponent {
|
||||
public ingredients! : Ingredient[];
|
||||
newIngredient: Ingredient = { id: 0, name: '', description: '', qty: 0 };
|
||||
editIngredient: Ingredient | null = null;
|
||||
|
||||
constructor(private serviceIngredient : IngredientService){}
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.serviceIngredient.getIngredient().subscribe(ingredients => {
|
||||
this.ingredients = ingredients;
|
||||
});
|
||||
}
|
||||
|
||||
edit(ingre: Ingredient){
|
||||
this.editIngredient = ingre;
|
||||
}
|
||||
|
||||
addIngredient() {
|
||||
this.serviceIngredient.add(this.newIngredient).subscribe(ingredient => {
|
||||
this.ingredients.push(ingredient);
|
||||
this.newIngredient = { id: 0, name: '', description: '', qty: 0}
|
||||
});
|
||||
}
|
||||
|
||||
updateIngredient() {
|
||||
if (this.editIngredient) {
|
||||
this.serviceIngredient.update(this.editIngredient).subscribe(updatedIngredient => {
|
||||
const index = this.ingredients.findIndex(i => i.id === updatedIngredient.id);
|
||||
this.ingredients[index] = updatedIngredient;
|
||||
this.editIngredient = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
cancelEdit() {
|
||||
this.editIngredient = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
background-color: #007BFF;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: #004085;
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
<div *ngIf="commandes">
|
||||
<app-recipe-mini *ngFor="let recipe of commandes" [recipe]="recipe"></app-recipe-mini>
|
||||
<a class="button" (click)="deleteCart()">Clear recipes</a>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SavedRecipeComponent } from './saved-recipe.component';
|
||||
|
||||
describe('SavedRecipeComponent', () => {
|
||||
let component: SavedRecipeComponent;
|
||||
let fixture: ComponentFixture<SavedRecipeComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [SavedRecipeComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(SavedRecipeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommandeService } from '../../services/commandes.service';
|
||||
import { OnInit } from '@angular/core';
|
||||
import { Recipe } from '../../model/recipe.model';
|
||||
import { NgFor, NgIf } from '@angular/common';
|
||||
import { RecipeMiniComponent } from '../recipe-mini/recipe-mini.component';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-saved-recipe',
|
||||
standalone: true,
|
||||
imports: [NgIf, NgFor, RecipeMiniComponent],
|
||||
templateUrl: './saved-recipe.component.html',
|
||||
styleUrl: './saved-recipe.component.css'
|
||||
})
|
||||
export class SavedRecipeComponent {
|
||||
public commandes?: Recipe[];
|
||||
|
||||
constructor(private serviceCommande : CommandeService){}
|
||||
|
||||
ngOnInit(){
|
||||
this.commandes = this.serviceCommande.getRecipe();
|
||||
}
|
||||
|
||||
deleteCart(){
|
||||
this.commandes = [];
|
||||
this.serviceCommande.clearRecipes();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
import { Recipe } from "../model/recipe.model";
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class CommandeService {
|
||||
private commande: Recipe[] = [];
|
||||
private localStorageKey = 'commande';
|
||||
|
||||
constructor(){
|
||||
console.log(this.commande);
|
||||
}
|
||||
|
||||
getRecipeById(id: number) {
|
||||
return this.commande.find(e => e.id === id);
|
||||
}
|
||||
|
||||
// Get recipes from local storage
|
||||
getRecipe(): Recipe[] {
|
||||
const recipesJson = localStorage.getItem(this.localStorageKey) || "[]";
|
||||
this.commande = JSON.parse(recipesJson) || [];
|
||||
return this.commande;
|
||||
}
|
||||
|
||||
// Add a new recipe
|
||||
addRecipe(recipe: Recipe): number {
|
||||
this.getRecipe();
|
||||
recipe.id = this.commande.length
|
||||
let newId = this.commande.push(recipe);
|
||||
localStorage.setItem(this.localStorageKey, JSON.stringify(this.commande));
|
||||
return newId;
|
||||
}
|
||||
|
||||
// Clear all recipes (for example, if needed)
|
||||
clearRecipes(): void {
|
||||
localStorage.removeItem(this.localStorageKey);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
import { Ingredient } from "../model/ingredient.model";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Observable } from "rxjs";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class IngredientService {
|
||||
private path:string = "https://664ba07f35bbda10987d9f99.mockapi.io/api/ingredients";
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getIngredient() : Observable<Ingredient[]>{
|
||||
return this.http.get<Ingredient[]>(this.path);
|
||||
}
|
||||
|
||||
add(ingredient: Ingredient): Observable<Ingredient> {
|
||||
return this.http.post<Ingredient>(this.path, ingredient);
|
||||
}
|
||||
|
||||
update(ingredient: Ingredient): Observable<Ingredient> {
|
||||
return this.http.put<Ingredient>(`${this.path}/${ingredient.id}`, ingredient);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue