Adding list of ingredients with guards and detail of recipe
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
dafff55563
commit
51580432bd
@ -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,5 @@
|
||||
<h1>{{recipe?.$name}}</h1>
|
||||
<p> {{recipe?.$createdAt}}</p>
|
||||
|
||||
<h3>{{recipe?.$description}}</h3>
|
||||
|
||||
@ -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)!;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue