Merge remote-tracking branch 'origin/dev' into dev

2023-05-07 17:07:08 +02:00
parent f9a4914797 2dfee46098
commit 9ba1f56b41
15 changed files with 263 additions and 45 deletions
--- 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);
@@ -83,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);

--- 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;
+}
--- 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,11 +38,15 @@
      </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>
 </div>
--- 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;
--- 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;
+}
--- 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" (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">
+            <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" (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">
+            <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>
@@ -29,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">
@@ -38,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>
@@ -52,6 +76,7 @@
    <th>{{translations.region}}</th>
    <th>{{translations.lat}}</th>
    <th>{{translations.lon}}</th>
+    <th>Edit</th>
  </tr>
  </thead>
  <tbody>
@@ -60,6 +85,27 @@
    <td>{{ location.region }}</td>
    <td>{{ location.lat }}</td>
    <td>{{ location.lon }}</td>
+    <td>
+      <div class="btn-container">
+        <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">
+            <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" (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">
+            <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>
@@ -74,7 +120,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">
@@ -95,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>
@@ -110,6 +159,7 @@
    <th>{{translations.lon}}</th>
    <th>{{translations.description}}</th>
    <th>{{translations.locationName}}</th>
+    <th>Edit</th>
  </tr>
  </thead>
  <tbody>
@@ -119,6 +169,27 @@
    <td>{{ waypoint.lon }}</td>
    <td>{{ waypoint.description }}</td>
    <td>{{ waypoint.locationName }}</td>
+    <td>
+      <div class="btn-container">
+        <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">
+            <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" (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">
+            <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>
@@ -134,7 +205,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">
@@ -156,7 +227,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>

@@ -167,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>
+    <button (click)="closeWaypointForm()">{{translations.close}}</button>
  </div>
 </div>

+
--- 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";
@@ -23,8 +23,10 @@ export class ManagementComponent implements OnInit {
  showUserForm: boolean = false;
  showLocationForm: boolean = false;
  showWaypointForm: boolean = false;
+  edit: boolean = false;
+  id: number = 0;

-  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: ""};

@@ -53,7 +55,7 @@ export class ManagementComponent implements OnInit {
        if (user.admin == false) {
          this.route.navigate(['/home']);
        }
-      }else {
+      } else {
        this.cookieService.deleteUsername();
        this.route.navigate(['/login']);
      }
@@ -70,12 +72,50 @@ export class ManagementComponent implements OnInit {
    });
  }

-  addUser( username: string, password: string) {
-    this.newUser = { username: username, password: password};
+  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,11 +140,11 @@ export class ManagementComponent implements OnInit {
    this.waypointService.createWaypoint(this.newWaypoint).subscribe(waypoint => {
      this.waypoints?.push(waypoint);
    });
-    this.showWaypointForm = false;
+    this.closeWaypointForm();
  }

-  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,27 +161,71 @@ export class ManagementComponent implements OnInit {
    });
  }

-  openUserForm() {
-    this.showUserForm = true;
+  editLocation(location: LocationEntity) {
+    this.locationService.updateLocation(location).subscribe(location => {
+      this.locations?.splice(this.locations?.indexOf(location), 1, location);
+    });
+    this.closeLocationForm()
  }

-  closeUserForm() {
-    this.showUserForm = false;
+  editWaypoint(waypoint: WaypointsEntity) {
+    this.waypointService.updateWaypoint(waypoint, waypoint.id).subscribe(waypoint => {
+      this.waypoints?.splice(this.waypoints?.indexOf(waypoint), 1, waypoint);
+    });
+    this.closeWaypointForm()
  }

-  openLocationForm() {
+  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) {
+    this.newLocation = location;
+    this.edit = true;
    this.showLocationForm = true;
  }

-  closeLocationForm() {
-    this.showLocationForm = false;
+  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;
+  }
+
+  openUserForm() {
+    this.showUserForm = true;
  }

  openWaypointForm() {
    this.showWaypointForm = true;
  }

+  openLocationForm() {
+    this.showLocationForm = true;
+  }
+
+  closeUserForm() {
+    this.showUserForm = false;
+    this.newUser = {username: '', password: ''};
+  }
+
+  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: ""};
  }
 }
--- 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;
+}
--- 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 {
@@ -31,6 +32,7 @@ export interface managementTranslations {
  addUserButton: string;
  addLocationButton: string;
  addWaypointButton: string;
+  edit: string;
  add: string;
  close: string;
 }
--- a/src/app/service/http/location.service.ts
+++ b/src/app/service/http/location.service.ts
@@ -29,11 +29,10 @@ 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);
  }
-
 }
--- 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,17 +41,17 @@ 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);

  }

  updateUser(user: UserEntity, id: number) {
-    return this.http.put<UserEntity>(USER + id, user);
+    return this.http.put<UserEntity>(USER + "/"+id, user);
  }

  deleteUser(id: number) {
-    return this.http.delete<UserEntity>(USER + id);
+    return this.http.delete<UserEntity>(USER+"/" + id);
  }
 }
--- 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);
  }
 }
--- 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 => {
@@ -54,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;
    });
--- 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"
 }
--- a/src/assets/i18n/management/en.json
+++ b/src/assets/i18n/management/en.json
@@ -11,11 +11,12 @@
  "lon": "Longitude",
  "description": "Description",
  "locationName": "Location Name",
-  "image": "Image",
+  "image": "Image (Direct Link)",
  "translate": "Translate",
  "addUserButton": "Add User",
  "addLocationButton": "Add Location",
  "addWaypointButton": "Add Waypoint",
+  "edit": "Edit",
  "add": "Add",
  "close": "Close"
 }