diff --git a/daidokoro/src/app/app.routes.ts b/daidokoro/src/app/app.routes.ts index dc39edb..586ade3 100644 --- a/daidokoro/src/app/app.routes.ts +++ b/daidokoro/src/app/app.routes.ts @@ -1,3 +1,5 @@ import { Routes } from '@angular/router'; +import {AuthGuard} from "./guard.guard"; -export const routes: Routes = []; +export const routes: Routes = [ +]; diff --git a/daidokoro/src/app/component/accueil/accueil.component.html b/daidokoro/src/app/component/accueil/accueil.component.html index 4f11807..bb0bee6 100644 --- a/daidokoro/src/app/component/accueil/accueil.component.html +++ b/daidokoro/src/app/component/accueil/accueil.component.html @@ -62,10 +62,20 @@
diff --git a/daidokoro/src/app/component/accueil/accueil.component.ts b/daidokoro/src/app/component/accueil/accueil.component.ts index 5d2b432..a9cdaa1 100644 --- a/daidokoro/src/app/component/accueil/accueil.component.ts +++ b/daidokoro/src/app/component/accueil/accueil.component.ts @@ -3,21 +3,35 @@ 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"; -import {NgIf} from "@angular/common"; +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({ selector: 'app-accueil', standalone: true, imports: [ RecipeListComponent, RecipeFormComponent, - NgIf + 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){} onRecipeSubmitted(recipe : Recipe){ this.recipeService.addRecipe(recipe); @@ -26,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/component/recipe-form/recipe-form.component.html b/daidokoro/src/app/component/recipe-form/recipe-form.component.html index 265e9fe..83cc959 100644 --- a/daidokoro/src/app/component/recipe-form/recipe-form.component.html +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html @@ -2,12 +2,32 @@ - + - + +
+
+ + + + + + + + + + +
+
+ +

Complete the form to enable the button.

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 e67befd..0ba7fc2 100644 --- a/daidokoro/src/app/component/recipe-form/recipe-form.component.ts +++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.ts @@ -1,24 +1,55 @@ import {Component, EventEmitter, Output} from '@angular/core'; import {Recipe} from "../../model/recipe.model"; -import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms"; - +import {FormControl, FormGroup, ReactiveFormsModule, FormArray, FormBuilder} from "@angular/forms"; +import { Ingredient } from '../../model/ingredient.model'; +import { Unity } from '../../model/unity'; +import { IngredientService } from '../../service/ingredient.service'; +import {NgFor} from "@angular/common"; @Component({ selector: 'app-recipe-form', standalone: true, - imports: [ReactiveFormsModule], + imports: [ReactiveFormsModule,NgFor], templateUrl: './recipe-form.component.html', styleUrl: './recipe-form.component.css' }) export class RecipeFormComponent { @Output() formSubmitted = new EventEmitter(); + ingredientsList: Ingredient[] = []; + unity = Object.values(Unity); + + constructor(private formBuilder: FormBuilder, private ingredientService : IngredientService){} + + ngOnInit(): void { + this.ingredientService.getAll().subscribe(ingredients => { + this.ingredientsList = ingredients; + }); + } - recipeForm = new FormGroup({ + recipeForm: FormGroup = this.formBuilder.group({ id: new FormControl('', { nonNullable: true }), name: new FormControl('', { nonNullable: true }), description: new FormControl('', { nonNullable: true }), - + ingredients: this.formBuilder.array([]) }); + get ingredients():FormArray{ + return this.recipeForm.get('ingredients') as FormArray; + } + + newIngredient(): FormGroup{ + return this.formBuilder.group({ + quantity: new FormControl(0, { nonNullable: true }), + unit: new FormControl('', { nonNullable: true }), + ingredient: new FormControl('', { nonNullable: true }) + }); + } + + addIngredient() { + this.ingredients.push(this.newIngredient()); + } + removeIngredient(index: number) { + this.ingredients.removeAt(index); + } onSubmit() { if(this.recipeForm.valid){ @@ -27,11 +58,18 @@ export class RecipeFormComponent { $name: this.recipeForm.value.name!, $description: this.recipeForm.value.description!, $createdAt: new Date(), - $ingredients: [] + $ingredients: this.recipeForm.value.ingredients!.map((ingredient : any) => ({ + quantity: ingredient.quantity, + unit: ingredient.unit, + ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient) + })) }; this.formSubmitted.emit(recipe); this.recipeForm.reset() + this.ingredients.clear() } } + + } diff --git a/daidokoro/src/app/data/link.stub.ts b/daidokoro/src/app/data/link.stub.ts index 1579d01..909eb97 100644 --- a/daidokoro/src/app/data/link.stub.ts +++ b/daidokoro/src/app/data/link.stub.ts @@ -1,6 +1,6 @@ import {Link} from "../model/link.model"; export var LINKS :Link[] = [ - {$name:"Lien1",$link:"Lien1"}, - {$name:"Lien2",$link:'Lien2'} + {$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/ingredient.service.ts b/daidokoro/src/app/service/ingredient.service.ts index 367d891..c93e160 100644 --- a/daidokoro/src/app/service/ingredient.service.ts +++ b/daidokoro/src/app/service/ingredient.service.ts @@ -1,6 +1,7 @@ import { Injectable } from '@angular/core'; import {Ingredient} from "../model/ingredient.model"; import {$INGREDIENTS} from "../data/ingredient.stub"; +import {Observable, of} from "rxjs"; @Injectable({ @@ -8,9 +9,7 @@ import {$INGREDIENTS} from "../data/ingredient.stub"; }) export class IngredientService { - constructor() { } - - getAll() : Ingredient[] { - return $INGREDIENTS; + getAll() : Observable { + return of($INGREDIENTS); } } diff --git a/daidokoro/src/app/service/login.service.ts b/daidokoro/src/app/service/login.service.ts new file mode 100644 index 0000000..455ef4b --- /dev/null +++ b/daidokoro/src/app/service/login.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class LoginService { + + login(): void { + localStorage.setItem('login', 'true'); + } + + logout(): void { + localStorage.setItem('login', 'false'); + } + + isLogged(): boolean { + const login = localStorage.getItem('login'); + return login === 'true'; + } +} diff --git a/daidokoro/src/app/app.component.spec.ts b/daidokoro/src/test/service/app.component.spec.ts similarity index 93% rename from daidokoro/src/app/app.component.spec.ts rename to daidokoro/src/test/service/app.component.spec.ts index 4f8c748..bdc69f8 100644 --- a/daidokoro/src/app/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(); + }); +}); 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(); + }); +});