From 5267e4dba58c9afabd0363c2b76917f215d3712d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sun, 7 May 2023 13:23:26 +0200
Subject: [PATCH] edit and delete changes

---
 .../management/management.component.html      |  8 +--
 .../management/management.component.ts        | 66 ++++++++++++++++---
 src/app/service/http/user.service.ts          |  2 +-
 3 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/src/app/component/management/management.component.html b/src/app/component/management/management.component.html
index 0101b92..c5fed09 100644
--- a/src/app/component/management/management.component.html
+++ b/src/app/component/management/management.component.html
@@ -49,7 +49,7 @@
 <div class="overlay" [style.display]="showUserForm ? 'block' : 'none'">
   <div class="form-container">
     <h2>{{translations.addUserButton}}</h2>
-    <form (submit)="addUser(newUser.username, newUser.password)">
+    <form (submit)="formUser(newUser.username, newUser.password)">
       <div>
         <label for="username">{{translations.username}}:</label>
         <input type="text" id="username" name="username" [(ngModel)]="newUser.username">
@@ -83,7 +83,7 @@
     <td>{{ location.lon }}</td>
     <td>
       <div class="btn-container">
-        <button class="edit" (click)="editLocation(location)">
+        <button class="edit" (click)="openEditLocationForm(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">
@@ -116,7 +116,7 @@
 <div class="overlay" [style.display]="showLocationForm ? 'block' : 'none'">
   <div class="form-container">
     <h2>{{translations.addLocationButton}}</h2>
-    <form (submit)="addLocation(newLocation.location, newLocation.region, newLocation.lat ,newLocation.lon)">
+    <form (submit)="formLocation(newLocation.location, newLocation.region, newLocation.lat ,newLocation.lon)">
       <div>
         <label for="location">{{translations.location}}:</label>
         <input type="text" id="location" name="location" [(ngModel)]="newLocation.location">
@@ -198,7 +198,7 @@
   <div class="form-container">
     <h2>{{translations.addWaypointButton}}</h2>
     <form
-      (submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.img, newWaypoint.locationName)">
+      (submit)="formWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.img, newWaypoint.locationName)">
       <div>
         <label for="waypointName">{{translations.name}}:</label>
         <input type="text" id="waypointName" name="waypointName" [(ngModel)]="newWaypoint.name">
diff --git a/src/app/component/management/management.component.ts b/src/app/component/management/management.component.ts
index 25faa9a..bb8321f 100644
--- a/src/app/component/management/management.component.ts
+++ b/src/app/component/management/management.component.ts
@@ -23,6 +23,8 @@ export class ManagementComponent implements OnInit {
   showUserForm: boolean = false;
   showLocationForm: boolean = false;
   showWaypointForm: boolean = false;
+  edit: boolean = false;
+  id: number = 0;
 
   newUser: newUser = {password: "", username: ""};
   newLocation: LocationEntity = {location: "", lat: 0, lon: 0, region: ""};
@@ -70,12 +72,50 @@ export class ManagementComponent implements OnInit {
     });
   }
 
+  formUser(username: string, password: string) {
+    if (this.edit) {
+      const user: UserEntity = {id: this.id, username: username, password: password};
+      this.editUser(user);
+      this.edit = false;
+    } else {
+      this.addUser(username, password);
+    }
+  }
+
+  formLocation(name: string, region: string, lat: number, lon: number) {
+    if (this.edit) {
+      const location: LocationEntity = {location: name, region: region, lat: lat, lon: lon};
+      this.editLocation(location);
+      this.edit = false;
+    } else {
+      this.addLocation(name, region, lat, lon);
+    }
+  }
+
+  formWaypoint(name: string, lat: number, lon: number, description: string, image: string, locationName: string) {
+    if (this.edit) {
+      const waypoint: WaypointsEntity = {
+        id: this.id,
+        name: name,
+        lat: lat,
+        lon: lon,
+        description: description,
+        img: image,
+        locationName: locationName
+      };
+      this.editWaypoint(waypoint);
+      this.edit = false;
+    } else {
+      this.addWaypoint(name, lat, lon, description, image, locationName);
+    }
+  }
+
   addUser(username: string, password: string) {
     this.newUser = {username: username, password: password};
     this.userService.createUser(this.newUser).subscribe(user => {
       this.users?.push(user);
     });
-    this.showUserForm = false;
+    this.closeUserForm();
   }
 
   addLocation(name: string, region: string, lat: number, lon: number) {
@@ -85,7 +125,7 @@ export class ManagementComponent implements OnInit {
     this.locationService.createLocation(this.newLocation).subscribe(location => {
       this.locations?.push(location);
     });
-    this.showLocationForm = false;
+    this.closeLocationForm()
   }
 
   addWaypoint(name: string, lat: number, lon: number, description: string, image: string, locationName: string) {
@@ -100,7 +140,7 @@ export class ManagementComponent implements OnInit {
     this.waypointService.createWaypoint(this.newWaypoint).subscribe(waypoint => {
       this.waypoints?.push(waypoint);
     });
-    this.showWaypointForm = false;
+    this.closeWaypointForm();
   }
 
   deleteLocation(location: string) {
@@ -141,16 +181,21 @@ export class ManagementComponent implements OnInit {
 
   openEditLocationForm(location: LocationEntity) {
     this.newLocation = location;
+    this.edit = true;
     this.showLocationForm = true;
   }
 
   openEditWaypointForm(waypoint: WaypointsEntity) {
     this.newWaypoint = waypoint;
+    this.id = waypoint.id;
+    this.edit = true;
     this.showWaypointForm = true;
   }
 
   openEditUserForm(user: UserEntity) {
     this.newUser = user;
+    this.id = user.id;
+    this.edit = true;
     this.showUserForm = true;
   }
 
@@ -158,23 +203,26 @@ export class ManagementComponent implements OnInit {
     this.showUserForm = true;
   }
 
-  closeUserForm() {
-    this.showUserForm = false;
+  openWaypointForm() {
+    this.showWaypointForm = true;
   }
 
   openLocationForm() {
     this.showLocationForm = true;
   }
 
-  closeLocationForm() {
-    this.showLocationForm = false;
+  closeUserForm() {
+    this.showUserForm = false;
+    this.newUser = {username: '', password: ''};
   }
 
-  openWaypointForm() {
-    this.showWaypointForm = true;
+  closeLocationForm() {
+    this.showLocationForm = false;
+    this.newLocation = {location: '', region: '', lat: 0, lon: 0};
   }
 
   closeWaypointForm() {
     this.showWaypointForm = false;
+    this.newWaypoint = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""};
   }
 }
diff --git a/src/app/service/http/user.service.ts b/src/app/service/http/user.service.ts
index 74ad295..2d356a8 100644
--- a/src/app/service/http/user.service.ts
+++ b/src/app/service/http/user.service.ts
@@ -48,7 +48,7 @@ export class UserService {
   }
 
   updateUser(user: UserEntity, id: number) {
-    return this.http.put<UserEntity>(USER + id, user);
+    return this.http.put<UserEntity>(USER + "/"+id, user);
   }
 
   deleteUser(id: number) {