From 19d86de2850f301f8848ddb07a0cebdbba00e962 Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Fri, 28 Apr 2023 09:10:11 +0200
Subject: [PATCH 01/17] added comments

---
 src/app/home/home.component.ts              | 34 ++++++++++++++++-----
 src/app/service/deepL.service.ts            | 15 ++++++---
 src/app/service/readTranslateJsonService.ts |  8 +++--
 src/app/service/translate.service.ts        |  3 ++
 4 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 5941ebe..fb435c3 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -3,18 +3,19 @@ import {BehaviorSubject, distinctUntilChanged, fromEvent, Observable, Subject, S
 import {ReadjsonService} from "../service/readjson.service";
 import {Locations} from "../interface/data";
 import {Router} from "@angular/router";
-import { TranslateService } from '../service/translate.service';
+import {TranslateService} from '../service/translate.service';
 import {ReadTranslateJsonService} from "../service/readTranslateJsonService";
 import {homeTranslations} from "../interface/translations";
 
 
-
 @Component({
   selector: 'app-home',
   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[]>()
@@ -34,6 +35,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   constructor(private readjsonService: ReadjsonService, private router: Router, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
   }
 
+  // Initializes the component and loads translations and locations
   ngOnInit(): void {
     this.translations = this.readTranslationJsonService.getHomeTranslations();
     console.log("translations loaded", this.translations)
@@ -55,6 +57,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 +78,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);
+    // Filter locations and store in a variable
     this.locationsFiltrati = this.locations.filter((l: Locations) => 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 +112,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 +128,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 +142,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++) {
diff --git a/src/app/service/deepL.service.ts b/src/app/service/deepL.service.ts
index 537b4e9..233bee5 100644
--- a/src/app/service/deepL.service.ts
+++ b/src/app/service/deepL.service.ts
@@ -1,24 +1,29 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { environment } from '../../environments/environment';
+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) { }
+  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);
   }
 
diff --git a/src/app/service/readTranslateJsonService.ts b/src/app/service/readTranslateJsonService.ts
index 53d0381..8d5feac 100644
--- a/src/app/service/readTranslateJsonService.ts
+++ b/src/app/service/readTranslateJsonService.ts
@@ -7,10 +7,11 @@ import {listTranslations} from "../interface/translations";
   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;
   }
diff --git a/src/app/service/translate.service.ts b/src/app/service/translate.service.ts
index 5c08f17..8a30782 100644
--- a/src/app/service/translate.service.ts
+++ b/src/app/service/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;
   }
 }

From f9774055ada372fa7aa9b150c98aeb6225c82ece Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Fri, 28 Apr 2023 11:47:55 +0200
Subject: [PATCH 02/17] added management page

---
 src/app/app-routing.module.ts                |   2 +
 src/app/app.module.ts                        |   3 +-
 src/app/management/management.component.css  | 141 +++++++++++++++
 src/app/management/management.component.html | 174 +++++++++++++++++++
 src/app/management/management.component.ts   | 119 +++++++++++++
 5 files changed, 438 insertions(+), 1 deletion(-)
 create mode 100644 src/app/management/management.component.css
 create mode 100644 src/app/management/management.component.html
 create mode 100644 src/app/management/management.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 14d17d8..c476583 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,11 +3,13 @@ import {RouterModule} from '@angular/router';
 import {HomeComponent} from './home/home.component';
 import {DetailComponent} from "./detail/detail.component";
 import {ListComponent} from "./list/list.component";
+import {ManagementComponent} from "./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'}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4a9c5f4..a74bc39 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,13 +9,14 @@ import { DetailComponent } from './detail/detail.component';
 import {FormsModule} from "@angular/forms";
 import { HttpClientModule} from "@angular/common/http";
 import { SafePipe } from './pipes/safe.pipe';
-
+import { ManagementComponent } from './management/management.component';
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
     ListComponent,
     DetailComponent,
+    ManagementComponent,
     SafePipe,
   ],
   imports: [
diff --git a/src/app/management/management.component.css b/src/app/management/management.component.css
new file mode 100644
index 0000000..d4da017
--- /dev/null
+++ b/src/app/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;
+}
diff --git a/src/app/management/management.component.html b/src/app/management/management.component.html
new file mode 100644
index 0000000..c75c853
--- /dev/null
+++ b/src/app/management/management.component.html
@@ -0,0 +1,174 @@
+<!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 userList">
+    <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">Email:</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 locationList">
+    <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="text" id="lat" name="lat" [(ngModel)]="newLocation.lat">
+      </div>
+
+      <div>
+        <label for="lon">Longitude:</label>
+        <input type="text" 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 waypointList">
+    <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)]="newLocation.location">
+      </div>
+
+      <div>
+        <label for="waypointLat">Latitude:</label>
+        <input type="text" id="waypointLat" name="waypointLat" [(ngModel)]="newLocation.location">
+      </div>
+
+      <div>
+        <label for="waypointLon">Longitude:</label>
+        <input type="text" id="waypointLon" name="waypointLon" [(ngModel)]="newLocation.location">
+      </div>
+
+      <div>
+        <label for="description">Description:</label>
+        <input type="text" id="description" name="description" [(ngModel)]="newLocation.location">
+      </div>
+
+      <div>
+        <label for="image">Image (Base64):</label>
+        <input type="text" id="image" name="image" [(ngModel)]="newLocation.location">
+      </div>
+
+      <div>
+        <label for="locationName">Location Name:</label>
+        <select [(ngModel)]="newWaypoint.locationName" id="locationName">
+          <option *ngFor="let location of locationList" [value]="location.location">{{ location.location }}</option>
+        </select>
+      </div>
+
+      <button type="submit">Add Waypoint</button>
+    </form>
+    <button (click)="closeWaypointForm()">Close</button>
+  </div>
+</div>
+</body>
+</html>
diff --git a/src/app/management/management.component.ts b/src/app/management/management.component.ts
new file mode 100644
index 0000000..743ee25
--- /dev/null
+++ b/src/app/management/management.component.ts
@@ -0,0 +1,119 @@
+import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+
+interface User {
+  id: number;
+  name: string;
+  username: string;
+  password: string;
+}
+
+interface Location {
+  id: number;
+  location: string;
+  region: string;
+  lat: string;
+  lon: string;
+}
+
+interface Waypoint {
+  id: number;
+  name: string;
+  lat: string;
+  lon: string;
+  description: string;
+  image: string;
+  locationName: string;
+}
+
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './management.component.html',
+  styleUrls: ['./management.component.css']
+})
+
+export class ManagementComponent implements OnInit, AfterViewInit, OnDestroy {
+  showUserForm: boolean = false;
+  showLocationForm: boolean = false;
+  showWaypointForm: boolean = false;
+  newUser: User = {id: 0, name: '', username: '', password: ''};
+  newLocation: Location = {id: 0, location: '', region: '', lat: '', lon: ''};
+  newWaypoint: Waypoint = {id: 0, name: '', lat: '', lon: '', description: '', image: '', locationName: ''};
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+
+  }
+
+  ngOnDestroy() {
+
+  }
+
+
+  ngAfterViewInit() {
+
+  }
+
+  userList: User[] = [
+    {id: 1, name: 'John', username: 'john@test.com', password: '0790000000'},
+    {id: 2, name: 'Jane', username: 'jane@test.com', password: '0790000001'},
+    {id: 3, name: 'Bob', username: 'bob@test.com', password: '0790000002'},
+  ];
+
+  locationList: Location[] = [
+    {id: 1, location: 'New York', region: "US", lat: "40.7128", lon: "74.0060"},
+    {id: 2, location: 'London', region: "UK", lat: "51.5074", lon: "0.1278"},
+    {id: 3, location: 'Paris', region: "FR", lat: "48.8566", lon: "2.3522"},
+  ];
+
+  waypointList: Waypoint[] = [
+    {id: 1, name: 'Statue of Liberty', lat: "40.6892", lon: "74.0445", description: "Statue of Liberty", image: "", locationName: "New York"},
+    {id: 2, name: 'Big Ben', lat: "51.5007", lon: "0.1246", description: "Big Ben", image: "", locationName: "London"},
+    {id: 3, name: 'Eiffel Tower', lat: "48.8584", lon: "2.2945", description: "Eiffel Tower", image: "", locationName: "Paris"},
+  ];
+
+  addUser(name: string, username: string, password: string) {
+    const id = this.userList.length + 1;
+    const newUser: User = {id, name, username: username, password: password};
+    this.userList.push(newUser);
+    this.showUserForm = false;
+  }
+
+  addLocation(name: string, region: string, lat: string, lon: string) {
+    const id = this.locationList.length + 1;
+    const newLocation: Location = {id, location: name, region: region, lat: lat, lon: lon};
+    this.locationList.push(newLocation);
+  }
+
+  addWaypoint(name: string, lat: string, lon: string, description: string, image: string, locationName: string) {
+    const id = this.waypointList.length + 1;
+    const newWaypoint: Waypoint = {id, name, lat: lat, lon: lon, description: description, image: image, locationName: locationName};
+    this.waypointList.push(newWaypoint);
+  }
+
+  openUserForm() {
+    this.showUserForm = true;
+  }
+
+  closeUserForm() {
+    this.showUserForm = false;
+  }
+
+  openLocationForm() {
+    this.showLocationForm = true;
+  }
+
+  closeLocationForm() {
+    this.showLocationForm = false;
+  }
+
+  openWaypointForm() {
+    this.showWaypointForm = true;
+  }
+
+  closeWaypointForm() {
+    this.showWaypointForm = false;
+  }
+}

From 9c292852168e9a12288bbddaea7c33aea7ea8679 Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Fri, 28 Apr 2023 13:42:43 +0200
Subject: [PATCH 03/17] fixed management page

---
 src/app/management/management.component.html | 14 +++++++-------
 src/app/management/management.component.ts   |  6 ++++++
 src/styles.css                               |  2 +-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/management/management.component.html b/src/app/management/management.component.html
index c75c853..2ffa158 100644
--- a/src/app/management/management.component.html
+++ b/src/app/management/management.component.html
@@ -36,7 +36,7 @@
         <input type="text" id="name" name="name" [(ngModel)]="newUser.name">
       </div>
       <div>
-        <label for="username">Email:</label>
+        <label for="username">Username:</label>
         <input type="text" id="username" name="username" [(ngModel)]="newUser.username">
       </div>
       <div>
@@ -135,32 +135,32 @@
     <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)]="newLocation.location">
+        <input type="text" id="waypointName" name="waypointName" [(ngModel)]="newWaypoint.name">
       </div>
 
       <div>
         <label for="waypointLat">Latitude:</label>
-        <input type="text" id="waypointLat" name="waypointLat" [(ngModel)]="newLocation.location">
+        <input type="text" id="waypointLat" name="waypointLat" [(ngModel)]="newWaypoint.lat">
       </div>
 
       <div>
         <label for="waypointLon">Longitude:</label>
-        <input type="text" id="waypointLon" name="waypointLon" [(ngModel)]="newLocation.location">
+        <input type="text" id="waypointLon" name="waypointLon" [(ngModel)]="newWaypoint.lon">
       </div>
 
       <div>
         <label for="description">Description:</label>
-        <input type="text" id="description" name="description" [(ngModel)]="newLocation.location">
+        <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)]="newLocation.location">
+        <input type="text" id="image" name="image" [(ngModel)]="newWaypoint.image">
       </div>
 
       <div>
         <label for="locationName">Location Name:</label>
-        <select [(ngModel)]="newWaypoint.locationName" id="locationName">
+        <select [(ngModel)]="newWaypoint.locationName" id="locationName" name="locationName">
           <option *ngFor="let location of locationList" [value]="location.location">{{ location.location }}</option>
         </select>
       </div>
diff --git a/src/app/management/management.component.ts b/src/app/management/management.component.ts
index 743ee25..6c6240c 100644
--- a/src/app/management/management.component.ts
+++ b/src/app/management/management.component.ts
@@ -79,18 +79,24 @@ export class ManagementComponent implements OnInit, AfterViewInit, OnDestroy {
     const newUser: User = {id, name, username: username, password: password};
     this.userList.push(newUser);
     this.showUserForm = false;
+    this.newUser = {id: 0, name: '', username: '', password: ''};
   }
 
   addLocation(name: string, region: string, lat: string, lon: string) {
     const id = this.locationList.length + 1;
     const newLocation: Location = {id, location: name, region: region, lat: lat, lon: lon};
     this.locationList.push(newLocation);
+    this.showLocationForm = false;
+    this.newLocation = {id: 0, location: '', region: '', lat: '', lon: ''};
   }
 
   addWaypoint(name: string, lat: string, lon: string, description: string, image: string, locationName: string) {
+    console.log(locationName)
     const id = this.waypointList.length + 1;
     const newWaypoint: Waypoint = {id, name, lat: lat, lon: lon, description: description, image: image, locationName: locationName};
     this.waypointList.push(newWaypoint);
+    this.showWaypointForm = false;
+    this.newWaypoint = {id: 0, name: '', lat: '', lon: '', description: '', image: '', locationName: ''};
   }
 
   openUserForm() {
diff --git a/src/styles.css b/src/styles.css
index 7dca88b..57c6aa5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4,5 +4,5 @@
 @tailwind utilities;
 
 body{
-  overflow-y: hidden;
+  
 }

From 1222172e1ce84f95df0ca46353ed3e22039782f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Fri, 28 Apr 2023 13:46:06 +0200
Subject: [PATCH 04/17] Adding entity for api

---
 src/app/interface/LocationEntity.ts         | 6 ++++++
 src/app/interface/UserEntity.ts             | 6 ++++++
 src/app/interface/WaypointsEntity.ts        | 9 +++++++++
 src/app/interface/WaypointsVisitedEntity.ts | 4 ++++
 4 files changed, 25 insertions(+)
 create mode 100644 src/app/interface/LocationEntity.ts
 create mode 100644 src/app/interface/UserEntity.ts
 create mode 100644 src/app/interface/WaypointsEntity.ts
 create mode 100644 src/app/interface/WaypointsVisitedEntity.ts

diff --git a/src/app/interface/LocationEntity.ts b/src/app/interface/LocationEntity.ts
new file mode 100644
index 0000000..7fb3a65
--- /dev/null
+++ b/src/app/interface/LocationEntity.ts
@@ -0,0 +1,6 @@
+export interface LocationEntity {
+  location: string;
+  region: string;
+  lat: number;
+  lon: number;
+}
diff --git a/src/app/interface/UserEntity.ts b/src/app/interface/UserEntity.ts
new file mode 100644
index 0000000..d8e7af6
--- /dev/null
+++ b/src/app/interface/UserEntity.ts
@@ -0,0 +1,6 @@
+export interface UserEntity {
+    id: number;
+    name: string;
+    username: string;
+    password: string;
+}
diff --git a/src/app/interface/WaypointsEntity.ts b/src/app/interface/WaypointsEntity.ts
new file mode 100644
index 0000000..016dd2b
--- /dev/null
+++ b/src/app/interface/WaypointsEntity.ts
@@ -0,0 +1,9 @@
+export interface WaypointsEntity {
+  id: number;
+  name: string;
+  lat: number;
+  lon: number;
+  description: string;
+  img: string;
+  locationName: string;
+}
diff --git a/src/app/interface/WaypointsVisitedEntity.ts b/src/app/interface/WaypointsVisitedEntity.ts
new file mode 100644
index 0000000..5490cfa
--- /dev/null
+++ b/src/app/interface/WaypointsVisitedEntity.ts
@@ -0,0 +1,4 @@
+export interface WaypointsVisitedEntity {
+  userId: number;
+  waypointId: number;
+}

From 4ccd2fa70a2152eeac20821385153ff5866b31dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Fri, 28 Apr 2023 13:46:44 +0200
Subject: [PATCH 05/17] proxy configuration

---
 package.json    | 2 +-
 proxy.conf.json | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 proxy.conf.json

diff --git a/package.json b/package.json
index f8e2874..b2336c8 100644
--- a/package.json
+++ b/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"
diff --git a/proxy.conf.json b/proxy.conf.json
new file mode 100644
index 0000000..daa95f5
--- /dev/null
+++ b/proxy.conf.json
@@ -0,0 +1,8 @@
+{
+  "/progetto152/*": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "logLevel": "debug",
+    "changeOrigin": true
+  }
+}

From a49297aea59db758b6f3c33e9996e5b110ec8a72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Fri, 28 Apr 2023 13:48:02 +0200
Subject: [PATCH 06/17] first version of location service

---
 src/app/home/home.component.ts      | 33 ++++++++++++++++-------------
 src/app/service/location.service.ts | 25 ++++++++++++++++++++++
 2 files changed, 43 insertions(+), 15 deletions(-)
 create mode 100644 src/app/service/location.service.ts

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index fb435c3..cee0c2a 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,11 +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 {homeTranslations} from "../interface/translations";
+import {LocationService} from "../service/location.service";
+import {LocationEntity} from "../interface/LocationEntity";
 
 
 @Component({
@@ -18,13 +19,13 @@ 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 = '';
@@ -32,22 +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");
   }
@@ -84,7 +87,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     setTimeout(() => {
     }, 1000);
     // Filter locations and store in a variable
-    this.locationsFiltrati = this.locations.filter((l: Locations) => l.location.toLowerCase().startsWith(locations.toLowerCase()));
+    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;
diff --git a/src/app/service/location.service.ts b/src/app/service/location.service.ts
new file mode 100644
index 0000000..5916516
--- /dev/null
+++ b/src/app/service/location.service.ts
@@ -0,0 +1,25 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {catchError, Observable} from "rxjs";
+import {LocationEntity} from "../interface/LocationEntity";
+
+const BASE_URL = "localhost:8080/progetto152/";
+const GET_LOCATIONS = BASE_URL + "location";
+
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class LocationService {
+  constructor(
+    private http: HttpClient,
+  ) {}
+
+  getLocations(){
+    return this.http.get<LocationEntity[]>("/progetto152/location");
+  }
+
+
+
+}

From 579cfbf4bcc00aaa5b5d4f55e7da7c1000d4de06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sat, 29 Apr 2023 12:29:49 +0200
Subject: [PATCH 07/17] service for entity created

---
 src/app/service/http/location.service.ts      | 39 ++++++++++++++++
 src/app/service/http/user.service.ts          | 43 ++++++++++++++++++
 src/app/service/http/waypoint.service.ts      | 43 ++++++++++++++++++
 .../service/http/waypointVisited.service.ts   | 45 +++++++++++++++++++
 src/app/service/location.service.ts           | 25 -----------
 5 files changed, 170 insertions(+), 25 deletions(-)
 create mode 100644 src/app/service/http/location.service.ts
 create mode 100644 src/app/service/http/user.service.ts
 create mode 100644 src/app/service/http/waypoint.service.ts
 create mode 100644 src/app/service/http/waypointVisited.service.ts
 delete mode 100644 src/app/service/location.service.ts

diff --git a/src/app/service/http/location.service.ts b/src/app/service/http/location.service.ts
new file mode 100644
index 0000000..398d4f4
--- /dev/null
+++ b/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 = "localhost:8080/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);
+  }
+
+}
diff --git a/src/app/service/http/user.service.ts b/src/app/service/http/user.service.ts
new file mode 100644
index 0000000..c750706
--- /dev/null
+++ b/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 = "localhost:8080/progetto152/";
+const USER = BASE_URL + "user/";
+const GET_USER_BY_ID = USER + "id/";
+
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class LocationService {
+  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);
+  }
+}
diff --git a/src/app/service/http/waypoint.service.ts b/src/app/service/http/waypoint.service.ts
new file mode 100644
index 0000000..8784c5d
--- /dev/null
+++ b/src/app/service/http/waypoint.service.ts
@@ -0,0 +1,43 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {WaypointsEntity} from "../../interface/WaypointsEntity";
+
+const BASE_URL = "localhost:8080/progetto152/";
+const WAYPOINT = BASE_URL + "waypoint/";
+const GET_WAYPOINT_BY_ID = WAYPOINT + "id/";
+
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class LocationService {
+  constructor(
+    private http: HttpClient,
+  ) {
+  }
+
+  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);
+  }
+}
diff --git a/src/app/service/http/waypointVisited.service.ts b/src/app/service/http/waypointVisited.service.ts
new file mode 100644
index 0000000..3ec45ad
--- /dev/null
+++ b/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 = "localhost:8080/progetto152/";
+const WAYPOINT_VISITED = BASE_URL + "waypoint/visited/";
+const GET_WAYPOINT_BY_USER = WAYPOINT_VISITED + "USER/";
+
+
+@Injectable({
+  providedIn: 'root',
+})
+
+export class LocationService {
+  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);
+  }
+}
diff --git a/src/app/service/location.service.ts b/src/app/service/location.service.ts
deleted file mode 100644
index 5916516..0000000
--- a/src/app/service/location.service.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {Injectable} from "@angular/core";
-import {HttpClient} from "@angular/common/http";
-import {catchError, Observable} from "rxjs";
-import {LocationEntity} from "../interface/LocationEntity";
-
-const BASE_URL = "localhost:8080/progetto152/";
-const GET_LOCATIONS = BASE_URL + "location";
-
-
-@Injectable({
-  providedIn: 'root',
-})
-
-export class LocationService {
-  constructor(
-    private http: HttpClient,
-  ) {}
-
-  getLocations(){
-    return this.http.get<LocationEntity[]>("/progetto152/location");
-  }
-
-
-
-}

From 4fb1254728fa0aefffe0d01de8084d21e75f2db8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sat, 29 Apr 2023 12:31:11 +0200
Subject: [PATCH 08/17] fix getLocations in home component

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

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index cee0c2a..649451d 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -2,10 +2,10 @@ import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from
 import {BehaviorSubject, distinctUntilChanged, fromEvent, Observable, Subject, Subscription} from "rxjs";
 import {ReadjsonService} from "../service/readjson.service";
 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/location.service";
+import {LocationService} from "../service/http/location.service";
 import {LocationEntity} from "../interface/LocationEntity";
 
 

From 5e1062593a631455d890320c3af9f6d5685f6473 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sat, 29 Apr 2023 12:31:22 +0200
Subject: [PATCH 09/17] change path

---
 src/app/service/{ => language}/deepL.service.ts               | 2 +-
 .../readTranslateJson.service.ts}                             | 4 ++--
 src/app/service/{ => language}/translate.service.ts           | 0
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename src/app/service/{ => language}/deepL.service.ts (94%)
 rename src/app/service/{readTranslateJsonService.ts => language/readTranslateJson.service.ts} (93%)
 rename src/app/service/{ => language}/translate.service.ts (100%)

diff --git a/src/app/service/deepL.service.ts b/src/app/service/language/deepL.service.ts
similarity index 94%
rename from src/app/service/deepL.service.ts
rename to src/app/service/language/deepL.service.ts
index 233bee5..7f21290 100644
--- a/src/app/service/deepL.service.ts
+++ b/src/app/service/language/deepL.service.ts
@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpParams} from '@angular/common/http';
 import {Observable} from 'rxjs';
-import {environment} from '../../environments/environment';
+import {environment} from '../../../environments/environment';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/service/readTranslateJsonService.ts b/src/app/service/language/readTranslateJson.service.ts
similarity index 93%
rename from src/app/service/readTranslateJsonService.ts
rename to src/app/service/language/readTranslateJson.service.ts
index 8d5feac..172c6a6 100644
--- a/src/app/service/readTranslateJsonService.ts
+++ b/src/app/service/language/readTranslateJson.service.ts
@@ -1,7 +1,7 @@
 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'
diff --git a/src/app/service/translate.service.ts b/src/app/service/language/translate.service.ts
similarity index 100%
rename from src/app/service/translate.service.ts
rename to src/app/service/language/translate.service.ts

From 11b0d87a66923fb4a4cab219489b5669d930552c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sat, 29 Apr 2023 12:31:28 +0200
Subject: [PATCH 10/17] fix

---
 src/app/list/list.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts
index 61cc031..331b058 100644
--- a/src/app/list/list.component.ts
+++ b/src/app/list/list.component.ts
@@ -4,8 +4,8 @@ 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";
+import {TranslateService} from "../service/language/translate.service";
+import {ReadTranslateJsonService} from "../service/language/readTranslateJson.service";
 
 @Component({
   selector: 'app-list',

From e42ecade5dfef73be036ad43b181302e085af4b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sat, 29 Apr 2023 16:21:57 +0200
Subject: [PATCH 11/17] change directory

---
 src/app/app-routing.module.ts                        |  6 +++---
 src/app/app.module.ts                                |  6 +++---
 src/app/{ => component}/detail/detail.component.css  |  0
 src/app/{ => component}/detail/detail.component.html |  2 +-
 src/app/{ => component}/detail/detail.component.ts   |  2 +-
 src/app/{ => component}/list/list.component.css      |  0
 src/app/{ => component}/list/list.component.html     |  0
 src/app/{ => component}/list/list.component.ts       | 12 ++++++------
 .../management/management.component.css              |  0
 .../management/management.component.html             |  0
 .../management/management.component.ts               |  0
 11 files changed, 14 insertions(+), 14 deletions(-)
 rename src/app/{ => component}/detail/detail.component.css (100%)
 rename src/app/{ => component}/detail/detail.component.html (97%)
 rename src/app/{ => component}/detail/detail.component.ts (98%)
 rename src/app/{ => component}/list/list.component.css (100%)
 rename src/app/{ => component}/list/list.component.html (100%)
 rename src/app/{ => component}/list/list.component.ts (91%)
 rename src/app/{ => component}/management/management.component.css (100%)
 rename src/app/{ => component}/management/management.component.html (100%)
 rename src/app/{ => component}/management/management.component.ts (100%)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c476583..f155878 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,9 +1,9 @@
 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 {ManagementComponent} from "./management/management.component";
+import {DetailComponent} from "./component/detail/detail.component";
+import {ListComponent} from "./component/list/list.component";
+import {ManagementComponent} from "./component/management/management.component";
 
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a74bc39..d9ff059 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,12 +4,12 @@ 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 './management/management.component';
+import { ManagementComponent } from './component/management/management.component';
 @NgModule({
   declarations: [
     AppComponent,
diff --git a/src/app/detail/detail.component.css b/src/app/component/detail/detail.component.css
similarity index 100%
rename from src/app/detail/detail.component.css
rename to src/app/component/detail/detail.component.css
diff --git a/src/app/detail/detail.component.html b/src/app/component/detail/detail.component.html
similarity index 97%
rename from src/app/detail/detail.component.html
rename to src/app/component/detail/detail.component.html
index b6e3cde..239ecf5 100644
--- a/src/app/detail/detail.component.html
+++ b/src/app/component/detail/detail.component.html
@@ -32,7 +32,7 @@
     </div>
 
     <div class="p-4">
-      <img class="w-full" src="assets/testDetail/img.png" alt="image">
+      <img class="w-full" src="../../../assets/testDetail/img.png" alt="image">
     </div>
 
     <div class="p-4 col-start-1 col-span-2 lg:col-start-2 lg:col-span-1">
diff --git a/src/app/detail/detail.component.ts b/src/app/component/detail/detail.component.ts
similarity index 98%
rename from src/app/detail/detail.component.ts
rename to src/app/component/detail/detail.component.ts
index 9350e21..726954f 100755
--- a/src/app/detail/detail.component.ts
+++ b/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({
diff --git a/src/app/list/list.component.css b/src/app/component/list/list.component.css
similarity index 100%
rename from src/app/list/list.component.css
rename to src/app/component/list/list.component.css
diff --git a/src/app/list/list.component.html b/src/app/component/list/list.component.html
similarity index 100%
rename from src/app/list/list.component.html
rename to src/app/component/list/list.component.html
diff --git a/src/app/list/list.component.ts b/src/app/component/list/list.component.ts
similarity index 91%
rename from src/app/list/list.component.ts
rename to src/app/component/list/list.component.ts
index 331b058..edcb69b 100644
--- a/src/app/list/list.component.ts
+++ b/src/app/component/list/list.component.ts
@@ -1,11 +1,11 @@
 import {Component, OnInit, SimpleChanges, OnChanges} from '@angular/core';
-import {Locations} from "../interface/data";
-import {ReadjsonService} from "../service/readjson.service";
+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/language/translate.service";
-import {ReadTranslateJsonService} from "../service/language/readTranslateJson.service";
+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";
 
 @Component({
   selector: 'app-list',
diff --git a/src/app/management/management.component.css b/src/app/component/management/management.component.css
similarity index 100%
rename from src/app/management/management.component.css
rename to src/app/component/management/management.component.css
diff --git a/src/app/management/management.component.html b/src/app/component/management/management.component.html
similarity index 100%
rename from src/app/management/management.component.html
rename to src/app/component/management/management.component.html
diff --git a/src/app/management/management.component.ts b/src/app/component/management/management.component.ts
similarity index 100%
rename from src/app/management/management.component.ts
rename to src/app/component/management/management.component.ts

From ff3fb43cb0ccf89c5801600aec808f03fef52b84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sat, 29 Apr 2023 20:26:49 +0200
Subject: [PATCH 12/17] fix service

---
 src/app/service/http/location.service.ts        |  6 +++---
 src/app/service/http/user.service.ts            | 12 ++++++------
 src/app/service/http/waypoint.service.ts        | 14 ++++++++------
 src/app/service/http/waypointVisited.service.ts |  6 +++---
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/app/service/http/location.service.ts b/src/app/service/http/location.service.ts
index 398d4f4..5de754f 100644
--- a/src/app/service/http/location.service.ts
+++ b/src/app/service/http/location.service.ts
@@ -2,8 +2,8 @@ import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {LocationEntity} from "../../interface/LocationEntity";
 
-const BASE_URL = "localhost:8080/progetto152/";
-const LOCATION = BASE_URL + "location/";
+const BASE_URL = "progetto152";
+const LOCATION = BASE_URL + "/location";
 
 
 @Injectable({
@@ -21,7 +21,7 @@ export class LocationService {
   }
 
   getLocation(location: string) {
-    return this.http.get<LocationEntity>(LOCATION + location);
+    return this.http.get<LocationEntity>(LOCATION + "/" + location);
   }
 
   createLocation(location: LocationEntity) {
diff --git a/src/app/service/http/user.service.ts b/src/app/service/http/user.service.ts
index c750706..7974fc9 100644
--- a/src/app/service/http/user.service.ts
+++ b/src/app/service/http/user.service.ts
@@ -2,16 +2,16 @@ import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {UserEntity} from "../../interface/UserEntity";
 
-const BASE_URL = "localhost:8080/progetto152/";
-const USER = BASE_URL + "user/";
-const GET_USER_BY_ID = USER + "id/";
+const BASE_URL = "progetto152";
+const USER = BASE_URL + "/user";
+const GET_USER_BY_ID = USER + "/id";
 
 
 @Injectable({
   providedIn: 'root',
 })
 
-export class LocationService {
+export class UserService {
   constructor(
     private http: HttpClient,
   ) {
@@ -22,11 +22,11 @@ export class LocationService {
   }
 
   getUser(username: string) {
-    return this.http.get<UserEntity>(USER + username);
+    return this.http.get<UserEntity>(USER + "/" + username);
   }
 
   getUserById(id: number) {
-    return this.http.get<UserEntity>(GET_USER_BY_ID + id);
+    return this.http.get<UserEntity>(GET_USER_BY_ID + "/" + id);
   }
 
   createUser(user: UserEntity) {
diff --git a/src/app/service/http/waypoint.service.ts b/src/app/service/http/waypoint.service.ts
index 8784c5d..f5f9d2e 100644
--- a/src/app/service/http/waypoint.service.ts
+++ b/src/app/service/http/waypoint.service.ts
@@ -1,9 +1,10 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {WaypointsEntity} from "../../interface/WaypointsEntity";
+import {catchError, throwError} from "rxjs";
 
-const BASE_URL = "localhost:8080/progetto152/";
-const WAYPOINT = BASE_URL + "waypoint/";
+const BASE_URL = "progetto152";
+const WAYPOINT = BASE_URL + "/waypoint";
 const GET_WAYPOINT_BY_ID = WAYPOINT + "id/";
 
 
@@ -11,18 +12,19 @@ const GET_WAYPOINT_BY_ID = WAYPOINT + "id/";
   providedIn: 'root',
 })
 
-export class LocationService {
+export class WaypointService {
   constructor(
     private http: HttpClient,
   ) {
   }
 
   getWaypoints(location: string) {
-    return this.http.get<WaypointsEntity[]>(WAYPOINT + location);
+    return this.http.get<WaypointsEntity[]>(WAYPOINT + "/" + location)
+
   }
 
   getWaypoint(location: string, id: number) {
-    return this.http.get<WaypointsEntity>(WAYPOINT + location + "/" + id);
+    return this.http.get<WaypointsEntity>(WAYPOINT + "/" + location + "/" + id);
   }
 
   getWaypointById(id: number) {
@@ -34,7 +36,7 @@ export class LocationService {
   }
 
   updateWaypoint(waypoint: WaypointsEntity, id: number) {
-    return this.http.put<WaypointsEntity>(WAYPOINT + id, waypoint);
+    return this.http.put<WaypointsEntity>(WAYPOINT + "/" + id, waypoint);
   }
 
   deleteWaypoint(id: number) {
diff --git a/src/app/service/http/waypointVisited.service.ts b/src/app/service/http/waypointVisited.service.ts
index 3ec45ad..9e0bff7 100644
--- a/src/app/service/http/waypointVisited.service.ts
+++ b/src/app/service/http/waypointVisited.service.ts
@@ -4,8 +4,8 @@ import {catchError, Observable} from "rxjs";
 import {LocationEntity} from "../../interface/LocationEntity";
 import {WaypointsEntity} from "../../interface/WaypointsEntity";
 
-const BASE_URL = "localhost:8080/progetto152/";
-const WAYPOINT_VISITED = BASE_URL + "waypoint/visited/";
+const BASE_URL = "progetto152";
+const WAYPOINT_VISITED = BASE_URL + "/waypoint/visited/";
 const GET_WAYPOINT_BY_USER = WAYPOINT_VISITED + "USER/";
 
 
@@ -13,7 +13,7 @@ const GET_WAYPOINT_BY_USER = WAYPOINT_VISITED + "USER/";
   providedIn: 'root',
 })
 
-export class LocationService {
+export class WaypointVisitedService {
   constructor(
     private http: HttpClient,
   ) {

From 38dd0eb2446de20f0c38a265752a90245cf29272 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sat, 29 Apr 2023 20:29:52 +0200
Subject: [PATCH 13/17] adding distance as an optional field

---
 src/app/interface/LocationEntity.ts  | 1 +
 src/app/interface/WaypointsEntity.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/app/interface/LocationEntity.ts b/src/app/interface/LocationEntity.ts
index 7fb3a65..06b0c31 100644
--- a/src/app/interface/LocationEntity.ts
+++ b/src/app/interface/LocationEntity.ts
@@ -3,4 +3,5 @@ export interface LocationEntity {
   region: string;
   lat: number;
   lon: number;
+  distance?: number;
 }
diff --git a/src/app/interface/WaypointsEntity.ts b/src/app/interface/WaypointsEntity.ts
index 016dd2b..3c98648 100644
--- a/src/app/interface/WaypointsEntity.ts
+++ b/src/app/interface/WaypointsEntity.ts
@@ -6,4 +6,5 @@ export interface WaypointsEntity {
   description: string;
   img: string;
   locationName: string;
+  distance?: number;
 }

From 66aa99fe4f92f8d8d6567ea0d1b9fb43fc81f69d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sat, 29 Apr 2023 20:30:08 +0200
Subject: [PATCH 14/17] change on list component

---
 src/app/component/list/list.component.html | 14 ++--
 src/app/component/list/list.component.ts   | 81 +++++++++++++---------
 2 files changed, 57 insertions(+), 38 deletions(-)

diff --git a/src/app/component/list/list.component.html b/src/app/component/list/list.component.html
index bf75e7a..5f8fe8b 100644
--- a/src/app/component/list/list.component.html
+++ b/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 && !locations.distance">{{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 && !waypoint.distance">{{translations.positionNotFoundErrorMessage}}</h4>
     </div>
 
   </div>
diff --git a/src/app/component/list/list.component.ts b/src/app/component/list/list.component.ts
index edcb69b..f236835 100644
--- a/src/app/component/list/list.component.ts
+++ b/src/app/component/list/list.component.ts
@@ -1,11 +1,13 @@
 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/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',
@@ -14,8 +16,10 @@ import {ReadTranslateJsonService} from "../../service/language/readTranslateJson
 })
 export class ListComponent implements OnInit, OnChanges {
   locationParams: string | undefined
-  locations: Partial<Locations>[] | undefined;
-  location: Partial<Locations> | undefined;
+  locations: LocationEntity[] | undefined;
+  location: LocationEntity | undefined;
+
+  waypoints: WaypointsEntity[] | undefined;
 
   positionCord: any;
 
@@ -27,7 +31,14 @@ export class ListComponent implements OnInit, OnChanges {
 
   positionNotFound: boolean = false;
 
-  constructor(private route: ActivatedRoute, private readjsonService: ReadjsonService, private positionService: positionService, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
+  constructor(
+    private route: ActivatedRoute,
+    private positionService: positionService,
+    private translateService: TranslateService,
+    private readTranslationJsonService: ReadTranslateJsonService,
+    private locationService: LocationService,
+    private waypointService: WaypointService,
+  ) {
   }
 
   async ngOnInit() {
@@ -35,27 +46,36 @@ export class ListComponent implements OnInit, OnChanges {
     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.locationService.getLocation(this.locationParams ?? "").subscribe(location => {
+      this.location = location;
+      console.log("location", this.location)
+      if (this.location != null) {
+        this.isNear = false;
+        this.waypointService.getWaypoints(this.location.location).subscribe(waypoints => {
+          this.waypoints = waypoints;
+          console.log("waypoints", this.waypoints)
+          this.setDistance()
+        });
+      } else {
+        this.locationService.getLocations().subscribe(locations => {
+          this.locations = locations;
+          console.log("locations", this.locations)
+          this.setDistance()
         });
       }
     });
     this.getPosition();
-    this.positionNotFoundFunction();
+    //this.positionNotFoundFunction();
   }
 
+/*
   positionNotFoundFunction() {
     if (!this.positionNotFound) {
       setTimeout(() => {
+        if (this.waypoints||this.locations) {
+          if (!this.waypoints[0].distance||!this.locations[0].distance) {
+          }
+        }
         if (!this.distance[0]) {
           this.positionNotFound = true;
 
@@ -63,7 +83,7 @@ export class ListComponent implements OnInit, OnChanges {
       }, 5000);
     }
   }
-
+*/
   ngOnChanges(changes: SimpleChanges) {
     if (changes['positionCord'] && (changes['positionCord'])) {
       console.log("onChanges")
@@ -88,26 +108,25 @@ export class ListComponent implements OnInit, OnChanges {
   }
 
   private setDistance(): void {
-    if (this.locations && this.location) {
-      if (this.isNear) {
+    if (this.waypoints){
+      console.log("setDistance")
+      console.log("waypoints lenght " + this.waypoints.length);
+      for (let i = 0; i < this.waypoints.length; i++) {
+        console.log("for" + i);
+        console.log("lat" + this.waypoints[i].lat);
+        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 && this.location) {
+        console.log("setDistance")
         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));
-          }
+          this.locations[i].distance = this.positionService.getDistanceBetweenCoordinates(this.locations[i].lat, this.locations[i].lon, this.positionCord.lat, this.positionCord.lon);
         }
       }
     }
-    console.log("ciao" + this.distance[0])
   }
 
   getPosition(): any {

From f9f0bd2e19a82fa39765350ad78d1056ca2bc31a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sun, 30 Apr 2023 10:53:23 +0200
Subject: [PATCH 15/17] fix non tanto fix positionNotFoundFunction

---
 src/app/component/list/list.component.html |  2 +-
 src/app/component/list/list.component.ts   | 59 +++++++++++-----------
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/app/component/list/list.component.html b/src/app/component/list/list.component.html
index 5f8fe8b..ed253a8 100644
--- a/src/app/component/list/list.component.html
+++ b/src/app/component/list/list.component.html
@@ -17,7 +17,7 @@
       <a class="link link-primary" href="location/{{locations.location}}">{{locations.location}}</a>
     </h3>
     <div>
-      <h4 *ngIf="locations.distance &&! positionNotFound">{{translations.distance}}{{locations.distance}} km</h4>
+      <h4 *ngIf="locations.distance && !positionNotFound">{{translations.distance}}{{locations.distance}} km</h4>
       <h4 *ngIf="positionNotFound && !locations.distance">{{translations.positionNotFoundErrorMessage}}</h4>
     </div>
   </div>
diff --git a/src/app/component/list/list.component.ts b/src/app/component/list/list.component.ts
index f236835..a881914 100644
--- a/src/app/component/list/list.component.ts
+++ b/src/app/component/list/list.component.ts
@@ -25,7 +25,6 @@ export class ListComponent implements OnInit, OnChanges {
 
   isNear: boolean = true;
 
-  distance: number[] = [];
 
   translations: listTranslations = {} as listTranslations
 
@@ -48,42 +47,52 @@ export class ListComponent implements OnInit, OnChanges {
     });
     this.locationService.getLocation(this.locationParams ?? "").subscribe(location => {
       this.location = location;
-      console.log("location", this.location)
-      if (this.location != null) {
+      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()
         });
-      } else {
-        this.locationService.getLocations().subscribe(locations => {
-          this.locations = locations;
-          console.log("locations", this.locations)
-          this.setDistance()
-        });
       }
+
     });
+    this.locationService.getLocations().subscribe(locations => {
+      this.locations = locations;
+      console.log("locations", this.locations)
+      this.setDistance()
+    });
+
     this.getPosition();
-    //this.positionNotFoundFunction();
+    this.positionNotFoundFunction();
   }
 
-/*
+
   positionNotFoundFunction() {
     if (!this.positionNotFound) {
       setTimeout(() => {
-        if (this.waypoints||this.locations) {
-          if (!this.waypoints[0].distance||!this.locations[0].distance) {
-          }
-        }
-        if (!this.distance[0]) {
+        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")
@@ -108,21 +117,13 @@ export class ListComponent implements OnInit, OnChanges {
   }
 
   private setDistance(): void {
-    if (this.waypoints){
-      console.log("setDistance")
-      console.log("waypoints lenght " + this.waypoints.length);
+    if (this.waypoints) {
       for (let i = 0; i < this.waypoints.length; i++) {
-        console.log("for" + i);
-        console.log("lat" + this.waypoints[i].lat);
         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 && this.location) {
-        console.log("setDistance")
-        console.log("location lenght " + this.locations.length);
+    } else {
+      if (this.locations) {
         for (let i = 0; i < this.locations.length; i++) {
-          console.log("for" + i);
-          console.log("lat" + this.locations[i].lat);
           this.locations[i].distance = this.positionService.getDistanceBetweenCoordinates(this.locations[i].lat, this.locations[i].lon, this.positionCord.lat, this.positionCord.lon);
         }
       }

From 0aad60bab3bb0529a541f60c41a7c4cca0df452f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sun, 30 Apr 2023 13:33:10 +0200
Subject: [PATCH 16/17] fix non tanto fix positionNotFoundFunction

---
 src/app/component/list/list.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/component/list/list.component.html b/src/app/component/list/list.component.html
index ed253a8..52ab192 100644
--- a/src/app/component/list/list.component.html
+++ b/src/app/component/list/list.component.html
@@ -18,7 +18,7 @@
     </h3>
     <div>
       <h4 *ngIf="locations.distance && !positionNotFound">{{translations.distance}}{{locations.distance}} km</h4>
-      <h4 *ngIf="positionNotFound && !locations.distance">{{translations.positionNotFoundErrorMessage}}</h4>
+      <h4 *ngIf="positionNotFound">{{translations.positionNotFoundErrorMessage}}</h4>
     </div>
   </div>
 </div>
@@ -33,7 +33,7 @@
     </h3>
     <div class="distance">
       <h4 *ngIf="waypoint.distance && !positionNotFound">{{translations.distance}}{{waypoint.distance}} km</h4>
-      <h4 *ngIf="positionNotFound && !waypoint.distance">{{translations.positionNotFoundErrorMessage}}</h4>
+      <h4 *ngIf="positionNotFound">{{translations.positionNotFoundErrorMessage}}</h4>
     </div>
 
   </div>

From a68d48e065eb64f30bf69f7b9d5c110020c00cfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20Ku=CC=88ng?= <joekueng05@gmail.com>
Date: Sun, 30 Apr 2023 14:10:58 +0200
Subject: [PATCH 17/17] managment component logic

---
 src/app/component/list/list.component.ts      |  31 +++--
 .../management/management.component.html      |  38 ++++--
 .../management/management.component.ts        | 120 +++++++-----------
 src/app/interface/UserEntity.ts               |   4 +-
 src/app/service/http/waypoint.service.ts      |   4 +
 5 files changed, 92 insertions(+), 105 deletions(-)

diff --git a/src/app/component/list/list.component.ts b/src/app/component/list/list.component.ts
index a881914..f5df874 100644
--- a/src/app/component/list/list.component.ts
+++ b/src/app/component/list/list.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, SimpleChanges, OnChanges} from '@angular/core';
+import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
 import {positionService} from "../../service/position.service";
 import {listTranslations} from "../../interface/translations";
@@ -7,7 +7,7 @@ import {ReadTranslateJsonService} from "../../service/language/readTranslateJson
 import {LocationService} from "../../service/http/location.service";
 import {LocationEntity} from "../../interface/LocationEntity";
 import {WaypointsEntity} from "../../interface/WaypointsEntity";
-import {WaypointService} from "../../service/http/waypoint.service";
+import {WaypointService} from "../../service/http/waypoint.service"
 
 @Component({
   selector: 'app-list',
@@ -100,6 +100,19 @@ export class ListComponent implements OnInit, OnChanges {
     }
   }
 
+  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) {
@@ -129,18 +142,4 @@ export class ListComponent implements OnInit, OnChanges {
       }
     }
   }
-
-  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);
-  }
 }
diff --git a/src/app/component/management/management.component.html b/src/app/component/management/management.component.html
index 2ffa158..78d93c2 100644
--- a/src/app/component/management/management.component.html
+++ b/src/app/component/management/management.component.html
@@ -15,7 +15,7 @@
   </tr>
   </thead>
   <tbody>
-  <tr *ngFor="let user of userList">
+  <tr *ngFor="let user of users">
     <td>{{ user.name }}</td>
     <td>{{ user.username }}</td>
     <td>{{ user.password }}</td>
@@ -24,7 +24,10 @@
 </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>
+  <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'">
@@ -60,7 +63,7 @@
   </tr>
   </thead>
   <tbody>
-  <tr *ngFor="let location of locationList">
+  <tr *ngFor="let location of locations">
     <td>{{ location.location }}</td>
     <td>{{ location.region }}</td>
     <td>{{ location.lat }}</td>
@@ -70,13 +73,16 @@
 </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>
+  <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)">
+    <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">
@@ -88,12 +94,12 @@
 
       <div>
         <label for="lat">Latitude:</label>
-        <input type="text" id="lat" name="lat" [(ngModel)]="newLocation.lat">
+        <input type="number" id="lat" name="lat" [(ngModel)]="newLocation.lat">
       </div>
 
       <div>
         <label for="lon">Longitude:</label>
-        <input type="text" id="lon" name="lon" [(ngModel)]="newLocation.lon">
+        <input type="number" id="lon" name="lon" [(ngModel)]="newLocation.lon">
       </div>
 
 
@@ -115,7 +121,7 @@
   </tr>
   </thead>
   <tbody>
-  <tr *ngFor="let waypoint of waypointList">
+  <tr *ngFor="let waypoint of waypoints">
     <td>{{ waypoint.name }}</td>
     <td>{{ waypoint.lat }}</td>
     <td>{{ waypoint.lon }}</td>
@@ -126,13 +132,17 @@
 </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>
+  <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)">
+    <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">
@@ -140,12 +150,12 @@
 
       <div>
         <label for="waypointLat">Latitude:</label>
-        <input type="text" id="waypointLat" name="waypointLat" [(ngModel)]="newWaypoint.lat">
+        <input type="number" id="waypointLat" name="waypointLat" [(ngModel)]="newWaypoint.lat">
       </div>
 
       <div>
         <label for="waypointLon">Longitude:</label>
-        <input type="text" id="waypointLon" name="waypointLon" [(ngModel)]="newWaypoint.lon">
+        <input type="number" id="waypointLon" name="waypointLon" [(ngModel)]="newWaypoint.lon">
       </div>
 
       <div>
@@ -155,13 +165,13 @@
 
       <div>
         <label for="image">Image (Base64):</label>
-        <input type="text" id="image" name="image" [(ngModel)]="newWaypoint.image">
+        <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 locationList" [value]="location.location">{{ location.location }}</option>
+          <option *ngFor="let location of locations" [value]="location.location">{{ location.location }}</option>
         </select>
       </div>
 
diff --git a/src/app/component/management/management.component.ts b/src/app/component/management/management.component.ts
index 6c6240c..b62ba1b 100644
--- a/src/app/component/management/management.component.ts
+++ b/src/app/component/management/management.component.ts
@@ -1,30 +1,11 @@
-import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
-
-interface User {
-  id: number;
-  name: string;
-  username: string;
-  password: string;
-}
-
-interface Location {
-  id: number;
-  location: string;
-  region: string;
-  lat: string;
-  lon: string;
-}
-
-interface Waypoint {
-  id: number;
-  name: string;
-  lat: string;
-  lon: string;
-  description: string;
-  image: string;
-  locationName: string;
-}
-
+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',
@@ -32,71 +13,62 @@ interface Waypoint {
   styleUrls: ['./management.component.css']
 })
 
-export class ManagementComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ManagementComponent implements OnInit {
   showUserForm: boolean = false;
   showLocationForm: boolean = false;
   showWaypointForm: boolean = false;
-  newUser: User = {id: 0, name: '', username: '', password: ''};
-  newLocation: Location = {id: 0, location: '', region: '', lat: '', lon: ''};
-  newWaypoint: Waypoint = {id: 0, name: '', lat: '', lon: '', description: '', image: '', locationName: ''};
 
-  constructor() {
+  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;
+    });
   }
 
-  ngOnDestroy() {
-
-  }
-
-
-  ngAfterViewInit() {
-
-  }
-
-  userList: User[] = [
-    {id: 1, name: 'John', username: 'john@test.com', password: '0790000000'},
-    {id: 2, name: 'Jane', username: 'jane@test.com', password: '0790000001'},
-    {id: 3, name: 'Bob', username: 'bob@test.com', password: '0790000002'},
-  ];
-
-  locationList: Location[] = [
-    {id: 1, location: 'New York', region: "US", lat: "40.7128", lon: "74.0060"},
-    {id: 2, location: 'London', region: "UK", lat: "51.5074", lon: "0.1278"},
-    {id: 3, location: 'Paris', region: "FR", lat: "48.8566", lon: "2.3522"},
-  ];
-
-  waypointList: Waypoint[] = [
-    {id: 1, name: 'Statue of Liberty', lat: "40.6892", lon: "74.0445", description: "Statue of Liberty", image: "", locationName: "New York"},
-    {id: 2, name: 'Big Ben', lat: "51.5007", lon: "0.1246", description: "Big Ben", image: "", locationName: "London"},
-    {id: 3, name: 'Eiffel Tower', lat: "48.8584", lon: "2.2945", description: "Eiffel Tower", image: "", locationName: "Paris"},
-  ];
-
   addUser(name: string, username: string, password: string) {
-    const id = this.userList.length + 1;
-    const newUser: User = {id, name, username: username, password: password};
-    this.userList.push(newUser);
+    this.newUser = { name: name, username: username, password: password};
+    this.userService.createUser(this.newUser).subscribe(user => {
+      this.users?.push(user);
+    });
     this.showUserForm = false;
-    this.newUser = {id: 0, name: '', username: '', password: ''};
   }
 
-  addLocation(name: string, region: string, lat: string, lon: string) {
-    const id = this.locationList.length + 1;
-    const newLocation: Location = {id, location: name, region: region, lat: lat, lon: lon};
-    this.locationList.push(newLocation);
+  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;
-    this.newLocation = {id: 0, location: '', region: '', lat: '', lon: ''};
   }
 
   addWaypoint(name: string, lat: string, lon: string, description: string, image: string, locationName: string) {
-    console.log(locationName)
-    const id = this.waypointList.length + 1;
-    const newWaypoint: Waypoint = {id, name, lat: lat, lon: lon, description: description, image: image, locationName: locationName};
-    this.waypointList.push(newWaypoint);
+    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;
-    this.newWaypoint = {id: 0, name: '', lat: '', lon: '', description: '', image: '', locationName: ''};
   }
 
   openUserForm() {
diff --git a/src/app/interface/UserEntity.ts b/src/app/interface/UserEntity.ts
index d8e7af6..49fd05f 100644
--- a/src/app/interface/UserEntity.ts
+++ b/src/app/interface/UserEntity.ts
@@ -1,6 +1,8 @@
 export interface UserEntity {
-    id: number;
+    id?: number;
     name: string;
     username: string;
     password: string;
+
+
 }
diff --git a/src/app/service/http/waypoint.service.ts b/src/app/service/http/waypoint.service.ts
index f5f9d2e..ca0e8c0 100644
--- a/src/app/service/http/waypoint.service.ts
+++ b/src/app/service/http/waypoint.service.ts
@@ -18,6 +18,10 @@ export class WaypointService {
   ) {
   }
 
+  getAllWaypoints() {
+    return this.http.get<WaypointsEntity[]>(WAYPOINT);
+  }
+
   getWaypoints(location: string) {
     return this.http.get<WaypointsEntity[]>(WAYPOINT + "/" + location)