Changements visuels

5 months ago · 3965ae7186
parent 373e352576
commit 3965ae7186
11 changed files with 165 additions and 51 deletions
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -1,7 +1,11 @@
 <body class="ms-5">
+  <br />
  <app-menu></app-menu>
+  <br />
  <main>
    <router-outlet></router-outlet>
  </main>
+  <footer>
+    <p>&copy; 2024 MAZINGUE Matis & PRADIER Hugo (WEB 2)</p>
+  </footer>
 </body>
-
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@ -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;
+}
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@ -1,7 +1,21 @@
 <div>
-  <h1>Projet Recipe</h1>
+  <h1>Project Recipe</h1>
  <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>
    <li
      *ngFor="let recipe of currentOrders; let i = index"
@ -11,17 +25,4 @@
      {{ i + 1 }}. {{ recipe.name }}
    </li>
  </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>
--- a/src/app/ingredient-add/ingredient-add.component.html
+++ b/src/app/ingredient-add/ingredient-add.component.html
@ -20,6 +20,7 @@
      <mat-label>Name</mat-label>
      <input matInput [(ngModel)]="name" name="name" required />
    </mat-form-field>
+    <br />
    <button mat-raised-button color="primary" type="submit">
      Add Ingredient
    </button>
--- a/src/app/ingredient-add/ingredient-add.component.ts
+++ b/src/app/ingredient-add/ingredient-add.component.ts
@ -6,21 +6,32 @@ import { HttpClientModule } from '@angular/common/http';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-ingredient-add',
  standalone: true,
-  imports: [HttpClientModule, MatFormFieldModule, MatButtonModule, MatSelectModule, FormsModule],
+  imports: [
+    HttpClientModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    MatSelectModule,
+    FormsModule,
+    MatInputModule,
+  ],
  templateUrl: './ingredient-add.component.html',
-  styleUrl: './ingredient-add.component.scss'
+  styleUrl: './ingredient-add.component.scss',
 })
 export class IngredientAddComponent {
  // version api
  // ingredient: Ingredient = new Ingredient(0, '');
  name: string = '';

-  constructor(private ingredientService: IngredientService, private router: Router) {}
+  constructor(
+    private ingredientService: IngredientService,
+    private router: Router
+  ) {}

  addIngredient(): void {
    if (this.name.trim()) {
--- a/src/app/ingredient-edit/ingredient-edit.component.html
+++ b/src/app/ingredient-edit/ingredient-edit.component.html
@ -5,6 +5,7 @@
      <mat-label>Name</mat-label>
      <input matInput [(ngModel)]="ingredient.name" name="name" required />
    </mat-form-field>
+    <br />
    <button mat-raised-button color="primary" type="submit">Save</button>
  </form>
 </div>
--- a/src/app/ingredient-edit/ingredient-edit.component.ts
+++ b/src/app/ingredient-edit/ingredient-edit.component.ts
@ -7,11 +7,18 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-ingredient-edit',
  standalone: true,
-  imports: [CommonModule, MatFormFieldModule, MatButtonModule, FormsModule],
+  imports: [
+    CommonModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    FormsModule,
+    MatInputModule,
+  ],
  templateUrl: './ingredient-edit.component.html',
  styleUrls: ['./ingredient-edit.component.scss'],
 })
--- a/src/app/ingredient-list/ingredient-list.component.ts
+++ b/src/app/ingredient-list/ingredient-list.component.ts
@ -22,7 +22,10 @@ export class IngredientListComponent implements OnInit {

  @ViewChild(MatPaginator) paginator!: MatPaginator;

-  constructor(private ingredientService: IngredientService, private router: Router) {}
+  constructor(
+    private ingredientService: IngredientService,
+    private router: Router
+  ) {}

  ngOnInit(): void {
    this.ingredients = this.ingredientService.getIngredients();
--- a/src/app/recipe-add/recipe-add.component.html
+++ b/src/app/recipe-add/recipe-add.component.html
@ -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">
    <label for="name">Name</label>
-    <input class="form-control"
-           placeholder="Name"
-           type="text"
-           id="name"
-           [(ngModel)]="recipe.name"
-           name="name"
-           required
-           #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>
+    <input
+      class="form-control"
+      placeholder="Name"
+      type="text"
+      id="name"
+      [(ngModel)]="recipe.name"
+      name="name"
+      required
+      #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>
  </div>

  <div class="form-group my-2 col-md-4">
    <label for="description">Description</label>
-    <textarea class="form-control"
-              id="description"
-              [(ngModel)]="recipe.description"
-              name="description"
-              required
-              rows="2"
-              maxlength="{{ maxDescriptionLength }}"
-              #descriptionField="ngModel"></textarea>
-    <div class="text-muted text-end">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>
+    <textarea
+      class="form-control"
+      id="description"
+      [(ngModel)]="recipe.description"
+      name="description"
+      required
+      rows="2"
+      maxlength="{{ maxDescriptionLength }}"
+      #descriptionField="ngModel"
+    ></textarea>
+    <div class="text-muted text-end">
+      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 class="form-group my-3">
    <div class="custom-file">
      <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>
  </div>
@ -41,13 +77,23 @@
  <mat-form-field class="my-3 me-3">
    <mat-label>Ingredients</mat-label>
    <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 }}
      </mat-option>
    </mat-select>
  </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>
      {{ findIngredientName(ingredientId) }}
@ -55,15 +101,31 @@
        type="number"
        [(ngModel)]="ingredientQuantities[ingredientId]"
        name="quantity_{{ ingredientId }}"
-        min="1" />
-      <button mat-raised-button color="warn" type="button" (click)="removeIngredient(ingredientId)">Remove</button>
+        min="1"
+      />
+      <button
+        mat-raised-button
+        color="warn"
+        type="button"
+        (click)="removeIngredient(ingredientId)"
+      >
+        Remove
+      </button>
    </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.
  </div>
-
-  <button mat-raised-button type="submit" [disabled]="!recipeForm.form.valid || getIngredientKeys().length === 0" [ngClass]="{'disabled-button': getIngredientKeys().length === 0}">
+  <br />
+  <button
+    mat-raised-button
+    type="submit"
+    [disabled]="!recipeForm.form.valid || getIngredientKeys().length === 0"
+    [ngClass]="{ 'disabled-button': getIngredientKeys().length === 0 }"
+  >
    Add Recipe
  </button>
 </form>
--- a/src/app/recipe-edit/recipe-edit.component.html
+++ b/src/app/recipe-edit/recipe-edit.component.html
@ -1,4 +1,5 @@
 <form (ngSubmit)="onSubmit()" #recipeForm="ngForm" class="ng-submitted">
+  <h2>Edit a recipe</h2>
  <div class="form-group my-2 col-md-4">
    <label for="name">Name</label>
    <input
--- a/src/app/recipe/recipe.component.html
+++ b/src/app/recipe/recipe.component.html
@ -1,4 +1,5 @@
 <div *ngIf="recipe">
+  <h2>Detail</h2>
  <mat-card class="example-card" appearance="outlined">
    <mat-card-header>
      <mat-card-title-group>