dorian.hodin
/
Daidokoro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding form to front
continuous-integration/drone/push Build is passing Details

Browse Source
pull/2/head
Corentin RICHARD 10 months ago
parent 0342736841
commit 766627c169
11 changed files with 119 additions and 172 deletions
Show Stats Download Patch File Download Diff File

14
daidokoro/src/app/Component/accueil/accueil.component.ts
Unescape View File

@ -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 {
}

123
daidokoro/src/app/Component/recipe-list/recipe-list.component.html
Unescape View File

@ -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>

6
daidokoro/src/app/Model/recipe.model.ts
Unescape View File

@ -1,6 +0,0 @@
export interface Recipe {
name: string;
date: string;
image: string;
ingredients: { name: string; quantity: string }[];
}

18
daidokoro/src/app/Service/recipe.service.ts
Unescape View File

@ -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));
}
}

2
daidokoro/src/app/app.component.html
Unescape View File

@ -1,2 +1,2 @@
<app-recipe-form></app-recipe-form>
<app-accueil></app-accueil>
<!-- <app-recipe-form></app-recipe-form> -->

2
daidokoro/src/app/app.component.ts
Unescape View File

@ -1,7 +1,7 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {RecipeFormComponent} from "./component/recipe-form/recipe-form.component";
import {AccueilComponent} from "./Component/accueil/accueil.component";
import {AccueilComponent} from "./component/accueil/accueil.component";
@Component({
selector: 'app-root',

6
daidokoro/src/app/Component/accueil/accueil.component.html → daidokoro/src/app/component/accueil/accueil.component.html
Unescape View File

@ -28,13 +28,14 @@
}
.content {
padding: 20px;
display: flex;
gap: 20px;
}
.recipe-container {
background-color: #bab6b6;
color: black;
padding: 20px;
margin-top: 0;
margin-right: 50%;
}
.recipe-container h2 {
font-size: 3em;
@ -56,6 +57,9 @@
<h2>Liste Recettes</h2>
<app-recipe-list></app-recipe-list>
</div>
<div>
<app-recipe-form (formSubmitted)="onRecipeSubmitted($event)"></app-recipe-form>
</div>
</div>
</body>

22
daidokoro/src/app/component/accueil/accueil.component.ts
Unescape View File

@ -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);
}
}

77
daidokoro/src/app/component/recipe-list/recipe-list.component.html
Unescape View File

@ -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>

8
daidokoro/src/app/Component/recipe-list/recipe-list.component.ts → daidokoro/src/app/component/recipe-list/recipe-list.component.ts
Unescape View File

@ -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
})

13
daidokoro/src/app/service/recipe.service.ts
Unescape View File

@ -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));
}
}

Write Preview
Loading…
Cancel
Save