diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 37620f6..377f6bc 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -1,69 +1,32 @@ - - - - - - - - - + - - - - - { - "associatedIndex": 7 -} - - - - + + - { - "keyToString": { - "ASKED_ADD_EXTERNAL_FILES": "true", - "RunOnceActivity.ShowReadmeOnStart": "true", - "git-widget-placeholder": "master", - "last_opened_file_path": "/home/dorian/Documents/but3/Angular/Daidokoro", - "node.js.detected.package.eslint": "true", - "node.js.detected.package.tslint": "true", - "node.js.selected.package.eslint": "(autodetect)", - "node.js.selected.package.tslint": "(autodetect)", - "nodejs_package_manager_path": "npm", - "settings.editor.selected.configurable": "preferences.lookFeel", - "ts.external.directory.path": "/home/dorian/Documents/but3/Angular/Daidokoro/daidokoro/node_modules/typescript/lib", - "vue.rearranger.settings.migration": "true" + - - - - - - +}]]> @@ -74,47 +37,13 @@ - - 1718535175328 + + 1718625373590 - - - - - - - - - - \ No newline at end of file diff --git a/daidokoro/src/app/Component/accueil/accueil.component.ts b/daidokoro/src/app/Component/accueil/accueil.component.ts deleted file mode 100644 index 03a28cb..0000000 --- a/daidokoro/src/app/Component/accueil/accueil.component.ts +++ /dev/null @@ -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 { - -} diff --git a/daidokoro/src/app/Component/recipe-list/recipe-list.component.html b/daidokoro/src/app/Component/recipe-list/recipe-list.component.html deleted file mode 100644 index c923d26..0000000 --- a/daidokoro/src/app/Component/recipe-list/recipe-list.component.html +++ /dev/null @@ -1,123 +0,0 @@ - - - - -
- Recette 1 -
-

Recette 1

-

Description courte de la recette 1.

- -
-
- -
- Recette 2 -
-

Recette 2

-

Description courte de la recette 2.

- - -
-
- -
- Recette 3 -
-

Recette 3

-

Description courte de la recette 3.

- -
-
- -
- Recette 4 -
-

Recette 4

-

Description courte de la recette 4.

- -
-
- -
- Recette 5 -
-

Recette 5

-

Description courte de la recette 5.

- -
-
- -
- Recette 6 -
-

Recette 6

-

Description courte de la recette 6.

- -
-
- - diff --git a/daidokoro/src/app/Model/recipe.model.ts b/daidokoro/src/app/Model/recipe.model.ts deleted file mode 100644 index 601b384..0000000 --- a/daidokoro/src/app/Model/recipe.model.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface Recipe { - name: string; - date: string; - image: string; - ingredients: { name: string; quantity: string }[]; -} diff --git a/daidokoro/src/app/Service/recipe.service.ts b/daidokoro/src/app/Service/recipe.service.ts deleted file mode 100644 index e61209a..0000000 --- a/daidokoro/src/app/Service/recipe.service.ts +++ /dev/null @@ -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)); - } -} diff --git a/daidokoro/src/app/app.component.html b/daidokoro/src/app/app.component.html index 1faa227..82a24de 100644 --- a/daidokoro/src/app/app.component.html +++ b/daidokoro/src/app/app.component.html @@ -1 +1,2 @@ + diff --git a/daidokoro/src/app/app.component.ts b/daidokoro/src/app/app.component.ts index 7907d77..9def068 100644 --- a/daidokoro/src/app/app.component.ts +++ b/daidokoro/src/app/app.component.ts @@ -1,11 +1,12 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; -import {AccueilComponent} from "./Component/accueil/accueil.component"; +import {RecipeFormComponent} from "./component/recipe-form/recipe-form.component"; +import {AccueilComponent} from "./component/accueil/accueil.component"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, AccueilComponent], + imports: [RouterOutlet, AccueilComponent,RecipeFormComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/daidokoro/src/app/Component/accueil/accueil.component.html b/daidokoro/src/app/component/accueil/accueil.component.html similarity index 89% rename from daidokoro/src/app/Component/accueil/accueil.component.html rename to daidokoro/src/app/component/accueil/accueil.component.html index 45c1d10..86d5105 100644 --- a/daidokoro/src/app/Component/accueil/accueil.component.html +++ b/daidokoro/src/app/component/accueil/accueil.component.html @@ -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 @@

Liste Recettes

+
+ +
diff --git a/daidokoro/src/app/component/accueil/accueil.component.ts b/daidokoro/src/app/component/accueil/accueil.component.ts new file mode 100644 index 0000000..4d1f7d3 --- /dev/null +++ b/daidokoro/src/app/component/accueil/accueil.component.ts @@ -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); + } +} diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.css b/daidokoro/src/app/component/recipe-form/recipe-form.component.css new file mode 100644 index 0000000..e69de29 diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.html b/daidokoro/src/app/component/recipe-form/recipe-form.component.html new file mode 100644 index 0000000..265e9fe --- /dev/null +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html @@ -0,0 +1,14 @@ +
+ + + + + + + + + + +

Complete the form to enable the button.

+ +
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.spec.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.spec.ts new file mode 100644 index 0000000..eefd96c --- /dev/null +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RecipeFormComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RecipeFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts new file mode 100644 index 0000000..e67befd --- /dev/null +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts @@ -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(); + + 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() + } + + } +} diff --git a/daidokoro/src/app/component/recipe-list/recipe-list.component.html b/daidokoro/src/app/component/recipe-list/recipe-list.component.html new file mode 100644 index 0000000..c1cf7cb --- /dev/null +++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.html @@ -0,0 +1,77 @@ + + + + +
+ Recette 1 +
+

{{recipe.$name}}

+

{{recipe.$description}}

é + +
+
+ + diff --git a/daidokoro/src/app/Component/recipe-list/recipe-list.component.ts b/daidokoro/src/app/component/recipe-list/recipe-list.component.ts similarity index 70% rename from daidokoro/src/app/Component/recipe-list/recipe-list.component.ts rename to daidokoro/src/app/component/recipe-list/recipe-list.component.ts index 2e08b25..b0e1d60 100644 --- a/daidokoro/src/app/Component/recipe-list/recipe-list.component.ts +++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.ts @@ -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 }) diff --git a/daidokoro/src/app/model/quantified-ingredient.model.ts b/daidokoro/src/app/model/quantified-ingredient.model.ts index 63157a9..edcea30 100644 --- a/daidokoro/src/app/model/quantified-ingredient.model.ts +++ b/daidokoro/src/app/model/quantified-ingredient.model.ts @@ -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 } diff --git a/daidokoro/src/app/service/recipe.service.ts b/daidokoro/src/app/service/recipe.service.ts index e081757..7e9abff 100644 --- a/daidokoro/src/app/service/recipe.service.ts +++ b/daidokoro/src/app/service/recipe.service.ts @@ -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)); } }