added onbegluurd checkbox

sdhoek · May 7, 2018 · a1c204b · a1c204b
1 parent 69fa86f
commit a1c204b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/src/app/map/from-to/from-to.component.css b/src/app/map/from-to/from-to.component.css
@@ -1,6 +1,6 @@
 .from-to-container {
  position: absolute;
- height: 52px;
+ height: 80px;
  width: 380px;
  background: #f6be0e;
  z-index: 500;
@@ -96,3 +96,14 @@ button:active {
  background: #fff;
 }
 
+.checkbox-container {
+ z-index: 500;
+ position: absolute;
+ top: 75px;
+ left: 5px;
+}
+
+.checkbox {
+ width: 20px;
+ height: 20px;
+}
diff --git a/src/app/map/from-to/from-to.component.html b/src/app/map/from-to/from-to.component.html
@@ -27,4 +27,8 @@
  <div id="from-to-search">
  <button (click)="findRoute()" type="button" name="button">zoek</button>
  </div>
+
+ <div class="checkbox-container">
+ <input type="checkbox" class="checkbox" [(ngModel)]="onbegluurd" name="gluren" (change)="setOnbegluurd($event)" value="false">Ik wil onbegluurd fietsen.
+ </div>
 </div>
diff --git a/src/app/map/from-to/from-to.component.ts b/src/app/map/from-to/from-to.component.ts
@@ -3,6 +3,7 @@ import { AppHttpService } from '../../shared/app-http.service';
 import { Subject } from 'rxjs/Subject';
 import "rxjs/add/operator/map";
 import "rxjs/add/operator/debounceTime";
+import { RoutingService } from '../../shared/routing.service';
 @Component({
  selector: 'app-from-to',
  templateUrl: './from-to.component.html',
@@ -16,7 +17,8 @@ export class FromToComponent implements OnInit {
  public naarSuggests = [];
  public vanLoc = [];
  public naarLoc = [];
- constructor(private http: AppHttpService) {
+ public onbegluurd = false;
+ constructor(private http: AppHttpService, private routingService: RoutingService) {
 
  }
  ngOnInit() {
@@ -37,6 +39,10 @@ export class FromToComponent implements OnInit {
  this.naarSubject.next(event);
  }
 
+ public setOnbegluurd(event: Event) {
+ this.routingService.setBegluurdStatus(this.onbegluurd);
+ }
+
  public getVanSuggest(van) {
  const suggestUrl = 'https://geodata.nationaalgeoregister.nl/locatieserver/v3/suggest?q='
  this.http.get(suggestUrl+van).then(r=>{

diff --git a/src/app/shared/routing.service.ts b/src/app/shared/routing.service.ts
@@ -6,6 +6,7 @@ export class RoutingService {
  private googleProxy = 'http://localhost:3000/direction-proxy?';
  private googleUrlEndpoint = 'https://maps.googleapis.com/maps/api/directions/json?';
  private googleApiKey = 'AIzaSyDWy6wP5gJzKJ0xc7UV7j1gUJ2cv4NZv20';
+ private onbegluurd = false;
 
  constructor(private http: AppHttpService) {
 
@@ -25,16 +26,27 @@ export class RoutingService {
  // });
  // }
 
- public getNonCameraRoute(origin, destination) {
+ public setBegluurdStatus(bool: boolean) {
+ this.onbegluurd = bool;
+ }
+
+ private getNonCameraRoute(origin, destination) {
  const body = {"privacy": true, "start":{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[5.087872,52.072859]}},"end":{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[5.119543,52.074152]}}};
  return this.http.post('http://service.geoloep.nl/routing/api/route/', body);
  }
 
- public getCameraRoute(origin, destination) {
+ private getCameraRoute(origin, destination) {
  const body = {"privacy": false,"start":{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[5.087872,52.072859]}},"end":{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[5.119543,52.074152]}}};
  return this.http.post('http://service.geoloep.nl/routing/api/route/', body);
  }
 
+ public getRoute(origin, destination) {
+ if (this.onbegluurd) {
+ return this.getNonCameraRoute(origin, destination);
+ } else {
+ return this.getCameraRoute(origin, destination);
+ }
+ }
  // public createRouteLinestring(directions) {
  // const geometry = {
  // type: 'LineString',