Adding routing

.idea/workspace.xml

@@ -1,32 +1,70 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
   <component name="ChangeListManager">
-    <list default="true" id="e26b532a-2e1d-44b6-8438-5d55a88b6611" name="Changes" comment="" />
+    <list default="true" id="c5a06892-a370-4c6a-a9cf-5d61f93a285b" name="Changes" comment="Adding Front">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/.gitignore" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/accueil/accueil.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-list/recipe-list.component.ts" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="TypeScript File" />
+      </list>
+    </option>
+  </component>
   <component name="Git.Settings">
+    <option name="RECENT_BRANCH_BY_REPOSITORY">
+      <map>
+        <entry key="$PROJECT_DIR$" value="front" />
+      </map>
+    </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
-  <component name="ProjectColorInfo"><![CDATA[{
+  <component name="ProjectColorInfo">{
-  "associatedIndex": 2
+  &quot;associatedIndex&quot;: 7
-}]]></component>
+}</component>
-  <component name="ProjectId" id="2i0RBJa4QzAvGYd8vYvrfEV0WHe" />
+  <component name="ProjectId" id="2hxUMd4IvFZ2RBuUoixQsBySsiP" />
+  <component name="ProjectLevelVcsManager">
+    <ConfirmationsSetting value="2" id="Add" />
+  </component>
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
+  <component name="PropertiesComponent">{
-  "keyToString": {
+  &quot;keyToString&quot;: {
-    "RunOnceActivity.ShowReadmeOnStart": "true",
+    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
-    "git-widget-placeholder": "master",
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    "last_opened_file_path": "/home/Koroh/Repos/Daidokoro/daidokoro",
+    &quot;git-widget-placeholder&quot;: &quot;master&quot;,
-    "nodejs_package_manager_path": "npm",
+    &quot;last_opened_file_path&quot;: &quot;/home/dorian/Documents/but3/Angular/Daidokoro&quot;,
-    "vue.rearranger.settings.migration": "true"
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.lookFeel&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/home/dorian/Documents/but3/Angular/Daidokoro/daidokoro/node_modules/typescript/lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/daidokoro/public" />
+      <recent name="$PROJECT_DIR$/daidokoro/src/app" />
+    </key>
+  </component>
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
@@ -37,13 +75,47 @@
   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
   <component name="TaskManager">
     <task active="true" id="Default" summary="Default task">
-      <changelist id="e26b532a-2e1d-44b6-8438-5d55a88b6611" name="Changes" comment="" />
+      <changelist id="c5a06892-a370-4c6a-a9cf-5d61f93a285b" name="Changes" comment="" />
-      <created>1718625373590</created>
+      <created>1718535175328</created>
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
-      <updated>1718625373590</updated>
+      <updated>1718535175328</updated>
-      <workItem from="1718625376418" duration="43000" />
+      <workItem from="1718535176543" duration="94000" />
+      <workItem from="1718535276928" duration="51000" />
+      <workItem from="1718535331746" duration="130000" />
+      <workItem from="1718624272278" duration="96000" />
+      <workItem from="1718625479373" duration="4985000" />
+      <workItem from="1719217543390" duration="31000" />
+      <workItem from="1719217580949" duration="135000" />
     </task>
+    <task id="LOCAL-00001" summary="Adding Front">
+      <option name="closed" value="true" />
+      <created>1718630357884</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1718630357884</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
     <servers />
   </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
+  <component name="VcsManagerConfiguration">
+    <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
+    <MESSAGE value="Adding Front" />
+    <option name="LAST_COMMIT_MESSAGE" value="Adding Front" />
+  </component>
 </project>

daidokoro/.gitignore

@@ -1,5 +1,5 @@
 # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
-
+.idea/workspace.xml
 # Compiled output
 /dist
 /tmp

daidokoro/src/app/app.routes.ts

@@ -1,3 +1,6 @@
 import { Routes } from '@angular/router';
+import {LoginComponent} from "./component/login/login.component";
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {path: 'login',component:LoginComponent}
+];

daidokoro/src/app/component/accueil/accueil.component.html

@@ -31,33 +31,55 @@
       display: flex;
       gap: 20px;
     }
-    .recipe-container {
+    .recipe-container, .form-container {
       background-color: #bab6b6;
       color: black;
       padding: 20px;
-      margin-top: 0;
+      flex: 1;
+    }
+    .recipe-container {
+      display: flex;
+      flex-direction: column;
     }
     .recipe-container h2 {
       font-size: 3em;
       margin-bottom: 10px;
     }
+    .form-container {
+      display: none;
+      flex-direction: column;
+    }
+    .show-form .form-container {
+      display: flex;
+    }
+    .show-form .recipe-container, .show-form .form-container {
+      flex: 1;
+    }
+    .button-container {
+      margin-top: 20px;
+    }
   </style>
 </head>
 <body>
-
 <div class="navbar">
-  <a href="#home">Accueil</a>
+  <div *ngFor="let link of links">
-  <a href="#recipes">Recettes</a>
+    <a routerLink="/{{link.$link}}" routerLinkActive="active" ariaCurrentWhenActive="page">{{link.$name}}</a>
-  <a href="#about">À Propos</a>
+  </div>
-  <a href="#contact">Contact</a>
+<!--  <a href="#home">Accueil</a>-->
+<!--  <a href="#recipes">Recettes</a>-->
+<!--  <a href="#about">À Propos</a>-->
+<!--  <a href="#contact">Contact</a>-->
 </div>
 
-<div class="content">
+<div class="content" [class.show-form]="isFormVisible">
   <div class="recipe-container">
     <h2>Liste Recettes</h2>
-    <app-recipe-list></app-recipe-list>
+    <div class="button-container">
+      <button (click)="toggleForm()">Ajouter une recette</button>
+    </div>
+    <app-recipe-list [isFormVisible]="isFormVisible"></app-recipe-list>
   </div>
-  <div>
+  <div class="form-container" *ngIf="isFormVisible">
     <app-recipe-form (formSubmitted)="onRecipeSubmitted($event)"></app-recipe-form>
   </div>
 </div>

daidokoro/src/app/component/accueil/accueil.component.ts

@@ -3,20 +3,45 @@ import {RecipeListComponent} from "../recipe-list/recipe-list.component";
 import {RecipeFormComponent} from "../recipe-form/recipe-form.component";
 import {Recipe} from "../../model/recipe.model";
 import {RecipeService} from "../../service/recipe.service";
+import {NgForOf, NgIf} from "@angular/common";
+import {LinkService} from "../../service/link.service";
+import {Link} from "../../model/link.model";
+import {LoginService} from "../../service/login.service";
+import {RouterLink, RouterLinkActive,RouterOutlet} from "@angular/router";
+
 @Component({
   selector: 'app-accueil',
   standalone: true,
   imports: [
     RecipeListComponent,
-    RecipeFormComponent
+    RecipeFormComponent,
+    NgIf,
+    NgForOf,
+    RouterLink,
+    RouterOutlet,
+    RouterLinkActive
   ],
   templateUrl: './accueil.component.html'
 })
 export class AccueilComponent {
+  isFormVisible: boolean = false;
+  links: Link[] = this.linkService.getLinks()
+
+
+  constructor(private recipeService: RecipeService,private linkService: LinkService,private loginService: LoginService) {
+    if(this.loginService.isLogged()){
+      this.links.push({$name: '/logout',$link: '/logout'});
+    }else{
+      this.links.push({$name: '/login',$link: '/login'});
+    }
+  }
 
-  constructor(private recipeService: RecipeService){}
 
   onRecipeSubmitted(recipe : Recipe){
     this.recipeService.addRecipe(recipe);
   }
+
+  toggleForm() {
+    this.isFormVisible = !this.isFormVisible;
+  }
 }

daidokoro/src/app/component/recipe-list/recipe-list.component.html

@@ -1,5 +1,4 @@
-
+<style>
-  <style>
   body {
     font-family: Arial, sans-serif;
     background-color: #bab6b6;
@@ -9,13 +8,16 @@
     flex-wrap: wrap;
     justify-content: center;
   }
+  .recipe-container {
+    display: grid;
+    gap: 20px;
+    width: 100%;
+  }
   .recipe-card {
     background-color: #fff;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      margin: 10px;
     overflow: hidden;
-      width: calc(33.33% - 20px);
     transition: transform 0.2s;
   }
   .recipe-card:hover {
@@ -50,28 +52,44 @@
   .details-button:hover {
     background-color: #525259;
   }
-    @media (max-width: 768px) {
+  .four-column {
-      .recipe-card {
+    grid-template-columns: repeat(4, 1fr);
-        width: calc(50% - 20px);
   }
+  .two-column {
+    grid-template-columns: repeat(2, 1fr);
   }
-    @media (max-width: 480px) {
+  .pagination {
-      .recipe-card {
+    display: flex;
-        width: calc(100% - 20px);
+    justify-content: center;
-        margin: 10px 0;
+    margin-top: 20px;
   }
+  .page-link {
+    padding: 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    background-color: #ddd;
+    border: 1px solid #bbb;
+    border-radius: 5px;
+  }
+  .page-link.active {
+    background-color: #333;
+    color: white;
   }
-
+</style>
-  </style>
+<body>
-<body *ngFor="let recipe of recipes">
+<div [ngClass]="{'four-column': !isFormVisible, 'two-column': isFormVisible}" class="recipe-container">
-
+  <div class="recipe-card" *ngFor="let recipe of paginatedRecipes">
-<div class="recipe-card">
     <img src="image1.jpg" alt="Recette 1" class="recipe-image" onerror="this.onerror=null;this.src='https://placehold.co/100x100/black/white?text=Not+Found';">
     <div class="recipe-content">
       <h2 class="recipe-title">{{recipe.$name}}</h2>
       <p class="recipe-description">{{recipe.$description}}</p>
-    <button class="details-button" onclick="toggleDetails(this)">Détails</button>
+      <button class="details-button">Détails</button>
+    </div>
   </div>
 </div>
-
+<div class="pagination">
+  <button class="page-link" (click)="previousPage()" [disabled]="currentPage === 0">Précédent</button>
+  <span class="page-link" *ngFor="let page of totalPages; let i = index" [class.active]="currentPage === i" (click)="changePage(i)">{{ i + 1 }}</span>
+  <button class="page-link" (click)="nextPage()" [disabled]="currentPage === totalPages - 1">Suivant</button>
+</div>
 </body>

daidokoro/src/app/component/recipe-list/recipe-list.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import { RecipeService } from '../../service/recipe.service';
 import { Recipe } from '../../model/recipe.model';
-import {NgOptimizedImage} from "@angular/common";
+import {NgClass, NgOptimizedImage} from "@angular/common";
 import {NgFor} from "@angular/common";
 
 @Component({
@@ -9,16 +9,44 @@ import {NgFor} from "@angular/common";
   templateUrl: './recipe-list.component.html',
   imports: [
     NgOptimizedImage,
-    NgFor
+    NgFor,
+    NgClass
   ],
   standalone: true
 })
 export class RecipeListComponent implements OnInit {
   recipes: Recipe[] = [];
+  @Input() isFormVisible!: boolean;
+
+  currentPage: number = 0;
+  pageSize: number = 4;
+  totalPages: any = 0;
 
   constructor(private recipeService: RecipeService) {}
 
   ngOnInit(): void {
     this.recipes = this.recipeService.getRecipes();
+    this.totalPages = Math.ceil(this.recipes.length / this.pageSize);
+  }
+
+  get paginatedRecipes(): any[] {
+    const startIndex = this.currentPage * this.pageSize;
+    return this.recipes.slice(startIndex, startIndex + this.pageSize);
+  }
+
+  changePage(index: number): void {
+    this.currentPage = index;
+  }
+
+  previousPage(): void {
+    if (this.currentPage > 0) {
+      this.currentPage--;
+    }
+  }
+
+  nextPage(): void {
+    if (this.currentPage < this.totalPages - 1) {
+      this.currentPage++;
+    }
   }
 }

daidokoro/src/app/data/link.stub.ts

@@ -1,6 +1,5 @@
 import {Link} from "../model/link.model";
 
 export var LINKS :Link[] = [
-  {$name:"Lien1",$link:"Lien1"},
+  {$name:"/Accueil",$link:""}
-  {$name:"Lien2",$link:'Lien2'}
   ]