From 1dc65336c46763daa868a5f3b691f497181e6cd6 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Thu, 13 Jan 2022 12:27:42 +0100 Subject: [PATCH 1/4] added search component --- src/app/app.component.css | 56 ------------------------- src/app/app.component.html | 10 +---- src/app/app.component.ts | 22 +--------- src/app/app.module.ts | 2 + src/app/search/search.component.css | 54 ++++++++++++++++++++++++ src/app/search/search.component.html | 9 ++++ src/app/search/search.component.spec.ts | 25 +++++++++++ src/app/search/search.component.ts | 32 ++++++++++++++ 8 files changed, 124 insertions(+), 86 deletions(-) create mode 100644 src/app/search/search.component.css create mode 100644 src/app/search/search.component.html create mode 100644 src/app/search/search.component.spec.ts create mode 100644 src/app/search/search.component.ts diff --git a/src/app/app.component.css b/src/app/app.component.css index 5378f67..d28069b 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -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%; diff --git a/src/app/app.component.html b/src/app/app.component.html index e4963ba..b78cf35 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,13 +1,5 @@
-
-
- -
-
test
-
-
- -
+

{{title}}

diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a779e2b..b80b6ca 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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, OnInit, AfterViewInit} from '@angular/core'; import { defaults as defaultControls } from 'ol/control'; import { fromLonLat } from 'ol/proj'; @@ -20,24 +18,6 @@ export class AppComponent implements AfterViewInit, OnInit { 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() { } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1be550e..6ce9c83 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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, diff --git a/src/app/search/search.component.css b/src/app/search/search.component.css new file mode 100644 index 0000000..a2023e0 --- /dev/null +++ b/src/app/search/search.component.css @@ -0,0 +1,54 @@ + +.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; +} \ No newline at end of file diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html new file mode 100644 index 0000000..63a4035 --- /dev/null +++ b/src/app/search/search.component.html @@ -0,0 +1,9 @@ +
+
+ +
+
test
+
+
+ +
\ No newline at end of file diff --git a/src/app/search/search.component.spec.ts b/src/app/search/search.component.spec.ts new file mode 100644 index 0000000..918ce70 --- /dev/null +++ b/src/app/search/search.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchComponent } from './search.component'; + +describe('SearchComponent', () => { + let component: SearchComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SearchComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts new file mode 100644 index 0000000..b975629 --- /dev/null +++ b/src/app/search/search.component.ts @@ -0,0 +1,32 @@ +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; + + + 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(): void { + } + +} From 157e18fe2d0e4716da497c4cd3d6c943b955ee23 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Thu, 13 Jan 2022 13:59:44 +0100 Subject: [PATCH 2/4] added auto-complete-list with example values --- src/app/app.component.ts | 8 ++------ src/app/interfaces/nominatim.ts | 24 ++++++++++++------------ src/app/search/search.component.css | 3 +++ src/app/search/search.component.html | 19 +++++++++++++++---- src/app/search/search.component.ts | 18 ++++++++++++++---- 5 files changed, 46 insertions(+), 26 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b80b6ca..30f19bc 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, AfterViewInit} from '@angular/core'; +import { Component, AfterViewInit} from '@angular/core'; import { defaults as defaultControls } from 'ol/control'; import { fromLonLat } from 'ol/proj'; @@ -14,14 +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; - ngOnInit() { - - } - ngAfterViewInit() { this.map = new Map({ target: 'map', diff --git a/src/app/interfaces/nominatim.ts b/src/app/interfaces/nominatim.ts index a4661d1..ffbd6e6 100644 --- a/src/app/interfaces/nominatim.ts +++ b/src/app/interfaces/nominatim.ts @@ -1,16 +1,16 @@ // Nominatim JSON object to TypeScript interface export interface Nominatim { - boundingbox: Array; - category: string; + boundingbox?: Array; + 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; + icon?: string; + importance?: number; + lat?: string; + licence?: string; + lon?: string; + osm_id?: number; + osm_type?: string; + place_id?: number; + place_rank?: number; + type?: string; } diff --git a/src/app/search/search.component.css b/src/app/search/search.component.css index a2023e0..e72df43 100644 --- a/src/app/search/search.component.css +++ b/src/app/search/search.component.css @@ -33,6 +33,9 @@ top: 100%; left: 0; right: 0; + width: 210px; + margin-left: 30px; + margin-top: 5px; } .autocomplete-items div { diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html index 63a4035..ef00636 100644 --- a/src/app/search/search.component.html +++ b/src/app/search/search.component.html @@ -1,9 +1,20 @@
-
-
test
+
+
+ {{ item.display_name }} +
+
- -
\ No newline at end of file +
+ +
+
+ {{ item.display_name }} + +
+
+
+
\ No newline at end of file diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index b975629..fe33456 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -11,19 +11,29 @@ import { NominatimService } from '../nominatim.service'; export class SearchComponent implements OnInit { @ViewChild("inputautocompleteList") autocompleteList: ElementRef; + itemsFrom: Nominatim[] = []; + itemsTo: Nominatim[] = []; constructor(private nominatimService: NominatimService) { } - updateAutoCompleteList(): void{ - this.autocompleteList.nativeElement.innerHTML = "Fsd"; + updateAutoCompleteList(itemsFrom: Nominatim[], itemsTo: Nominatim[]): void{ + + this.itemsFrom = itemsFrom; + this.itemsTo = itemsTo; + + /*this.autocompleteList.nativeElement.innerHTML = ""; + items.forEach(item => { + this.autocompleteList.nativeElement.innerHTML += '
' + item.display_name + '
' ; + });*/ } // 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[]) => console.log(response)); + /*this.nominatimService.sendQueryRequest(valueFrom) + .subscribe((response: Nominatim[]) => this.updateAutoCompleteList(response));*/ } ngOnInit(): void { From aae9f588b75f2b312fd8f3c8f2a233eb3ba79c7c Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Thu, 13 Jan 2022 14:11:38 +0100 Subject: [PATCH 3/4] remove example values --- src/app/interfaces/nominatim.ts | 2 +- src/app/search/search.component.css | 8 ++++++++ src/app/search/search.component.html | 6 +++--- src/app/search/search.component.ts | 20 +++++++------------- 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/app/interfaces/nominatim.ts b/src/app/interfaces/nominatim.ts index ffbd6e6..1f59ce9 100644 --- a/src/app/interfaces/nominatim.ts +++ b/src/app/interfaces/nominatim.ts @@ -2,7 +2,7 @@ export interface Nominatim { boundingbox?: Array; category?: string; - display_name: string; + display_name?: string; icon?: string; importance?: number; lat?: string; diff --git a/src/app/search/search.component.css b/src/app/search/search.component.css index e72df43..b5ee381 100644 --- a/src/app/search/search.component.css +++ b/src/app/search/search.component.css @@ -1,3 +1,10 @@ +#inputFrom:focus + .autocomplete-items-from{ + display:block; +} + +#inputTo:focus + .autocomplete-items-to{ + display:block; +} .searchField{ display:block; @@ -24,6 +31,7 @@ } .autocomplete-items { + display:none; position: absolute; border: 1px solid #d4d4d4; border-bottom: none; diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html index ef00636..e483cf5 100644 --- a/src/app/search/search.component.html +++ b/src/app/search/search.component.html @@ -1,7 +1,7 @@
-
+
{{ item.display_name }} @@ -9,8 +9,8 @@
- -
+ +
{{ item.display_name }} diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index fe33456..f949500 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -16,24 +16,18 @@ export class SearchComponent implements OnInit { constructor(private nominatimService: NominatimService) { } - updateAutoCompleteList(itemsFrom: Nominatim[], itemsTo: Nominatim[]): void{ - - this.itemsFrom = itemsFrom; - this.itemsTo = itemsTo; - - /*this.autocompleteList.nativeElement.innerHTML = ""; - items.forEach(item => { - this.autocompleteList.nativeElement.innerHTML += '
' + item.display_name + '
' ; - });*/ - } // 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.updateAutoCompleteList([{display_name: 'Hallo'}, {display_name: 'Test2'}], [{display_name: 'Halload'}, {display_name: 'Test4'}]); - /*this.nominatimService.sendQueryRequest(valueFrom) - .subscribe((response: Nominatim[]) => this.updateAutoCompleteList(response));*/ + this.nominatimService.sendQueryRequest(valueFrom) + .subscribe((response: Nominatim[]) => this.itemsFrom = response); + + this.nominatimService.sendQueryRequest(valueTo) + .subscribe((response: Nominatim[]) => this.itemsTo = response); } ngOnInit(): void { From d7be9c63faf114e620c7637c97561cbb1a3f80e9 Mon Sep 17 00:00:00 2001 From: Janis Meister Date: Fri, 14 Jan 2022 09:11:29 +0100 Subject: [PATCH 4/4] changed css of search inputs --- src/app/search/search.component.css | 2 ++ src/app/search/search.component.html | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/search/search.component.css b/src/app/search/search.component.css index b5ee381..c2093e1 100644 --- a/src/app/search/search.component.css +++ b/src/app/search/search.component.css @@ -48,6 +48,8 @@ .autocomplete-items div { padding: 10px; + font-weight: normal; + font-size: 11pt; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html index e483cf5..8a3264a 100644 --- a/src/app/search/search.component.html +++ b/src/app/search/search.component.html @@ -1,6 +1,6 @@
- +
{{ item.display_name }} @@ -9,7 +9,7 @@
- +
{{ item.display_name }}