From e3ee5bd90939c5970d3a90475ea49ba24c2fef4d Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Sun, 7 May 2023 11:54:18 +0200
Subject: [PATCH 1/9] Added edit and delete button on management component

---
 .../management/management.component.css       | 19 +++++
 .../management/management.component.html      | 70 ++++++++++++++++++-
 2 files changed, 86 insertions(+), 3 deletions(-)

diff --git a/src/app/component/management/management.component.css b/src/app/component/management/management.component.css
index ecd7c54..b66c9c2 100644
--- a/src/app/component/management/management.component.css
+++ b/src/app/component/management/management.component.css
@@ -139,3 +139,22 @@ th {
   display: flex;
   justify-content: flex-end;
 }
+
+.btn-container{
+  display: flex;
+}
+
+.edit{
+  background-color: #008CBA;
+  padding: 5px;
+  border-radius: 5px;
+  color: white;
+}
+
+.delete{
+  background-color: #f44336;
+  margin-left: 10px;
+  padding: 5px;
+  border-radius: 5px;
+  color: white;
+}
diff --git a/src/app/component/management/management.component.html b/src/app/component/management/management.component.html
index 37c1bdb..1301dd2 100644
--- a/src/app/component/management/management.component.html
+++ b/src/app/component/management/management.component.html
@@ -5,7 +5,7 @@
     <th>{{ translations.username }}</th>
     <th>{{translations.password}}</th>
     <th>admin</th>
-    <th></th>
+    <th>Edit</th>
   </tr>
   </thead>
   <tbody>
@@ -14,7 +14,27 @@
     <td>{{ user.password }}</td>
     <td *ngIf="user.admin==false">No</td>
     <td *ngIf="user.admin==true">Yes</td>
-    <td> </td>
+    <td>
+      <div class="btn-container">
+        <button class="edit">
+          <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">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>
+          </svg>
+        </button>
+
+        <button class="delete">
+          <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">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
+          </svg>
+        </button>
+      </div>
+    </td>
   </tr>
   </tbody>
 </table>
@@ -52,6 +72,7 @@
     <th>{{translations.region}}</th>
     <th>{{translations.lat}}</th>
     <th>{{translations.lon}}</th>
+    <th>Edit</th>
   </tr>
   </thead>
   <tbody>
@@ -60,6 +81,27 @@
     <td>{{ location.region }}</td>
     <td>{{ location.lat }}</td>
     <td>{{ location.lon }}</td>
+    <td>
+      <div class="btn-container">
+        <button class="edit">
+          <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">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>
+          </svg>
+        </button>
+
+        <button class="delete">
+          <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">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
+          </svg>
+        </button>
+      </div>
+    </td>
   </tr>
   </tbody>
 </table>
@@ -110,6 +152,7 @@
     <th>{{translations.lon}}</th>
     <th>{{translations.description}}</th>
     <th>{{translations.locationName}}</th>
+    <th>Edit</th>
   </tr>
   </thead>
   <tbody>
@@ -119,6 +162,27 @@
     <td>{{ waypoint.lon }}</td>
     <td>{{ waypoint.description }}</td>
     <td>{{ waypoint.locationName }}</td>
+    <td>
+      <div class="btn-container">
+        <button class="edit">
+          <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">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>
+          </svg>
+        </button>
+
+        <button class="delete">
+          <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">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
+          </svg>
+        </button>
+      </div>
+    </td>
   </tr>
   </tbody>
 </table>
@@ -169,7 +233,7 @@
 
       <button type="submit">{{translations.addWaypointButton}}</button>
     </form>
-    <button (click)="closeWaypointForm()" >{{translations.close}}</button>
+    <button (click)="closeWaypointForm()">{{translations.close}}</button>
   </div>
 </div>
 

From ccdd691ec6d2758847dabf7e1cb53b8b467cc2af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sun, 7 May 2023 12:03:04 +0200
Subject: [PATCH 2/9] edit and delete with error

---
 .../management/management.component.html      | 12 ++---
 .../management/management.component.ts        | 45 ++++++++++++++++---
 src/app/service/http/location.service.ts      |  6 +--
 3 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/src/app/component/management/management.component.html b/src/app/component/management/management.component.html
index 1301dd2..0101b92 100644
--- a/src/app/component/management/management.component.html
+++ b/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">
diff --git a/src/app/component/management/management.component.ts b/src/app/component/management/management.component.ts
index 560bac3..5a317a7 100644
--- a/src/app/component/management/management.component.ts
+++ b/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;
   }
diff --git a/src/app/service/http/location.service.ts b/src/app/service/http/location.service.ts
index 5de754f..8922e85 100644
--- a/src/app/service/http/location.service.ts
+++ b/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);
   }
 
 }

From cd79fed7892e6b26e34ae64528b0bc7af53d4821 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sun, 7 May 2023 12:15:47 +0200
Subject: [PATCH 3/9] edit and delete changes

---
 src/app/component/login/login.component.ts         |  4 ++--
 .../component/management/management.component.ts   | 14 +++++++-------
 src/app/interface/UserEntity.ts                    |  7 ++++++-
 src/app/service/http/user.service.ts               |  6 +++---
 src/app/service/http/waypoint.service.ts           |  2 +-
 5 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/app/component/login/login.component.ts b/src/app/component/login/login.component.ts
index 3d6c50a..3bcd943 100644
--- a/src/app/component/login/login.component.ts
+++ b/src/app/component/login/login.component.ts
@@ -4,7 +4,7 @@ import {TranslateService} from "../../service/language/translate.service";
 import {ReadTranslateJsonService} from "../../service/language/readTranslateJson.service";
 import {cookieService} from "../../service/cookie.service";
 import {UserService} from "../../service/http/user.service";
-import {UserEntity} from "../../interface/UserEntity";
+import {newUser, UserEntity} from "../../interface/UserEntity";
 import {loginTranslations} from "../../interface/translations";
 
 @Component({
@@ -35,7 +35,7 @@ export class LoginComponent implements OnInit {
     this.loginTranslation = this.readTranslationJsonService.getLoginTranslations();
   }
 
-  createNewUser(createUser: UserEntity) {
+  createNewUser(createUser: newUser) {
     console.log(createUser.username+" "+createUser.password);
     if (createUser.username == '' || createUser.password == '') {
       this.errorCreateUser = true;
diff --git a/src/app/component/management/management.component.ts b/src/app/component/management/management.component.ts
index 5a317a7..25faa9a 100644
--- a/src/app/component/management/management.component.ts
+++ b/src/app/component/management/management.component.ts
@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {UserEntity} from "../../interface/UserEntity";
+import {newUser, UserEntity} from "../../interface/UserEntity";
 import {LocationEntity} from "../../interface/LocationEntity";
 import {newWaypoint, WaypointsEntity} from "../../interface/WaypointsEntity";
 import {Router} from "@angular/router";
@@ -24,7 +24,7 @@ export class ManagementComponent implements OnInit {
   showLocationForm: boolean = false;
   showWaypointForm: boolean = false;
 
-  newUser: UserEntity = {password: "", username: ""};
+  newUser: newUser = {password: "", username: ""};
   newLocation: LocationEntity = {location: "", lat: 0, lon: 0, region: ""};
   newWaypoint: newWaypoint = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""};
 
@@ -133,11 +133,11 @@ export class ManagementComponent implements OnInit {
     });
   }
 
-  // editUser(user: UserEntity) {
-  //   this.userService.updateUser(user, user.id).subscribe(user => {
-  //     this.users?.splice(this.users?.indexOf(user), 1, user);
-  //   });
-  // }
+  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;
diff --git a/src/app/interface/UserEntity.ts b/src/app/interface/UserEntity.ts
index 43e8afd..0ffa1ab 100644
--- a/src/app/interface/UserEntity.ts
+++ b/src/app/interface/UserEntity.ts
@@ -1,6 +1,11 @@
 export interface UserEntity {
-    id?: number;
+    id: number;
     username: string;
     password: string;
     admin?: boolean;
 }
+
+export interface newUser {
+    username: string;
+    password: string;
+}
diff --git a/src/app/service/http/user.service.ts b/src/app/service/http/user.service.ts
index 26bb379..74ad295 100644
--- a/src/app/service/http/user.service.ts
+++ b/src/app/service/http/user.service.ts
@@ -1,6 +1,6 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
-import {UserEntity} from "../../interface/UserEntity";
+import {newUser, UserEntity} from "../../interface/UserEntity";
 import {catchError, of} from "rxjs";
 
 const BASE_URL = "progetto152";
@@ -41,7 +41,7 @@ export class UserService {
     return this.http.get<UserEntity>(GET_USER_BY_ID + "/" + id);
   }
 
-  createUser(user: UserEntity) {
+  createUser(user: newUser) {
     console.log("create " + user);
     return this.http.post<UserEntity>(USER, user);
 
@@ -52,6 +52,6 @@ export class UserService {
   }
 
   deleteUser(id: number) {
-    return this.http.delete<UserEntity>(USER + id);
+    return this.http.delete<UserEntity>(USER+"/" + id);
   }
 }
diff --git a/src/app/service/http/waypoint.service.ts b/src/app/service/http/waypoint.service.ts
index 0a67d1b..53550f3 100644
--- a/src/app/service/http/waypoint.service.ts
+++ b/src/app/service/http/waypoint.service.ts
@@ -44,6 +44,6 @@ export class WaypointService {
   }
 
   deleteWaypoint(id: number) {
-    return this.http.delete<WaypointsEntity>(WAYPOINT + id);
+    return this.http.delete<WaypointsEntity>(WAYPOINT+"/" + id);
   }
 }

From 5272a357e7793e5b18a3538d104b8523f24ee179 Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Sun, 7 May 2023 13:14:40 +0200
Subject: [PATCH 4/9] Added check if waypoint is visited and label with
 translation for radial percentage

---
 src/app/app.component.ts                      |  1 +
 src/app/component/list/list.component.css     | 25 +++++++++++++++++--
 src/app/component/list/list.component.html    | 11 ++++++--
 src/app/interface/translations.ts             |  1 +
 .../language/readTranslateJson.service.ts     |  1 +
 src/assets/i18n/list/en.json                  |  3 ++-
 6 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b3d26f..a4152da 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -64,6 +64,7 @@ export class AppComponent implements OnInit {
     this.listTranslations.distance = await this.translateService.getData(this.listTranslations.distance, lang);
     this.listTranslations.locationName = await this.translateService.getData(this.listTranslations.locationName, lang);
     this.listTranslations.positionNotFoundErrorMessage = await this.translateService.getData(this.listTranslations.positionNotFoundErrorMessage, lang);
+    this.listTranslations.waypointVisitedPercentage = await this.translateService.getData(this.listTranslations.waypointVisitedPercentage, lang);
 
     // Load Management Page Translations
     this.managementTranslation.users = await this.translateService.getData(this.managementTranslation.users, lang);
diff --git a/src/app/component/list/list.component.css b/src/app/component/list/list.component.css
index a709ef5..636c4eb 100644
--- a/src/app/component/list/list.component.css
+++ b/src/app/component/list/list.component.css
@@ -45,8 +45,6 @@ h4 {
 }
 .right {
   width: 60%;
-  display: flex;
-  justify-content: center;
 }
 
 #radial {
@@ -57,3 +55,26 @@ h4 {
   display: flex;
   flex-direction: row;
 }
+
+.radial-container{
+  display: flex;
+  justify-content: center;
+}
+
+#radialTitle{
+  margin-top: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+#location-name{
+  display: flex;
+  flex-direction: row;
+}
+
+#check{
+  height: 100%;
+  align-self: center;
+  margin-left: 10px;
+  color: #519903;
+}
diff --git a/src/app/component/list/list.component.html b/src/app/component/list/list.component.html
index 1c53ba3..6e7f75c 100644
--- a/src/app/component/list/list.component.html
+++ b/src/app/component/list/list.component.html
@@ -24,8 +24,11 @@
   <div class="container2">
     <div class="left">
       <div *ngFor="let waypoint of waypoints, let i = index" class="row">
-        <h3>
+        <h3 id="location-name">
           <a class="link link-primary" href="location/{{location.location}}/{{waypoint.id}}"> {{waypoint.name}}</a>
+          <svg *ngIf="waypoint.visited" id="check" 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">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
         </h3>
         <div class="distance">
           <h4 *ngIf="waypoint.distance && !positionNotFound">{{translations.distance}}: {{waypoint.distance}} km</h4>
@@ -35,10 +38,14 @@
       </div>
     </div>
     <div class="right">
-      <div class="radial-progress text-primary" id="radial" style="--value:{{percentage}}; --size:12rem; --thickness: 1.5rem;">
+      <h3 id="radialTitle">{{translations.waypointVisitedPercentage}}</h3>
+      <div class="radial-container">
+        <div class="radial-progress text-primary" id="radial"
+             style="--value:{{percentage}}; --size:12rem; --thickness: 1.5rem;">
         <span style="font-size: 20pt">
           {{percentage}}%
         </span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/app/interface/translations.ts b/src/app/interface/translations.ts
index 4790151..4be33e1 100644
--- a/src/app/interface/translations.ts
+++ b/src/app/interface/translations.ts
@@ -11,6 +11,7 @@ export interface listTranslations {
   locationName: string;
   distance: string;
   positionNotFoundErrorMessage: string;
+  waypointVisitedPercentage: string;
 }
 
 export interface managementTranslations {
diff --git a/src/app/service/language/readTranslateJson.service.ts b/src/app/service/language/readTranslateJson.service.ts
index ccdc8d2..7abef94 100644
--- a/src/app/service/language/readTranslateJson.service.ts
+++ b/src/app/service/language/readTranslateJson.service.ts
@@ -34,6 +34,7 @@ export class ReadTranslateJsonService {
       this.listTranslation.distance = data.distance;
       this.listTranslation.locationName = data.locationName;
       this.listTranslation.positionNotFoundErrorMessage = data.positionNotFoundErrorMessage;
+      this.listTranslation.waypointVisitedPercentage = data.waypointVisitedPercentage;
     });
 
     this.http.get<managementTranslations>('assets/i18n/management/en.json').subscribe(data => {
diff --git a/src/assets/i18n/list/en.json b/src/assets/i18n/list/en.json
index 040580c..abad012 100644
--- a/src/assets/i18n/list/en.json
+++ b/src/assets/i18n/list/en.json
@@ -2,5 +2,6 @@
   "translate": "Translate",
   "locationName": "Position not found",
   "distance": "Distance",
-  "positionNotFoundErrorMessage": "Could not retrieve position"
+  "positionNotFoundErrorMessage": "Could not retrieve position",
+  "waypointVisitedPercentage": "Percentage of waypoints visited"
 }

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 5/9] 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) {

From b836787717c960f470065e9952d739a2e10b280f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sun, 7 May 2023 13:32:12 +0200
Subject: [PATCH 6/9] edit button translation

---
 src/app/app.component.ts                        |  1 +
 .../management/management.component.html        | 17 ++++++++++++++---
 src/app/interface/translations.ts               |  1 +
 .../language/readTranslateJson.service.ts       |  1 +
 src/assets/i18n/management/en.json              |  1 +
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a4152da..244efd3 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -84,6 +84,7 @@ export class AppComponent implements OnInit {
     this.managementTranslation.addLocationButton = await this.translateService.getData(this.managementTranslation.addLocationButton, lang);
     this.managementTranslation.addUserButton = await this.translateService.getData(this.managementTranslation.addUserButton, lang);
     this.managementTranslation.addWaypointButton = await this.translateService.getData(this.managementTranslation.addWaypointButton, lang);
+    this.managementTranslation.edit = await this.translateService.getData(this.managementTranslation.edit, lang);
     this.managementTranslation.add = await this.translateService.getData(this.managementTranslation.add, lang);
     this.managementTranslation.close = await this.translateService.getData(this.managementTranslation.close, lang);
 
diff --git a/src/app/component/management/management.component.html b/src/app/component/management/management.component.html
index c5fed09..1373252 100644
--- a/src/app/component/management/management.component.html
+++ b/src/app/component/management/management.component.html
@@ -58,7 +58,11 @@
         <label for="password">{{translations.password}}:</label>
         <input type="password" id="password" name="password" [(ngModel)]="newUser.password">
       </div>
-      <button type="submit">{{translations.addUserButton}}</button>
+      <button type="submit">
+        <span *ngIf="!edit">{{translations.addUserButton}}</span>
+        <span *ngIf="edit">{{translations.edit}}</span>
+
+      </button>
     </form>
     <button (click)="closeUserForm()">{{translations.close}}</button>
   </div>
@@ -137,7 +141,10 @@
       </div>
 
 
-      <button type="submit">{{translations.addLocationButton}}</button>
+      <button type="submit">
+        <span *ngIf="!edit">{{translations.addLocationButton}}</span>
+        <span *ngIf="edit">{{translations.edit}}</span>
+      </button>
     </form>
     <button (click)="closeLocationForm()">{{translations.close}}</button>
   </div>
@@ -231,9 +238,13 @@
         </select>
       </div>
 
-      <button type="submit">{{translations.addWaypointButton}}</button>
+      <button type="submit">
+        <span *ngIf="!edit">{{translations.addWaypointButton}}</span>
+        <span *ngIf="edit">{{translations.edit}}</span>
+      </button>
     </form>
     <button (click)="closeWaypointForm()">{{translations.close}}</button>
   </div>
 </div>
 
+
diff --git a/src/app/interface/translations.ts b/src/app/interface/translations.ts
index 4be33e1..f9e4967 100644
--- a/src/app/interface/translations.ts
+++ b/src/app/interface/translations.ts
@@ -32,6 +32,7 @@ export interface managementTranslations {
   addUserButton: string;
   addLocationButton: string;
   addWaypointButton: string;
+  edit: string;
   add: string;
   close: string;
 }
diff --git a/src/app/service/language/readTranslateJson.service.ts b/src/app/service/language/readTranslateJson.service.ts
index 7abef94..bfb6060 100644
--- a/src/app/service/language/readTranslateJson.service.ts
+++ b/src/app/service/language/readTranslateJson.service.ts
@@ -55,6 +55,7 @@ export class ReadTranslateJsonService {
       this.managementTransaltion.addUserButton = data.addUserButton;
       this.managementTransaltion.addLocationButton = data.addLocationButton;
       this.managementTransaltion.addWaypointButton = data.addWaypointButton;
+      this.managementTransaltion.edit = data.edit;
       this.managementTransaltion.add = data.add;
       this.managementTransaltion.close = data.close;
     });
diff --git a/src/assets/i18n/management/en.json b/src/assets/i18n/management/en.json
index ab6df28..8b40e2b 100644
--- a/src/assets/i18n/management/en.json
+++ b/src/assets/i18n/management/en.json
@@ -16,6 +16,7 @@
   "addUserButton": "Add User",
   "addLocationButton": "Add Location",
   "addWaypointButton": "Add Waypoint",
+  "edit": "Edit",
   "add": "Add",
   "close": "Close"
 }

From d259d4bfa6954e6d7183649a1fd74fbbea111989 Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Sun, 7 May 2023 13:36:16 +0200
Subject: [PATCH 7/9] Added check if waypoint is visited and label with
 translation for radial percentage

---
 src/app/component/management/management.component.html | 2 +-
 src/assets/i18n/management/en.json                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/component/management/management.component.html b/src/app/component/management/management.component.html
index c5fed09..a1e99f3 100644
--- a/src/app/component/management/management.component.html
+++ b/src/app/component/management/management.component.html
@@ -220,7 +220,7 @@
       </div>
 
       <div>
-        <label for="image">{{translations.image}} (Base64):</label>
+        <label for="image">{{translations.image}}: </label>
         <input type="text" id="image" name="image" [(ngModel)]="newWaypoint.img">
       </div>
 
diff --git a/src/assets/i18n/management/en.json b/src/assets/i18n/management/en.json
index ab6df28..6e989b2 100644
--- a/src/assets/i18n/management/en.json
+++ b/src/assets/i18n/management/en.json
@@ -11,7 +11,7 @@
   "lon": "Longitude",
   "description": "Description",
   "locationName": "Location Name",
-  "image": "Image",
+  "image": "Image (Direct Link)",
   "translate": "Translate",
   "addUserButton": "Add User",
   "addLocationButton": "Add Location",

From bc0c63a4e920acedb5fc39c3d4ce78ed88c7830a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sun, 7 May 2023 13:47:11 +0200
Subject: [PATCH 8/9] management changes

---
 src/app/component/management/management.component.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/component/management/management.component.ts b/src/app/component/management/management.component.ts
index bb8321f..ed51a89 100644
--- a/src/app/component/management/management.component.ts
+++ b/src/app/component/management/management.component.ts
@@ -165,18 +165,21 @@ export class ManagementComponent implements OnInit {
     this.locationService.updateLocation(location).subscribe(location => {
       this.locations?.splice(this.locations?.indexOf(location), 1, location);
     });
+    this.closeLocationForm()
   }
 
   editWaypoint(waypoint: WaypointsEntity) {
     this.waypointService.updateWaypoint(waypoint, waypoint.id).subscribe(waypoint => {
       this.waypoints?.splice(this.waypoints?.indexOf(waypoint), 1, waypoint);
     });
+    this.closeWaypointForm()
   }
 
   editUser(user: UserEntity) {
     this.userService.updateUser(user, user.id).subscribe(user => {
       this.users?.splice(this.users?.indexOf(user), 1, user);
     });
+    this.closeUserForm()
   }
 
   openEditLocationForm(location: LocationEntity) {

From 2dfee46098dd02570459b2810be98b8f0663313c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sun, 7 May 2023 14:08:47 +0200
Subject: [PATCH 9/9] management changes

---
 src/app/service/http/location.service.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/service/http/location.service.ts b/src/app/service/http/location.service.ts
index 8922e85..ae9a035 100644
--- a/src/app/service/http/location.service.ts
+++ b/src/app/service/http/location.service.ts
@@ -35,5 +35,4 @@ export class LocationService {
   deleteLocation(location: string) {
     return this.http.delete<LocationEntity>(LOCATION +"/"+ location);
   }
-
 }