# Conflicts: # daidokoro/src/app/component/recipe-form/recipe-form.component.html # daidokoro/src/app/component/recipe-form/recipe-form.component.tsformFront
commit
eb5dc52a84
@ -1,2 +1,80 @@
|
||||
<app-accueil></app-accueil>
|
||||
<!-- <app-recipe-form></app-recipe-form> -->
|
||||
<!DOCTYPE html>
|
||||
<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>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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())]
|
||||
};
|
||||
|
||||
@ -1,3 +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 = [];
|
||||
export const routes: Routes = [
|
||||
{path: 'ingredients', component:IngredientsComponent,canActivate: [AuthGuard]},
|
||||
{path: 'recipe/:id', component: RecipeDetailComponent},
|
||||
{path: '', component:AccueilComponent}
|
||||
];
|
||||
|
||||
@ -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>
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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,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';">
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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)!;
|
||||
}
|
||||
|
||||
}
|
||||
@ -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"}
|
||||
]
|
||||
|
||||
@ -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;
|
||||
};
|
||||
@ -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';
|
||||
}
|
||||
}
|
||||
@ -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 () => {
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue