menus de la semaine terminé

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, LOCALE_ID } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -39,6 +39,9 @@ import { FooterComponent } from './components/footer/footer.component';
 import { PageDeleteAccountComponent } from './pages/page-delete-account/page-delete-account.component';
 import { PageUpdateAccountComponent } from './pages/page-update-account/page-update-account.component';
 import { DayPilot, DayPilotModule } from "@daypilot/daypilot-lite-angular";
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+registerLocaleData(localeFr)
 
 @NgModule({
   declarations: [
@@ -77,6 +80,7 @@ import { DayPilot, DayPilotModule } from "@daypilot/daypilot-lite-angular";
     FooterComponent,
     PageDeleteAccountComponent,
     PageUpdateAccountComponent,
+
   ],
   imports: [
     BrowserModule,
@@ -85,9 +89,10 @@ import { DayPilot, DayPilotModule } from "@daypilot/daypilot-lite-angular";
     HttpClientModule,
     FormsModule,
     AutofocusFixModule.forRoot(),
-    DayPilotModule
+    DayPilotModule,
   ],
   providers: [
+{provide: LOCALE_ID, useValue: "fr-FR" }
 
   ],
   bootstrap: [AppComponent],

src/app/components/card-menu/card-menu.component.html

@@ -1,9 +1,75 @@
-<div *ngFor="let menu of listMenus">
+<ng-template #content let-modal>
-  <div class="menu card mb-4" style="width: 14rem">
+  <div class="modal-header">
-    <p>{{ menu.dateMenu | date: "EEEE, d":"fr" }}</p>
+    <h4 class="modal-title" id="modal-basic-title">Ajouter un menu</h4>
-    <p>{{ menu.repas }}</p>
+    <button
-    <p>{{ menu.libelle }}</p>
+      type="button"
+      class="close"
+      aria-label="Close"
+      (click)="modal.dismiss('Cross click')"
+    >
+      <span aria-hidden="true"> × </span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <form [formGroup]="menuForm">
+      <div class="form-group">
+        <div class="input-group">
+          <input
+            type="date"
+            id="dateMenu"
+            class="form-control"
+            formControlName="dateMenuFc"
+            placeholder="Date"
+            name="date"
+          />
 
+          <input
+            id="repasMidi"
+            class="form-control"
+            formControlName="repasMidiFc"
+            placeholder="Repas du midi"
+            name="repasMidi"
+          />
+
+          <input
+            id="repasSoir"
+            class="form-control"
+            formControlName="repasSoirFc"
+            placeholder="Repas du soir"
+            name="repasSoir"
+          />
+        </div>
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-outline-dark"
+      (click)="modal.close(saveMenu())"
+    >
+      Enregistrer
+    </button>
+  </div>
+</ng-template>
+
+<button type="button" class="btn btn-outline-warning" (click)="open(content)">
+  Ajouter un menu
+</button>
+
+<div class="container mt-5 menu">
+  <div class="row d-flex justify-content-center">
+    <div class="col-md-auto" *ngFor="let menu of listMenus">
+      <div class="card p-3 py-4 align-items" style="width: 14rem">
+        <p class="jour">{{ menu.dateMenu | date: "EEEE":"fr" }}</p>
+        <div class="tag">
+          <p class="repas">Midi</p>
+          <p>{{ menu.repasMidi }}</p>
+        </div>
+        <div class="tag">
+          <p class="repas">Soir</p>
+          <p>{{ menu.repasSoir }}</p>
+        </div>
         <ng-template #content let-modal>
           <div class="modal-header">
             <h4 class="modal-title" id="modal-basic-title">
@@ -21,31 +87,31 @@
           <div class="modal-body">
             <form [formGroup]="upMenuForm">
               <div class="form-group">
-            <label for="dateMenu"> Date </label>
                 <div class="input-group">
                   <input
+                    type="date"
                     id="dateMenu"
                     class="form-control"
                     formControlName="dateMenuFc"
                     value="{{ menu.dateMenu }}"
-                placeholder=""
+                    placeholder="Date"
                     name="date"
                   />
                   <input
-                id="libelle"
+                    id="repasMidi"
                     class="form-control"
-                formControlName="libelleFc"
+                    formControlName="repasMidiFc"
-                value="{{ menu.libelle }}"
+                    value="{{ menu.repasMidi }}"
-                placeholder=""
+                    placeholder="Repas du midi"
-                name="libelle"
+                    name="repasMidi"
                   />
                   <input
-                id="repas"
+                    id="repasSoir"
                     class="form-control"
-                formControlName="repasFc"
+                    formControlName="repasSoirFc"
-                value="{{ menu.repas }}"
+                    value="{{ menu.repasSoir }}"
-                placeholder=""
+                    placeholder="Repas du soir"
-                name="repas"
+                    name="repasSoir"
                   />
                 </div>
               </div>
@@ -61,64 +127,9 @@
             </button>
           </div>
         </ng-template>
-
         <i class="bi bi-pencil-square" (click)="open(content)"></i>
         <i class="bi bi-trash3" (click)="deleteMenu(menu.id)"></i>
       </div>
     </div>
-<ng-template #content let-modal>
-  <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">Ajouter un menu</h4>
-    <button
-      type="button"
-      class="close"
-      aria-label="Close"
-      (click)="modal.dismiss('Cross click')"
-    >
-      <span aria-hidden="true"> × </span>
-    </button>
-  </div>
-  <div class="modal-body">
-    <form [formGroup]="menuForm">
-      <div class="form-group">
-        <label for="dateMenu"> Date </label>
-        <div class="input-group">
-          <input
-            id="dateMenu"
-            class="form-control"
-            formControlName="dateMenuFc"
-            placeholder="aaaa-mm-jj"
-            name="date"
-          />
-          <input
-            id="libelle"
-            class="form-control"
-            formControlName="libelleFc"
-            placeholder="repas"
-            name="libelle"
-          />
-          <input
-            id="repas"
-            class="form-control"
-            formControlName="repasFc"
-            placeholder="soir ou midi"
-            name="repas"
-          />
   </div>
 </div>
-    </form>
-  </div>
-  <div class="modal-footer">
-    <button
-      type="button"
-      class="btn btn-outline-dark"
-      (click)="modal.close(saveMenu())"
-    >
-      Enregistrer
-    </button>
-  </div>
-</ng-template>
-
-<button type="button" class="btn btn-outline-dark" (click)="open(content)">
-  Ajouter un menu
-</button>

src/app/components/card-menu/card-menu.component.scss

@@ -1,3 +1,36 @@
-.menu {
+.card {
-  margin-left: 500px;
+  min-height: 22rem;
+  margin-left: 75px;
+  margin-bottom: 30px;
+  border: 1px solid #f7c02b;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 5px 5px 5px gray;
+}
+
+.tag {
+  margin-top: 20px;
+  background-color: #fad980;
+  margin-left: -8px;
+  width: 13rem;
+  border: 1px solid #fad980;
+  border-radius: 8px;
+}
+.bi {
+  margin-top: 10px;
+}
+
+.btn {
+  margin-top: 10px;
+  color: black;
+  box-shadow: 5px 5px 5px gray;
+}
+
+.jour {
+  font-weight: bolder;
+  font-size: 25px;
+}
+.repas {
+  font-weight: bold;
 }

src/app/components/card-menu/card-menu.component.ts

@@ -37,16 +37,6 @@ public upMenuForm : FormGroup;
     this.upMenuForm = this.initForm();
   }
 
-     //Méthode qui initialise les champs du formulaire avec les infos de la BDD
-  private initForm(menu?: Menu): FormGroup {
-    return this.fb.group({
-      dateMenu: [menu ? menu.dateMenu : ''],
-      libelle: [menu ? menu.libelle : ''],
-      repas: [menu ? menu.repas : ''],
-
-    });
-  }
-
   //delete d'un menu
   deleteMenu(id_menu : number): void {
   window.alert("Le menu a bien été supprimé!")
@@ -58,15 +48,17 @@ this.menusService.deleteMenu(id_menu)?.subscribe((resp) => {
 
 //updateMenu
 updateMenu(id_menu : number): void {
+
     const dateValue = this.menuForm.value['dateMenuFc'];
-    const libelleValue = this.menuForm.value['libelleFc'];
+    const repasMidiValue = this.menuForm.value['repasMidiFc'];
-    const repasValue = this.menuForm.value['repasFc'];
+    const repasSoirValue = this.menuForm.value['repasSoirFc'];
+
 
     const menu: Menu = {
       dateMenu: dateValue,
-      libelle: libelleValue,
+      repasMidi: repasMidiValue,
-      repas: repasValue,
+      repasSoir: repasSoirValue,
-      id: id_menu
+      id: 0
     };
 
     console.log(id_menu);
@@ -77,22 +69,33 @@ updateMenu(id_menu : number): void {
       });
   }
 
+  //Méthode qui initialise les champs du formulaire avec les infos de la BDD
+  private initForm(menu?: Menu): FormGroup {
+    return this.fb.group({
+      dateMenu: [menu ? menu.dateMenu : ''],
+      libelle: [menu ? menu.repasMidi : ''],
+      repas: [menu ? menu.repasSoir : ''],
+
+    });
+  }
+
 
 //ajout d'un menu
 saveMenu(): void {
 
     const dateValue = this.menuForm.value['dateMenuFc'];
-    const libelleValue = this.menuForm.value['libelleFc'];
+    const repasMidiValue = this.menuForm.value['repasMidiFc'];
-    const repasValue = this.menuForm.value['repasFc'];
+    const repasSoirValue = this.menuForm.value['repasSoirFc'];
+
 
     const menu: Menu = {
       dateMenu: dateValue,
-      libelle: libelleValue,
+      repasMidi: repasMidiValue,
-      repas: repasValue,
+      repasSoir: repasSoirValue,
       id: 0
     };
 
-   if (menu.dateMenu !=='' && menu.libelle !== '') {
+  if (menu.dateMenu !=='') {
 
     console.log(menu.dateMenu);
       this.menusService.addMenu(menu)?.subscribe((resp) => {
@@ -110,8 +113,10 @@ saveMenu(): void {
 this.menusService.getMenu()?.subscribe((listMenus: any[])=>{
   console.log(listMenus);
   this.listMenus=listMenus;
+
 });
 
+
   this.menuForm = this.fb.group(
   {
     dateMenuFc: new FormControl('',[Validators.required]),

src/app/models/menu.ts

@@ -2,8 +2,8 @@ import { Membre } from './membre';
 import { Team } from './team';
 
 export interface Menu {
-  libelle: string;
   dateMenu: string;
-  repas: string;
+  repasMidi: string;
+  repasSoir: string;
   id: number;
 }

src/app/pages/page-menu-semaine/page-menu-semaine.component.html

@@ -1,29 +1,12 @@
 <app-header></app-header>
 <div class="row">
   <div class="col-md-auto">
-    <app-side-bar></app-side-bar>
+    <app-side-bar class="sidebarMenu"></app-side-bar>
   </div>
-  <div class=" col compte text-center">
+  <div class="col menu text-center">
-    <h1>Menu de la semaine</h1>
+    <h2>Menu de la semaine</h2>
-    <main class="contenu-compte">
+    <main class="contenu-menu">
       <app-card-menu></app-card-menu>
-      <div class="d-flex justify-content-center">
-
-      </div>
-      <div class="d-flex justify-content-center">
-
-      </div>
-      <div class="d-flex justify-content-center">
-
-      </div>
-      <div class="d-flex justify-content-center">
-
-      </div>
-      <div class="d-flex justify-content-center">
-
-      </div>
-      <div class="d-flex justify-content-center">
-
-      </div>
     </main>
   </div>
+</div>

src/app/pages/page-menu-semaine/page-menu-semaine.component.scss

@@ -0,0 +1 @@
+

src/app/services/token.service.ts

@@ -24,7 +24,7 @@ tokenKey = environment.tokenKey;
     const token = this.getToken();
     if(token) {
       const decodedToken = jwt_decode<any>(token);
-      const userId = decodedToken.sub;
+      const userId = decodedToken.userId;
       return userId;
     } else {
       return null;

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'http://localhost:8080',
+  apiUrl: 'http://localhost:8088',
   tokenKey: 'TOKEN-ORGANIZEE',
 };