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

Merge branch 'refs/heads/master' into formFront

Browse Source 
# Conflicts:
#	daidokoro/src/app/component/recipe-form/recipe-form.component.html
#	daidokoro/src/app/component/recipe-form/recipe-form.component.ts
formFront
Dorian HODIN 10 months ago
parent 4f43477810 e038252020
commit eb5dc52a84
27 changed files with 596 additions and 175 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())]
}; };

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

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

23
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,13 +45,6 @@
</style> </style>
</head> </head>
<body> <body>
<div class="navbar">
<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>

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

@ -3,21 +3,31 @@ import {RecipeListComponent} from "../recipe-list/recipe-list.component";
import {RecipeFormComponent} from "../recipe-form/recipe-form.component"; import {RecipeFormComponent} from "../recipe-form/recipe-form.component";
import {Recipe} from "../../model/recipe.model"; import {Recipe} from "../../model/recipe.model";
import {RecipeService} from "../../service/recipe.service"; import {RecipeService} from "../../service/recipe.service";
import {NgIf} from "@angular/common"; import {NgForOf, NgIf} from "@angular/common";
import {LinkService} from "../../service/link.service";
import {LoginService} from "../../service/login.service";
import {CommonModule} from "@angular/common";
@Component({ @Component({
selector: 'app-accueil', selector: 'app-accueil',
standalone: true, standalone: true,
imports: [ imports: [
RecipeListComponent, RecipeListComponent,
RecipeFormComponent, RecipeFormComponent,
NgIf CommonModule,
NgForOf,
], ],
templateUrl: './accueil.component.html' templateUrl: './accueil.component.html'
}) })
export class AccueilComponent { export class AccueilComponent {
isFormVisible: boolean = false; isFormVisible: boolean = false;
constructor(private recipeService: RecipeService){}
constructor(private recipeService: RecipeService) {
}
onRecipeSubmitted(recipe : Recipe){ onRecipeSubmitted(recipe : Recipe){
this.recipeService.addRecipe(recipe); this.recipeService.addRecipe(recipe);
@ -26,4 +36,5 @@ export class AccueilComponent {
toggleForm() { toggleForm() {
this.isFormVisible = !this.isFormVisible; this.isFormVisible = !this.isFormVisible;
} }
} }

0
daidokoro/src/app/component/ingredients/ingredients.component.css
Unescape View File

50
daidokoro/src/app/component/ingredients/ingredients.component.html
Unescape View File

@ -0,0 +1,50 @@
<style>
.ingredients {
font-family: Arial, sans-serif;
background-color: #bab6b6;
margin: 0px;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.ingredient-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s;
width: 200px;
margin: 20px;
}
.ingredient-card:hover {
transform: scale(1.05);
}
.ingredient-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.ingredient-content {
padding: 15px;
}
.ingredient-title {
font-size: 1em;
margin: 0 0 10px;
}
</style>
<body>
<div class="ingredients">
<div class="ingredient-card" *ngFor="let ingredient of ingredients ">
<img src="image1.jpg" alt="Recette 1" class="ingredient-image"
onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
<div class="ingredient-content">
<h2 class="ingredient-title">{{ ingredient.$name }}</h2>
</div>
</div>
</div>
</body>

23
daidokoro/src/app/component/ingredients/ingredients.component.spec.ts
Unescape View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { IngredientsComponent } from './ingredients.component';
describe('IngredientsComponent', () => {
let component: IngredientsComponent;
let fixture: ComponentFixture<IngredientsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [IngredientsComponent]
})
.compileComponents();
fixture = TestBed.createComponent(IngredientsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

45
daidokoro/src/app/component/ingredients/ingredients.component.ts
Unescape View File

@ -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();
}
}

0
daidokoro/src/app/component/recipe-detail/recipe-detail.component.css
Unescape View File

7
daidokoro/src/app/component/recipe-detail/recipe-detail.component.html
Unescape View File

@ -0,0 +1,7 @@
<h1>{{recipe?.$name}}</h1>
<p> {{recipe?.$createdAt}}</p>
<h3>{{recipe?.$description}}</h3>
<img [src]="recipe?.$image" alt="Recette 1" class="recipe-image"
onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">

23
daidokoro/src/app/component/recipe-detail/recipe-detail.component.spec.ts
Unescape View File

@ -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<RecipeDetailComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [RecipeDetailComponent]
})
.compileComponents();
fixture = TestBed.createComponent(RecipeDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

26
daidokoro/src/app/component/recipe-detail/recipe-detail.component.ts
Unescape View File

@ -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)!;
}
}

246
daidokoro/src/app/component/recipe-form/recipe-form.component.html
Unescape View File

@ -1,134 +1,136 @@
<!DOCTYPE html> <style>
<html lang="en"> body {
<head> font-family: Arial, sans-serif;
<meta charset="UTF-8"> background-color: #bab6b6;
<meta name="viewport" content="width=device-width, initial-scale=1.0"> margin: 0;
<title>Recipe Form</title> padding: 20px;
<style> display: flex;
body { flex-wrap: wrap;
font-family: Arial, sans-serif; justify-content: center;
background-color: #bab6b6; }
margin: 0; .form-container {
padding: 20px; background-color: #fff;
display: flex; border-radius: 10px;
flex-wrap: wrap; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
justify-content: center; padding: 20px;
} width: 100%;
.form-container { }
background-color: #fff; .form-container h2 {
border-radius: 10px; margin-top: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
padding: 20px; .form-group {
width: 100%; margin-bottom: 15px;
} }
.form-container h2 { .form-group label {
margin-top: 0; display: block;
} margin-bottom: 5px;
.form-group { }
margin-bottom: 15px; .form-group input,
} .form-group select,
.form-group label { .form-group button {
display: block; width: 97%;
margin-bottom: 5px; padding: 10px;
} margin-top: 5px;
.form-group input, border: 1px solid #ccc;
.form-group select, border-radius: 5px;
.form-group button { }
width: 97%; .form-group button {
padding: 10px; background-color: black;
margin-top: 5px; color: white;
border: 1px solid #ccc; border: none;
border-radius: 5px; cursor: pointer;
} }
.form-group button { .form-group button:hover {
background-color: black; background-color: #525259;
color: white; }
border: none; .form-group .remove-button {
cursor: pointer; background-color: red;
} }
.form-group button:hover { .form-group .remove-button:hover {
background-color: #525259; background-color: darkred;
} }
.form-group .remove-button { .add-ingredient-button {
background-color: red; background-color: #4CAF50;
} color: white;
.form-group .remove-button:hover { }
background-color: darkred; .add-ingredient-button:hover {
} background-color: #45a049;
.add-ingredient-button { }
background-color: #4CAF50; .submit-button {
color: white; background-color: black;
} color: white;
.add-ingredient-button:hover { }
background-color: #45a049; .submit-button:hover {
} background-color: #525259;
.submit-button { }
background-color: black; .error-message {
color: white; color: red;
} font-size: 0.9em;
.submit-button:hover { margin-top: 5px;
background-color: #525259; }
} .form-group.invalid input,
.error-message { .form-group.invalid select {
color: red; border-color: red;
font-size: 0.9em; }
margin-top: 5px;
}
.form-group.invalid input,
.form-group.invalid select {
border-color: red;
}
</style> </style>
</head>
<body> <body>
<div class="form-container"> <div class="form-container">
<h2>Ajouter une Recette</h2> <h2>Ajouter une Recette</h2>
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()"> <form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
<div class="form-group" [class.invalid]="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched"> <div class="form-group" [class.invalid]="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched">
<label for="id">ID: </label> <label for="id">ID: </label>
<input id="id" type="number" formControlName="id" required> <input id="id" type="number" formControlName="id" required>
<div class="error-message" *ngIf="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched"> <div class="error-message" *ngIf="recipeForm.get('id')?.invalid && recipeForm.get('id')?.touched">
L'ID est requis. L'ID est requis.
</div>
</div> </div>
<div class="form-group" [class.invalid]="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched"> </div>
<label for="name">Name: </label>
<input id="name" type="text" formControlName="name" required> <div class="form-group" [class.invalid]="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
<div class="error-message" *ngIf="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched"> <label for="name">Name: </label>
Le nom est requis. <input id="name" type="text" formControlName="name" required>
</div> <div class="error-message" *ngIf="recipeForm.get('name')?.invalid && recipeForm.get('name')?.touched">
Le nom est requis.
</div> </div>
<div class="form-group" [class.invalid]="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched"> </div>
<label for="description">Description: </label>
<input id="description" type="text" formControlName="description" required> <div class="form-group" [class.invalid]="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
<div class="error-message" *ngIf="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched"> <label for="description">Description: </label>
La description est requise. <input id="description" type="text" formControlName="description" required>
</div> <div class="error-message" *ngIf="recipeForm.get('description')?.invalid && recipeForm.get('description')?.touched">
La description est requise.
</div> </div>
<div formArrayName="ingredients"> </div>
<div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i" class="form-group"> <label for="image">Image: </label>
<label for="ingredient-quantity">Quantity:</label> <input id="image" type="file" (change)="onFileChange($event)">
<input id="ingredient-quantity" type="number" formControlName="quantity" required>
<div *ngIf="imageBase64">
<img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;">
</div>
<label for="ingredient-unit">Unit:</label> <div formArrayName="ingredients">
<select id="ingredient-unit" formControlName="unit" required> <div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i">
<option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option> <label for="ingredient-quantity">Quantity:</label>
</select> <input id="ingredient-quantity" type="number" formControlName="quantity" required>
<label for="ingredient-name">Ingredient:</label> <label for="ingredient-unit">Unit:</label>
<select id="ingredient-name" formControlName="ingredient" required> <select id="ingredient-unit" formControlName="unit" required>
<option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option> <option *ngFor="let unit of unity" [value]="unit">{{ unit }}</option>
</select> </select>
<button type="button" class="remove-button" (click)="removeIngredient(i)">Remove</button> <label for="ingredient-name">Ingredient:</label>
</div> <select id="ingredient-name" formControlName="ingredient" required>
<option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
</select>
<button type="button" (click)="removeIngredient(i)">Remove</button>
</div> </div>
<button type="button" class="add-ingredient-button" (click)="addIngredient()">Add Ingredient</button> </div>
<button type="button" (click)="addIngredient()">Add Ingredient</button>
<p>Completez le formulaire en entier pour pouvoir créer la recette.</p> <p>Complete the form to enable the button.</p>
<button type="submit" class="submit-button" [disabled]="!recipeForm.valid">Submit</button> <button type="submit" [disabled]="!recipeForm.valid">Submit</button>
</form> </form>
</div> </div>
</body> </body>
</html>

33
daidokoro/src/app/component/recipe-form/recipe-form.component.ts
Unescape View File

@ -16,6 +16,7 @@ export class RecipeFormComponent {
@Output() formSubmitted = new EventEmitter<Recipe>(); @Output() formSubmitted = new EventEmitter<Recipe>();
ingredientsList: Ingredient[] = []; ingredientsList: Ingredient[] = [];
unity = Object.values(Unity); unity = Object.values(Unity);
imageBase64: string | null = null;
constructor(private formBuilder: FormBuilder, private ingredientService: IngredientService) { } constructor(private formBuilder: FormBuilder, private ingredientService: IngredientService) { }
@ -23,13 +24,15 @@ export class RecipeFormComponent {
this.ingredientService.getAll().subscribe(ingredients => { this.ingredientService.getAll().subscribe(ingredients => {
this.ingredientsList = ingredients; this.ingredientsList = ingredients;
}); });
} }
recipeForm: FormGroup = this.formBuilder.group({ recipeForm: FormGroup = this.formBuilder.group({
id: new FormControl('', { nonNullable: true, validators: [Validators.required] }), id: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
name: new FormControl('', { nonNullable: true, validators: [Validators.required] }), name: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
description: new FormControl('', { nonNullable: true, validators: [Validators.required] }), description: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
ingredients: this.formBuilder.array([]) ingredients: this.formBuilder.array([this.newIngredient()]),
image: new FormControl('', {nonNullable: false})
}); });
get ingredients(): FormArray { get ingredients(): FormArray {
@ -49,7 +52,25 @@ export class RecipeFormComponent {
} }
removeIngredient(index: number) { 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() { onSubmit() {
@ -63,11 +84,13 @@ export class RecipeFormComponent {
quantity: ingredient.quantity, quantity: ingredient.quantity,
unit: ingredient.unit, unit: ingredient.unit,
ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient) ingredient: this.ingredientsList.find(ing => ing.$name === ingredient.ingredient)
})) })),
$image: this.recipeForm.value.image
}; };
this.formSubmitted.emit(recipe); this.formSubmitted.emit(recipe);
this.recipeForm.reset(); this.recipeForm.reset()
this.ingredients.clear(); this.ingredients.clear()
this.addIngredient()
} }
} }
} }

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

@ -79,17 +79,18 @@
<body> <body>
<div [ngClass]="{'four-column': !isFormVisible, 'two-column': isFormVisible}" class="recipe-container"> <div [ngClass]="{'four-column': !isFormVisible, 'two-column': isFormVisible}" class="recipe-container">
<div class="recipe-card" *ngFor="let recipe of paginatedRecipes"> <div class="recipe-card" *ngFor="let recipe of paginatedRecipes">
<img src="image1.jpg" alt="Recette 1" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';"> <img [src]="recipe.$image" alt="Recette 1" class="recipe-image"
onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
<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/data/link.stub.ts
Unescape View File

@ -1,6 +1,6 @@
import {Link} from "../model/link.model"; import {Link} from "../model/link.model";
export var LINKS :Link[] = [ export var LINKS :Link[] = [
{$name:"Lien1",$link:"Lien1"}, {$name:"Accueil",$link:""},
{$name:"Lien2",$link:'Lien2'} {$name:"Ingredients",$link:"/ingredients"}
] ]

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

@ -0,0 +1,15 @@
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('/');
return false;
}
return true;
};

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

@ -5,5 +5,6 @@ export interface Recipe {
$name : string, $name : string,
$description: string, $description: string,
$createdAt : Date, $createdAt : Date,
$ingredients: QuantifiedIngredient[] $ingredients: QuantifiedIngredient[],
$image?: string
} }

20
daidokoro/src/app/service/login.service.ts
Unescape View File

@ -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';
}
}

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)!
}
} }

2
daidokoro/src/app/app.component.spec.ts → daidokoro/src/test/service/app.component.spec.ts
Unescape View File

@ -1,5 +1,5 @@
import { TestBed } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component'; import { AppComponent } from '../../app/app.component';
describe('AppComponent', () => { describe('AppComponent', () => {
beforeEach(async () => { beforeEach(async () => {

17
daidokoro/src/test/service/guard.guard.spec.ts
Unescape View File

@ -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();
});
});

16
daidokoro/src/test/service/login.service.spec.ts
Unescape View File

@ -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();
});
});
Write Preview
Loading…
Cancel
Save