From 016118938cdaa11559fcb5b7e2a4059a2aa1c8fa Mon Sep 17 00:00:00 2001 From: Corentin R Date: Wed, 26 Jun 2024 17:46:18 +0200 Subject: [PATCH 1/6] Adding logging --- .../app/component/login/login.component.css | 0 .../app/component/login/login.component.html | 1 + .../component/login/login.component.spec.ts | 23 +++++++++++++++++++ .../app/component/login/login.component.ts | 21 +++++++++++++++++ daidokoro/src/app/service/login.service.ts | 21 +++++++++++++++++ .../src/test/service/login.service.spec.ts | 16 +++++++++++++ 6 files changed, 82 insertions(+) create mode 100644 daidokoro/src/app/component/login/login.component.css create mode 100644 daidokoro/src/app/component/login/login.component.html create mode 100644 daidokoro/src/app/component/login/login.component.spec.ts create mode 100644 daidokoro/src/app/component/login/login.component.ts create mode 100644 daidokoro/src/app/service/login.service.ts create mode 100644 daidokoro/src/test/service/login.service.spec.ts diff --git a/daidokoro/src/app/component/login/login.component.css b/daidokoro/src/app/component/login/login.component.css new file mode 100644 index 0000000..e69de29 diff --git a/daidokoro/src/app/component/login/login.component.html b/daidokoro/src/app/component/login/login.component.html new file mode 100644 index 0000000..9050673 --- /dev/null +++ b/daidokoro/src/app/component/login/login.component.html @@ -0,0 +1 @@ +

aadadafaaaaaaaaaaaaaaaaaaaaaaaaaaa

diff --git a/daidokoro/src/app/component/login/login.component.spec.ts b/daidokoro/src/app/component/login/login.component.spec.ts new file mode 100644 index 0000000..18f3685 --- /dev/null +++ b/daidokoro/src/app/component/login/login.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginComponent } from './login.component'; + +describe('LoginComponent', () => { + let component: LoginComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LoginComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/daidokoro/src/app/component/login/login.component.ts b/daidokoro/src/app/component/login/login.component.ts new file mode 100644 index 0000000..e7470fe --- /dev/null +++ b/daidokoro/src/app/component/login/login.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; +import {LoginService} from "../../service/login.service"; + +@Component({ + selector: 'app-login', + standalone: true, + imports: [], + templateUrl: './login.component.html', + styleUrl: './login.component.css' +}) +export class LoginComponent implements OnInit{ + + constructor(private loginService: LoginService) { + // this.loginService.login() + } + + ngOnInit(): void { + this.loginService.login() + + } +} diff --git a/daidokoro/src/app/service/login.service.ts b/daidokoro/src/app/service/login.service.ts new file mode 100644 index 0000000..387c626 --- /dev/null +++ b/daidokoro/src/app/service/login.service.ts @@ -0,0 +1,21 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class LoginService { + + constructor() { } + + login() { + localStorage.setItem('login', String(true)); + } + + logout() : void { + localStorage.setItem('login',String(false)); + } + + isLogged() : boolean { + return JSON.parse(localStorage.getItem('login')!); + } +} diff --git a/daidokoro/src/test/service/login.service.spec.ts b/daidokoro/src/test/service/login.service.spec.ts new file mode 100644 index 0000000..0874b24 --- /dev/null +++ b/daidokoro/src/test/service/login.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { LoginService } from '../../app/service/login.service'; + +describe('LoginService', () => { + let service: LoginService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(LoginService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); From 95ee9950514296f7aef26e8cc728b03e5065759a Mon Sep 17 00:00:00 2001 From: Corentin R Date: Wed, 26 Jun 2024 20:20:58 +0200 Subject: [PATCH 2/6] Merge branch 'master' of https://codefirst.iut.uca.fr/git/dorian.hodin/Daidokoro into formAdvanced --- .../app/component/login/login.component.css | 0 .../app/component/login/login.component.html | 1 - .../component/login/login.component.spec.ts | 23 ------------------- .../app/component/login/login.component.ts | 21 ----------------- .../service}/app.component.spec.ts | 0 5 files changed, 45 deletions(-) delete mode 100644 daidokoro/src/app/component/login/login.component.css delete mode 100644 daidokoro/src/app/component/login/login.component.html delete mode 100644 daidokoro/src/app/component/login/login.component.spec.ts delete mode 100644 daidokoro/src/app/component/login/login.component.ts rename daidokoro/src/{app => test/service}/app.component.spec.ts (100%) diff --git a/daidokoro/src/app/component/login/login.component.css b/daidokoro/src/app/component/login/login.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/daidokoro/src/app/component/login/login.component.html b/daidokoro/src/app/component/login/login.component.html deleted file mode 100644 index 9050673..0000000 --- a/daidokoro/src/app/component/login/login.component.html +++ /dev/null @@ -1 +0,0 @@ -

aadadafaaaaaaaaaaaaaaaaaaaaaaaaaaa

diff --git a/daidokoro/src/app/component/login/login.component.spec.ts b/daidokoro/src/app/component/login/login.component.spec.ts deleted file mode 100644 index 18f3685..0000000 --- a/daidokoro/src/app/component/login/login.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { LoginComponent } from './login.component'; - -describe('LoginComponent', () => { - let component: LoginComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [LoginComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(LoginComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/daidokoro/src/app/component/login/login.component.ts b/daidokoro/src/app/component/login/login.component.ts deleted file mode 100644 index e7470fe..0000000 --- a/daidokoro/src/app/component/login/login.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import {LoginService} from "../../service/login.service"; - -@Component({ - selector: 'app-login', - standalone: true, - imports: [], - templateUrl: './login.component.html', - styleUrl: './login.component.css' -}) -export class LoginComponent implements OnInit{ - - constructor(private loginService: LoginService) { - // this.loginService.login() - } - - ngOnInit(): void { - this.loginService.login() - - } -} diff --git a/daidokoro/src/app/app.component.spec.ts b/daidokoro/src/test/service/app.component.spec.ts similarity index 100% rename from daidokoro/src/app/app.component.spec.ts rename to daidokoro/src/test/service/app.component.spec.ts From e2cd09bb993a249ac87b841e0cc7509bb3391a69 Mon Sep 17 00:00:00 2001 From: Corentin R Date: Wed, 26 Jun 2024 20:21:17 +0200 Subject: [PATCH 3/6] Adding login and giuard --- daidokoro/src/app/app.routes.ts | 3 +-- .../component/accueil/accueil.component.html | 7 ++++++ .../component/accueil/accueil.component.ts | 23 ++++++++++++++----- daidokoro/src/app/data/link.stub.ts | 3 ++- daidokoro/src/app/guard.guard.ts | 17 ++++++++++++++ daidokoro/src/app/service/login.service.ts | 15 ++++++------ .../src/test/service/app.component.spec.ts | 2 +- .../src/test/service/guard.guard.spec.ts | 17 ++++++++++++++ 8 files changed, 69 insertions(+), 18 deletions(-) create mode 100644 daidokoro/src/app/guard.guard.ts create mode 100644 daidokoro/src/test/service/guard.guard.spec.ts diff --git a/daidokoro/src/app/app.routes.ts b/daidokoro/src/app/app.routes.ts index 1654526..586ade3 100644 --- a/daidokoro/src/app/app.routes.ts +++ b/daidokoro/src/app/app.routes.ts @@ -1,6 +1,5 @@ import { Routes } from '@angular/router'; -import {LoginComponent} from "./component/login/login.component"; +import {AuthGuard} from "./guard.guard"; export const routes: Routes = [ - {path: 'login',component:LoginComponent} ]; diff --git a/daidokoro/src/app/component/accueil/accueil.component.html b/daidokoro/src/app/component/accueil/accueil.component.html index 2e76ae7..bb0bee6 100644 --- a/daidokoro/src/app/component/accueil/accueil.component.html +++ b/daidokoro/src/app/component/accueil/accueil.component.html @@ -62,6 +62,13 @@
+
+ Logout +
+
+ Login +
+ diff --git a/daidokoro/src/app/component/accueil/accueil.component.ts b/daidokoro/src/app/component/accueil/accueil.component.ts index 21f82a7..a9cdaa1 100644 --- a/daidokoro/src/app/component/accueil/accueil.component.ts +++ b/daidokoro/src/app/component/accueil/accueil.component.ts @@ -8,6 +8,7 @@ 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({ selector: 'app-accueil', @@ -15,7 +16,7 @@ import {RouterLink, RouterLinkActive,RouterOutlet} from "@angular/router"; imports: [ RecipeListComponent, RecipeFormComponent, - NgIf, + CommonModule, NgForOf, RouterLink, RouterOutlet, @@ -29,11 +30,6 @@ export class AccueilComponent { constructor(private recipeService: RecipeService,private linkService: LinkService,private loginService: LoginService) { - if(this.loginService.isLogged()){ - this.links.push({$name: '/logout',$link: '/logout'}); - }else{ - this.links.push({$name: '/login',$link: '/login'}); - } } @@ -44,4 +40,19 @@ export class AccueilComponent { toggleForm() { 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/data/link.stub.ts b/daidokoro/src/app/data/link.stub.ts index a4fe53c..909eb97 100644 --- a/daidokoro/src/app/data/link.stub.ts +++ b/daidokoro/src/app/data/link.stub.ts @@ -1,5 +1,6 @@ import {Link} from "../model/link.model"; export var LINKS :Link[] = [ - {$name:"/Accueil",$link:""} + {$name:"Accueil",$link:""}, + {$name:"Ingredients",$link:"/ingredients"} ] diff --git a/daidokoro/src/app/guard.guard.ts b/daidokoro/src/app/guard.guard.ts new file mode 100644 index 0000000..22257e9 --- /dev/null +++ b/daidokoro/src/app/guard.guard.ts @@ -0,0 +1,17 @@ +import {CanActivateFn, Router} from '@angular/router'; +import {LoginService} from "./service/login.service"; +import {inject} from "@angular/core"; + + +export const AuthGuard: CanActivateFn = (route, state) => { + const auth = inject(LoginService) + const router = inject(Router); + + if(!auth.isLogged()){ + router.navigateByUrl('/login'); + auth.login(); + return false; + } + auth.logout(); + return true; +}; diff --git a/daidokoro/src/app/service/login.service.ts b/daidokoro/src/app/service/login.service.ts index 387c626..455ef4b 100644 --- a/daidokoro/src/app/service/login.service.ts +++ b/daidokoro/src/app/service/login.service.ts @@ -5,17 +5,16 @@ import { Injectable } from '@angular/core'; }) export class LoginService { - constructor() { } - - login() { - localStorage.setItem('login', String(true)); + login(): void { + localStorage.setItem('login', 'true'); } - logout() : void { - localStorage.setItem('login',String(false)); + logout(): void { + localStorage.setItem('login', 'false'); } - isLogged() : boolean { - return JSON.parse(localStorage.getItem('login')!); + isLogged(): boolean { + const login = localStorage.getItem('login'); + return login === 'true'; } } diff --git a/daidokoro/src/test/service/app.component.spec.ts b/daidokoro/src/test/service/app.component.spec.ts index 4f8c748..bdc69f8 100644 --- a/daidokoro/src/test/service/app.component.spec.ts +++ b/daidokoro/src/test/service/app.component.spec.ts @@ -1,5 +1,5 @@ import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; +import { AppComponent } from '../../app/app.component'; describe('AppComponent', () => { beforeEach(async () => { diff --git a/daidokoro/src/test/service/guard.guard.spec.ts b/daidokoro/src/test/service/guard.guard.spec.ts new file mode 100644 index 0000000..f64b228 --- /dev/null +++ b/daidokoro/src/test/service/guard.guard.spec.ts @@ -0,0 +1,17 @@ +import { TestBed } from '@angular/core/testing'; +import { CanActivateFn } from '@angular/router'; + +import { AuthGuard } from '../../app/guard.guard'; + +describe('guardGuard', () => { + const executeGuard: CanActivateFn = (...guardParameters) => + TestBed.runInInjectionContext(() => AuthGuard(...guardParameters)); + + beforeEach(() => { + TestBed.configureTestingModule({}); + }); + + it('should be created', () => { + expect(executeGuard).toBeTruthy(); + }); +}); From dafff555632c84277c6e69a322736c34bfc9c951 Mon Sep 17 00:00:00 2001 From: Corentin R Date: Wed, 26 Jun 2024 22:36:02 +0200 Subject: [PATCH 4/6] 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 +
+ + +
+ + + + + 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 -
- - - - - - -
-

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 5/6] 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)!; + } + +} From cd07d96d44d63c1fcdfe0a1bef436e5b11431bab Mon Sep 17 00:00:00 2001 From: Corentin R Date: Wed, 26 Jun 2024 23:39:04 +0200 Subject: [PATCH 6/6] Adding image to Recipe and one ingredient checker --- .../recipe-detail.component.html | 2 ++ .../recipe-form/recipe-form.component.html | 19 +++++++---- .../recipe-form/recipe-form.component.ts | 34 ++++++++++++++++--- .../recipe-list/recipe-list.component.html | 3 +- daidokoro/src/app/model/recipe.model.ts | 3 +- 5 files changed, 48 insertions(+), 13 deletions(-) diff --git a/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html index f411fb3..2d72b82 100644 --- a/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html +++ b/daidokoro/src/app/component/recipe-detail/recipe-detail.component.html @@ -3,3 +3,5 @@

{{recipe?.$description}}

+Recette 1 diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.html b/daidokoro/src/app/component/recipe-form/recipe-form.component.html index 83cc959..f6d6fd5 100644 --- a/daidokoro/src/app/component/recipe-form/recipe-form.component.html +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html @@ -1,25 +1,32 @@
- + - + - + + + + + +
+ Selected Image +
- + - - diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts index 0ba7fc2..d542a76 100644 --- a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts @@ -4,11 +4,12 @@ import {FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder} fro import { Ingredient } from '../../model/ingredient.model'; import { Unity } from '../../model/unity'; import { IngredientService } from '../../service/ingredient.service'; -import {NgFor} from "@angular/common"; +import {NgFor, NgIf} from "@angular/common"; + @Component({ selector: 'app-recipe-form', standalone: true, - imports: [ReactiveFormsModule,NgFor], + imports: [ReactiveFormsModule, NgFor, NgIf], templateUrl: './recipe-form.component.html', styleUrl: './recipe-form.component.css' }) @@ -16,6 +17,7 @@ export class RecipeFormComponent { @Output() formSubmitted = new EventEmitter(); ingredientsList: Ingredient[] = []; unity = Object.values(Unity); + imageBase64: string | null = null; constructor(private formBuilder: FormBuilder, private ingredientService : IngredientService){} @@ -23,13 +25,15 @@ export class RecipeFormComponent { this.ingredientService.getAll().subscribe(ingredients => { this.ingredientsList = ingredients; }); + } recipeForm: FormGroup = this.formBuilder.group({ id: new FormControl('', { nonNullable: true }), name: new FormControl('', { nonNullable: true }), description: new FormControl('', { nonNullable: true }), - ingredients: this.formBuilder.array([]) + ingredients: this.formBuilder.array([this.newIngredient()]), + image: new FormControl('', {nonNullable: false}) }); get ingredients():FormArray{ @@ -48,7 +52,25 @@ export class RecipeFormComponent { this.ingredients.push(this.newIngredient()); } removeIngredient(index: number) { - this.ingredients.removeAt(index); + if (this.ingredients.length > 1) { + + this.ingredients.removeAt(index); + } else { + + } + } + + onFileChange(event: Event) { + const input = event.target as HTMLInputElement; + if (input.files && input.files[0]) { + const file = input.files[0]; + const reader = new FileReader(); + reader.onload = () => { + this.imageBase64 = reader.result as string; + this.recipeForm.patchValue({image: this.imageBase64}); + }; + reader.readAsDataURL(file); + } } onSubmit() { @@ -62,11 +84,13 @@ export class RecipeFormComponent { quantity: ingredient.quantity, unit: ingredient.unit, ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient) - })) + })), + $image: this.recipeForm.value.image }; this.formSubmitted.emit(recipe); this.recipeForm.reset() this.ingredients.clear() + this.addIngredient() } } 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 737a844..ee162c2 100644 --- a/daidokoro/src/app/component/recipe-list/recipe-list.component.html +++ b/daidokoro/src/app/component/recipe-list/recipe-list.component.html @@ -79,7 +79,8 @@
- Recette 1 + Recette 1

{{recipe.$name}}

{{recipe.$description}}

diff --git a/daidokoro/src/app/model/recipe.model.ts b/daidokoro/src/app/model/recipe.model.ts index a160f8f..b2632c0 100644 --- a/daidokoro/src/app/model/recipe.model.ts +++ b/daidokoro/src/app/model/recipe.model.ts @@ -5,5 +5,6 @@ export interface Recipe { $name : string, $description: string, $createdAt : Date, - $ingredients: QuantifiedIngredient[] + $ingredients: QuantifiedIngredient[], + $image?: string }