JoeKung/Progetto-m152-Angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
grata
2023-04-25 14:59:39 +02:00
parent 1793d2115f
commit 75833f4db4
4 changed files with 79 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/home/home.component.html
View File

@@ -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>

39
src/app/list/list.component.css
View File

@@ -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;
}

35
src/app/list/list.component.html
View File

@@ -1,35 +1,38 @@
<div class="dropdown dropdown-hover">
<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>
<li (click)="switchLanguage('FR')"><a>FR</a></li>
<li (click)="switchLanguage('IT')"><a>IT</a></li>
</ul>
</div>
<div *ngIf="isNear">
<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>
<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]">
<h4>{{translations.distance}}{{distance[i]}} km</h4>
<div>
<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]">
<h4>{{translations.distance}}{{distance[i]}} km</h4>
<div class="distance">
<h4 *ngIf="distance[i]">{{translations.distance}}{{distance[i]}} km</h4>
<h4 *ngIf="positionNotFound">could not retrieve distance</h4>
</div>
</div>

28
src/app/list/list.component.ts
View File

@@ -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,26 +88,26 @@ export class ListComponent implements OnInit, OnChanges {
}
private setDistance(): void {
if (this.locations && this.location){
if (this.isNear){
if (this.locations && this.location) {
if (this.isNear) {
console.log("location lenght " + this.locations.length);
for (let i = 0; i < this.locations.length; i++) {
console.log("for"+i);
console.log("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));
}
}
}
}
console.log("ciao" + this.distance[0])
console.log("ciao" + this.distance[0])
}
getPosition(): any {
@@ -109,6 +123,4 @@ export class ListComponent implements OnInit, OnChanges {
this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
}
}