Compare commits
No commits in common. '45a802414ecab430988a280e46f6a2d70dd3257e' and '62b1b373209494adce61f03e147df6e7be6689a3' have entirely different histories.
45a802414e
...
62b1b37320
@ -1,80 +1,2 @@
|
|||||||
<!DOCTYPE html>
|
<app-accueil></app-accueil>
|
||||||
<html lang="fr">
|
<!-- <app-recipe-form></app-recipe-form> -->
|
||||||
<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,37 +1,15 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import {Router, RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
|
import { 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, NgForOf, NgIf, RecipeListComponent, RouterLink, RouterLinkActive],
|
imports: [RouterOutlet, AccueilComponent,RecipeFormComponent],
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrl: './app.component.css'
|
styleUrl: './app.component.css'
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
links : Link[] = this.linkService.getLinks()
|
title = 'daidokoro';
|
||||||
|
|
||||||
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 { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
||||||
import {provideRouter, withComponentInputBinding} from '@angular/router';
|
import { provideRouter } 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,withComponentInputBinding())]
|
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,11 +1,5 @@
|
|||||||
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}
|
|
||||||
];
|
];
|
||||||
|
|||||||
@ -1,50 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
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();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<h1>{{recipe?.$name}}</h1>
|
|
||||||
<p> {{recipe?.$createdAt}}</p>
|
|
||||||
|
|
||||||
<h3>{{recipe?.$description}}</h3>
|
|
||||||
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
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)!;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue