improved list.component style and added position not found error handling

src/app/home/home.component.html

@@ -17,6 +17,7 @@
       <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>
 

src/app/list/list.component.css

@@ -0,0 +1,39 @@
+h1 {
+  font-size: 75px;
+  padding-left: 0;
+}
+
+h3 {
+  font-size: 25px;
+  margin-top: 20px;
+}
+
+h4 {
+  color: dimgray;
+}
+
+.distance {
+  font-size: 20px;
+  border-bottom: 2px solid #E9E92D;
+  width: 35%;
+  padding-bottom: 20px;
+  height: 60px;
+}
+
+.row {
+}
+
+.container {
+  margin-left: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+#translate{
+  position: absolute;
+  right: 0;
+}
+#translateUl{
+  position: absolute;
+  right: 0;
+}

src/app/list/list.component.html

@@ -1,35 +1,38 @@
-<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>
+    <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">
+    <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>
+  </div>
-<div *ngIf="isNear">
+<div *ngIf="isNear" class="container">
   <h1>
     {{translations.locationName}}{{locationParams}}
   </h1>
-  <div *ngFor="let locations of locations, let i = index">
+  <div *ngFor="let locations of locations, let i = index" class="row">
     <h3>
       <a class="link link-primary" href="location/{{locations.location}}">{{locations.location}}</a>
     </h3>
-    <div *ngIf="distance[i]">
+    <div>
-      <h4>{{translations.distance}}{{distance[i]}} km</h4>
+      <h4 *ngIf="distance[i]">{{translations.distance}}{{distance[i]}} km</h4>
+      <h4 *ngIf="positionNotFound">could not retrieve distance</h4>
     </div>
   </div>
 </div>
 
-<div *ngIf="!isNear && location && location.waypoints">
+<div *ngIf="!isNear && location && location.waypoints" class="container">
   <h1>
     {{location.location}}
   </h1>
-  <div *ngFor="let waypoinst of location.waypoints, let i = index">
+  <div *ngFor="let waypoinst of location.waypoints, let i = index" class="row">
     <h3>
       <a class="link link-primary" href="location/{{location.location}}/{{waypoinst.id}}"> {{waypoinst.name}}</a>
     </h3>
-    <div *ngIf="distance[i]">
+    <div class="distance">
-      <h4>{{translations.distance}}{{distance[i]}} km</h4>
+      <h4 *ngIf="distance[i]">{{translations.distance}}{{distance[i]}} km</h4>
+      <h4 *ngIf="positionNotFound">could not retrieve distance</h4>
     </div>
 
   </div>

src/app/list/list.component.ts

@@ -25,6 +25,8 @@ export class ListComponent implements OnInit, OnChanges {
 
   translations: listTranslations = {} as listTranslations
 
+  positionNotFound: boolean = false;
+
   constructor(private route: ActivatedRoute, private readjsonService: ReadjsonService, private positionService: positionService, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
   }
 
@@ -48,6 +50,18 @@ export class ListComponent implements OnInit, OnChanges {
       }
     });
     this.getPosition();
+    this.positionNotFoundFunction();
+  }
+
+  positionNotFoundFunction() {
+    if (!this.positionNotFound) {
+      setTimeout(() => {
+        if (!this.distance[0]) {
+          this.positionNotFound = true;
+
+        }
+      }, 5000);
+    }
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -74,19 +88,19 @@ export class ListComponent implements OnInit, OnChanges {
   }
 
   private setDistance(): void {
-    if (this.locations && this.location){
+    if (this.locations && this.location) {
-      if (this.isNear){
+      if (this.isNear) {
         console.log("location lenght " + this.locations.length);
         for (let i = 0; i < this.locations.length; i++) {
-          console.log("for"+i);
+          console.log("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{
+      } 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("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));
           }
@@ -109,6 +123,4 @@ export class ListComponent implements OnInit, OnChanges {
     this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
 
   }
-
-
 }