début affichage des utilisateurs

package-lock.json

@@ -19,6 +19,7 @@
         "@capacitor/angular": "^2.0.3",
         "@capacitor/core": "latest",
         "@capacitor/ios": "^8.3.0",
+        "@capacitor/push-notifications": "^8.0.4",
         "@ionic/angular": "^8.8.3",
         "@openapitools/openapi-generator-cli": "^2.32.0",
         "rxjs": "~7.8.0",
@@ -2520,6 +2521,15 @@
         "@capacitor/core": "^8.3.0"
       }
     },
+    "node_modules/@capacitor/push-notifications": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/push-notifications/-/push-notifications-8.0.4.tgz",
+      "integrity": "sha512-14ZWKik9ExTu65AZ9+o7+k05uEOaTstuYv6lLq1Bobip+SC5AOwciSICYLALgTTKN2jEDTRoigFAEixmVEJp/w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.6.3.tgz",

package.json

@@ -21,6 +21,7 @@
     "@capacitor/angular": "^2.0.3",
     "@capacitor/core": "latest",
     "@capacitor/ios": "^8.3.0",
+    "@capacitor/push-notifications": "^8.0.4",
     "@ionic/angular": "^8.8.3",
     "@openapitools/openapi-generator-cli": "^2.32.0",
     "rxjs": "~7.8.0",

src/app/pages/menu/menu-users/menu-users.component.html

@@ -0,0 +1,4 @@
+<button class="users-btn">
+    <img width="50" height="50" src="https://img.icons8.com/ios/50/user-male-circle--v1.png" alt="user"/>
+    <span class="username">INFO NOM : </span>
+</button>

src/app/pages/menu/menu-users/menu-users.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-users',
+  imports: [],
+  templateUrl: './menu-users.component.html',
+  styleUrl: './menu-users.component.css'
+})
+export class MenuUsersComponent {
+
+}

src/app/pages/menu/menu/menu.component.html

@@ -3,4 +3,11 @@
         <app-menu-nav/>
         <app-menu-param/>
     </div>
+
+    <div class="users">
+        <app-menu-users/>
+
+    </div>
+
+
 </div>

src/app/pages/menu/menu/menu.component.ts

@@ -1,16 +1,44 @@
-import { Component } from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {MenuNav} from "../menu-nav/menu-nav.component";
 import {MenuParamComponent} from "../menu-param/menu-param.component";
+import {MenuUsersComponent} from "../menu-users/menu-users.component";
+import {KnotsDTOUserGetUserDto, UsersService} from "../../../services/api";
+import {Router} from "@angular/router";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-menu',
     imports: [
         MenuNav,
-    MenuParamComponent
+        MenuParamComponent,
+        MenuUsersComponent
     ],
   templateUrl: './menu.component.html',
   styleUrl: './menu.component.css'
 })
 export class Menu {
+    private usersService = inject(UsersService);
+
+    router = inject(Router);
+
+    users = signal<KnotsDTOUserGetUserDto[]>([]);
+    usersLoading = signal<boolean>(false);
+
+    async ngOnInit() {
+
+    }
+
+    async fetchUsers() {
+        this.usersLoading.set(true);
+        try {
+            const users = await firstValueFrom(this.usersService.getAllUsersEndpoint());
+            this.users.set(users);
+
+        } catch (e) {
+            console.log('Erreur', 'Erreur de communication avec l\'API');
+        }
+
+        this.usersLoading.set(false);
+    }
 
 }

src/app/pages/parameters/parameters-coordinates/parameters-coordinates.component.css

@@ -6,7 +6,7 @@
     border: 1.5px solid rgba(201, 112, 112, 0.25);
     cursor: pointer;
     border-radius: 50px;
-    background: #fce8e8;
+    background: #fff8f8;
     box-shadow:
             0 8px 32px rgba(180, 80, 80, 0.12),
             0 2px 8px rgba(180, 80, 80, 0.08);
@@ -15,20 +15,22 @@
 }
 
 .coordinates-btn:hover {
-    background: #ffebeb;
+    background: #fff3f3;
     box-shadow: 0 6px 28px rgba(180, 80, 80, 0.18);
     transform: translateY(-1px);
 }
 
 .coordinates-btn:active {
-    transform: translateY(0);
+    transform: translateY(1px) scale(0.985);
+    background: #ffe8e8;
+    box-shadow: 0 2px 8px rgba(180, 80, 80, 0.10);
 }
 
 .coordinates-btn .icon-wrapper {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background-color: #f4cece;
+    background-color: #f8e2e2;
     display: flex;
     align-items: center;
     justify-content: center;