janis/street-map-typescript
1
0
Fork 0
mirror of https://github.com/DerTyp7/street-map-typescript.git synced 2025-10-29 12:52:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

coodinates are saved in hidden inputs

Browse Source
This commit is contained in:
Janis Meister
2022-01-14 12:48:51 +01:00
parent 227d979467
commit 94d5725c42
2 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/search/search.component.html
View File

@@ -1,13 +1,13 @@
<div class="searchField">
<div id="coordinates">
<input *ngIf="photonItemsFrom[0]" id="longFromInput" value="{{ longFrom }}">
<input *ngIf="photonItemsFrom[0]" id="latFromInput" value="{{ latFrom }}">
<input *ngIf="photonItemsFrom[0]" hidden id="longFromInput" value="{{ longFrom }}">
<input *ngIf="photonItemsFrom[0]" hidden id="latFromInput" value="{{ latFrom }}">
<input *ngIf="photonItemsTo[0]" id="longToInput" value="{{ longTo}}">
<input *ngIf="photonItemsTo[0]" id="latToInput" value="{{ latTo }}">
<input *ngIf="photonItemsTo[0]" hidden id="longToInput" value="{{ longTo}}">
<input *ngIf="photonItemsTo[0]" hidden id="latToInput" value="{{ latTo }}">
</div>
<div class="autocomplete">
<input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
<input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
<div #inputautocompleteList class="autocomplete-items autocomplete-items-from">
<div *ngFor="let item of nominatimItemsFrom" >
@@ -15,14 +15,15 @@
<input type="hidden" value="{{ item.display_name }}">
</div>
<div *ngFor="let item of photonItemsFrom" (click)="changeInputs(true, item.geometry?.coordinates![0], item.geometry?.coordinates![1] )">
<div *ngFor="let item of photonItemsFrom"
(click)="selectPhoton(true, item)">
{{ item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}}
</div>
</div>
</div>
<div class="autocomplete" id="autocompleteTo">
<input #inputTo (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputTo" id="inputTo" placeholder="To">
<input #inputTo (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}">
<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
<div *ngFor="let item of nominatimItemsTo" >
@@ -30,7 +31,8 @@
<input type="hidden" value="{{ item.display_name }}">
</div>
<div *ngFor="let item of photonItemsTo" (click)="changeInputs(false, item.geometry?.coordinates![0], item.geometry?.coordinates![1] )">
<div *ngFor="let item of photonItemsTo"
(click)="selectPhoton(false, item)">
{{ item.properties.name }} {{item.properties.postcode}} {{item.properties.city}} {{item.properties.countrycode}}
<input type="hidden" value="{{ item.properties?.name }}">
</div>

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

@@ -19,6 +19,9 @@ export class SearchComponent implements OnInit {
photonItemsFrom: Photon[] = [];
photonItemsTo: Photon[] = [];
inputFromValue: string;
inputToValue: string;
longFrom: number = 0;
latFrom: number = 0;
longTo: number = 0;
@@ -26,13 +29,28 @@ export class SearchComponent implements OnInit {
constructor(private nominatimService: NominatimService, private photonService: PhotonService) { }
changeInputs(isFrom: boolean, long: number, lat: number): void{
selectPhoton(isFrom: boolean, p: Photon): void{
if(isFrom){
this.longFrom = long;
this.latFrom = lat;
this.longFrom = <number> p.geometry?.coordinates[0];
this.latFrom = <number> p.geometry?.coordinates[1];
this.inputFromValue = <string> p.properties.name
if(p.properties.postcode){
this.inputFromValue += " " + p.properties.postcode;
}
if(p.properties.city){
this.inputFromValue += " " + p.properties.city;
}
if(p.properties.countrycode){
this.inputFromValue += " " + p.properties.countrycode;
}
}else{
this.longTo = long;
this.latTo = lat;
this.longTo = <number>p.geometry?.coordinates[0];
this.latTo = <number>p.geometry?.coordinates[1];
this.inputToValue = <string> p.properties.name + " " + p.properties.countrycode;
}
}
// Gets called in "app.component.html" when an input changes its value