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

# Conflicts:
#	src/app/component/detail/detail.component.html

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"

proxy.conf.json

@@ -0,0 +1,8 @@
+{
+  "/progetto152/*": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "logLevel": "debug",
+    "changeOrigin": true
+  }
+}

src/app/app-routing.module.ts

@@ -1,13 +1,15 @@
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {HomeComponent} from './home/home.component';
-import {DetailComponent} from "./detail/detail.component";
-import {ListComponent} from "./list/list.component";
+import {DetailComponent} from "./component/detail/detail.component";
+import {ListComponent} from "./component/list/list.component";
+import {ManagementComponent} from "./component/management/management.component";
 
 
 @NgModule({
   imports: [RouterModule.forRoot([
     {path: 'home', component: HomeComponent},
+    {path: 'management', component: ManagementComponent},
     {path: 'location/:location', component: ListComponent},
     {path: 'location/:location/:id', component: DetailComponent},
     {path: '**', redirectTo: 'home'}

src/app/app.module.ts

@@ -4,18 +4,19 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
-import { ListComponent } from './list/list.component';
-import { DetailComponent } from './detail/detail.component';
+import { ListComponent } from './component/list/list.component';
+import { DetailComponent } from './component/detail/detail.component';
 import {FormsModule} from "@angular/forms";
 import { HttpClientModule} from "@angular/common/http";
 import { SafePipe } from './pipes/safe.pipe';
-
+import { ManagementComponent } from './component/management/management.component';
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
     ListComponent,
     DetailComponent,
+    ManagementComponent,
     SafePipe,
   ],
   imports: [

src/app/component/detail/detail.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
-import {positionService} from "../service/position.service";
+import {positionService} from "../../service/position.service";
 import * as qrcode from 'qrcode';
 
 @Component({

src/app/component/list/list.component.html

@@ -17,23 +17,23 @@
       <a class="link link-primary" href="location/{{locations.location}}">{{locations.location}}</a>
     </h3>
     <div>
-      <h4 *ngIf="distance[i] &&! positionNotFound">{{translations.distance}}{{distance[i]}} km</h4>
-      <h4 *ngIf="positionNotFound && !distance[i]">{{translations.positionNotFoundErrorMessage}}</h4>
+      <h4 *ngIf="locations.distance && !positionNotFound">{{translations.distance}}{{locations.distance}} km</h4>
+      <h4 *ngIf="positionNotFound">{{translations.positionNotFoundErrorMessage}}</h4>
     </div>
   </div>
 </div>
 
-<div *ngIf="!isNear && location && location.waypoints" class="container">
+<div *ngIf="!isNear && location && waypoints" class="container">
   <h1>
     {{location.location}}
   </h1>
-  <div *ngFor="let waypoinst of location.waypoints, let i = index" class="row">
+  <div *ngFor="let waypoint of waypoints, let i = index" class="row">
     <h3>
-      <a class="link link-primary" href="location/{{location.location}}/{{waypoinst.id}}"> {{waypoinst.name}}</a>
+      <a class="link link-primary" href="location/{{location.location}}/{{waypoint.id}}"> {{waypoint.name}}</a>
     </h3>
     <div class="distance">
-      <h4 *ngIf="distance[i] && !positionNotFound">{{translations.distance}}{{distance[i]}} km</h4>
-      <h4 *ngIf="positionNotFound && !distance[i]">{{translations.positionNotFoundErrorMessage}}</h4>
+      <h4 *ngIf="waypoint.distance && !positionNotFound">{{translations.distance}}{{waypoint.distance}} km</h4>
+      <h4 *ngIf="positionNotFound">{{translations.positionNotFoundErrorMessage}}</h4>
     </div>
 
   </div>

src/app/component/list/list.component.ts

@@ -0,0 +1,145 @@
+import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {ActivatedRoute} from "@angular/router";
+import {positionService} from "../../service/position.service";
+import {listTranslations} from "../../interface/translations";
+import {TranslateService} from "../../service/language/translate.service";
+import {ReadTranslateJsonService} from "../../service/language/readTranslateJson.service";
+import {LocationService} from "../../service/http/location.service";
+import {LocationEntity} from "../../interface/LocationEntity";
+import {WaypointsEntity} from "../../interface/WaypointsEntity";
+import {WaypointService} from "../../service/http/waypoint.service"
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.css']
+})
+export class ListComponent implements OnInit, OnChanges {
+  locationParams: string | undefined
+  locations: LocationEntity[] | undefined;
+  location: LocationEntity | undefined;
+
+  waypoints: WaypointsEntity[] | undefined;
+
+  positionCord: any;
+
+  isNear: boolean = true;
+
+
+  translations: listTranslations = {} as listTranslations
+
+  positionNotFound: boolean = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private positionService: positionService,
+    private translateService: TranslateService,
+    private readTranslationJsonService: ReadTranslateJsonService,
+    private locationService: LocationService,
+    private waypointService: WaypointService,
+  ) {
+  }
+
+  async ngOnInit() {
+    this.translations = this.readTranslationJsonService.getListTransaltions();
+    this.route.params.subscribe(params => {
+      this.locationParams = params['location'];
+    });
+    this.locationService.getLocation(this.locationParams ?? "").subscribe(location => {
+      this.location = location;
+      if (this.location.location != null || this.location.location != undefined) {
+        this.isNear = false;
+        this.waypointService.getWaypoints(this.location.location).subscribe(waypoints => {
+          this.waypoints = waypoints;
+          console.log("waypoints", this.waypoints)
+          this.setDistance()
+        });
+      }
+
+    });
+    this.locationService.getLocations().subscribe(locations => {
+      this.locations = locations;
+      console.log("locations", this.locations)
+      this.setDistance()
+    });
+
+    this.getPosition();
+    this.positionNotFoundFunction();
+  }
+
+
+  positionNotFoundFunction() {
+    if (!this.positionNotFound) {
+      setTimeout(() => {
+        if (!this.positionCord) {
+          this.positionNotFound = true;
+        } else {
+          if (this.waypoints) {
+            if (!this.waypoints[0].distance) {
+              this.positionNotFound = true;
+            } else {
+              this.positionNotFound = false;
+            }
+          }
+          if (this.locations) {
+            if (!this.locations[0].distance) {
+              this.positionNotFound = true;
+            } else {
+              this.positionNotFound = false;
+            }
+          }
+        }
+      }, 5000);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['positionCord'] && (changes['positionCord'])) {
+      console.log("onChanges")
+      this.setDistance();
+    }
+  }
+
+  getPosition(): any {
+    setInterval(async () => {
+      this.positionCord = await this.positionService.getLocation();
+      this.setDistance();
+    }, 2000);
+  }
+
+  async switchLanguage(lang: string) {
+    this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
+    this.translations.distance = await this.translateService.getData(this.translations.distance, lang);
+    this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
+    this.translations.positionNotFoundErrorMessage = await this.translateService.getData(this.translations.positionNotFoundErrorMessage, lang);
+  }
+
+  private checkDataPopulated(): void {
+    if (this.locations && this.location) {
+      console.log("Dati popolati correttamente:", this.locations, this.location);
+      for (let i = 0; i < this.locations.length; i++) {
+        if (this.locations[i].location === this.locationParams) {
+          this.location = this.locations[i];
+          console.log("Location trovata:", this.location);
+          this.isNear = false;
+          this.setDistance();
+          break;
+        }
+      }
+    }
+  }
+
+  private setDistance(): void {
+    if (this.waypoints) {
+      for (let i = 0; i < this.waypoints.length; i++) {
+        this.waypoints[i].distance = this.positionService.getDistanceBetweenCoordinates(this.waypoints[i].lat, this.waypoints[i].lon, this.positionCord.lat, this.positionCord.lon);
+      }
+    } else {
+      if (this.locations) {
+        for (let i = 0; i < this.locations.length; i++) {
+          this.locations[i].distance = this.positionService.getDistanceBetweenCoordinates(this.locations[i].lat, this.locations[i].lon, this.positionCord.lat, this.positionCord.lon);
+        }
+      }
+    }
+  }
+}

src/app/component/management/management.component.css

@@ -0,0 +1,141 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  margin:2% 0 1% 10%;
+  font-size: 30px;
+}
+
+/* Tabella degli utenti */
+table {
+  border-collapse: collapse;
+  width: 80%;
+  margin: 0 10% 0 10%;
+}
+
+th, td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+
+/* Form di aggiunta utente */
+.overlay {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form-container {
+  background-color: #fefefe;
+  border-radius: 5px;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  width: 400px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.form-container h2 {
+  margin: 0 0 10px 0;
+  font-size: 20px;
+}
+
+.form-container div {
+  margin-bottom: 10px;
+}
+
+.form-container label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-container input {
+  width: 100%;
+  padding: 8px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+.form-container select{
+  width: 100%;
+  padding: 8px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+.form-container button {
+  background-color: #4CAF50;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.form-container button[type="submit"] {
+  background-color: #008CBA;
+  margin-top:10px;
+}
+
+.form-container button[type="submit"]:hover {
+  background-color: #0d8bf2;
+}
+
+.form-container button[type="submit"]:active {
+  background-color: #0a5a8d;
+}
+
+.form-container button[type="submit"]:focus {
+  outline: none;
+}
+
+.form-container button[type="submit"]:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.form-container button[type="submit"]:disabled:hover {
+  background-color: #cccccc;
+}
+
+.form-container button:not([type="submit"]) {
+  background-color: #f44336;
+  margin-top: 5px;
+}
+
+.form-container button:not([type="submit"]):hover {
+  background-color: #d30f0f;
+}
+
+.form-container button:not([type="submit"]):active {
+  background-color: #8b0c0c;
+}
+
+.form-container button:not([type="submit"]):focus {
+  outline: none;
+}
+
+.button-container{
+  display: flex;
+  justify-content: flex-end;
+}

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

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Management</title>
+</head>
+<body>
+<h1>Users</h1>
+<table>
+  <thead>
+  <tr>
+    <th>Name</th>
+    <th>Username</th>
+    <th>Password</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let user of users">
+    <td>{{ user.name }}</td>
+    <td>{{ user.username }}</td>
+    <td>{{ user.password }}</td>
+  </tr>
+  </tbody>
+</table>
+
+<div class="button-container">
+  <button (click)="openUserForm()"
+          class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
+          style="margin: 10px 10% 0 0;">Add
+  </button>
+</div>
+
+<div class="overlay" [style.display]="showUserForm ? 'block' : 'none'">
+  <div class="form-container">
+    <h2>Add User</h2>
+    <form (submit)="addUser(newUser.name, newUser.username, newUser.password)">
+      <div>
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" [(ngModel)]="newUser.name">
+      </div>
+      <div>
+        <label for="username">Username:</label>
+        <input type="text" id="username" name="username" [(ngModel)]="newUser.username">
+      </div>
+      <div>
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password" [(ngModel)]="newUser.password">
+      </div>
+      <button type="submit">Add User</button>
+    </form>
+    <button (click)="closeUserForm()">Close</button>
+  </div>
+</div>
+
+<h1>Locations</h1>
+<table>
+  <thead>
+  <tr>
+    <th>Location</th>
+    <th>Region</th>
+    <th>Latitude</th>
+    <th>Longitude</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let location of locations">
+    <td>{{ location.location }}</td>
+    <td>{{ location.region }}</td>
+    <td>{{ location.lat }}</td>
+    <td>{{ location.lon }}</td>
+  </tr>
+  </tbody>
+</table>
+
+<div class="button-container">
+  <button (click)="openLocationForm()"
+          class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
+          style="margin: 10px 10% 0 0;">Add
+  </button>
+</div>
+
+<div class="overlay" [style.display]="showLocationForm ? 'block' : 'none'">
+  <div class="form-container">
+    <h2>Add Location</h2>
+    <form (submit)="addLocation(newLocation.location, newLocation.region, newLocation.lat ,newLocation.lon)">
+      <div>
+        <label for="location">Location:</label>
+        <input type="text" id="location" name="location" [(ngModel)]="newLocation.location">
+      </div>
+      <div>
+        <label for="region">Region:</label>
+        <input type="text" id="region" name="region" [(ngModel)]="newLocation.region">
+      </div>
+
+      <div>
+        <label for="lat">Latitude:</label>
+        <input type="number" id="lat" name="lat" [(ngModel)]="newLocation.lat">
+      </div>
+
+      <div>
+        <label for="lon">Longitude:</label>
+        <input type="number" id="lon" name="lon" [(ngModel)]="newLocation.lon">
+      </div>
+
+
+      <button type="submit">Add Location</button>
+    </form>
+    <button (click)="closeLocationForm()">Close</button>
+  </div>
+</div>
+
+<h1>Waypoints</h1>
+<table>
+  <thead>
+  <tr>
+    <th>Name</th>
+    <th>Latitude</th>
+    <th>Longitude</th>
+    <th>Description</th>
+    <th>Location Name</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let waypoint of waypoints">
+    <td>{{ waypoint.name }}</td>
+    <td>{{ waypoint.lat }}</td>
+    <td>{{ waypoint.lon }}</td>
+    <td>{{ waypoint.description }}</td>
+    <td>{{ waypoint.locationName }}</td>
+  </tr>
+  </tbody>
+</table>
+
+<div class="button-container">
+  <button (click)="openWaypointForm()"
+          class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
+          style="margin: 10px 10% 0 0;">Add
+  </button>
+</div>
+
+<div class="overlay" [style.display]="showWaypointForm ? 'block' : 'none'">
+  <div class="form-container">
+    <h2>Add Location</h2>
+    <form
+      (submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.image, newWaypoint.locationName)">
+      <div>
+        <label for="waypointName">Waypoint:</label>
+        <input type="text" id="waypointName" name="waypointName" [(ngModel)]="newWaypoint.name">
+      </div>
+
+      <div>
+        <label for="waypointLat">Latitude:</label>
+        <input type="number" id="waypointLat" name="waypointLat" [(ngModel)]="newWaypoint.lat">
+      </div>
+
+      <div>
+        <label for="waypointLon">Longitude:</label>
+        <input type="number" id="waypointLon" name="waypointLon" [(ngModel)]="newWaypoint.lon">
+      </div>
+
+      <div>
+        <label for="description">Description:</label>
+        <input type="text" id="description" name="description" [(ngModel)]="newWaypoint.description">
+      </div>
+
+      <div>
+        <label for="image">Image (Base64):</label>
+        <input type="text" id="image" name="image" [(ngModel)]="newWaypoint.img">
+      </div>
+
+      <div>
+        <label for="locationName">Location Name:</label>
+        <select [(ngModel)]="newWaypoint.locationName" id="locationName" name="locationName">
+          <option *ngFor="let location of locations" [value]="location.location">{{ location.location }}</option>
+        </select>
+      </div>
+
+      <button type="submit">Add Waypoint</button>
+    </form>
+    <button (click)="closeWaypointForm()">Close</button>
+  </div>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,97 @@
+import {Component, OnInit} from '@angular/core';
+import {UserEntity} from "../../interface/UserEntity";
+import {LocationEntity} from "../../interface/LocationEntity";
+import {WaypointsEntity} from "../../interface/WaypointsEntity";
+import {ActivatedRoute} from "@angular/router";
+import {LocationService} from "../../service/http/location.service";
+import {UserService} from "../../service/http/user.service";
+import {WaypointService} from "../../service/http/waypoint.service";
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './management.component.html',
+  styleUrls: ['./management.component.css']
+})
+
+export class ManagementComponent implements OnInit {
+  showUserForm: boolean = false;
+  showLocationForm: boolean = false;
+  showWaypointForm: boolean = false;
+
+  newUser: UserEntity;
+  newLocation: LocationEntity;
+  newWaypoint: WaypointsEntity;
+
+  locations: LocationEntity[] | undefined;
+  waypoints: WaypointsEntity[] | undefined;
+  users: UserEntity[] | undefined;
+
+
+  constructor(
+    private route: ActivatedRoute,
+    private locationService: LocationService,
+    private waypointService: WaypointService,
+    private userService: UserService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.locationService.getLocations().subscribe(locations => {
+      this.locations = locations;
+    });
+    this.waypointService.getAllWaypoints().subscribe(waypoints => {
+      this.waypoints = waypoints;
+    });
+    this.userService.getUsers().subscribe(users => {
+      this.users = users;
+    });
+  }
+
+  addUser(name: string, username: string, password: string) {
+    this.newUser = { name: name, username: username, password: password};
+    this.userService.createUser(this.newUser).subscribe(user => {
+      this.users?.push(user);
+    });
+    this.showUserForm = false;
+  }
+
+  addLocation(name: string, region: string, lat: number, lon: number) {
+    this.newLocation = {name: name, region: region, lat: lat, lon: lon};
+    this.locationService.createLocation(this.newLocation).subscribe(location => {
+      this.locations?.push(location);
+    });
+    this.showLocationForm = false;
+  }
+
+  addWaypoint(name: string, lat: string, lon: string, description: string, image: string, locationName: string) {
+    this.newWaypoint = {name: name, lat: lat, lon: lon, description: description, img: image, locationName: locationName};
+    this.waypointService.createWaypoint(this.newWaypoint).subscribe(waypoint => {
+      this.waypoints?.push(waypoint);
+    });
+    this.showWaypointForm = false;
+  }
+
+  openUserForm() {
+    this.showUserForm = true;
+  }
+
+  closeUserForm() {
+    this.showUserForm = false;
+  }
+
+  openLocationForm() {
+    this.showLocationForm = true;
+  }
+
+  closeLocationForm() {
+    this.showLocationForm = false;
+  }
+
+  openWaypointForm() {
+    this.showWaypointForm = true;
+  }
+
+  closeWaypointForm() {
+    this.showWaypointForm = false;
+  }
+}

src/app/home/home.component.ts

@@ -1,12 +1,12 @@
 import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {BehaviorSubject, distinctUntilChanged, fromEvent, Observable, Subject, Subscription} from "rxjs";
 import {ReadjsonService} from "../service/readjson.service";
-import {Locations} from "../interface/data";
 import {Router} from "@angular/router";
-import { TranslateService } from '../service/translate.service';
-import {ReadTranslateJsonService} from "../service/readTranslateJsonService";
+import {TranslateService} from '../service/language/translate.service';
+import {ReadTranslateJsonService} from "../service/language/readTranslateJson.service";
 import {homeTranslations} from "../interface/translations";
-
+import {LocationService} from "../service/http/location.service";
+import {LocationEntity} from "../interface/LocationEntity";
 
 
 @Component({
@@ -14,16 +14,18 @@ import {homeTranslations} from "../interface/translations";
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
+
 export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
+
   @ViewChild('myInput') myInput?: ElementRef;
 
-  public locationsPopup: Subject<Locations[]> = new Subject<Locations[]>()
+  public locationsPopup: Subject<LocationEntity[]> = new Subject<LocationEntity[]>()
 
   subs: Subscription[] = [];
   backgroundColor: string | undefined;
-  locations: Locations[] = [];
+  locations: LocationEntity[] = [];
   allert: boolean = false;
-  locationsFiltrati: Locations[] = [];
+  locationsFiltrati: LocationEntity[] = [];
   luogoSelezionato: string = '';
   suggerimentoAttivo: boolean = false;
   suggerimento: string = '';
@@ -31,21 +33,24 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   translations: homeTranslations = {} as homeTranslations;
 
 
-  constructor(private readjsonService: ReadjsonService, private router: Router, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
+  constructor(
+    private readjsonService: ReadjsonService,
+    private router: Router,
+    private translateService: TranslateService,
+    private readTranslationJsonService: ReadTranslateJsonService,
+    private locationService: LocationService
+  ){
   }
 
+  // Initializes the component and loads translations and locations
   ngOnInit(): void {
     this.translations = this.readTranslationJsonService.getHomeTranslations();
     console.log("translations loaded", this.translations)
-
-    this.readjsonService.getLocations().subscribe(data => {
-      for (let i = 0; i < data.length; i++) {
-        this.locations.push(<Locations>data[i])
-        console.log(data[i])
-      }
-    });
-
-
+    this.locationService.getLocations()
+      .subscribe(locations => {
+        this.locations = locations;
+        console.log("locations loaded", this.locations)
+      });
     this.allert = false;
     console.log("home init");
   }
@@ -55,6 +60,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
 
+  //This method sets up event listeners for input field changes to filter locations.
   ngAfterViewInit() {
 
     if (this.locations != undefined) {
@@ -75,21 +81,30 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     })
   }
 
+  // Filters locations based on user input and shows suggestions
   cercaLuogo(locations: string) {
+    // Delay for 1 second
     setTimeout(() => {
     }, 1000);
-    this.locationsFiltrati = this.locations.filter((l: Locations) => l.location.toLowerCase().startsWith(locations.toLowerCase()));
+    // Filter locations and store in a variable
+    this.locationsFiltrati = this.locations.filter((l: LocationEntity) => l.location.toLowerCase().startsWith(locations.toLowerCase()));
     if (this.locationsFiltrati.length > 0) {
+      // Show suggestion if at least one location is found
       this.suggerimentoAttivo = true;
       this.suggerimento = this.locationsFiltrati[0].location;
+      // Find the difference between user input and suggestion
       this.completamento = stringDifference(locations, this.suggerimento);
     } else {
+      // Hide suggestion if no location is found
       this.suggerimentoAttivo = false;
       this.suggerimento = '';
     }
+    // Focus on input field
     this.myInput?.nativeElement.focus();
   }
 
+  // Selects the suggestion if the user presses "Tab" or "Enter" keys and if there is an active suggestion.
+  // The selected location is then assigned to the "luogoSelezionato" variable, and the suggestion is cleared.
   selezionaSuggerimento(event: KeyboardEvent) {
     if (event.key === 'Tab' || event.key === 'Enter') {
       if (this.suggerimentoAttivo) {
@@ -100,11 +115,9 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-
-  luoghiNear() {
-    return null;
-  }
-
+//Method to handle search functionality.
+// If the selected location is empty, an alert is displayed for 3 seconds.
+// Otherwise, the selected location is encoded and used to navigate to the corresponding location page using Angular router.
   onSearch(): void {
     if (this.luogoSelezionato === '') {
       this.allert = true;
@@ -118,6 +131,10 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  // This async function is used to switch the language of the application.
+  // It takes a language code as input and updates the translations object with new translations for various UI elements.
+  // The getData() method of the translateService is called with the current translations and the new language code.
+  // The translateService returns the translated data which is then assigned to the corresponding properties of the translations object.
   async switchLanguage(lang: string) {
     this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
     this.translations.menuPlaces = await this.translateService.getData(this.translations.menuPlaces, lang);
@@ -128,6 +145,12 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
 }
 
 
+/**
+ * Returns the difference between two strings, by comparing their characters one by one.
+ * @param str1 - First string to compare
+ * @param str2 - Second string to compare
+ * @returns The difference between the two strings
+ */
 function stringDifference(str1: string, str2: string): string {
   let diff = '';
   for (let i = 0; i < str2.length; i++) {

src/app/interface/LocationEntity.ts

@@ -0,0 +1,7 @@
+export interface LocationEntity {
+  location: string;
+  region: string;
+  lat: number;
+  lon: number;
+  distance?: number;
+}

src/app/interface/UserEntity.ts

@@ -0,0 +1,8 @@
+export interface UserEntity {
+    id?: number;
+    name: string;
+    username: string;
+    password: string;
+
+
+}

src/app/interface/WaypointsEntity.ts

@@ -0,0 +1,10 @@
+export interface WaypointsEntity {
+  id: number;
+  name: string;
+  lat: number;
+  lon: number;
+  description: string;
+  img: string;
+  locationName: string;
+  distance?: number;
+}

src/app/interface/WaypointsVisitedEntity.ts

@@ -0,0 +1,4 @@
+export interface WaypointsVisitedEntity {
+  userId: number;
+  waypointId: number;
+}

src/app/list/list.component.ts

@@ -1,126 +0,0 @@
-import {Component, OnInit, SimpleChanges, OnChanges} from '@angular/core';
-import {Locations} from "../interface/data";
-import {ReadjsonService} from "../service/readjson.service";
-import {ActivatedRoute} from "@angular/router";
-import {positionService} from "../service/position.service";
-import {listTranslations} from "../interface/translations";
-import {TranslateService} from "../service/translate.service";
-import {ReadTranslateJsonService} from "../service/readTranslateJsonService";
-
-@Component({
-  selector: 'app-list',
-  templateUrl: './list.component.html',
-  styleUrls: ['./list.component.css']
-})
-export class ListComponent implements OnInit, OnChanges {
-  locationParams: string | undefined
-  locations: Partial<Locations>[] | undefined;
-  location: Partial<Locations> | undefined;
-
-  positionCord: any;
-
-  isNear: boolean = true;
-
-  distance: number[] = [];
-
-  translations: listTranslations = {} as listTranslations
-
-  positionNotFound: boolean = false;
-
-  constructor(private route: ActivatedRoute, private readjsonService: ReadjsonService, private positionService: positionService, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
-  }
-
-  async ngOnInit() {
-    this.translations = this.readTranslationJsonService.getListTransaltions();
-    this.route.params.subscribe(params => {
-      this.locationParams = params['location'];
-    });
-    this.readjsonService.getLocations().subscribe(locations => {
-      this.locations = locations;
-      if (this.locationParams != null) {
-        this.readjsonService.getLocation(this.locationParams ?? "").subscribe(async location => {
-          this.location = location;
-          this.readjsonService.getWaypoints(this.locationParams ?? "").subscribe(waypoints => {
-            if (this.location) {
-              this.location.waypoints = waypoints ?? []
-            }
-          });
-          await this.checkDataPopulated();
-        });
-      }
-    });
-    this.getPosition();
-    this.positionNotFoundFunction();
-  }
-
-  positionNotFoundFunction() {
-    if (!this.positionNotFound) {
-      setTimeout(() => {
-        if (!this.distance[0]) {
-          this.positionNotFound = true;
-
-        }
-      }, 5000);
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['positionCord'] && (changes['positionCord'])) {
-      console.log("onChanges")
-      this.setDistance();
-    }
-  }
-
-
-  private checkDataPopulated(): void {
-    if (this.locations && this.location) {
-      console.log("Dati popolati correttamente:", this.locations, this.location);
-      for (let i = 0; i < this.locations.length; i++) {
-        if (this.locations[i].location === this.locationParams) {
-          this.location = this.locations[i];
-          console.log("Location trovata:", this.location);
-          this.isNear = false;
-          this.setDistance();
-          break;
-        }
-      }
-    }
-  }
-
-  private setDistance(): void {
-    if (this.locations && this.location) {
-      if (this.isNear) {
-        console.log("location lenght " + this.locations.length);
-        for (let i = 0; i < this.locations.length; i++) {
-          console.log("for" + i);
-          console.log("lat" + this.locations[i].lat);
-          this.distance.push(this.positionService.getDistanceBetweenCoordinates(this.locations[i].lat, this.locations[i].lon, this.positionCord.lat, this.positionCord.lon));
-        }
-      } else {
-        if (this.location?.waypoints) {
-          console.log("waypoints lenght " + this.location.waypoints.length);
-          for (let i = 0; i < this.location.waypoints.length; i++) {
-            console.log("for" + i);
-            console.log("lat" + this.location.waypoints[i].lat);
-            this.distance.push(this.positionService.getDistanceBetweenCoordinates(this.location.waypoints[i].lat, this.location.waypoints[i].lon, this.positionCord.lat, this.positionCord.lon));
-          }
-        }
-      }
-    }
-    console.log("ciao" + this.distance[0])
-  }
-
-  getPosition(): any {
-    setInterval(async () => {
-      this.positionCord = await this.positionService.getLocation();
-      this.setDistance();
-    }, 2000);
-  }
-
-  async switchLanguage(lang: string) {
-    this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
-    this.translations.distance = await this.translateService.getData(this.translations.distance, lang);
-    this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
-    this.translations.positionNotFoundErrorMessage = await this.translateService.getData(this.translations.positionNotFoundErrorMessage, lang);
-  }
-}

src/app/service/deepL.service.ts

@@ -1,25 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { environment } from '../../environments/environment';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DeepLService {
-
-  private apiUrl = 'https://api-free.deepl.com/v2/translate';
-  private apiKey = environment.deepLApiKey;
-
-  constructor(private http: HttpClient) { }
-
-  translate(text: string, targetLang: string): Observable<any> {
-    const params = new HttpParams()
-      .set('auth_key', this.apiKey)
-      .set('text', text)
-      .set('target_lang', targetLang);
-
-    return this.http.post(this.apiUrl, params);
-  }
-
-}

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

@@ -0,0 +1,39 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {LocationEntity} from "../../interface/LocationEntity";
+
+const BASE_URL = "progetto152";
+const LOCATION = BASE_URL + "/location";
+
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class LocationService {
+  constructor(
+    private http: HttpClient,
+  ) {
+  }
+
+  getLocations() {
+    return this.http.get<LocationEntity[]>(LOCATION);
+  }
+
+  getLocation(location: string) {
+    return this.http.get<LocationEntity>(LOCATION + "/" + location);
+  }
+
+  createLocation(location: LocationEntity) {
+    return this.http.post<LocationEntity>(LOCATION, location);
+  }
+
+  updateLocation(location: LocationEntity) {
+    return this.http.put<LocationEntity>(LOCATION, location);
+  }
+
+  deleteLocation(id: number) {
+    return this.http.delete<LocationEntity>(LOCATION + id);
+  }
+
+}

src/app/service/http/user.service.ts

@@ -0,0 +1,43 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {UserEntity} from "../../interface/UserEntity";
+
+const BASE_URL = "progetto152";
+const USER = BASE_URL + "/user";
+const GET_USER_BY_ID = USER + "/id";
+
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class UserService {
+  constructor(
+    private http: HttpClient,
+  ) {
+  }
+
+  getUsers() {
+    return this.http.get<UserEntity[]>(USER);
+  }
+
+  getUser(username: string) {
+    return this.http.get<UserEntity>(USER + "/" + username);
+  }
+
+  getUserById(id: number) {
+    return this.http.get<UserEntity>(GET_USER_BY_ID + "/" + id);
+  }
+
+  createUser(user: UserEntity) {
+    return this.http.post<UserEntity>(USER, user);
+  }
+
+  updateUser(user: UserEntity, id: number) {
+    return this.http.put<UserEntity>(USER + id, user);
+  }
+
+  deleteUser(id: number) {
+    return this.http.delete<UserEntity>(USER + id);
+  }
+}

src/app/service/http/waypoint.service.ts

@@ -0,0 +1,49 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {WaypointsEntity} from "../../interface/WaypointsEntity";
+import {catchError, throwError} from "rxjs";
+
+const BASE_URL = "progetto152";
+const WAYPOINT = BASE_URL + "/waypoint";
+const GET_WAYPOINT_BY_ID = WAYPOINT + "id/";
+
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class WaypointService {
+  constructor(
+    private http: HttpClient,
+  ) {
+  }
+
+  getAllWaypoints() {
+    return this.http.get<WaypointsEntity[]>(WAYPOINT);
+  }
+
+  getWaypoints(location: string) {
+    return this.http.get<WaypointsEntity[]>(WAYPOINT + "/" + location)
+
+  }
+
+  getWaypoint(location: string, id: number) {
+    return this.http.get<WaypointsEntity>(WAYPOINT + "/" + location + "/" + id);
+  }
+
+  getWaypointById(id: number) {
+    return this.http.get<WaypointsEntity>(GET_WAYPOINT_BY_ID + id);
+  }
+
+  createWaypoint(waypoint: WaypointsEntity) {
+    return this.http.post<WaypointsEntity>(WAYPOINT, waypoint);
+  }
+
+  updateWaypoint(waypoint: WaypointsEntity, id: number) {
+    return this.http.put<WaypointsEntity>(WAYPOINT + "/" + id, waypoint);
+  }
+
+  deleteWaypoint(id: number) {
+    return this.http.delete<WaypointsEntity>(WAYPOINT + id);
+  }
+}

src/app/service/http/waypointVisited.service.ts

@@ -0,0 +1,45 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {catchError, Observable} from "rxjs";
+import {LocationEntity} from "../../interface/LocationEntity";
+import {WaypointsEntity} from "../../interface/WaypointsEntity";
+
+const BASE_URL = "progetto152";
+const WAYPOINT_VISITED = BASE_URL + "/waypoint/visited/";
+const GET_WAYPOINT_BY_USER = WAYPOINT_VISITED + "USER/";
+
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class WaypointVisitedService {
+  constructor(
+    private http: HttpClient,
+  ) {
+  }
+
+  getWaypoints() {
+    return this.http.get<WaypointsEntity[]>(WAYPOINT_VISITED);
+  }
+
+  getwaypointVisited(id: number) {
+    return this.http.get<WaypointsEntity>(WAYPOINT_VISITED + id);
+  }
+
+  getWaypointByUser(user: string) {
+    return this.http.get<WaypointsEntity[]>(GET_WAYPOINT_BY_USER + user);
+  }
+
+  createWaypoint(waypoint: WaypointsEntity) {
+    return this.http.post<WaypointsEntity>(WAYPOINT_VISITED, waypoint);
+  }
+
+  updateWaypoint(waypoint: WaypointsEntity, id: number) {
+    return this.http.put<WaypointsEntity>(WAYPOINT_VISITED + id, waypoint);
+  }
+
+  deleteWaypoint(id: number) {
+    return this.http.delete<WaypointsEntity>(WAYPOINT_VISITED + id);
+  }
+}

src/app/service/language/deepL.service.ts

@@ -0,0 +1,30 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpParams} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {environment} from '../../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DeepLService {
+
+  // Define the base URL for the DeepL API and the API key, taken from the environment configuration
+  private apiUrl = 'https://api-free.deepl.com/v2/translate';
+  private apiKey = environment.deepLApiKey;
+
+  constructor(private http: HttpClient) {
+  }
+
+  // Define the method for translating text, which takes the text to be translated and the target language as parameters
+  translate(text: string, targetLang: string): Observable<any> {
+    // Define the parameters to be passed to the API, including the API key and the text and target language to be translated
+    const params = new HttpParams()
+      .set('auth_key', this.apiKey)
+      .set('text', text)
+      .set('target_lang', targetLang);
+
+    // Make a POST request to the API using the HttpClient and the defined parameters, and return the response as an Observable
+    return this.http.post(this.apiUrl, params);
+  }
+
+}

src/app/service/language/readTranslateJson.service.ts

@@ -1,16 +1,17 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
-import {homeTranslations} from "../interface/translations";
-import {listTranslations} from "../interface/translations";
+import {homeTranslations} from "../../interface/translations";
+import {listTranslations} from "../../interface/translations";
 
 @Injectable({
   providedIn: 'root'
 })
 export class ReadTranslateJsonService {
-  private homeTranslations: homeTranslations = {} as homeTranslations;
-  private listTranslation: listTranslations = {} as listTranslations;
+  private homeTranslations: homeTranslations = {} as homeTranslations;  // declares a private object to hold the home translations
+  private listTranslation: listTranslations = {} as listTranslations;  // declares a private object to hold the list translations
 
   constructor(private http: HttpClient) {
+    // loads the home translations from the assets file for the English language
     this.http.get<homeTranslations>('assets/i18n/home/en.json').subscribe(data => {
       this.homeTranslations.alertMessage = data.alertMessage;
       this.homeTranslations.translate = data.translate;
@@ -20,6 +21,7 @@ export class ReadTranslateJsonService {
       console.log("data loaded", this.homeTranslations)
     });
 
+    // loads the list translations from the assets file for the English language
     this.http.get<listTranslations>('assets/i18n/list/en.json').subscribe(data => {
       this.listTranslation.translate = data.translate;
       this.listTranslation.distance = data.distance;
@@ -29,10 +31,12 @@ export class ReadTranslateJsonService {
     });
   }
 
+  // returns the home translations object
   getHomeTranslations(): homeTranslations {
     return this.homeTranslations;
   }
 
+  // returns the list translations object
   getListTransaltions(): listTranslations {
     return this.listTranslation;
   }

src/app/service/language/translate.service.ts

@@ -7,8 +7,11 @@ import {Injectable} from "@angular/core";
 export class TranslateService {
   constructor(private deepLService: DeepLService) {}
 
+  // Method for translating the given input to the given language
   async getData(input: string, lang: string): Promise<string> {
+    // Translating the input using the DeepLService and waiting for the response
     const response = await this.deepLService.translate(input, lang).toPromise();
+    // Returning the translated text from the response
     return response.translations[0].text;
   }
 }

src/styles.css

@@ -4,5 +4,5 @@
 @tailwind utilities;
 
 body{
-  overflow-y: hidden;
+  
 }