Merge branch 'dev' into Vincent

modif paul 4/03/20222

src/app/admin-component/update-del-restau/update-del-restau.component.ts

@@ -15,9 +15,7 @@ export class UpdateDelRestauComponent implements OnInit {
     this.restauList = [];
    }
 
-  ngOnInit(): void {
-
-  }
+  ngOnInit(): void {}
 
   
   saveRestauList(event : any){
@@ -28,10 +26,7 @@ export class UpdateDelRestauComponent implements OnInit {
   deleteRestau(idRestau : number | undefined){
     this.apiBackService.deleteRestau(idRestau).subscribe( 
       resp =>{
-
-      
       this.restauList = this.restauList.filter(restaus => restaus.id != idRestau)
-      
     });
   }
 

src/app/app.component.html

@@ -3,4 +3,4 @@
 <app-header-logo *ngIf="router.url != '/signin'"></app-header-logo>
 <app-nav-bar *ngIf="router.url != '/signin'"></app-nav-bar>
 <router-outlet></router-outlet>
-<app-footer *ngIf="router.url != '/signin'"></app-footer>
+<!-- <app-footer *ngIf="router.url != '/signin'"></app-footer> -->

src/app/header/components/nav-bar/nav-bar.component.html

@@ -9,8 +9,8 @@
           aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="collapse navbar-collapse justify-content-end" id="nav">
-          <div class="navbar-nav ">
+      <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
+          <div class="navbar-nav navbar-light">
               <a routerLink="home" routerLinkActive="active-custom" class="nav-link p-4 pe-5 " style="font-size: 21px;">Accueil</a>
               <a routerLink="categories" routerLinkActive="active-custom" class="nav-link p-4 pe-5" style="font-size: 21px;">Categories</a>
               <a routerLink="restaurants" routerLinkActive="active-custom" class="nav-link p-4 pe-5" style="font-size: 21px;">Restaurants</a>
@@ -23,7 +23,6 @@
     <div id="image-header">
       <img src="assets/images-header/bandeau2.png" alt="fond_header">
     </div>
-    
 </nav>
 
 

src/app/header/components/nav-bar/nav-bar.component.ts

@@ -9,15 +9,21 @@ import { environment } from 'src/environments/environment';
   styleUrls: ['./nav-bar.component.scss']
 })
 export class NavBarComponent implements OnInit {
-  tokenKey = environment.tokenKey;
 
-  constructor( private tokenService : TokenService,  public route: Router) { }
+  private tokenKey: string;
+
+
+  constructor( private tokenService : TokenService,  public route: Router) {
+
+    this.tokenKey = environment.tokenKey;
+   }
 
   ngOnInit(): void {
   }
 
   onCloseSession() : void {
-this.tokenService.destroyToken();
+
+this.tokenService.destroyToken(this.tokenKey);
 this.route.navigate(['signin']);
   }
 

src/app/pages/home-page/home-page.component.html

@@ -1,44 +1,45 @@
 <div class="body">
-    <h1 style = "text-align: center;">Hello {{userName}} !</h1> 
+    <h1 style = "text-align: center; font-family: 'Dancing Script', cursive; font-size: 7vh;">Hello {{userName}} !</h1> 
 
-        <div class="intro p-5 m-3">
-            <span>Bienvenue sur Simpl'eat, l'application indispensable pour un Simplonien comme toi !</span>
+        <div class="intro d-flex justify-content-center pt-4 m-3 "style = "font-size: 2.6vh; font-style:italic;">
+            <span class=" preface">Bienvenue sur Simpl'eat, l'application indispensable pour un Simplonien comme toi !</span>
         </div>
 
         <div class="separation"></div>
 
             <div class="premier_bloc">
-                <img src="assets/imagesAccueil/image_accueil_1.jpg" alt="Photo d'un magnifique repas miam ! ">
-                    <p>Cette application à été conçue dans le but de te permettre de visualiser les différents restaurants aux alentours de l’école SIMPLON située à MONTREUIL.
+                <img src="assets/imagesAccueil/image_accueil_1 1.png" alt="Photo d'un magnifique repas miam ! ">
+                
+                    <p class="uno">Cette application à été conçue dans le but de te permettre de visualiser les différents restaurants aux alentours de l’école SIMPLON située à MONTREUIL.
                     Tu pourras choisir choisir selon tes préférences un restaurant en particulier qui convient selon ton envie du jour.
                     Une boulangerie, un kebab, une pizzeria ou simplement un magnifique sandwich triangle dans ton cente commercial préféré !
                     C'est pas magnifique ça ?</p>
             </div>
-
-            <div class="separation"></div>
-
+            <div class="ligne-rouge">
+                <div class="separation2"></div>
+            </div>
             <div class="deuxieme_bloc">
-                <p>L'idée de cette application vient du fait qu'en tant que provincial, d'arriver dans une nouvelle ville, d'être presque perdu dans un environnement 
+                <p class="dos">L'idée de cette application vient du fait qu'en tant que provincial, d'arriver dans une nouvelle ville, d'être presque perdu dans un environnement 
                     qui nous ait inconnu, de ne pas savoir si il y a le meilleur kebab du coin dans les environs ?
                     Toutes ces pensées nous envahissent et nous ont amener à concevoir ceci pour vous !</p>
-                <img src="assets/imagesAccueil/image_accueil_2.jpg" alt="Photo d'un magnifique repas miam ! ">
+                <img src="assets/imagesAccueil/image_accueil_2 1.png" alt="Photo d'un magnifique repas miam ! ">
                 </div>
      
                 <div class="separation"></div>
 
             <div class="troisieme_bloc">
-                <img src="assets/imagesAccueil/image_accueil_3.jpeg" alt="Photo d'un magnifique repas miam ! ">
+                <img src="assets/imagesAccueil/image_accueil_3 1.png" alt="Photo d'un magnifique repas miam ! ">
                     
                     <ul>
-                        <p>Sur cette application, plusieurs fonctionnalités s'offre à toi.</p>
+                        <p class="tres">Sur cette application, plusieurs fonctionnalités s'offre à toi :</p>
                         <li>Acceder aux différents restaurants répertoriés sur l'application ! </li>
                         <li>Choisir la catégorie de restaurants qui donne le plus envie ! </li>
                         <li>Sélectionner et préserver en favoris les restaurants dont tu veux garder l'adresse ! </li>
                     </ul>
             </div>
 
-            <div id="bas_de_body">
-                A TOI DE JOUER ! 
+            <div class = "intro d-flex justify-content-center pt-5 "style = "text-align: center; font-family: 'Dancing Script';font-size: 7vh;">
+                A toi de jouer !
             </div>
 </div>
 

src/app/pages/home-page/home-page.component.scss

@@ -1,38 +1,165 @@
 .body{
    width: 100%;
-   padding: 15vh;
+   padding: 8vh 20vh;
+}
+
+h1{
+    font-size: 4vh;
+    padding-top: 3vh;
+}
+
+.preface{
+   text-align: center;
+   padding-bottom: 3vh;
 }
 
 .premier_bloc{
     display: flex;
+    align-items: center;
+   
 }
 
 .deuxieme_bloc{
     display: flex;
+    align-items: center;
+    
 }
 
 .troisieme_bloc{
     display: flex;
+    align-items: center;
 }
 
 img{
-    width: 600px;
-    height: 350px;
-    margin-top: 100px;
+   
+    
+    margin: 5vh 0 0 0;
+    border-radius: 10px;
+    width: 100%;
+    max-width: 500px;
+    height: auto;
+   
+    
 }
 
-p{
-    margin: 10px 50px 20px;
-    padding: 0 30px;
+.uno{
+   padding-top: 6vh;
+    padding-left: 6vh;
     text-align: justify;
-    padding-top: 220px;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
 }
 
+.dos{
+    padding-top: 6vh;
+    padding-right: 6vh;
+    text-align: justify;
+}
+
+.tres{
+    padding-top: 6vh;
+  font-size: 3.5vh;
+}
+
+
+
 .separation{
     display: flex;
     justify-content: flex-start;
     border-bottom: 2px solid #CE0000;
     max-width: 83%;
     padding : 20px;
+}
+
+.ligne-rouge{
+    display: flex;
+    justify-content: flex-end;
+    
+}
+
+.separation2{
+
+    border-bottom: 2px solid #CE0000;
+    max-width: 83%;
+    width: 100%;
+    padding : 20px;
+    
+}
+
+@media only screen and (max-width:1131px) {
+
+    .body{
+        display: flex;
+        justify-content: center;
+        margin: -1vh auto;
+        padding: 3vh;
+        flex-wrap: wrap; 
+    }
+
+    img{
+        width: 100%;
+        max-width: 500px;
+        height: auto;
+        padding-bottom: 5vh;
+        border-radius: 10px;
+        display: flex;
+        justify-content: center;
+    }
+    
+    .premier_bloc{
+        flex-wrap: wrap;
+    }
+    
+    .deuxieme_bloc{
+        flex-wrap: wrap;
+        flex-direction: column-reverse;
+    }
+    
+    .troisieme_bloc{
+        flex-wrap: wrap;
+    }
+
+    .uno{
+        padding-top: 0;
+        padding-left: 0;
+        padding-bottom: 2.5vh;
+        text-align: justify;
+     
+    }
+    
+    .dos{
+        padding-top: 0;
+        padding-right: 0;
+        padding-bottom: 2.5vh;
+        text-align: justify;
+    }
+    
+    .tres{
+        padding-top: 0;
+      font-size: 3.5vh;
+    }
+
+    .separation{
+        display: flex;
+        justify-content: center;
+        border-bottom: 1px solid #CE0000;
+        width: 100%;
+        padding: 0;
+        
+    }
+
+    .ligne-rouge{
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
+    
+    .separation2{
+        padding: 0;
+        border-bottom: 1px solid #CE0000;
+        max-width: 83%;
+    }
+
+    
+    
+    
+
 }

src/app/pages/models/user.ts

@@ -1,7 +1,7 @@
 export interface User {   
     id?:number;
     prenom: string;
-    lastName: string;
+    nom: string;
     email: string;
     password?: string;
     preference ?: object;

src/app/pages/signin/signin.component.html

@@ -1,7 +1,6 @@
 <div class="signin-form text-center">
   <main class="form-signin d-inline-flex">
       <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
-      <h5>Merci de vous connecter</h5>
       <img src="../../../assets/images-header/logo.png"><br>
       <br>Le bon plan pour manger<br>
           <div class="form-floating">

src/app/services/auth.guard.ts

@@ -31,7 +31,6 @@ export class AuthGuard implements CanActivate {
           const dateExp = new Date(decodedToken.exp * 1000);
           if(new Date() >= dateExp) {
             // le token a expiré, je n'autorise pas l'accès
-            this.tokenService.destroyToken();
             this.router.navigate(['signin']);
             return false;
           }

src/app/services/token.service.ts

@@ -33,7 +33,7 @@ export class TokenService {
   }
 
 
-  public destroyToken(): void { 
-    localStorage.removeItem(this.tokenKey);
+  public destroyToken(token : any) { 
+    localStorage.removeItem(token);
   }
 }

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: "http://localhost:8080",
+  apiUrl: "http://localhost:8081",
   tokenKey: "TOKEN-SIMPLEAT"
 };
 

src/index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
 </head>
 <body>