@ -1,14 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
import {RecipeListComponent} from "../recipe-list/recipe-list.component";
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-accueil',
|
|
||||||
standalone: true,
|
|
||||||
imports: [
|
|
||||||
RecipeListComponent
|
|
||||||
],
|
|
||||||
templateUrl: './accueil.component.html'
|
|
||||||
})
|
|
||||||
export class AccueilComponent {
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,123 +0,0 @@
|
|||||||
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background-color: #bab6b6;
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.recipe-card {
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
margin: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
width: calc(33.33% - 20px);
|
|
||||||
transition: transform 0.2s;
|
|
||||||
}
|
|
||||||
.recipe-card:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
.recipe-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 200px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.recipe-content {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
.recipe-title {
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin: 0 0 10px;
|
|
||||||
}
|
|
||||||
.recipe-description {
|
|
||||||
font-size: 1em;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
.details-button {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 10px 15px;
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.details-button:hover {
|
|
||||||
background-color: #525259;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.recipe-card {
|
|
||||||
width: calc(50% - 20px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.recipe-card {
|
|
||||||
width: calc(100% - 20px);
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="recipe-card">
|
|
||||||
<img src="image1.jpg" alt="Recette 1" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
|
||||||
<div class="recipe-content">
|
|
||||||
<h2 class="recipe-title">Recette 1</h2>
|
|
||||||
<p class="recipe-description">Description courte de la recette 1.</p>
|
|
||||||
<button class="details-button" onclick="toggleDetails(this)">Détails</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="recipe-card">
|
|
||||||
<img src="image2.jpg" alt="Recette 2" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
|
||||||
<div class="recipe-content">
|
|
||||||
<h2 class="recipe-title">Recette 2</h2>
|
|
||||||
<p class="recipe-description">Description courte de la recette 2.</p>
|
|
||||||
<button class="details-button" onclick="toggleDetails(this)">Détails</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="recipe-card">
|
|
||||||
<img src="image3.jpg" alt="Recette 3" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
|
||||||
<div class="recipe-content">
|
|
||||||
<h2 class="recipe-title">Recette 3</h2>
|
|
||||||
<p class="recipe-description">Description courte de la recette 3.</p>
|
|
||||||
<button class="details-button" onclick="toggleDetails(this)">Détails</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="recipe-card">
|
|
||||||
<img src="image4.jpg" alt="Recette 4" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
|
||||||
<div class="recipe-content">
|
|
||||||
<h2 class="recipe-title">Recette 4</h2>
|
|
||||||
<p class="recipe-description">Description courte de la recette 4.</p>
|
|
||||||
<button class="details-button" onclick="toggleDetails(this)">Détails</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="recipe-card">
|
|
||||||
<img src="image5.jpg" alt="Recette 5" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
|
||||||
<div class="recipe-content">
|
|
||||||
<h2 class="recipe-title">Recette 5</h2>
|
|
||||||
<p class="recipe-description">Description courte de la recette 5.</p>
|
|
||||||
<button class="details-button" onclick="toggleDetails(this)">Détails</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="recipe-card">
|
|
||||||
<img src="image6.jpg" alt="Recette 6" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
|
||||||
<div class="recipe-content">
|
|
||||||
<h2 class="recipe-title">Recette 6</h2>
|
|
||||||
<p class="recipe-description">Description courte de la recette 6.</p>
|
|
||||||
<button class="details-button" onclick="toggleDetails(this)">Détails</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export interface Recipe {
|
|
||||||
name: string;
|
|
||||||
date: string;
|
|
||||||
image: string;
|
|
||||||
ingredients: { name: string; quantity: string }[];
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { Recipe } from '../Model/recipe.model';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class RecipeService {
|
|
||||||
private recipes: Recipe[] = JSON.parse(localStorage.getItem('recipes') || '[]');
|
|
||||||
|
|
||||||
getRecipes(): Recipe[] {
|
|
||||||
return this.recipes;
|
|
||||||
}
|
|
||||||
|
|
||||||
addRecipe(recipe: Recipe): void {
|
|
||||||
this.recipes.push(recipe);
|
|
||||||
localStorage.setItem('recipes', JSON.stringify(this.recipes));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1 +1,2 @@
|
|||||||
<app-accueil></app-accueil>
|
<app-accueil></app-accueil>
|
||||||
|
<!-- <app-recipe-form></app-recipe-form> -->
|
||||||
|
|||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import {RecipeListComponent} from "../recipe-list/recipe-list.component";
|
||||||
|
import {RecipeFormComponent} from "../recipe-form/recipe-form.component";
|
||||||
|
import {Recipe} from "../../model/recipe.model";
|
||||||
|
import {RecipeService} from "../../service/recipe.service";
|
||||||
|
@Component({
|
||||||
|
selector: 'app-accueil',
|
||||||
|
standalone: true,
|
||||||
|
imports: [
|
||||||
|
RecipeListComponent,
|
||||||
|
RecipeFormComponent
|
||||||
|
],
|
||||||
|
templateUrl: './accueil.component.html'
|
||||||
|
})
|
||||||
|
export class AccueilComponent {
|
||||||
|
|
||||||
|
constructor(private recipeService: RecipeService){}
|
||||||
|
|
||||||
|
onRecipeSubmitted(recipe : Recipe){
|
||||||
|
this.recipeService.addRecipe(recipe);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
|
||||||
|
<label for="id">ID: </label>
|
||||||
|
<input id="id" type="number" formControlName="id">
|
||||||
|
|
||||||
|
<label for="name">name: </label>
|
||||||
|
<input id="name" type="text" formControlName="name">
|
||||||
|
|
||||||
|
<label for="description">description: </label>
|
||||||
|
<input id="description" type="text" formControlName="description">
|
||||||
|
|
||||||
|
|
||||||
|
<p>Complete the form to enable the button.</p>
|
||||||
|
<button type="submit" [disabled]="!recipeForm.valid">Submit</button>
|
||||||
|
</form>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { RecipeFormComponent } from './recipe-form.component';
|
||||||
|
|
||||||
|
describe('RecipeFormComponent', () => {
|
||||||
|
let component: RecipeFormComponent;
|
||||||
|
let fixture: ComponentFixture<RecipeFormComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [RecipeFormComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(RecipeFormComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import {Component, EventEmitter, Output} from '@angular/core';
|
||||||
|
import {Recipe} from "../../model/recipe.model";
|
||||||
|
import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-recipe-form',
|
||||||
|
standalone: true,
|
||||||
|
imports: [ReactiveFormsModule],
|
||||||
|
templateUrl: './recipe-form.component.html',
|
||||||
|
styleUrl: './recipe-form.component.css'
|
||||||
|
})
|
||||||
|
export class RecipeFormComponent {
|
||||||
|
@Output() formSubmitted = new EventEmitter<Recipe>();
|
||||||
|
|
||||||
|
recipeForm = new FormGroup({
|
||||||
|
id: new FormControl('', { nonNullable: true }),
|
||||||
|
name: new FormControl('', { nonNullable: true }),
|
||||||
|
description: new FormControl('', { nonNullable: true }),
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
onSubmit() {
|
||||||
|
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.formSubmitted.emit(recipe);
|
||||||
|
this.recipeForm.reset()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #bab6b6;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.recipe-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
margin: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: calc(33.33% - 20px);
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
.recipe-card:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.recipe-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.recipe-content {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
.recipe-title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
}
|
||||||
|
.recipe-description {
|
||||||
|
font-size: 1em;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.details-button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 15px;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.details-button:hover {
|
||||||
|
background-color: #525259;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.recipe-card {
|
||||||
|
width: calc(50% - 20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.recipe-card {
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<body *ngFor="let recipe of recipes">
|
||||||
|
|
||||||
|
<div class="recipe-card">
|
||||||
|
<img src="image1.jpg" alt="Recette 1" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
||||||
|
<div class="recipe-content">
|
||||||
|
<h2 class="recipe-title">{{recipe.$name}}</h2>
|
||||||
|
<p class="recipe-description">{{recipe.$description}}</p>é
|
||||||
|
<button class="details-button" onclick="toggleDetails(this)">Détails</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -1,13 +1,15 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { RecipeService } from '../../Service/recipe.service';
|
import { RecipeService } from '../../service/recipe.service';
|
||||||
import { Recipe } from '../../Model/recipe.model';
|
import { Recipe } from '../../model/recipe.model';
|
||||||
import {NgOptimizedImage} from "@angular/common";
|
import {NgOptimizedImage} from "@angular/common";
|
||||||
|
import {NgFor} from "@angular/common";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-recipe-list',
|
selector: 'app-recipe-list',
|
||||||
templateUrl: './recipe-list.component.html',
|
templateUrl: './recipe-list.component.html',
|
||||||
imports: [
|
imports: [
|
||||||
NgOptimizedImage
|
NgOptimizedImage,
|
||||||
|
NgFor
|
||||||
],
|
],
|
||||||
standalone: true
|
standalone: true
|
||||||
})
|
})
|
||||||
@ -1,8 +1,8 @@
|
|||||||
import {Unite} from "./unity";
|
import {Unity} from "./unity";
|
||||||
import {Ingredient} from "./ingredient.model";
|
import {Ingredient} from "./ingredient.model";
|
||||||
|
|
||||||
export interface QuantifiedIngredient {
|
export interface QuantifiedIngredient {
|
||||||
$quantity : number,
|
$quantity : number,
|
||||||
$unit : Unite,
|
$unit : Unity,
|
||||||
$ingredient : Ingredient
|
$ingredient : Ingredient
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,15 +1,18 @@
|
|||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import {Recipe} from "../model/recipe.model";
|
import { Recipe } from '../model/recipe.model';
|
||||||
import {$RECEPIES} from "../data/recipe.stub";
|
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root'
|
||||||
})
|
})
|
||||||
export class RecipeService {
|
export class RecipeService {
|
||||||
|
private recipes: Recipe[] = JSON.parse(localStorage.getItem('recipes') || '[]');
|
||||||
|
|
||||||
constructor() { }
|
getRecipes(): Recipe[] {
|
||||||
|
return this.recipes;
|
||||||
|
}
|
||||||
|
|
||||||
getAll() : Recipe[]{
|
addRecipe(recipe: Recipe): void {
|
||||||
return $RECEPIES;
|
this.recipes.push(recipe);
|
||||||
|
localStorage.setItem('recipes', JSON.stringify(this.recipes));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue