hugo.pradier2
/
ProjetAngularMazinguePradierWEB2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changements visuels

Browse Source
master
Hugo PRADIER 1 year ago
parent 373e352576
commit 3965ae7186
11 changed files with 165 additions and 51 deletions
Show Stats Download Patch File Download Diff File

6
src/app/app.component.html
Unescape View File

@ -1,7 +1,11 @@
<body class="ms-5"> <body class="ms-5">
<br />
<app-menu></app-menu> <app-menu></app-menu>
<br />
<main> <main>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
<footer>
<p>&copy; 2024 MAZINGUE Matis & PRADIER Hugo (WEB 2)</p>
</footer>
</body> </body>

22
src/app/app.component.scss
Unescape View File

@ -0,0 +1,22 @@
body,
html {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
footer {
padding: 10px;
text-align: center;
}

31
src/app/home/home.component.html
Unescape View File

@ -1,7 +1,21 @@
<div> <div>
<h1>Projet Recipe</h1> <h1>Project Recipe</h1>
<br /> <br />
<h2>Commandes en cours</h2> <h2>Welcome to Recipe</h2>
<p>
We invite you to browse our application using the drop-down menu in the top
left-hand corner.
</p>
<p [ngStyle]="{ color: isLoggedIn ? 'green' : 'red' }">
You are
{{
isLoggedIn
? "connected and have access to the list of ingredients"
: "disconnected and therefore do not have access to the list of ingredients. Log in by clicking on login in the drop-down menu"
}}.
</p>
<br />
<h3>Orders in progress</h3>
<ul> <ul>
<li <li
*ngFor="let recipe of currentOrders; let i = index" *ngFor="let recipe of currentOrders; let i = index"
@ -11,17 +25,4 @@
{{ i + 1 }}. {{ recipe.name }} {{ i + 1 }}. {{ recipe.name }}
</li> </li>
</ul> </ul>
<h3>Bienvenue sur Recipe</h3>
<p>
Nous vous invitons à naviguer sur notre application en utilisant le menu
déroulant en haut à droite.
</p>
<p [ngStyle]="{ color: isLoggedIn ? 'green' : 'red' }">
Vous êtes
{{
isLoggedIn
? "connecté"
: "déconnecté et n'avez donc pas accès à la liste des ingredients"
}}.
</p>
</div> </div>

1
src/app/ingredient-add/ingredient-add.component.html
Unescape View File

@ -20,6 +20,7 @@
<mat-label>Name</mat-label> <mat-label>Name</mat-label>
<input matInput [(ngModel)]="name" name="name" required /> <input matInput [(ngModel)]="name" name="name" required />
</mat-form-field> </mat-form-field>
<br />
<button mat-raised-button color="primary" type="submit"> <button mat-raised-button color="primary" type="submit">
Add Ingredient Add Ingredient
</button> </button>

17
src/app/ingredient-add/ingredient-add.component.ts
Unescape View File

@ -6,21 +6,32 @@ import { HttpClientModule } from '@angular/common/http';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
@Component({ @Component({
selector: 'app-ingredient-add', selector: 'app-ingredient-add',
standalone: true, standalone: true,
imports: [HttpClientModule, MatFormFieldModule, MatButtonModule, MatSelectModule, FormsModule], imports: [
HttpClientModule,
MatFormFieldModule,
MatButtonModule,
MatSelectModule,
FormsModule,
MatInputModule,
],
templateUrl: './ingredient-add.component.html', templateUrl: './ingredient-add.component.html',
styleUrl: './ingredient-add.component.scss' styleUrl: './ingredient-add.component.scss',
}) })
export class IngredientAddComponent { export class IngredientAddComponent {
// version api // version api
// ingredient: Ingredient = new Ingredient(0, ''); // ingredient: Ingredient = new Ingredient(0, '');
name: string = ''; name: string = '';
constructor(private ingredientService: IngredientService, private router: Router) {} constructor(
private ingredientService: IngredientService,
private router: Router
) {}
addIngredient(): void { addIngredient(): void {
if (this.name.trim()) { if (this.name.trim()) {

1
src/app/ingredient-edit/ingredient-edit.component.html
Unescape View File

@ -5,6 +5,7 @@
<mat-label>Name</mat-label> <mat-label>Name</mat-label>
<input matInput [(ngModel)]="ingredient.name" name="name" required /> <input matInput [(ngModel)]="ingredient.name" name="name" required />
</mat-form-field> </mat-form-field>
<br />
<button mat-raised-button color="primary" type="submit">Save</button> <button mat-raised-button color="primary" type="submit">Save</button>
</form> </form>
</div> </div>

9
src/app/ingredient-edit/ingredient-edit.component.ts
Unescape View File

@ -7,11 +7,18 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { MatInputModule } from '@angular/material/input';
@Component({ @Component({
selector: 'app-ingredient-edit', selector: 'app-ingredient-edit',
standalone: true, standalone: true,
imports: [CommonModule, MatFormFieldModule, MatButtonModule, FormsModule], imports: [
CommonModule,
MatFormFieldModule,
MatButtonModule,
FormsModule,
MatInputModule,
],
templateUrl: './ingredient-edit.component.html', templateUrl: './ingredient-edit.component.html',
styleUrls: ['./ingredient-edit.component.scss'], styleUrls: ['./ingredient-edit.component.scss'],
}) })

5
src/app/ingredient-list/ingredient-list.component.ts
Unescape View File

@ -22,7 +22,10 @@ export class IngredientListComponent implements OnInit {
@ViewChild(MatPaginator) paginator!: MatPaginator; @ViewChild(MatPaginator) paginator!: MatPaginator;
constructor(private ingredientService: IngredientService, private router: Router) {} constructor(
private ingredientService: IngredientService,
private router: Router
) {}
ngOnInit(): void { ngOnInit(): void {
this.ingredients = this.ingredientService.getIngredients(); this.ingredients = this.ingredientService.getIngredients();

98
src/app/recipe-add/recipe-add.component.html
Unescape View File

@ -1,39 +1,75 @@
<form (ngSubmit)="onSubmit(); recipeForm.ngSubmit.emit()" #recipeForm="ngForm" class="ng-submitted"> <form
(ngSubmit)="onSubmit(); recipeForm.ngSubmit.emit()"
#recipeForm="ngForm"
class="ng-submitted"
>
<h2>Add a recipe</h2>
<div class="form-group my-2 col-md-4"> <div class="form-group my-2 col-md-4">
<label for="name">Name</label> <label for="name">Name</label>
<input class="form-control" <input
class="form-control"
placeholder="Name" placeholder="Name"
type="text" type="text"
id="name" id="name"
[(ngModel)]="recipe.name" [(ngModel)]="recipe.name"
name="name" name="name"
required required
#nameField="ngModel"> #nameField="ngModel"
<div *ngIf="nameField.invalid && (nameField.dirty || nameField.touched || recipeForm.submitted)" class="text-danger"> />
<div *ngIf="nameField.errors && nameField.errors['required']">Name is required.</div> <div
*ngIf="
nameField.invalid &&
(nameField.dirty || nameField.touched || recipeForm.submitted)
"
class="text-danger"
>
<div *ngIf="nameField.errors && nameField.errors['required']">
Name is required.
</div>
</div> </div>
</div> </div>
<div class="form-group my-2 col-md-4"> <div class="form-group my-2 col-md-4">
<label for="description">Description</label> <label for="description">Description</label>
<textarea class="form-control" <textarea
class="form-control"
id="description" id="description"
[(ngModel)]="recipe.description" [(ngModel)]="recipe.description"
name="description" name="description"
required required
rows="2" rows="2"
maxlength="{{ maxDescriptionLength }}" maxlength="{{ maxDescriptionLength }}"
#descriptionField="ngModel"></textarea> #descriptionField="ngModel"
<div class="text-muted text-end">Characters left: {{ maxDescriptionLength - recipe.description.length }}</div> ></textarea>
<div *ngIf="descriptionField.invalid && (descriptionField.dirty || descriptionField.touched || recipeForm.submitted)" class="text-danger"> <div class="text-muted text-end">
<div *ngIf="descriptionField.errors && descriptionField.errors['required']">Description is required.</div> Characters left: {{ maxDescriptionLength - recipe.description.length }}
</div>
<div
*ngIf="
descriptionField.invalid &&
(descriptionField.dirty ||
descriptionField.touched ||
recipeForm.submitted)
"
class="text-danger"
>
<div
*ngIf="descriptionField.errors && descriptionField.errors['required']"
>
Description is required.
</div>
</div> </div>
</div> </div>
<div class="form-group my-3"> <div class="form-group my-3">
<div class="custom-file"> <div class="custom-file">
<label for="image">Image</label> <label for="image">Image</label>
<input type="file" class="custom-file-input ms-1" id="image" (change)="onFileChange($event)"> <input
type="file"
class="custom-file-input ms-1"
id="image"
(change)="onFileChange($event)"
/>
<div *ngIf="imageError" style="color: red">{{ imageError }}</div> <div *ngIf="imageError" style="color: red">{{ imageError }}</div>
</div> </div>
</div> </div>
@ -41,13 +77,23 @@
<mat-form-field class="my-3 me-3"> <mat-form-field class="my-3 me-3">
<mat-label>Ingredients</mat-label> <mat-label>Ingredients</mat-label>
<mat-select [(ngModel)]="selectedIngredient" name="selectedIngredient"> <mat-select [(ngModel)]="selectedIngredient" name="selectedIngredient">
<mat-option *ngFor="let ingredient of ingredients" [value]="ingredient.id"> <mat-option
*ngFor="let ingredient of ingredients"
[value]="ingredient.id"
>
{{ ingredient.name }} {{ ingredient.name }}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<button class="me-3" mat-raised-button type="button" (click)="addIngredient()">Add Ingredient</button> <button
class="me-3"
mat-raised-button
type="button"
(click)="addIngredient()"
>
Add Ingredient
</button>
<div class="mb-3" *ngFor="let ingredientId of getIngredientKeys()"> <div class="mb-3" *ngFor="let ingredientId of getIngredientKeys()">
<div> <div>
{{ findIngredientName(ingredientId) }} {{ findIngredientName(ingredientId) }}
@ -55,15 +101,31 @@
type="number" type="number"
[(ngModel)]="ingredientQuantities[ingredientId]" [(ngModel)]="ingredientQuantities[ingredientId]"
name="quantity_{{ ingredientId }}" name="quantity_{{ ingredientId }}"
min="1" /> min="1"
<button mat-raised-button color="warn" type="button" (click)="removeIngredient(ingredientId)">Remove</button> />
<button
mat-raised-button
color="warn"
type="button"
(click)="removeIngredient(ingredientId)"
>
Remove
</button>
</div> </div>
</div> </div>
<div *ngIf="getIngredientKeys().length === 0 && recipeForm.submitted" class="text-danger"> <div
*ngIf="getIngredientKeys().length === 0 && recipeForm.submitted"
class="text-danger"
>
At least one ingredient is required. At least one ingredient is required.
</div> </div>
<br />
<button mat-raised-button type="submit" [disabled]="!recipeForm.form.valid || getIngredientKeys().length === 0" [ngClass]="{'disabled-button': getIngredientKeys().length === 0}"> <button
mat-raised-button
type="submit"
[disabled]="!recipeForm.form.valid || getIngredientKeys().length === 0"
[ngClass]="{ 'disabled-button': getIngredientKeys().length === 0 }"
>
Add Recipe Add Recipe
</button> </button>
</form> </form>

1
src/app/recipe-edit/recipe-edit.component.html
Unescape View File

@ -1,4 +1,5 @@
<form (ngSubmit)="onSubmit()" #recipeForm="ngForm" class="ng-submitted"> <form (ngSubmit)="onSubmit()" #recipeForm="ngForm" class="ng-submitted">
<h2>Edit a recipe</h2>
<div class="form-group my-2 col-md-4"> <div class="form-group my-2 col-md-4">
<label for="name">Name</label> <label for="name">Name</label>
<input <input

1
src/app/recipe/recipe.component.html
Unescape View File

@ -1,4 +1,5 @@
<div *ngIf="recipe"> <div *ngIf="recipe">
<h2>Detail</h2>
<mat-card class="example-card" appearance="outlined"> <mat-card class="example-card" appearance="outlined">
<mat-card-header> <mat-card-header>
<mat-card-title-group> <mat-card-title-group>

Write Preview
Loading…
Cancel
Save