Merge pull request 'formRecipe' (#2) from formRecipe into master
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Reviewed-on: #2pull/3/head
commit
23edc7adda
@ -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-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 { RecipeService } from '../../Service/recipe.service';
|
||||
import { Recipe } from '../../Model/recipe.model';
|
||||
import { RecipeService } from '../../service/recipe.service';
|
||||
import { Recipe } from '../../model/recipe.model';
|
||||
import {NgOptimizedImage} from "@angular/common";
|
||||
import {NgFor} from "@angular/common";
|
||||
|
||||
@Component({
|
||||
selector: 'app-recipe-list',
|
||||
templateUrl: './recipe-list.component.html',
|
||||
imports: [
|
||||
NgOptimizedImage
|
||||
NgOptimizedImage,
|
||||
NgFor
|
||||
],
|
||||
standalone: true
|
||||
})
|
||||
@ -1,8 +1,8 @@
|
||||
import {Unite} from "./unity";
|
||||
import {Unity} from "./unity";
|
||||
import {Ingredient} from "./ingredient.model";
|
||||
|
||||
export interface QuantifiedIngredient {
|
||||
$quantity : number,
|
||||
$unit : Unite,
|
||||
$unit : Unity,
|
||||
$ingredient : Ingredient
|
||||
}
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import {Recipe} from "../model/recipe.model";
|
||||
import {$RECEPIES} from "../data/recipe.stub";
|
||||
import { Recipe } from '../model/recipe.model';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class RecipeService {
|
||||
private recipes: Recipe[] = JSON.parse(localStorage.getItem('recipes') || '[]');
|
||||
|
||||
constructor() { }
|
||||
getRecipes(): Recipe[] {
|
||||
return this.recipes;
|
||||
}
|
||||
|
||||
getAll() : Recipe[]{
|
||||
return $RECEPIES;
|
||||
addRecipe(recipe: Recipe): void {
|
||||
this.recipes.push(recipe);
|
||||
localStorage.setItem('recipes', JSON.stringify(this.recipes));
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue