change directory
This commit is contained in:
39
src/app/component/list/list.component.css
Normal file
39
src/app/component/list/list.component.css
Normal 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;
|
||||
}
|
||||
41
src/app/component/list/list.component.html
Normal file
41
src/app/component/list/list.component.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<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" class="row">
|
||||
<h3>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isNear && location && location.waypoints" class="container">
|
||||
<h1>
|
||||
{{location.location}}
|
||||
</h1>
|
||||
<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 class="distance">
|
||||
<h4 *ngIf="distance[i] && !positionNotFound">{{translations.distance}}{{distance[i]}} km</h4>
|
||||
<h4 *ngIf="positionNotFound && !distance[i]">{{translations.positionNotFoundErrorMessage}}</h4>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
126
src/app/component/list/list.component.ts
Normal file
126
src/app/component/list/list.component.ts
Normal file
@@ -0,0 +1,126 @@
|
||||
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";
|
||||
|
||||
@Component({
|
||||
selector: 'app-list',
|
||||
templateUrl: './list.component.html',
|
||||
styleUrls: ['./list.component.css']
|
||||
})
|
||||
export class ListComponent implements OnInit, OnChanges {
|
||||
locationParams: string | undefined
|
||||
locations: Partial<Locations>[] | undefined;
|
||||
location: Partial<Locations> | undefined;
|
||||
|
||||
positionCord: any;
|
||||
|
||||
isNear: boolean = true;
|
||||
|
||||
distance: number[] = [];
|
||||
|
||||
translations: listTranslations = {} as listTranslations
|
||||
|
||||
positionNotFound: boolean = false;
|
||||
|
||||
constructor(private route: ActivatedRoute, private readjsonService: ReadjsonService, private positionService: positionService, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this.translations = this.readTranslationJsonService.getListTransaltions();
|
||||
this.route.params.subscribe(params => {
|
||||
this.locationParams = params['location'];
|
||||
});
|
||||
this.readjsonService.getLocations().subscribe(locations => {
|
||||
this.locations = locations;
|
||||
if (this.locationParams != null) {
|
||||
this.readjsonService.getLocation(this.locationParams ?? "").subscribe(async location => {
|
||||
this.location = location;
|
||||
this.readjsonService.getWaypoints(this.locationParams ?? "").subscribe(waypoints => {
|
||||
if (this.location) {
|
||||
this.location.waypoints = waypoints ?? []
|
||||
}
|
||||
});
|
||||
await this.checkDataPopulated();
|
||||
});
|
||||
}
|
||||
});
|
||||
this.getPosition();
|
||||
this.positionNotFoundFunction();
|
||||
}
|
||||
|
||||
positionNotFoundFunction() {
|
||||
if (!this.positionNotFound) {
|
||||
setTimeout(() => {
|
||||
if (!this.distance[0]) {
|
||||
this.positionNotFound = true;
|
||||
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes['positionCord'] && (changes['positionCord'])) {
|
||||
console.log("onChanges")
|
||||
this.setDistance();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private checkDataPopulated(): void {
|
||||
if (this.locations && this.location) {
|
||||
console.log("Dati popolati correttamente:", this.locations, this.location);
|
||||
for (let i = 0; i < this.locations.length; i++) {
|
||||
if (this.locations[i].location === this.locationParams) {
|
||||
this.location = this.locations[i];
|
||||
console.log("Location trovata:", this.location);
|
||||
this.isNear = false;
|
||||
this.setDistance();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private setDistance(): void {
|
||||
if (this.locations && this.location) {
|
||||
if (this.isNear) {
|
||||
console.log("location lenght " + this.locations.length);
|
||||
for (let i = 0; i < this.locations.length; i++) {
|
||||
console.log("for" + i);
|
||||
console.log("lat" + this.locations[i].lat);
|
||||
this.distance.push(this.positionService.getDistanceBetweenCoordinates(this.locations[i].lat, this.locations[i].lon, this.positionCord.lat, this.positionCord.lon));
|
||||
}
|
||||
} else {
|
||||
if (this.location?.waypoints) {
|
||||
console.log("waypoints lenght " + this.location.waypoints.length);
|
||||
for (let i = 0; i < this.location.waypoints.length; i++) {
|
||||
console.log("for" + i);
|
||||
console.log("lat" + this.location.waypoints[i].lat);
|
||||
this.distance.push(this.positionService.getDistanceBetweenCoordinates(this.location.waypoints[i].lat, this.location.waypoints[i].lon, this.positionCord.lat, this.positionCord.lon));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log("ciao" + this.distance[0])
|
||||
}
|
||||
|
||||
getPosition(): any {
|
||||
setInterval(async () => {
|
||||
this.positionCord = await this.positionService.getLocation();
|
||||
this.setDistance();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
async switchLanguage(lang: string) {
|
||||
this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
|
||||
this.translations.distance = await this.translateService.getData(this.translations.distance, lang);
|
||||
this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
|
||||
this.translations.positionNotFoundErrorMessage = await this.translateService.getData(this.translations.positionNotFoundErrorMessage, lang);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user