From 2a3aec6c9548438aa0b02c7df5e102adad25d6bf Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Mon, 1 May 2023 14:36:36 +0200
Subject: [PATCH 1/2] improved css (at least tried to) and fixed bugs in
 management page

---
 src/app/component/list/list.component.ts      | 15 ---------------
 .../management/management.component.html      |  2 +-
 .../management/management.component.ts        | 15 +++++++++------
 src/app/home/home.component.css               | 19 ++++++-------------
 src/app/home/home.component.html              |  7 ++++---
 src/app/interface/WaypointsEntity.ts          |  2 +-
 6 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/src/app/component/list/list.component.ts b/src/app/component/list/list.component.ts
index f5df874..4086238 100644
--- a/src/app/component/list/list.component.ts
+++ b/src/app/component/list/list.component.ts
@@ -73,21 +73,6 @@ export class ListComponent implements OnInit, OnChanges {
       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);
     }
diff --git a/src/app/component/management/management.component.html b/src/app/component/management/management.component.html
index 78d93c2..1893683 100644
--- a/src/app/component/management/management.component.html
+++ b/src/app/component/management/management.component.html
@@ -142,7 +142,7 @@
   <div class="form-container">
     <h2>Add Location</h2>
     <form
-      (submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.image, newWaypoint.locationName)">
+      (submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.img, newWaypoint.locationName)">
       <div>
         <label for="waypointName">Waypoint:</label>
         <input type="text" id="waypointName" name="waypointName" [(ngModel)]="newWaypoint.name">
diff --git a/src/app/component/management/management.component.ts b/src/app/component/management/management.component.ts
index b62ba1b..048c2f3 100644
--- a/src/app/component/management/management.component.ts
+++ b/src/app/component/management/management.component.ts
@@ -6,6 +6,7 @@ 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";
+import {toNumbers} from "@angular/compiler-cli/src/version_helpers";
 
 @Component({
   selector: 'app-home',
@@ -18,9 +19,9 @@ export class ManagementComponent implements OnInit {
   showLocationForm: boolean = false;
   showWaypointForm: boolean = false;
 
-  newUser: UserEntity;
-  newLocation: LocationEntity;
-  newWaypoint: WaypointsEntity;
+  newUser: UserEntity = {name: "", password: "", username: ""};
+  newLocation: LocationEntity = {lat: 0, location: "", lon: 0, region: ""};
+  newWaypoint: WaypointsEntity = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""};
 
   locations: LocationEntity[] | undefined;
   waypoints: WaypointsEntity[] | undefined;
@@ -56,15 +57,15 @@ export class ManagementComponent implements OnInit {
   }
 
   addLocation(name: string, region: string, lat: number, lon: number) {
-    this.newLocation = {name: name, region: region, lat: lat, lon: lon};
+    this.newLocation = {location: 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};
+  addWaypoint(name: string, lat: number, lon: number, description: string, image: string, locationName: string) {
+    this.newWaypoint = {description: description, img: image, lat: lat, locationName: locationName, lon: lon, name: name}
     this.waypointService.createWaypoint(this.newWaypoint).subscribe(waypoint => {
       this.waypoints?.push(waypoint);
     });
@@ -94,4 +95,6 @@ export class ManagementComponent implements OnInit {
   closeWaypointForm() {
     this.showWaypointForm = false;
   }
+
+  protected readonly String = String;
 }
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
index bc6241b..c48ebfd 100644
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -1,12 +1,7 @@
 .search {
-  display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  position: absolute;
-  top: 35%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 }
 
 input {
@@ -16,10 +11,8 @@ input {
 }
 
 #list {
-  position: absolute;
-  top: 46%;
-  left: 44%;
-  transform: translate(-50%, -50%);
+  align-self: center;
+  height: auto;
   justify-content: center;
   align-items: center;
   align-content: center;
@@ -40,13 +33,13 @@ input {
 }
 
 .bg-image {
+  padding-top: 25%;
   background-image: url('src/assets/img/mountains.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
-  height: 100vh;
+  height: 94vh;
+  display: flex;
+  flex-direction: column;
 }
 
-#translate{
-  margin: 100px 10px 10px 10px;
-}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 2545413..4a02806 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,6 +1,6 @@
 <div [ngClass]="{'background-color': backgroundColor}">
 
-  <div class="alert alert-warning shadow-lg" *ngIf="allert">
+  <div class="alert alert-warning shadow-lg" *ngIf="allert" id="alert">
     <div>
       <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none"
            viewBox="0 0 24 24">
@@ -11,7 +11,7 @@
     </div>
   </div>
 
-  <div class="dropdown dropdown-hover">
+  <div class="dropdown dropdown-hover" id="translate">
     <label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100">{{translations.translate}}</label>
     <ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52">
       <li (click)="switchLanguage('DE')"><a>DE</a></li>
@@ -19,9 +19,10 @@
       <li (click)="switchLanguage('IT')"><a>IT</a></li>
       <li (click)="switchLanguage('EN')"><a>EN</a></li>
     </ul>
-  </div>
+  </div >
 
   <div class="bg-image">
+
     <div class="search">
 
       <div class="inputElements">
diff --git a/src/app/interface/WaypointsEntity.ts b/src/app/interface/WaypointsEntity.ts
index 3c98648..7c52dba 100644
--- a/src/app/interface/WaypointsEntity.ts
+++ b/src/app/interface/WaypointsEntity.ts
@@ -1,5 +1,5 @@
 export interface WaypointsEntity {
-  id: number;
+  id?: number;
   name: string;
   lat: number;
   lon: number;

From 564e392873880ee499843351bd5c435dc2c782ab Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Mon, 1 May 2023 15:13:35 +0200
Subject: [PATCH 2/2] added translation in management page

---
 .../management/management.component.html      | 92 +++++++++++--------
 .../management/management.component.ts        | 30 ++++++
 src/app/interface/translations.ts             | 21 +++++
 .../language/readTranslateJson.service.ts     | 30 +++++-
 src/assets/i18n/management/en.json            | 21 +++++
 5 files changed, 153 insertions(+), 41 deletions(-)
 create mode 100644 src/assets/i18n/management/en.json

diff --git a/src/app/component/management/management.component.html b/src/app/component/management/management.component.html
index 1893683..ee45ca6 100644
--- a/src/app/component/management/management.component.html
+++ b/src/app/component/management/management.component.html
@@ -5,13 +5,25 @@
   <title>Management</title>
 </head>
 <body>
-<h1>Users</h1>
+
+<div class="dropdown dropdown-hover" id="translate">
+  <label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100"
+         id="translateLabel">{{translations.translate}}</label>
+  <ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52" id="translateUl">
+    <li (click)="switchLanguage('DE')"><a>DE</a></li>
+    <li (click)="switchLanguage('FR')"><a>FR</a></li>
+    <li (click)="switchLanguage('IT')"><a>IT</a></li>
+    <li (click)="switchLanguage('EN')"><a>EN</a></li>
+  </ul>
+</div>
+
+<h1>{{translations.users}}</h1>
 <table>
   <thead>
   <tr>
-    <th>Name</th>
-    <th>Username</th>
-    <th>Password</th>
+    <th>{{ translations.name }}</th>
+    <th>{{translations.username}}</th>
+    <th>{{translations.password}}</th>
   </tr>
   </thead>
   <tbody>
@@ -26,40 +38,40 @@
 <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
+          style="margin: 10px 10% 0 0;">{{translations.add}}
   </button>
 </div>
 
 <div class="overlay" [style.display]="showUserForm ? 'block' : 'none'">
   <div class="form-container">
-    <h2>Add User</h2>
+    <h2>{{translations.addUserButton}}</h2>
     <form (submit)="addUser(newUser.name, newUser.username, newUser.password)">
       <div>
-        <label for="name">Name:</label>
+        <label for="name">{{translations.name}}:</label>
         <input type="text" id="name" name="name" [(ngModel)]="newUser.name">
       </div>
       <div>
-        <label for="username">Username:</label>
+        <label for="username">{{translations.username}}:</label>
         <input type="text" id="username" name="username" [(ngModel)]="newUser.username">
       </div>
       <div>
-        <label for="password">Password:</label>
+        <label for="password">{{translations.password}}:</label>
         <input type="password" id="password" name="password" [(ngModel)]="newUser.password">
       </div>
-      <button type="submit">Add User</button>
+      <button type="submit">{{translations.addUserButton}}</button>
     </form>
-    <button (click)="closeUserForm()">Close</button>
+    <button (click)="closeUserForm()">{{translations.close}}</button>
   </div>
 </div>
 
-<h1>Locations</h1>
+<h1>{{translations.locations}}</h1>
 <table>
   <thead>
   <tr>
-    <th>Location</th>
-    <th>Region</th>
-    <th>Latitude</th>
-    <th>Longitude</th>
+    <th>{{translations.location}}</th>
+    <th>{{translations.region}}</th>
+    <th>{{translations.lat}}</th>
+    <th>{{translations.lon}}</th>
   </tr>
   </thead>
   <tbody>
@@ -75,49 +87,49 @@
 <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
+          style="margin: 10px 10% 0 0;">{{translations.add}}
   </button>
 </div>
 
 <div class="overlay" [style.display]="showLocationForm ? 'block' : 'none'">
   <div class="form-container">
-    <h2>Add Location</h2>
+    <h2>{{translations.addLocationButton}}</h2>
     <form (submit)="addLocation(newLocation.location, newLocation.region, newLocation.lat ,newLocation.lon)">
       <div>
-        <label for="location">Location:</label>
+        <label for="location">{{translations.location}}:</label>
         <input type="text" id="location" name="location" [(ngModel)]="newLocation.location">
       </div>
       <div>
-        <label for="region">Region:</label>
+        <label for="region">{{translations.region}}:</label>
         <input type="text" id="region" name="region" [(ngModel)]="newLocation.region">
       </div>
 
       <div>
-        <label for="lat">Latitude:</label>
+        <label for="lat">{{translations.lat}}:</label>
         <input type="number" id="lat" name="lat" [(ngModel)]="newLocation.lat">
       </div>
 
       <div>
-        <label for="lon">Longitude:</label>
+        <label for="lon">{{translations.lon}}:</label>
         <input type="number" id="lon" name="lon" [(ngModel)]="newLocation.lon">
       </div>
 
 
-      <button type="submit">Add Location</button>
+      <button type="submit">{{translations.addLocationButton}}</button>
     </form>
-    <button (click)="closeLocationForm()">Close</button>
+    <button (click)="closeLocationForm()">{{translations.close}}</button>
   </div>
 </div>
 
-<h1>Waypoints</h1>
+<h1>{{translations.waypoints}}</h1>
 <table>
   <thead>
   <tr>
-    <th>Name</th>
-    <th>Latitude</th>
-    <th>Longitude</th>
-    <th>Description</th>
-    <th>Location Name</th>
+    <th>{{translations.name}}</th>
+    <th>{{translations.lat}}</th>
+    <th>{{translations.lon}}</th>
+    <th>{{translations.description}}</th>
+    <th>{{translations.locationName}}</th>
   </tr>
   </thead>
   <tbody>
@@ -134,50 +146,50 @@
 <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
+          style="margin: 10px 10% 0 0;">{{translations.add}}
   </button>
 </div>
 
 <div class="overlay" [style.display]="showWaypointForm ? 'block' : 'none'">
   <div class="form-container">
-    <h2>Add Location</h2>
+    <h2>{{translations.addWaypointButton}}</h2>
     <form
       (submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.img, newWaypoint.locationName)">
       <div>
-        <label for="waypointName">Waypoint:</label>
+        <label for="waypointName">{{translations.name}}:</label>
         <input type="text" id="waypointName" name="waypointName" [(ngModel)]="newWaypoint.name">
       </div>
 
       <div>
-        <label for="waypointLat">Latitude:</label>
+        <label for="waypointLat">{{translations.lat}}:</label>
         <input type="number" id="waypointLat" name="waypointLat" [(ngModel)]="newWaypoint.lat">
       </div>
 
       <div>
-        <label for="waypointLon">Longitude:</label>
+        <label for="waypointLon">{{translations.lon}}:</label>
         <input type="number" id="waypointLon" name="waypointLon" [(ngModel)]="newWaypoint.lon">
       </div>
 
       <div>
-        <label for="description">Description:</label>
+        <label for="description">{{translations.description}}:</label>
         <input type="text" id="description" name="description" [(ngModel)]="newWaypoint.description">
       </div>
 
       <div>
-        <label for="image">Image (Base64):</label>
+        <label for="image">{{translations.image}} (Base64):</label>
         <input type="text" id="image" name="image" [(ngModel)]="newWaypoint.img">
       </div>
 
       <div>
-        <label for="locationName">Location Name:</label>
+        <label for="locationName">{{translations.locationName}}:</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>
+      <button type="submit">{{translations.addWaypointButton}}</button>
     </form>
-    <button (click)="closeWaypointForm()">Close</button>
+    <button (click)="closeWaypointForm()">{{translations.close}}</button>
   </div>
 </div>
 </body>
diff --git a/src/app/component/management/management.component.ts b/src/app/component/management/management.component.ts
index 048c2f3..fde46d0 100644
--- a/src/app/component/management/management.component.ts
+++ b/src/app/component/management/management.component.ts
@@ -7,6 +7,9 @@ import {LocationService} from "../../service/http/location.service";
 import {UserService} from "../../service/http/user.service";
 import {WaypointService} from "../../service/http/waypoint.service";
 import {toNumbers} from "@angular/compiler-cli/src/version_helpers";
+import {managementTranslations} from "../../interface/translations";
+import {TranslateService} from "../../service/language/translate.service";
+import {ReadTranslateJsonService} from "../../service/language/readTranslateJson.service";
 
 @Component({
   selector: 'app-home',
@@ -27,16 +30,21 @@ export class ManagementComponent implements OnInit {
   waypoints: WaypointsEntity[] | undefined;
   users: UserEntity[] | undefined;
 
+  translations: managementTranslations = {} as managementTranslations
+
 
   constructor(
     private route: ActivatedRoute,
     private locationService: LocationService,
     private waypointService: WaypointService,
     private userService: UserService,
+    private translateService: TranslateService,
+    private readTranslationJsonService: ReadTranslateJsonService,
   ) {
   }
 
   ngOnInit(): void {
+    this.translations = this.readTranslationJsonService.getManagementTranslations();
     this.locationService.getLocations().subscribe(locations => {
       this.locations = locations;
     });
@@ -96,5 +104,27 @@ export class ManagementComponent implements OnInit {
     this.showWaypointForm = false;
   }
 
+  async switchLanguage(lang: string) {
+    this.translations.users = await this.translateService.getData(this.translations.users, lang);
+    this.translations.locations = await this.translateService.getData(this.translations.locations, lang);
+    this.translations.waypoints = await this.translateService.getData(this.translations.waypoints, lang);
+    this.translations.name = await this.translateService.getData(this.translations.name, lang);
+    this.translations.username = await this.translateService.getData(this.translations.username, lang);
+    this.translations.password = await this.translateService.getData(this.translations.password, lang);
+    this.translations.location = await this.translateService.getData(this.translations.location, lang);
+    this.translations.region = await this.translateService.getData(this.translations.region, lang);
+    this.translations.lat = await this.translateService.getData(this.translations.lat, lang);
+    this.translations.lon = await this.translateService.getData(this.translations.lon, lang);
+    this.translations.description = await this.translateService.getData(this.translations.description, lang);
+    this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
+    this.translations.image = await this.translateService.getData(this.translations.image, lang);
+    this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
+    this.translations.addLocationButton = await this.translateService.getData(this.translations.addLocationButton, lang);
+    this.translations.addUserButton = await this.translateService.getData(this.translations.addUserButton, lang);
+    this.translations.addWaypointButton = await this.translateService.getData(this.translations.addWaypointButton, lang);
+    this.translations.add = await this.translateService.getData(this.translations.add, lang);
+    this.translations.close = await this.translateService.getData(this.translations.close, lang);
+  }
+
   protected readonly String = String;
 }
diff --git a/src/app/interface/translations.ts b/src/app/interface/translations.ts
index f944289..a56c7d7 100644
--- a/src/app/interface/translations.ts
+++ b/src/app/interface/translations.ts
@@ -13,3 +13,24 @@ export interface listTranslations {
   positionNotFoundErrorMessage: string;
 }
 
+export interface managementTranslations {
+  users: string;
+  locations: string;
+  waypoints: string;
+  name: string;
+  username: string;
+  password: string;
+  location: string;
+  region: string;
+  lat: string;
+  lon: string;
+  description: string;
+  locationName: string;
+  image: string;
+  translate: string;
+  addUserButton: string;
+  addLocationButton: string;
+  addWaypointButton: string;
+  add: string;
+  close: string;
+}
diff --git a/src/app/service/language/readTranslateJson.service.ts b/src/app/service/language/readTranslateJson.service.ts
index 172c6a6..90b6ff2 100644
--- a/src/app/service/language/readTranslateJson.service.ts
+++ b/src/app/service/language/readTranslateJson.service.ts
@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
-import {homeTranslations} from "../../interface/translations";
+import {homeTranslations, managementTranslations} from "../../interface/translations";
 import {listTranslations} from "../../interface/translations";
 
 @Injectable({
@@ -9,6 +9,7 @@ import {listTranslations} from "../../interface/translations";
 export class ReadTranslateJsonService {
   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
+  private managementTransaltion: managementTranslations = {} as managementTranslations;  // declares a private object to hold the management translations
 
   constructor(private http: HttpClient) {
     // loads the home translations from the assets file for the English language
@@ -29,6 +30,29 @@ export class ReadTranslateJsonService {
       this.listTranslation.positionNotFoundErrorMessage = data.positionNotFoundErrorMessage;
       console.log("data loaded", this.homeTranslations)
     });
+
+    this.http.get<managementTranslations>('assets/i18n/management/en.json').subscribe(data => {
+      this.managementTransaltion.translate = data.translate;
+      this.managementTransaltion.users = data.users;
+      this.managementTransaltion.locations = data.locations;
+      this.managementTransaltion.waypoints = data.waypoints;
+      this.managementTransaltion.name = data.name;
+      this.managementTransaltion.username = data.username;
+      this.managementTransaltion.password = data.password;
+      this.managementTransaltion.location = data.location;
+      this.managementTransaltion.region = data.region;
+      this.managementTransaltion.lat = data.lat;
+      this.managementTransaltion.lon = data.lon;
+      this.managementTransaltion.description = data.description;
+      this.managementTransaltion.locationName = data.locationName;
+      this.managementTransaltion.image = data.image;
+      this.managementTransaltion.addUserButton = data.addUserButton;
+      this.managementTransaltion.addLocationButton = data.addLocationButton;
+      this.managementTransaltion.addWaypointButton = data.addWaypointButton;
+      this.managementTransaltion.add = data.add;
+      this.managementTransaltion.close = data.close;
+      console.log("data loaded", this.homeTranslations)
+    });
   }
 
   // returns the home translations object
@@ -40,4 +64,8 @@ export class ReadTranslateJsonService {
   getListTransaltions(): listTranslations {
     return this.listTranslation;
   }
+
+  getManagementTranslations(): managementTranslations {
+    return this.managementTransaltion;
+  }
 }
diff --git a/src/assets/i18n/management/en.json b/src/assets/i18n/management/en.json
new file mode 100644
index 0000000..ab6df28
--- /dev/null
+++ b/src/assets/i18n/management/en.json
@@ -0,0 +1,21 @@
+{
+  "users": "Users",
+  "locations": "Locations",
+  "waypoints": "Waypoints",
+  "name": "Name",
+  "username": "Username",
+  "password": "Password",
+  "location": "Location",
+  "region": "Region",
+  "lat": "Latitude",
+  "lon": "Longitude",
+  "description": "Description",
+  "locationName": "Location Name",
+  "image": "Image",
+  "translate": "Translate",
+  "addUserButton": "Add User",
+  "addLocationButton": "Add Location",
+  "addWaypointButton": "Add Waypoint",
+  "add": "Add",
+  "close": "Close"
+}