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

Adding list of ingredients with guards and detail of recipe

Browse Source
listIngredients
Corentin RICHARD 10 months ago
parent 62b1b37320
commit dafff55563
11 changed files with 182 additions and 73 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,2 +1,80 @@
<app-accueil></app-accueil> <!DOCTYPE html>
<!-- <app-recipe-form></app-recipe-form> --> <html lang="fr">
<head>
<meta charset="UTF-8">
<title>Daidokoro</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">
<style>
body, h1, h2, h3, h4, h5, h6 {
font-family: "Karma", sans-serif;
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;
gap: 20px;
}
.recipe-container, .form-container {
background-color: #bab6b6;
color: black;
padding: 20px;
flex: 1;
}
.recipe-container {
display: flex;
flex-direction: column;
}
.recipe-container h2 {
font-size: 3em;
margin-bottom: 10px;
}
.form-container {
display: none;
flex-direction: column;
}
.show-form .form-container {
display: flex;
}
.show-form .recipe-container, .show-form .form-container {
flex: 1;
}
.button-container {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="navbar">
<div *ngIf="isLogged()">
<a href="/" (click)="onClickLogout($event)">Logout</a>
</div>
<div *ngIf="!isLogged()">
<a href="" (click)="onClickLogin($event)">Login</a>
</div>
<div *ngFor="let link of links">
<a routerLink="{{link.$link}}" routerLinkActive="active" ariaCurrentWhenActive="page">{{link.$name}}</a>
</div>
</div>
<router-outlet></router-outlet>
</body>
</html>

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

@ -1,15 +1,37 @@
import { Component } from '@angular/core'; 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 {RecipeFormComponent} from "./component/recipe-form/recipe-form.component";
import {AccueilComponent} from "./component/accueil/accueil.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({ @Component({
selector: 'app-root', selector: 'app-root',
standalone: true, standalone: true,
imports: [RouterOutlet, AccueilComponent,RecipeFormComponent], imports: [RouterOutlet, AccueilComponent, RecipeFormComponent, NgForOf, NgIf, RecipeListComponent, RouterLink, RouterLinkActive],
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrl: './app.component.css' styleUrl: './app.component.css'
}) })
export class AppComponent { 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();
}
} }

4
daidokoro/src/app/app.config.ts
Unescape View File

@ -1,8 +1,8 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router'; import {provideRouter, withComponentInputBinding} from '@angular/router';
import { routes } from './app.routes'; import { routes } from './app.routes';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes,withComponentInputBinding())]
}; };

6
daidokoro/src/app/app.routes.ts
Unescape View File

@ -1,5 +1,11 @@
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import {AuthGuard} from "./guard.guard"; 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 = [ export const routes: Routes = [
{path: 'ingredients', component:IngredientsComponent,canActivate: [AuthGuard]},
{path: 'recipe/:id', component: RecipeDetailComponent},
{path: '', component:AccueilComponent}
]; ];

33
daidokoro/src/app/component/accueil/accueil.component.html
Unescape View File

@ -10,22 +10,6 @@
margin: 0; margin: 0;
padding: 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 { .content {
padding: 20px; padding: 20px;
display: flex; display: flex;
@ -61,23 +45,6 @@
</style> </style>
</head> </head>
<body> <body>
<div class="navbar">
<div *ngIf="isLogged()">
<a href="" (click)="onClickLogout($event)">Logout</a>
</div>
<div *ngIf="!isLogged()">
<a href="" (click)="onClickLogin($event)">Login</a>
</div>
<div *ngFor="let link of links">
<a routerLink="/{{link.$link}}" routerLinkActive="active" ariaCurrentWhenActive="page">{{link.$name}}</a>
</div>
<!-- <a href="#home">Accueil</a>-->
<!-- <a href="#recipes">Recettes</a>-->
<!-- <a href="#about">À Propos</a>-->
<!-- <a href="#contact">Contact</a>-->
</div>
<div class="content" [class.show-form]="isFormVisible"> <div class="content" [class.show-form]="isFormVisible">
<div class="recipe-container"> <div class="recipe-container">
<h2>Liste Recettes</h2> <h2>Liste Recettes</h2>

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

@ -5,9 +5,9 @@ import {Recipe} from "../../model/recipe.model";
import {RecipeService} from "../../service/recipe.service"; import {RecipeService} from "../../service/recipe.service";
import {NgForOf, NgIf} from "@angular/common"; import {NgForOf, NgIf} from "@angular/common";
import {LinkService} from "../../service/link.service"; import {LinkService} from "../../service/link.service";
import {Link} from "../../model/link.model";
import {LoginService} from "../../service/login.service"; import {LoginService} from "../../service/login.service";
import {RouterLink, RouterLinkActive,RouterOutlet} from "@angular/router";
import {CommonModule} from "@angular/common"; import {CommonModule} from "@angular/common";
@Component({ @Component({
@ -18,18 +18,14 @@ import {CommonModule} from "@angular/common";
RecipeFormComponent, RecipeFormComponent,
CommonModule, CommonModule,
NgForOf, NgForOf,
RouterLink,
RouterOutlet,
RouterLinkActive
], ],
templateUrl: './accueil.component.html' templateUrl: './accueil.component.html'
}) })
export class AccueilComponent { export class AccueilComponent {
isFormVisible: boolean = false; 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; 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();
}
} }

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

@ -83,13 +83,13 @@
<div class="recipe-content"> <div class="recipe-content">
<h2 class="recipe-title">{{recipe.$name}}</h2> <h2 class="recipe-title">{{recipe.$name}}</h2>
<p class="recipe-description">{{recipe.$description}}</p> <p class="recipe-description">{{recipe.$description}}</p>
<button class="details-button">Détails</button> <button (click)="detailsRecipe(recipe.$id)" class="details-button">Détails</button>
</div> </div>
</div> </div>
</div> </div>
<div class="pagination"> <div class="pagination">
<button class="page-link" (click)="previousPage()" [disabled]="currentPage === 0">Précédent</button> <button class="page-link" (click)="previousPage()" [disabled]="currentPage === 0">Précédent</button>
<span class="page-link" *ngFor="let page of totalPages; let i = index" [class.active]="currentPage === i" (click)="changePage(i)">{{ i + 1 }}</span> <!-- <span class="page-link" *ngFor="let page of totalPages; let i = index" [class.active]="currentPage === i" (click)="changePage(i)">{{ i + 1 }}</span>-->
<button class="page-link" (click)="nextPage()" [disabled]="currentPage === totalPages - 1">Suivant</button> <button class="page-link" (click)="nextPage()" [disabled]="currentPage === totalPages - 1">Suivant</button>
</div> </div>
</body> </body>

10
daidokoro/src/app/component/recipe-list/recipe-list.component.ts
Unescape View File

@ -3,6 +3,7 @@ import { RecipeService } from '../../service/recipe.service';
import { Recipe } from '../../model/recipe.model'; import { Recipe } from '../../model/recipe.model';
import {NgClass, NgOptimizedImage} from "@angular/common"; import {NgClass, NgOptimizedImage} from "@angular/common";
import {NgFor} from "@angular/common"; import {NgFor} from "@angular/common";
import {Router, RouterLinkActive} from "@angular/router";
@Component({ @Component({
selector: 'app-recipe-list', selector: 'app-recipe-list',
@ -10,7 +11,8 @@ import {NgFor} from "@angular/common";
imports: [ imports: [
NgOptimizedImage, NgOptimizedImage,
NgFor, NgFor,
NgClass NgClass,
RouterLinkActive
], ],
standalone: true standalone: true
}) })
@ -22,7 +24,7 @@ export class RecipeListComponent implements OnInit {
pageSize: number = 4; pageSize: number = 4;
totalPages: any = 0; totalPages: any = 0;
constructor(private recipeService: RecipeService) {} constructor(private recipeService: RecipeService,private router : Router) {}
ngOnInit(): void { ngOnInit(): void {
this.recipes = this.recipeService.getRecipes(); this.recipes = this.recipeService.getRecipes();
@ -49,4 +51,8 @@ export class RecipeListComponent implements OnInit {
this.currentPage++; this.currentPage++;
} }
} }
detailsRecipe(id : number){
this.router.navigateByUrl('/recipe/'+id);
}
} }

57
daidokoro/src/app/data/ingredient.stub.ts
Unescape View File

@ -1,9 +1,56 @@
import {Ingredient} from "../model/ingredient.model"; import {Ingredient} from "../model/ingredient.model";
export var $INGREDIENTS : Ingredient[] = [ export var $INGREDIENTS : Ingredient[] = [
{$id:1,$name:'Patate'}, { $id: 1, $name: 'Patate' },
{$id:2,$name:'Gruyere'}, { $id: 2, $name: 'Gruyere' },
{$id:3,$name:'Quenelle'}, { $id: 3, $name: 'Quenelle' },
{$id:4,$name:'Faux-filet de Boeuf'}, { $id: 4, $name: 'Faux-filet de Boeuf' },
{$id:5,$name:'Concassé de tomates'} { $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' }
] ]

4
daidokoro/src/app/guard.guard.ts
Unescape View File

@ -8,10 +8,8 @@ export const AuthGuard: CanActivateFn = (route, state) => {
const router = inject(Router); const router = inject(Router);
if(!auth.isLogged()){ if(!auth.isLogged()){
router.navigateByUrl('/login'); router.navigateByUrl('/');
auth.login();
return false; return false;
} }
auth.logout();
return true; return true;
}; };

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

@ -15,4 +15,7 @@ export class RecipeService {
this.recipes.push(recipe); this.recipes.push(recipe);
localStorage.setItem('recipes', JSON.stringify(this.recipes)); localStorage.setItem('recipes', JSON.stringify(this.recipes));
} }
getRecipe($id:number):Recipe{
return this.recipes.find(x => x.$id == $id)!
}
} }

Write Preview
Loading…
Cancel
Save