diff --git a/src/app/app.component.html b/src/app/app.component.html index ff88d12..60c0232 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,3 +4,4 @@ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4767aac..1d5362f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,7 @@ import { Component, ViewChild, } from '@angular/core'; import { Osrm } from './interfaces/osrm'; import { MapComponent } from './map/map.component'; +import { RouteListComponent } from './route-list/route-list.component'; @Component({ @@ -14,10 +15,11 @@ import { MapComponent } from './map/map.component'; export class AppComponent { title = "Street Map"; @ViewChild('mapRef') mapCompopnent!: MapComponent; + @ViewChild('routeListRef') routeListCompopnent!: RouteListComponent; onSearchResponse($event: Osrm): void { this.mapCompopnent.drawPath($event); - this.mapCompopnent.updateSidebar($event); + this.routeListCompopnent.updateSidebar($event); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 95733c0..ec03a98 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,12 +4,14 @@ import {HttpClientModule} from '@angular/common/http'; import { AppComponent } from './app.component'; import { SearchComponent } from './search/search.component'; import { MapComponent } from './map/map.component'; +import { RouteListComponent } from './route-list/route-list.component'; @NgModule({ declarations: [ AppComponent, SearchComponent, MapComponent, + RouteListComponent, ], imports: [ BrowserModule, diff --git a/src/app/map/map.component.css b/src/app/map/map.component.css index e3e09c9..a6c22ec 100644 --- a/src/app/map/map.component.css +++ b/src/app/map/map.component.css @@ -4,42 +4,3 @@ height: 100%; } -.osrm-route-container{ -position: absolute; -right: 0; -width:300px; -margin-top: 50px; -background-color: rgba(27, 27, 27, 0.801); -top:0; -bottom: 0; -color: white; -} - -.osrm-route-container h4{ -text-align: center; -line-height: 30px; -letter-spacing: 1px; -padding-top: 0px; -margin-top: 2px; -} - -.route-list{ -width: 100%; -display: block; -font-weight: bold; -text-align: left; -} - -.route-list div{ -width: 100%; -display: block; -border-top: 1px solid rgba(255, 255, 255, 0.418); -padding-top: 5px; -padding-bottom: 5px; -} - -.route-list div p{ -display: inline-block; -text-transform: capitalize; -padding-left: 40px; -} diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html index b8d3699..4fa1fbc 100644 --- a/src/app/map/map.component.html +++ b/src/app/map/map.component.html @@ -1,11 +1 @@
- -
-

Your Route Steps

- -
-
-

{{step.maneuver?.type }} {{step.maneuver?.modifier }} on {{step.name }}

-
-
-
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index 0af3cc6..54cec78 100644 --- a/src/app/map/map.component.ts +++ b/src/app/map/map.component.ts @@ -23,7 +23,7 @@ export class MapComponent implements AfterViewInit { constructor() { } map: Map; - routeSteps: Array = [] + ngAfterViewInit() { this.map = new Map({ @@ -86,12 +86,4 @@ export class MapComponent implements AfterViewInit { this.map.addLayer(this.vectorLayer);*/ } - - updateSidebar(osrm: Osrm): void{ - console.log("updateSidebar") - if(osrm.routes[0].legs[0].steps){ - this.routeSteps = osrm.routes[0].legs[0].steps; - } - console.log(this.routeSteps) - } } diff --git a/src/app/route-list/route-list.component.css b/src/app/route-list/route-list.component.css new file mode 100644 index 0000000..bf45830 --- /dev/null +++ b/src/app/route-list/route-list.component.css @@ -0,0 +1,50 @@ +.osrm-route-container{ + position: absolute; + right: 0; + width:300px; + margin-top: 50px; + background-color: rgba(27, 27, 27, 0.801); + top:0; + bottom: 0; + color: white; + overflow-y: scroll; + } + + .osrm-route-container h4{ + text-align: center; + line-height: 30px; + letter-spacing: 1px; + padding-top: 0px; + margin-top: 2px; + } + + .route-list{ + width: 100%; + display: block; + font-weight: bold; + text-align: left; + + } + + .route-list .route-list-item{ + width: 100%; + display: block; + border-top: 1px solid rgba(255, 255, 255, 0.418); + padding-top: 5px; + padding-bottom: 5px; + + } + + .route-list .route-list-item div{ + width: 100%; + /*background-image: url('/assets/images/turn-left.svg');*/ + background-repeat: no-repeat; + background-size: 35px 35px; + background-position:5px 10px; + } + + .route-list .route-list-item div p{ + display: inline-block; + text-transform: capitalize; + padding-left: 50px; + } diff --git a/src/app/route-list/route-list.component.html b/src/app/route-list/route-list.component.html new file mode 100644 index 0000000..0c98761 --- /dev/null +++ b/src/app/route-list/route-list.component.html @@ -0,0 +1,18 @@ +
+

Your Route Steps

+ +
+
+ +
+

{{step.maneuver?.type }} {{step.maneuver?.modifier }}
{{step.name }}

+
+ + +
+

{{step.maneuver?.type }} {{step.maneuver?.modifier }}
{{step.name }}

+
+
+
+
+ diff --git a/src/app/route-list/route-list.component.spec.ts b/src/app/route-list/route-list.component.spec.ts new file mode 100644 index 0000000..76e6d5e --- /dev/null +++ b/src/app/route-list/route-list.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RouteListComponent } from './route-list.component'; + +describe('RouteListComponent', () => { + let component: RouteListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RouteListComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RouteListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/route-list/route-list.component.ts b/src/app/route-list/route-list.component.ts new file mode 100644 index 0000000..537e288 --- /dev/null +++ b/src/app/route-list/route-list.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; +import { Osrm, OsrmStep } from '../interfaces/osrm'; + +@Component({ + selector: 'app-route-list', + templateUrl: './route-list.component.html', + styleUrls: ['./route-list.component.css'] +}) +export class RouteListComponent implements OnInit { + routeSteps: Array = [] + constructor() { } + + ngOnInit(): void { + } + + updateSidebar(osrm: Osrm): void{ + console.log("updateSidebar") + if(osrm.routes[0].legs[0].steps){ + this.routeSteps = osrm.routes[0].legs[0].steps; + } + } +} diff --git a/src/assets/images/fork-slight left.svg b/src/assets/images/fork-slight left.svg new file mode 100644 index 0000000..0dd7be8 --- /dev/null +++ b/src/assets/images/fork-slight left.svg @@ -0,0 +1,15 @@ + + + + + + + diff --git a/src/assets/images/fork-slight right.svg b/src/assets/images/fork-slight right.svg new file mode 100644 index 0000000..960930b --- /dev/null +++ b/src/assets/images/fork-slight right.svg @@ -0,0 +1,13 @@ + + + + + + + diff --git a/src/assets/images/left.svg b/src/assets/images/left.svg new file mode 100644 index 0000000..dfd6b81 --- /dev/null +++ b/src/assets/images/left.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/assets/images/right.svg b/src/assets/images/right.svg new file mode 100644 index 0000000..cb235f8 --- /dev/null +++ b/src/assets/images/right.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/assets/images/slight left.svg b/src/assets/images/slight left.svg new file mode 100644 index 0000000..d3987ae --- /dev/null +++ b/src/assets/images/slight left.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/assets/images/slight right.svg b/src/assets/images/slight right.svg new file mode 100644 index 0000000..bd90e45 --- /dev/null +++ b/src/assets/images/slight right.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/assets/images/straight.svg b/src/assets/images/straight.svg new file mode 100644 index 0000000..1d5ff60 --- /dev/null +++ b/src/assets/images/straight.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/src/styles.css b/src/styles.css index 6b98590..a5be714 100644 --- a/src/styles.css +++ b/src/styles.css @@ -16,6 +16,7 @@ body { right:0; left:0; overflow: hidden; + background-color: rgb(37, 37, 37); } button{