Compare commits
No commits in common. 'master' and 'listIngredients' have entirely different histories.
master
...
listIngred
@ -1,51 +0,0 @@
|
||||
<style>
|
||||
.command-list {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f0f0;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.recipe-item {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
margin: 10px 0;
|
||||
padding: 10px 20px;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.recipe-item h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.recipe-item button {
|
||||
background-color: #ff5252;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recipe-item button:hover {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="command-list">
|
||||
<h2>Ma Commande</h2>
|
||||
<div *ngFor="let recipe of recipes" class="recipe-item">
|
||||
<img src="{{recipe.$image}}" width="10%" alt="ImageRecipe"
|
||||
onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
||||
<h3>{{ recipe.$name }}</h3>
|
||||
<button (click)="removeRecipe(recipe)">Retirer</button>
|
||||
</div>
|
||||
<p *ngIf="recipes.length === 0">Aucune recette dans la commande.</p>
|
||||
</div>
|
||||
@ -1,23 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CommandComponent } from './command.component';
|
||||
|
||||
describe('CommandComponent', () => {
|
||||
let component: CommandComponent;
|
||||
let fixture: ComponentFixture<CommandComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CommandComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CommandComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,25 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommandService } from '../../service/command.service';
|
||||
import { Recipe } from '../../model/recipe.model';
|
||||
import {NgFor, NgIf} from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-command',
|
||||
standalone: true,
|
||||
imports: [NgFor, RouterLink, NgIf],
|
||||
templateUrl: './command.component.html'
|
||||
})
|
||||
export class CommandComponent {
|
||||
recipes: Recipe[] = [];
|
||||
errorMessage: string | null = null;
|
||||
|
||||
constructor(private commandService: CommandService) {
|
||||
this.recipes = this.commandService.getRecipes();
|
||||
}
|
||||
|
||||
removeRecipe(recipe: Recipe) {
|
||||
this.commandService.removeRecipe(recipe);
|
||||
this.recipes = this.commandService.getRecipes();
|
||||
}
|
||||
}
|
||||
@ -1,62 +1,45 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { IngredientService } from "../../service/ingredient.service";
|
||||
import { Ingredient } from "../../model/ingredient.model";
|
||||
import { NgFor, NgIf } from "@angular/common";
|
||||
import { FormsModule } from "@angular/forms";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {IngredientService} from "../../service/ingredient.service";
|
||||
import {Ingredient} from "../../model/ingredient.model";
|
||||
import {NgFor} from "@angular/common";
|
||||
import {LoginService} from "../../service/login.service";
|
||||
import {Link} from "../../model/link.model";
|
||||
import {LinkService} from "../../service/link.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-ingredients',
|
||||
standalone: true,
|
||||
imports: [
|
||||
NgFor,
|
||||
NgIf,
|
||||
FormsModule
|
||||
],
|
||||
providers: [IngredientService, HttpClient],
|
||||
templateUrl: './ingredients.component.html',
|
||||
styleUrl: './ingredients.component.css'
|
||||
})
|
||||
export class IngredientsComponent implements OnInit {
|
||||
export class IngredientsComponent implements OnInit{
|
||||
|
||||
ingredients: Ingredient[] = [];
|
||||
newIngredient: Ingredient = { id: '0', name: '', description: '' };
|
||||
editIngredient: Ingredient | null = null;
|
||||
links: Link[] = this.linkService.getLinks()
|
||||
|
||||
constructor(private ingredientService: IngredientService) {}
|
||||
constructor(private ingredientService : IngredientService,private loginService: LoginService,private linkService : LinkService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.loadIngredients();
|
||||
}
|
||||
|
||||
loadIngredients() {
|
||||
this.ingredientService.getAll().subscribe(ingredients => {
|
||||
this.ingredients = ingredients;
|
||||
});
|
||||
}
|
||||
|
||||
addIngredient() {
|
||||
this.ingredientService.add(this.newIngredient).subscribe(ingredient => {
|
||||
this.ingredients.push(ingredient);
|
||||
this.newIngredient = { id: '0', name: '', description: '' };
|
||||
});
|
||||
onClickLogin(event: Event): void {
|
||||
event.preventDefault(); // Prevent the default anchor behavior
|
||||
this.loginService.login();
|
||||
}
|
||||
|
||||
edit(ingredient: Ingredient) {
|
||||
this.editIngredient = { ...ingredient };
|
||||
onClickLogout(event: Event): void {
|
||||
event.preventDefault(); // Prevent the default anchor behavior
|
||||
this.loginService.logout();
|
||||
}
|
||||
|
||||
updateIngredient() {
|
||||
if (this.editIngredient) {
|
||||
this.ingredientService.update(this.editIngredient).subscribe(updatedIngredient => {
|
||||
const index = this.ingredients.findIndex(i => i.id === updatedIngredient.id);
|
||||
this.ingredients[index] = updatedIngredient;
|
||||
this.editIngredient = null;
|
||||
});
|
||||
}
|
||||
isLogged(): boolean {
|
||||
return this.loginService.isLogged();
|
||||
}
|
||||
|
||||
cancelEdit() {
|
||||
this.editIngredient = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,138 +1,34 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #bab6b6;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.form-container {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
.form-container h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group button {
|
||||
width: 97%;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.form-group button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-group button:hover {
|
||||
background-color: #525259;
|
||||
}
|
||||
.form-group .remove-button {
|
||||
background-color: red;
|
||||
}
|
||||
.form-group .remove-button:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
.add-ingredient-button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
.add-ingredient-button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
.submit-button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.submit-button:hover {
|
||||
background-color: #525259;
|
||||
}
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 0.9em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.form-group.invalid input,
|
||||
.form-group.invalid select {
|
||||
border-color: red;
|
||||
}
|
||||
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
|
||||
<label for="id">ID: </label>
|
||||
<input id="id" type="number" formControlName="id">
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div class="form-container">
|
||||
<h2>Ajouter une Recette</h2>
|
||||
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
|
||||
<div class="form-group" [class.invalid]="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched">
|
||||
<label for="id">ID: </label>
|
||||
<input id="id" type="number" formControlName="id" required>
|
||||
<div class="error-message" *ngIf="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched">
|
||||
L'ID est requis.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" [class.invalid]="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
|
||||
<label for="name">Name: </label>
|
||||
<input id="name" type="text" formControlName="name" required>
|
||||
<div class="error-message" *ngIf="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
|
||||
Le nom est requis.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" [class.invalid]="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
|
||||
<label for="description">Description: </label>
|
||||
<input id="description" type="text" formControlName="description" required>
|
||||
<div class="error-message" *ngIf="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
|
||||
La description est requise.
|
||||
</div>
|
||||
</div>
|
||||
<label for="image">Image: </label>
|
||||
<input id="image" type="file" (change)="onFileChange($event)">
|
||||
<label for="name">Name: </label>
|
||||
<input id="name" type="text" formControlName="name">
|
||||
|
||||
<br>
|
||||
<div *ngIf="imageBase64">
|
||||
<img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;">
|
||||
</div>
|
||||
<br>
|
||||
<label for="description">Description: </label>
|
||||
<input id="description" type="text" formControlName="description">
|
||||
|
||||
<div formArrayName="ingredients">
|
||||
<div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i" class="form-group">
|
||||
<label for="ingredient-quantity">Quantity:</label>
|
||||
<input id="ingredient-quantity" type="number" formControlName="quantity" required>
|
||||
<div formArrayName="ingredients">
|
||||
<div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i">
|
||||
<label for="ingredient-quantity">Quantity:</label>
|
||||
<input id="ingredient-quantity" type="number" formControlName="quantity">
|
||||
|
||||
<label for="ingredient-unit">Unit:</label>
|
||||
<select id="ingredient-unit" formControlName="unit" required>
|
||||
<option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
|
||||
</select>
|
||||
<label for="ingredient-unit">Unit:</label>
|
||||
<select id="ingredient-unit" formControlName="unit">
|
||||
<option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
|
||||
</select>
|
||||
|
||||
<label for="ingredient-name">Ingredient:</label>
|
||||
<select id="ingredient-name" formControlName="ingredient" required>
|
||||
<option *ngFor="let ingredient of ingredientsList" [value]="ingredient.name">{{ ingredient.name }}</option>
|
||||
</select>
|
||||
<label for="ingredient-name">Ingredient:</label>
|
||||
<select id="ingredient-name" formControlName="ingredient">
|
||||
<option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
|
||||
</select>
|
||||
|
||||
<button type="button" class="remove-button" (click)="removeIngredient(i)">Remove</button>
|
||||
</div>
|
||||
<button type="button" (click)="removeIngredient(i)">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="add-ingredient-button" (click)="addIngredient()">Add Ingredient</button>
|
||||
<button type="button" (click)="addIngredient()">Add Ingredient</button>
|
||||
|
||||
<p>Complete the form to enable the button.</p>
|
||||
<button type="submit" class="submit-button">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
<p>Complete the form to enable the button.</p>
|
||||
<button type="submit" [disabled]="!recipeForm.valid">Submit</button>
|
||||
</form>
|
||||
|
||||
@ -1,99 +1,75 @@
|
||||
import { Component, EventEmitter, Output } from '@angular/core';
|
||||
import { Recipe } from "../../model/recipe.model";
|
||||
import { FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder, Validators } from "@angular/forms";
|
||||
import {Component, EventEmitter, Output} from '@angular/core';
|
||||
import {Recipe} from "../../model/recipe.model";
|
||||
import {FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder} from "@angular/forms";
|
||||
import { Ingredient } from '../../model/ingredient.model';
|
||||
import { Unity } from '../../model/unity';
|
||||
import { IngredientService } from '../../service/ingredient.service';
|
||||
import {NgFor, NgIf} from "@angular/common";
|
||||
|
||||
import {NgFor} from "@angular/common";
|
||||
@Component({
|
||||
selector: 'app-recipe-form',
|
||||
standalone: true,
|
||||
imports: [ReactiveFormsModule, NgFor, NgIf],
|
||||
templateUrl: './recipe-form.component.html'
|
||||
imports: [ReactiveFormsModule,NgFor],
|
||||
templateUrl: './recipe-form.component.html',
|
||||
styleUrl: './recipe-form.component.css'
|
||||
})
|
||||
export class RecipeFormComponent {
|
||||
@Output() formSubmitted = new EventEmitter<Recipe>();
|
||||
ingredientsList: Ingredient[] = [];
|
||||
unity = Object.values(Unity);
|
||||
imageBase64: string | null = null;
|
||||
|
||||
constructor(private formBuilder: FormBuilder, private ingredientService: IngredientService) { }
|
||||
constructor(private formBuilder: FormBuilder, private ingredientService : IngredientService){}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.ingredientService.getAll().subscribe(ingredients => {
|
||||
this.ingredientsList = ingredients;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
recipeForm: FormGroup = this.formBuilder.group({
|
||||
id: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
|
||||
name: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
|
||||
description: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
|
||||
ingredients: this.formBuilder.array([this.newIngredient()]),
|
||||
image: new FormControl('', {nonNullable: false})
|
||||
id: new FormControl('', { nonNullable: true }),
|
||||
name: new FormControl('', { nonNullable: true }),
|
||||
description: new FormControl('', { nonNullable: true }),
|
||||
ingredients: this.formBuilder.array([])
|
||||
});
|
||||
|
||||
get ingredients(): FormArray {
|
||||
get ingredients():FormArray{
|
||||
return this.recipeForm.get('ingredients') as FormArray;
|
||||
}
|
||||
|
||||
newIngredient(): FormGroup {
|
||||
newIngredient(): FormGroup{
|
||||
return this.formBuilder.group({
|
||||
quantity: new FormControl(0, { nonNullable: true, validators: [Validators.required] }),
|
||||
unit: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
|
||||
ingredient: new FormControl('', { nonNullable: true, validators: [Validators.required] })
|
||||
quantity: new FormControl(0, { nonNullable: true }),
|
||||
unit: new FormControl('', { nonNullable: true }),
|
||||
ingredient: new FormControl('', { nonNullable: true })
|
||||
});
|
||||
}
|
||||
|
||||
addIngredient() {
|
||||
this.ingredients.push(this.newIngredient());
|
||||
}
|
||||
|
||||
removeIngredient(index: number) {
|
||||
if (this.ingredients.length > 1) {
|
||||
|
||||
this.ingredients.removeAt(index);
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
onFileChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
if (input.files && input.files[0]) {
|
||||
const file = input.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
this.imageBase64 = reader.result as string;
|
||||
this.recipeForm.patchValue({image: this.imageBase64});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
this.ingredients.removeAt(index);
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
if (this.recipeForm.valid) {
|
||||
if(this.recipeForm.valid){
|
||||
const recipe: Recipe = {
|
||||
$id: parseInt(this.recipeForm.value.id!),
|
||||
$name: this.recipeForm.value.name!,
|
||||
$description: this.recipeForm.value.description!,
|
||||
$createdAt: new Date(),
|
||||
$ingredients: this.recipeForm.value.ingredients!.map((ingredient: any) => ({
|
||||
$ingredients: this.recipeForm.value.ingredients!.map((ingredient : any) => ({
|
||||
quantity: ingredient.quantity,
|
||||
unit: ingredient.unit,
|
||||
ingredient: this.ingredientsList.find(ing => ing.name === ingredient.ingredient)
|
||||
})),
|
||||
$image: this.recipeForm.value.image
|
||||
ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient)
|
||||
}))
|
||||
};
|
||||
this.formSubmitted.emit(recipe);
|
||||
this.recipeForm.reset()
|
||||
this.ingredients.clear()
|
||||
this.imageBase64 = null;
|
||||
this.addIngredient()
|
||||
}else{
|
||||
alert("Veuillez remplir tous les champs")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
|
||||
export interface Ingredient {
|
||||
id : string,
|
||||
name : string,
|
||||
description : string,
|
||||
$id : number,
|
||||
$name : string
|
||||
}
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
import { Unity } from "./unity";
|
||||
import { Ingredient } from "./ingredient.model";
|
||||
import { QuantifiedIngredient } from "./quantified-ingredient.model";
|
||||
|
||||
export class QuantifiedIngredientGetter implements QuantifiedIngredient {
|
||||
constructor(
|
||||
public $quantity: number,
|
||||
public $unit: Unity,
|
||||
public $ingredient: Ingredient
|
||||
) {}
|
||||
|
||||
get quantity(): number {
|
||||
return this.$quantity;
|
||||
}
|
||||
|
||||
get unit(): Unity {
|
||||
return this.$unit;
|
||||
}
|
||||
|
||||
get ingredient(): Ingredient {
|
||||
return this.$ingredient;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
import { Unity } from "./unity";
|
||||
import { Ingredient } from "./ingredient.model";
|
||||
import {Unity} from "./unity";
|
||||
import {Ingredient} from "./ingredient.model";
|
||||
|
||||
export interface QuantifiedIngredient {
|
||||
$quantity: number;
|
||||
$unit: Unity;
|
||||
$ingredient: Ingredient;
|
||||
$quantity : number,
|
||||
$unit : Unity,
|
||||
$ingredient : Ingredient
|
||||
}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import {QuantifiedIngredientGetter} from "./quantified-ingredient-getter.model";
|
||||
import {QuantifiedIngredient} from "./quantified-ingredient.model";
|
||||
|
||||
export interface Recipe {
|
||||
$id : number,
|
||||
$name : string,
|
||||
$description: string,
|
||||
$createdAt : Date,
|
||||
$ingredients: QuantifiedIngredientGetter[],
|
||||
$image?: string
|
||||
$ingredients: QuantifiedIngredient[]
|
||||
}
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Recipe } from "../model/recipe.model";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class CommandService {
|
||||
private recipes: Recipe[] = JSON.parse(localStorage.getItem('command') || '[]');
|
||||
|
||||
addRecipe(recipe: Recipe) {
|
||||
this.recipes.push(recipe);
|
||||
localStorage.setItem('command', JSON.stringify(this.recipes));
|
||||
}
|
||||
|
||||
getRecipes(): Recipe[] {
|
||||
return this.recipes;
|
||||
}
|
||||
|
||||
removeRecipe(recipe: Recipe) {
|
||||
const index = this.recipes.indexOf(recipe);
|
||||
if (index > -1) {
|
||||
this.recipes.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,26 +1,15 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Ingredient } from "../model/ingredient.model";
|
||||
import { Observable } from "rxjs";
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import {Ingredient} from "../model/ingredient.model";
|
||||
import {$INGREDIENTS} from "../data/ingredient.stub";
|
||||
import {Observable, of} from "rxjs";
|
||||
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class IngredientService {
|
||||
|
||||
private apiUrl = 'https://664ba07f35bbda10987d9f99.mockapi.io/api/ingredients';
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getAll(): Observable<Ingredient[]> {
|
||||
return this.http.get<Ingredient[]>(this.apiUrl);
|
||||
}
|
||||
|
||||
add(ingredient: Ingredient): Observable<Ingredient> {
|
||||
return this.http.post<Ingredient>(this.apiUrl, ingredient);
|
||||
}
|
||||
|
||||
update(ingredient: Ingredient): Observable<Ingredient> {
|
||||
return this.http.put<Ingredient>(`${this.apiUrl}/${ingredient.id}`, ingredient);
|
||||
getAll() : Observable<Ingredient[]> {
|
||||
return of($INGREDIENTS);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue