mirror of
https://github.com/DerTyp7/street-map-typescript.git
synced 2025-10-29 12:52:11 +01:00
Merge branch 'search' into 'master'
Search See merge request streetmap1/ts-streetmap!2
This commit is contained in:
Janis Meister
@@ -14,62 +14,6 @@ header p{
|
||||
float:right;
|
||||
}
|
||||
|
||||
.searchField{
|
||||
display:block;
|
||||
float:left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.searchField input{
|
||||
margin-left: 25px;
|
||||
border: 1px solid white;
|
||||
border-radius: 3px;
|
||||
background-color: rgb(253, 253, 253);
|
||||
height: 20px;
|
||||
font-size: 13pt;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto';
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.autocomplete-items {
|
||||
position: absolute;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
z-index: 99;
|
||||
/*position the autocomplete items to be the same width as the container:*/
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.autocomplete-items div {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
/*when hovering an item:*/
|
||||
.autocomplete-items div:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
/*when navigating through the items using the arrow keys:*/
|
||||
.autocomplete-active {
|
||||
background-color: DodgerBlue !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#map{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
<header>
|
||||
<div class="searchField">
|
||||
<div class="autocomplete">
|
||||
<input #inputFrom (keyup)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
|
||||
<div #inputautocompleteList class="autocomplete-items">
|
||||
<div>test<input type="hidden" value="test"></div>
|
||||
</div>
|
||||
</div>
|
||||
<input #inputTo (keyup)="getValue(inputFrom.value, inputTo.value)"type="text" name="inputTo" id="inputTo" placeholder="To">
|
||||
</div>
|
||||
<app-search></app-search>
|
||||
<p>{{title}}</p>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { Component, OnInit, AfterViewInit, ElementRef, ViewChild} from '@angular/core';
|
||||
import { Nominatim } from './interfaces/nominatim';
|
||||
import { NominatimService } from './nominatim.service';
|
||||
import { Component, AfterViewInit} from '@angular/core';
|
||||
|
||||
import { defaults as defaultControls } from 'ol/control';
|
||||
import { fromLonLat } from 'ol/proj';
|
||||
@@ -16,32 +14,10 @@ import ZoomToExtent from 'ol/control/ZoomToExtent';
|
||||
styleUrls: ['./app.component.css', '../../node_modules/ol/ol.css']
|
||||
})
|
||||
|
||||
export class AppComponent implements AfterViewInit, OnInit {
|
||||
export class AppComponent implements AfterViewInit {
|
||||
title = "Street Map";
|
||||
map: Map;
|
||||
|
||||
@ViewChild("inputautocompleteList") autocompleteList: ElementRef;
|
||||
|
||||
|
||||
constructor(private nominatimService: NominatimService) { }
|
||||
|
||||
updateAutoCompleteList(): void{
|
||||
this.autocompleteList.nativeElement.innerHTML = "Fsd";
|
||||
}
|
||||
|
||||
// Gets called in "app.component.html" when an input changes its value
|
||||
getValue(valueFrom:string, valueTo:string): void{
|
||||
console.log("From " + valueFrom + " to " + valueTo);
|
||||
|
||||
this.nominatimService.sendQueryRequest(valueFrom)
|
||||
.subscribe((response: Nominatim[]) => console.log(response));
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.map = new Map({
|
||||
target: 'map',
|
||||
|
||||
@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import {HttpClientModule} from '@angular/common/http';
|
||||
import { AppComponent } from './app.component';
|
||||
import { SearchComponent } from './search/search.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
SearchComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
// Nominatim JSON object to TypeScript interface
|
||||
export interface Nominatim {
|
||||
boundingbox: Array<string>;
|
||||
category: string;
|
||||
display_name: string;
|
||||
icon: string;
|
||||
importance: number;
|
||||
lat: string;
|
||||
licence: string;
|
||||
lon: string;
|
||||
osm_id: number;
|
||||
osm_type: string;
|
||||
place_id: number;
|
||||
place_rank: number;
|
||||
type: string;
|
||||
boundingbox?: Array<string>;
|
||||
category?: string;
|
||||
display_name?: string;
|
||||
icon?: string;
|
||||
importance?: number;
|
||||
lat?: string;
|
||||
licence?: string;
|
||||
lon?: string;
|
||||
osm_id?: number;
|
||||
osm_type?: string;
|
||||
place_id?: number;
|
||||
place_rank?: number;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
67
src/app/search/search.component.css
Normal file
67
src/app/search/search.component.css
Normal file
@@ -0,0 +1,67 @@
|
||||
#inputFrom:focus + .autocomplete-items-from{
|
||||
display:block;
|
||||
}
|
||||
|
||||
#inputTo:focus + .autocomplete-items-to{
|
||||
display:block;
|
||||
}
|
||||
|
||||
.searchField{
|
||||
display:block;
|
||||
float:left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.searchField input{
|
||||
margin-left: 25px;
|
||||
border: 1px solid white;
|
||||
border-radius: 3px;
|
||||
background-color: rgb(253, 253, 253);
|
||||
height: 20px;
|
||||
font-size: 13pt;
|
||||
font-weight: bold;
|
||||
font-family: 'Roboto';
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.autocomplete-items {
|
||||
display:none;
|
||||
position: absolute;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
z-index: 99;
|
||||
/*position the autocomplete items to be the same width as the container:*/
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 210px;
|
||||
margin-left: 30px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.autocomplete-items div {
|
||||
padding: 10px;
|
||||
font-weight: normal;
|
||||
font-size: 11pt;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
/*when hovering an item:*/
|
||||
.autocomplete-items div:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
/*when navigating through the items using the arrow keys:*/
|
||||
.autocomplete-active {
|
||||
background-color: DodgerBlue !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
20
src/app/search/search.component.html
Normal file
20
src/app/search/search.component.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<div class="searchField">
|
||||
<div class="autocomplete">
|
||||
<input #inputFrom (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputFrom" id="inputFrom" placeholder="From">
|
||||
<div #inputautocompleteList class="autocomplete-items autocomplete-items-from">
|
||||
<div *ngFor="let item of itemsFrom" >
|
||||
{{ item.display_name }}
|
||||
<input type="hidden" value="{{ item.display_name }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="autocomplete">
|
||||
<input #inputTo (change)="getValue(inputFrom.value, inputTo.value)" type="text" name="inputTo" id="inputTo" placeholder="To">
|
||||
<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
|
||||
<div *ngFor="let item of itemsTo" >
|
||||
{{ item.display_name }}
|
||||
<input type="hidden" value="{{ item.display_name }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
25
src/app/search/search.component.spec.ts
Normal file
25
src/app/search/search.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SearchComponent } from './search.component';
|
||||
|
||||
describe('SearchComponent', () => {
|
||||
let component: SearchComponent;
|
||||
let fixture: ComponentFixture<SearchComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ SearchComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SearchComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
36
src/app/search/search.component.ts
Normal file
36
src/app/search/search.component.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { Component, OnInit, ElementRef, ViewChild} from '@angular/core';
|
||||
import { Nominatim } from '../interfaces/nominatim';
|
||||
import { NominatimService } from '../nominatim.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-search',
|
||||
templateUrl: './search.component.html',
|
||||
styleUrls: ['./search.component.css']
|
||||
})
|
||||
|
||||
export class SearchComponent implements OnInit {
|
||||
@ViewChild("inputautocompleteList") autocompleteList: ElementRef;
|
||||
|
||||
itemsFrom: Nominatim[] = [];
|
||||
itemsTo: Nominatim[] = [];
|
||||
|
||||
constructor(private nominatimService: NominatimService) { }
|
||||
|
||||
|
||||
// Gets called in "app.component.html" when an input changes its value
|
||||
getValue(valueFrom:string, valueTo:string): void{
|
||||
console.log("From " + valueFrom + " to " + valueTo);
|
||||
|
||||
//this.updateAutoCompleteList([{display_name: 'Hallo'}, {display_name: 'Test2'}], [{display_name: 'Halload'}, {display_name: 'Test4'}]);
|
||||
|
||||
this.nominatimService.sendQueryRequest(valueFrom)
|
||||
.subscribe((response: Nominatim[]) => this.itemsFrom = response);
|
||||
|
||||
this.nominatimService.sendQueryRequest(valueTo)
|
||||
.subscribe((response: Nominatim[]) => this.itemsTo = response);
|
||||
|
||||
}
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user