From dafff555632c84277c6e69a322736c34bfc9c951 Mon Sep 17 00:00:00 2001 From: Corentin R Date: Wed, 26 Jun 2024 22:36:02 +0200 Subject: [PATCH 1/2] Adding list of ingredients with guards and detail of recipe --- daidokoro/src/app/app.component.html | 82 ++++++++++++++++++- daidokoro/src/app/app.component.ts | 28 ++++++- daidokoro/src/app/app.config.ts | 4 +- daidokoro/src/app/app.routes.ts | 6 ++ .../component/accueil/accueil.component.html | 33 -------- .../component/accueil/accueil.component.ts | 24 +----- .../recipe-list/recipe-list.component.html | 4 +- .../recipe-list/recipe-list.component.ts | 10 ++- daidokoro/src/app/data/ingredient.stub.ts | 57 +++++++++++-- daidokoro/src/app/guard.guard.ts | 4 +- daidokoro/src/app/service/recipe.service.ts | 3 + 11 files changed, 182 insertions(+), 73 deletions(-) diff --git a/daidokoro/src/app/app.component.html b/daidokoro/src/app/app.component.html index 82a24de..aede23f 100644 --- a/daidokoro/src/app/app.component.html +++ b/daidokoro/src/app/app.component.html @@ -1,2 +1,80 @@ - - + + + + + Daidokoro + + + + +
+
+ Logout +
+
+ Login +
+ +
+ {{link.$name}} +
+
+ + + + + diff --git a/daidokoro/src/app/app.component.ts b/daidokoro/src/app/app.component.ts index 9def068..e55cd38 100644 --- a/daidokoro/src/app/app.component.ts +++ b/daidokoro/src/app/app.component.ts @@ -1,15 +1,37 @@ import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; import {RecipeFormComponent} from "./component/recipe-form/recipe-form.component"; import {AccueilComponent} from "./component/accueil/accueil.component"; +import {NgForOf, NgIf} from "@angular/common"; +import {RecipeListComponent} from "./component/recipe-list/recipe-list.component"; +import {LoginService} from "./service/login.service"; +import {Link} from "./model/link.model"; +import {LinkService} from "./service/link.service"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, AccueilComponent,RecipeFormComponent], + imports: [RouterOutlet, AccueilComponent, RecipeFormComponent, NgForOf, NgIf, RecipeListComponent, RouterLink, RouterLinkActive], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { - title = 'daidokoro'; + links : Link[] = this.linkService.getLinks() + + constructor(private loginService: LoginService,private linkService: LinkService) { + } + + onClickLogin(event: Event): void { + event.preventDefault(); // Prevent the default anchor behavior + this.loginService.login(); + } + + onClickLogout(event: Event): void { + event.preventDefault(); // Prevent the default anchor behavior + this.loginService.logout(); + } + + isLogged(): boolean { + return this.loginService.isLogged(); + } } diff --git a/daidokoro/src/app/app.config.ts b/daidokoro/src/app/app.config.ts index a1e7d6f..333d7bb 100644 --- a/daidokoro/src/app/app.config.ts +++ b/daidokoro/src/app/app.config.ts @@ -1,8 +1,8 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; -import { provideRouter } from '@angular/router'; +import {provideRouter, withComponentInputBinding} from '@angular/router'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] + providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes,withComponentInputBinding())] }; diff --git a/daidokoro/src/app/app.routes.ts b/daidokoro/src/app/app.routes.ts index 586ade3..093cd5d 100644 --- a/daidokoro/src/app/app.routes.ts +++ b/daidokoro/src/app/app.routes.ts @@ -1,5 +1,11 @@ import { Routes } from '@angular/router'; import {AuthGuard} from "./guard.guard"; +import {IngredientsComponent} from "./component/ingredients/ingredients.component"; +import {AccueilComponent} from "./component/accueil/accueil.component"; +import {RecipeDetailComponent} from "./component/recipe-detail/recipe-detail.component"; export const routes: Routes = [ + {path: 'ingredients', component:IngredientsComponent,canActivate: [AuthGuard]}, + {path: 'recipe/:id', component: RecipeDetailComponent}, + {path: '', component:AccueilComponent} ]; diff --git a/daidokoro/src/app/component/accueil/accueil.component.html b/daidokoro/src/app/component/accueil/accueil.component.html index bb0bee6..5ffbf89 100644 --- a/daidokoro/src/app/component/accueil/accueil.component.html +++ b/daidokoro/src/app/component/accueil/accueil.component.html @@ -10,22 +10,6 @@ margin: 0; padding: 0; } - .navbar { - display: flex; - justify-content: space-around; - align-items: center; - background-color: #333; - padding: 1em; - } - .navbar a { - color: white; - text-decoration: none; - padding: 0.5em 1em; - } - .navbar a:hover { - background-color: #ddd; - color: black; - } .content { padding: 20px; display: flex; @@ -61,23 +45,6 @@ -
-
- Logout -
-
- Login -
- -
- {{link.$name}} -
- - - - -
-

Liste Recettes

diff --git a/daidokoro/src/app/component/accueil/accueil.component.ts b/daidokoro/src/app/component/accueil/accueil.component.ts index a9cdaa1..6dac259 100644 --- a/daidokoro/src/app/component/accueil/accueil.component.ts +++ b/daidokoro/src/app/component/accueil/accueil.component.ts @@ -5,9 +5,9 @@ import {Recipe} from "../../model/recipe.model"; import {RecipeService} from "../../service/recipe.service"; import {NgForOf, NgIf} from "@angular/common"; import {LinkService} from "../../service/link.service"; -import {Link} from "../../model/link.model"; + import {LoginService} from "../../service/login.service"; -import {RouterLink, RouterLinkActive,RouterOutlet} from "@angular/router"; + import {CommonModule} from "@angular/common"; @Component({ @@ -18,18 +18,14 @@ import {CommonModule} from "@angular/common"; RecipeFormComponent, CommonModule, NgForOf, - RouterLink, - RouterOutlet, - RouterLinkActive ], templateUrl: './accueil.component.html' }) export class AccueilComponent { isFormVisible: boolean = false; - links: Link[] = this.linkService.getLinks() - constructor(private recipeService: RecipeService,private linkService: LinkService,private loginService: LoginService) { + constructor(private recipeService: RecipeService) { } @@ -41,18 +37,4 @@ export class AccueilComponent { this.isFormVisible = !this.isFormVisible; } - onClickLogin(event: Event): void { - event.preventDefault(); // Prevent the default anchor behavior - this.loginService.login(); - } - - onClickLogout(event: Event): void { - event.preventDefault(); // Prevent the default anchor behavior - this.loginService.logout(); - } - - isLogged(): boolean { - return this.loginService.isLogged(); - } - } diff --git a/daidokoro/src/app/component/recipe-list/recipe-list.component.html b/daidokoro/src/app/component/recipe-list/recipe-list.component.html index 2809b44..737a844 100644 --- a/daidokoro/src/app/component/recipe-list/recipe-list.component.html +++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.html @@ -83,13 +83,13 @@

{{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 index f09e231..c46619b 100644 --- a/daidokoro/src/app/component/recipe-list/recipe-list.component.ts +++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.ts @@ -3,6 +3,7 @@ import { RecipeService } from '../../service/recipe.service'; import { Recipe } from '../../model/recipe.model'; import {NgClass, NgOptimizedImage} from "@angular/common"; import {NgFor} from "@angular/common"; +import {Router, RouterLinkActive} from "@angular/router"; @Component({ selector: 'app-recipe-list', @@ -10,7 +11,8 @@ import {NgFor} from "@angular/common"; imports: [ NgOptimizedImage, NgFor, - NgClass + NgClass, + RouterLinkActive ], standalone: true }) @@ -22,7 +24,7 @@ export class RecipeListComponent implements OnInit { pageSize: number = 4; totalPages: any = 0; - constructor(private recipeService: RecipeService) {} + constructor(private recipeService: RecipeService,private router : Router) {} ngOnInit(): void { this.recipes = this.recipeService.getRecipes(); @@ -49,4 +51,8 @@ export class RecipeListComponent implements OnInit { this.currentPage++; } } + + detailsRecipe(id : number){ + this.router.navigateByUrl('/recipe/'+id); + } } diff --git a/daidokoro/src/app/data/ingredient.stub.ts b/daidokoro/src/app/data/ingredient.stub.ts index fdb9b58..0899070 100644 --- a/daidokoro/src/app/data/ingredient.stub.ts +++ b/daidokoro/src/app/data/ingredient.stub.ts @@ -1,9 +1,56 @@ import {Ingredient} from "../model/ingredient.model"; export var $INGREDIENTS : Ingredient[] = [ - {$id:1,$name:'Patate'}, - {$id:2,$name:'Gruyere'}, - {$id:3,$name:'Quenelle'}, - {$id:4,$name:'Faux-filet de Boeuf'}, - {$id:5,$name:'Concassé de tomates'} + { $id: 1, $name: 'Patate' }, + { $id: 2, $name: 'Gruyere' }, + { $id: 3, $name: 'Quenelle' }, + { $id: 4, $name: 'Faux-filet de Boeuf' }, + { $id: 5, $name: 'Concassé de tomates' }, + { $id: 6, $name: 'Carotte' }, + // { $id: 7, $name: 'Oignon' }, + // { $id: 8, $name: 'Ail' }, + // { $id: 9, $name: 'Poivron' }, + // { $id: 10, $name: 'Courgette' }, + // { $id: 11, $name: 'Champignon' }, + // { $id: 12, $name: 'Céleri' }, + // { $id: 13, $name: 'Épinard' }, + // { $id: 14, $name: 'Tomate' }, + // { $id: 15, $name: 'Poulet' }, + // { $id: 16, $name: 'Poisson' }, + // { $id: 17, $name: 'Crevette' }, + // { $id: 18, $name: 'Pâtes' }, + // { $id: 19, $name: 'Riz' }, + // { $id: 20, $name: 'Lait' }, + // { $id: 21, $name: 'Crème' }, + // { $id: 22, $name: 'Fromage' }, + // { $id: 23, $name: 'Beurre' }, + // { $id: 24, $name: 'Huile d’olive' }, + // { $id: 25, $name: 'Sel' }, + // { $id: 26, $name: 'Poivre' }, + // { $id: 27, $name: 'Paprika' }, + // { $id: 28, $name: 'Cumin' }, + // { $id: 29, $name: 'Curcuma' }, + // { $id: 30, $name: 'Thym' }, + // { $id: 31, $name: 'Laurier' }, + // { $id: 32, $name: 'Persil' }, + // { $id: 33, $name: 'Basilic' }, + // { $id: 34, $name: 'Coriandre' }, + // { $id: 35, $name: 'Gingembre' }, + // { $id: 36, $name: 'Citron' }, + // { $id: 37, $name: 'Pomme de terre' }, + // { $id: 38, $name: 'Betterave' }, + // { $id: 39, $name: 'Radis' }, + // { $id: 40, $name: 'Chou-fleur' }, + // { $id: 41, $name: 'Brocoli' }, + // { $id: 42, $name: 'Haricot vert' }, + // { $id: 43, $name: 'Pois' }, + // { $id: 44, $name: 'Lentille' }, + // { $id: 45, $name: 'Noix' }, + // { $id: 46, $name: 'Amandes' }, + // { $id: 47, $name: 'Noisettes' }, + // { $id: 48, $name: 'Chocolat' }, + // { $id: 49, $name: 'Vanille' }, + // { $id: 50, $name: 'Sucre' } + + ] diff --git a/daidokoro/src/app/guard.guard.ts b/daidokoro/src/app/guard.guard.ts index 22257e9..e9688c5 100644 --- a/daidokoro/src/app/guard.guard.ts +++ b/daidokoro/src/app/guard.guard.ts @@ -8,10 +8,8 @@ export const AuthGuard: CanActivateFn = (route, state) => { const router = inject(Router); if(!auth.isLogged()){ - router.navigateByUrl('/login'); - auth.login(); + router.navigateByUrl('/'); return false; } - auth.logout(); return true; }; diff --git a/daidokoro/src/app/service/recipe.service.ts b/daidokoro/src/app/service/recipe.service.ts index 7e9abff..08a4fff 100644 --- a/daidokoro/src/app/service/recipe.service.ts +++ b/daidokoro/src/app/service/recipe.service.ts @@ -15,4 +15,7 @@ export class RecipeService { this.recipes.push(recipe); localStorage.setItem('recipes', JSON.stringify(this.recipes)); } + getRecipe($id:number):Recipe{ + return this.recipes.find(x => x.$id == $id)! + } } From 51580432bd434a239aff51533e163598a9d57018 Mon Sep 17 00:00:00 2001 From: Corentin R Date: Wed, 26 Jun 2024 22:36:21 +0200 Subject: [PATCH 2/2] Adding list of ingredients with guards and detail of recipe --- .../ingredients/ingredients.component.css | 0 .../ingredients/ingredients.component.html | 50 +++++++++++++++++++ .../ingredients/ingredients.component.spec.ts | 23 +++++++++ .../ingredients/ingredients.component.ts | 45 +++++++++++++++++ .../recipe-detail/recipe-detail.component.css | 0 .../recipe-detail.component.html | 5 ++ .../recipe-detail.component.spec.ts | 23 +++++++++ .../recipe-detail/recipe-detail.component.ts | 26 ++++++++++ 8 files changed, 172 insertions(+) create mode 100644 daidokoro/src/app/component/ingredients/ingredients.component.css create mode 100644 daidokoro/src/app/component/ingredients/ingredients.component.html create mode 100644 daidokoro/src/app/component/ingredients/ingredients.component.spec.ts create mode 100644 daidokoro/src/app/component/ingredients/ingredients.component.ts create mode 100644 daidokoro/src/app/component/recipe-detail/recipe-detail.component.css create mode 100644 daidokoro/src/app/component/recipe-detail/recipe-detail.component.html create mode 100644 daidokoro/src/app/component/recipe-detail/recipe-detail.component.spec.ts create mode 100644 daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts diff --git a/daidokoro/src/app/component/ingredients/ingredients.component.css b/daidokoro/src/app/component/ingredients/ingredients.component.css new file mode 100644 index 0000000..e69de29 diff --git a/daidokoro/src/app/component/ingredients/ingredients.component.html b/daidokoro/src/app/component/ingredients/ingredients.component.html new file mode 100644 index 0000000..97f0504 --- /dev/null +++ b/daidokoro/src/app/component/ingredients/ingredients.component.html @@ -0,0 +1,50 @@ + + +
+ +
+ Recette 1 +
+

{{ ingredient.$name }}

+
+
+ +
+ diff --git a/daidokoro/src/app/component/ingredients/ingredients.component.spec.ts b/daidokoro/src/app/component/ingredients/ingredients.component.spec.ts new file mode 100644 index 0000000..dc7c651 --- /dev/null +++ b/daidokoro/src/app/component/ingredients/ingredients.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IngredientsComponent } from './ingredients.component'; + +describe('IngredientsComponent', () => { + let component: IngredientsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [IngredientsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(IngredientsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/daidokoro/src/app/component/ingredients/ingredients.component.ts b/daidokoro/src/app/component/ingredients/ingredients.component.ts new file mode 100644 index 0000000..af71741 --- /dev/null +++ b/daidokoro/src/app/component/ingredients/ingredients.component.ts @@ -0,0 +1,45 @@ +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, + ], + templateUrl: './ingredients.component.html', + styleUrl: './ingredients.component.css' +}) +export class IngredientsComponent implements OnInit{ + + ingredients: Ingredient[] = []; + links: Link[] = this.linkService.getLinks() + + constructor(private ingredientService : IngredientService,private loginService: LoginService,private linkService : LinkService) {} + + ngOnInit() { + this.ingredientService.getAll().subscribe(ingredients => { + this.ingredients = ingredients; + }); + } + + onClickLogin(event: Event): void { + event.preventDefault(); // Prevent the default anchor behavior + this.loginService.login(); + } + + onClickLogout(event: Event): void { + event.preventDefault(); // Prevent the default anchor behavior + this.loginService.logout(); + } + + isLogged(): boolean { + return this.loginService.isLogged(); + } + +} diff --git a/daidokoro/src/app/component/recipe-detail/recipe-detail.component.css b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.css new file mode 100644 index 0000000..e69de29 diff --git a/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html new file mode 100644 index 0000000..f411fb3 --- /dev/null +++ b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html @@ -0,0 +1,5 @@ +

{{recipe?.$name}}

+

{{recipe?.$createdAt}}

+ +

{{recipe?.$description}}

+ diff --git a/daidokoro/src/app/component/recipe-detail/recipe-detail.component.spec.ts b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.spec.ts new file mode 100644 index 0000000..3db95b6 --- /dev/null +++ b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RecipeDetailComponent } from './recipe-detail.component'; + +describe('RecipeDetailComponent', () => { + let component: RecipeDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RecipeDetailComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RecipeDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts new file mode 100644 index 0000000..2949c8a --- /dev/null +++ b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts @@ -0,0 +1,26 @@ +import {Component, Input} from '@angular/core'; +import {Recipe} from "../../model/recipe.model"; +import {RecipeService} from "../../service/recipe.service"; +import {RouterLink, RouterLinkActive, RouterOutlet} from "@angular/router"; +import {NgFor} from "@angular/common"; + +@Component({ + selector: 'app-recipe-detail', + standalone: true, + imports: [RouterOutlet,RouterLink, RouterLinkActive,NgFor], + templateUrl: './recipe-detail.component.html', + styleUrl: './recipe-detail.component.css' +}) +export class RecipeDetailComponent { + + recipe : Recipe|null = null; + + constructor(private recipeService : RecipeService) { + } + + @Input() + set id(id: number) { + this.recipe = this.recipeService.getRecipe(id)!; + } + +}