edit and delete with error

src/app/component/management/management.component.html

@@ -16,7 +16,7 @@
     <td *ngIf="user.admin==true">Yes</td>
     <td>
       <div class="btn-container">
-        <button class="edit">
+        <button class="edit" (click)="openEditUserForm(user)">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6">
@@ -25,7 +25,7 @@
           </svg>
         </button>
 
-        <button class="delete">
+        <button class="delete" (click)="deleteUser(user.id)">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6">
@@ -83,7 +83,7 @@
     <td>{{ location.lon }}</td>
     <td>
       <div class="btn-container">
-        <button class="edit">
+        <button class="edit" (click)="editLocation(location)">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6">
@@ -92,7 +92,7 @@
           </svg>
         </button>
 
-        <button class="delete">
+        <button class="delete" (click)="deleteLocation(location.location)">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6">
@@ -164,7 +164,7 @@
     <td>{{ waypoint.locationName }}</td>
     <td>
       <div class="btn-container">
-        <button class="edit">
+        <button class="edit" (click)="openEditWaypointForm(waypoint)">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6">
@@ -173,7 +173,7 @@
           </svg>
         </button>
 
-        <button class="delete">
+        <button class="delete" (click)="deleteWaypoint(waypoint.id)">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6">

src/app/component/management/management.component.ts

@@ -24,7 +24,7 @@ export class ManagementComponent implements OnInit {
   showLocationForm: boolean = false;
   showWaypointForm: boolean = false;
 
-  newUser: UserEntity = { password: "", username: ""};
+  newUser: UserEntity = {password: "", username: ""};
   newLocation: LocationEntity = {location: "", lat: 0, lon: 0, region: ""};
   newWaypoint: newWaypoint = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""};
 
@@ -53,7 +53,7 @@ export class ManagementComponent implements OnInit {
         if (user.admin == false) {
           this.route.navigate(['/home']);
         }
-      }else {
+      } else {
         this.cookieService.deleteUsername();
         this.route.navigate(['/login']);
       }
@@ -70,8 +70,8 @@ export class ManagementComponent implements OnInit {
     });
   }
 
-  addUser( username: string, password: string) {
-    this.newUser = { username: username, password: password};
+  addUser(username: string, password: string) {
+    this.newUser = {username: username, password: password};
     this.userService.createUser(this.newUser).subscribe(user => {
       this.users?.push(user);
     });
@@ -103,8 +103,8 @@ export class ManagementComponent implements OnInit {
     this.showWaypointForm = false;
   }
 
-  deleteLocation(id: number) {
-    this.locationService.deleteLocation(id).subscribe(location => {
+  deleteLocation(location: string) {
+    this.locationService.deleteLocation(location).subscribe(location => {
       this.locations?.splice(this.locations?.indexOf(location), 1);
     });
   }
@@ -121,6 +121,39 @@ export class ManagementComponent implements OnInit {
     });
   }
 
+  editLocation(location: LocationEntity) {
+    this.locationService.updateLocation(location).subscribe(location => {
+      this.locations?.splice(this.locations?.indexOf(location), 1, location);
+    });
+  }
+
+  editWaypoint(waypoint: WaypointsEntity) {
+    this.waypointService.updateWaypoint(waypoint, waypoint.id).subscribe(waypoint => {
+      this.waypoints?.splice(this.waypoints?.indexOf(waypoint), 1, waypoint);
+    });
+  }
+
+  // editUser(user: UserEntity) {
+  //   this.userService.updateUser(user, user.id).subscribe(user => {
+  //     this.users?.splice(this.users?.indexOf(user), 1, user);
+  //   });
+  // }
+
+  openEditLocationForm(location: LocationEntity) {
+    this.newLocation = location;
+    this.showLocationForm = true;
+  }
+
+  openEditWaypointForm(waypoint: WaypointsEntity) {
+    this.newWaypoint = waypoint;
+    this.showWaypointForm = true;
+  }
+
+  openEditUserForm(user: UserEntity) {
+    this.newUser = user;
+    this.showUserForm = true;
+  }
+
   openUserForm() {
     this.showUserForm = true;
   }

src/app/service/http/location.service.ts

@@ -29,11 +29,11 @@ export class LocationService {
   }
 
   updateLocation(location: LocationEntity) {
-    return this.http.put<LocationEntity>(LOCATION, location);
+    return this.http.put<LocationEntity>(LOCATION+"/"+location.location, location);
   }
 
-  deleteLocation(id: number) {
-    return this.http.delete<LocationEntity>(LOCATION + id);
+  deleteLocation(location: string) {
+    return this.http.delete<LocationEntity>(LOCATION +"/"+ location);
   }
 
 }