Compare commits
No commits in common. 'master' and 'formFront' have entirely different histories.
@ -1,51 +0,0 @@
|
|||||||
<style>
|
|
||||||
.command-list {
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-item {
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
margin: 10px 0;
|
|
||||||
padding: 10px 20px;
|
|
||||||
width: 80%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-item h3 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-item button {
|
|
||||||
background-color: #ff5252;
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-item button:hover {
|
|
||||||
background-color: #ff0000;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="command-list">
|
|
||||||
<h2>Ma Commande</h2>
|
|
||||||
<div *ngFor="let recipe of recipes" class="recipe-item">
|
|
||||||
<img src="{{recipe.$image}}" width="10%" alt="ImageRecipe"
|
|
||||||
onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
|
||||||
<h3>{{ recipe.$name }}</h3>
|
|
||||||
<button (click)="removeRecipe(recipe)">Retirer</button>
|
|
||||||
</div>
|
|
||||||
<p *ngIf="recipes.length === 0">Aucune recette dans la commande.</p>
|
|
||||||
</div>
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { CommandComponent } from './command.component';
|
|
||||||
|
|
||||||
describe('CommandComponent', () => {
|
|
||||||
let component: CommandComponent;
|
|
||||||
let fixture: ComponentFixture<CommandComponent>;
|
|
||||||
|
|
||||||
beforeEach(async () => {
|
|
||||||
await TestBed.configureTestingModule({
|
|
||||||
imports: [CommandComponent]
|
|
||||||
})
|
|
||||||
.compileComponents();
|
|
||||||
|
|
||||||
fixture = TestBed.createComponent(CommandComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
import { CommandService } from '../../service/command.service';
|
|
||||||
import { Recipe } from '../../model/recipe.model';
|
|
||||||
import {NgFor, NgIf} from '@angular/common';
|
|
||||||
import { RouterLink } from '@angular/router';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-command',
|
|
||||||
standalone: true,
|
|
||||||
imports: [NgFor, RouterLink, NgIf],
|
|
||||||
templateUrl: './command.component.html'
|
|
||||||
})
|
|
||||||
export class CommandComponent {
|
|
||||||
recipes: Recipe[] = [];
|
|
||||||
errorMessage: string | null = null;
|
|
||||||
|
|
||||||
constructor(private commandService: CommandService) {
|
|
||||||
this.recipes = this.commandService.getRecipes();
|
|
||||||
}
|
|
||||||
|
|
||||||
removeRecipe(recipe: Recipe) {
|
|
||||||
this.commandService.removeRecipe(recipe);
|
|
||||||
this.recipes = this.commandService.getRecipes();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,62 +1,45 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import { IngredientService } from "../../service/ingredient.service";
|
import {IngredientService} from "../../service/ingredient.service";
|
||||||
import { Ingredient } from "../../model/ingredient.model";
|
import {Ingredient} from "../../model/ingredient.model";
|
||||||
import { NgFor, NgIf } from "@angular/common";
|
import {NgFor} from "@angular/common";
|
||||||
import { FormsModule } from "@angular/forms";
|
import {LoginService} from "../../service/login.service";
|
||||||
import { HttpClient } from "@angular/common/http";
|
import {Link} from "../../model/link.model";
|
||||||
|
import {LinkService} from "../../service/link.service";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-ingredients',
|
selector: 'app-ingredients',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [
|
imports: [
|
||||||
NgFor,
|
NgFor,
|
||||||
NgIf,
|
|
||||||
FormsModule
|
|
||||||
],
|
],
|
||||||
providers: [IngredientService, HttpClient],
|
|
||||||
templateUrl: './ingredients.component.html',
|
templateUrl: './ingredients.component.html',
|
||||||
styleUrl: './ingredients.component.css'
|
styleUrl: './ingredients.component.css'
|
||||||
})
|
})
|
||||||
export class IngredientsComponent implements OnInit {
|
export class IngredientsComponent implements OnInit{
|
||||||
|
|
||||||
ingredients: Ingredient[] = [];
|
ingredients: Ingredient[] = [];
|
||||||
newIngredient: Ingredient = { id: '0', name: '', description: '' };
|
links: Link[] = this.linkService.getLinks()
|
||||||
editIngredient: Ingredient | null = null;
|
|
||||||
|
|
||||||
constructor(private ingredientService: IngredientService) {}
|
constructor(private ingredientService : IngredientService,private loginService: LoginService,private linkService : LinkService) {}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.loadIngredients();
|
|
||||||
}
|
|
||||||
|
|
||||||
loadIngredients() {
|
|
||||||
this.ingredientService.getAll().subscribe(ingredients => {
|
this.ingredientService.getAll().subscribe(ingredients => {
|
||||||
this.ingredients = ingredients;
|
this.ingredients = ingredients;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
addIngredient() {
|
onClickLogin(event: Event): void {
|
||||||
this.ingredientService.add(this.newIngredient).subscribe(ingredient => {
|
event.preventDefault(); // Prevent the default anchor behavior
|
||||||
this.ingredients.push(ingredient);
|
this.loginService.login();
|
||||||
this.newIngredient = { id: '0', name: '', description: '' };
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
edit(ingredient: Ingredient) {
|
onClickLogout(event: Event): void {
|
||||||
this.editIngredient = { ...ingredient };
|
event.preventDefault(); // Prevent the default anchor behavior
|
||||||
|
this.loginService.logout();
|
||||||
}
|
}
|
||||||
|
|
||||||
updateIngredient() {
|
isLogged(): boolean {
|
||||||
if (this.editIngredient) {
|
return this.loginService.isLogged();
|
||||||
this.ingredientService.update(this.editIngredient).subscribe(updatedIngredient => {
|
|
||||||
const index = this.ingredients.findIndex(i => i.id === updatedIngredient.id);
|
|
||||||
this.ingredients[index] = updatedIngredient;
|
|
||||||
this.editIngredient = null;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
cancelEdit() {
|
|
||||||
this.editIngredient = null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,85 +1,7 @@
|
|||||||
<style>
|
<h1>{{recipe?.$name}}</h1>
|
||||||
.recipe-details {
|
<p> {{recipe?.$createdAt}}</p>
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background-color: #bab6b6;
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-card {
|
<h3>{{recipe?.$description}}</h3>
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
overflow: hidden;
|
|
||||||
transition: transform 0.2s;
|
|
||||||
width: 80%;
|
|
||||||
margin: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-card:hover {
|
<img [src]="recipe?.$image" alt="Recette 1" class="recipe-image"
|
||||||
transform: scale(1.05);
|
onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-image {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-content {
|
|
||||||
padding: 15px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-title {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-date {
|
|
||||||
color: #777;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipe-description {
|
|
||||||
font-size: 1.2em;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ingredient-list {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ingredient-item {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="recipe-details">
|
|
||||||
<div class="recipe-card">
|
|
||||||
<h1 class="recipe-title">{{ recipe?.$name }}</h1>
|
|
||||||
<p class="recipe-date">{{ recipe?.$createdAt }}</p>
|
|
||||||
<img [src]="recipe?.$image" alt="{{ recipe?.$name }}" class="recipe-image"
|
|
||||||
onerror="this.onerror=null;this.src='https://placehold.co/300x300/black/white?text=Not+Found';">
|
|
||||||
<div class="recipe-content">
|
|
||||||
<h3 class="recipe-description">{{ recipe?.$description }}</h3>
|
|
||||||
<h4>Ingrédients</h4>
|
|
||||||
<ul class="ingredient-list">
|
|
||||||
<li class="ingredient-item" *ngFor="let ingredient of ingredients">
|
|
||||||
{{ ingredient.ingredient.name }} : {{ ingredient.quantity }} {{ ingredient.unit }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
|
|
||||||
export interface Ingredient {
|
export interface Ingredient {
|
||||||
id : string,
|
$id : number,
|
||||||
name : string,
|
$name : string
|
||||||
description : string,
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,23 +0,0 @@
|
|||||||
import { Unity } from "./unity";
|
|
||||||
import { Ingredient } from "./ingredient.model";
|
|
||||||
import { QuantifiedIngredient } from "./quantified-ingredient.model";
|
|
||||||
|
|
||||||
export class QuantifiedIngredientGetter implements QuantifiedIngredient {
|
|
||||||
constructor(
|
|
||||||
public $quantity: number,
|
|
||||||
public $unit: Unity,
|
|
||||||
public $ingredient: Ingredient
|
|
||||||
) {}
|
|
||||||
|
|
||||||
get quantity(): number {
|
|
||||||
return this.$quantity;
|
|
||||||
}
|
|
||||||
|
|
||||||
get unit(): Unity {
|
|
||||||
return this.$unit;
|
|
||||||
}
|
|
||||||
|
|
||||||
get ingredient(): Ingredient {
|
|
||||||
return this.$ingredient;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
import { Unity } from "./unity";
|
import {Unity} from "./unity";
|
||||||
import { Ingredient } from "./ingredient.model";
|
import {Ingredient} from "./ingredient.model";
|
||||||
|
|
||||||
export interface QuantifiedIngredient {
|
export interface QuantifiedIngredient {
|
||||||
$quantity: number;
|
$quantity : number,
|
||||||
$unit: Unity;
|
$unit : Unity,
|
||||||
$ingredient: Ingredient;
|
$ingredient : Ingredient
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
import {QuantifiedIngredientGetter} from "./quantified-ingredient-getter.model";
|
import {QuantifiedIngredient} from "./quantified-ingredient.model";
|
||||||
|
|
||||||
export interface Recipe {
|
export interface Recipe {
|
||||||
$id : number,
|
$id : number,
|
||||||
$name : string,
|
$name : string,
|
||||||
$description: string,
|
$description: string,
|
||||||
$createdAt : Date,
|
$createdAt : Date,
|
||||||
$ingredients: QuantifiedIngredientGetter[],
|
$ingredients: QuantifiedIngredient[],
|
||||||
$image?: string
|
$image?: string
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,25 +0,0 @@
|
|||||||
import { Injectable } from '@angular/core';
|
|
||||||
import { Recipe } from "../model/recipe.model";
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class CommandService {
|
|
||||||
private recipes: Recipe[] = JSON.parse(localStorage.getItem('command') || '[]');
|
|
||||||
|
|
||||||
addRecipe(recipe: Recipe) {
|
|
||||||
this.recipes.push(recipe);
|
|
||||||
localStorage.setItem('command', JSON.stringify(this.recipes));
|
|
||||||
}
|
|
||||||
|
|
||||||
getRecipes(): Recipe[] {
|
|
||||||
return this.recipes;
|
|
||||||
}
|
|
||||||
|
|
||||||
removeRecipe(recipe: Recipe) {
|
|
||||||
const index = this.recipes.indexOf(recipe);
|
|
||||||
if (index > -1) {
|
|
||||||
this.recipes.splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,26 +1,15 @@
|
|||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
import { Ingredient } from "../model/ingredient.model";
|
import {Ingredient} from "../model/ingredient.model";
|
||||||
import { Observable } from "rxjs";
|
import {$INGREDIENTS} from "../data/ingredient.stub";
|
||||||
import { HttpClient } from "@angular/common/http";
|
import {Observable, of} from "rxjs";
|
||||||
|
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root'
|
providedIn: 'root'
|
||||||
})
|
})
|
||||||
export class IngredientService {
|
export class IngredientService {
|
||||||
|
|
||||||
private apiUrl = 'https://664ba07f35bbda10987d9f99.mockapi.io/api/ingredients';
|
getAll() : Observable<Ingredient[]> {
|
||||||
|
return of($INGREDIENTS);
|
||||||
constructor(private http: HttpClient) { }
|
|
||||||
|
|
||||||
getAll(): Observable<Ingredient[]> {
|
|
||||||
return this.http.get<Ingredient[]>(this.apiUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
add(ingredient: Ingredient): Observable<Ingredient> {
|
|
||||||
return this.http.post<Ingredient>(this.apiUrl, ingredient);
|
|
||||||
}
|
|
||||||
|
|
||||||
update(ingredient: Ingredient): Observable<Ingredient> {
|
|
||||||
return this.http.put<Ingredient>(`${this.apiUrl}/${ingredient.id}`, ingredient);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue