cleaned up

src/app/interfaces/routeResponse.ts

@@ -1,9 +1,8 @@
-
+interface ResponseNode {
-interface ResponseNode{
   lat: number;
   lon: number;
 }
 
-export interface RouteResponse{
+export interface RouteResponse {
   nodes: Array<ResponseNode>;
 }

src/app/interfaces/searchResponse.ts

@@ -1,8 +1,8 @@
-export interface SearchWay{
+export interface SearchWay {
   id: number;
   name: string;
 }
 
-export interface SearchResponse{
+export interface SearchResponse {
   ways: Array<SearchWay>;
 }

src/app/map/map.component.css

@@ -1,6 +1,4 @@
-
 #map {
     width: 100%;
     height: 100%;
 }
-

src/app/map/map.component.spec.ts

@@ -8,7 +8,7 @@ describe('MapComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ MapComponent ]
+      declarations: [MapComponent]
     })
       .compileComponents();
   });

src/app/map/map.component.ts

@@ -12,7 +12,7 @@ import LineString from 'ol/geom/LineString';
 import { Feature } from 'ol';
 import Geometry from 'ol/geom/Geometry';
 import { RouteResponse } from '../interfaces/routeResponse';
-import {Stroke, Style} from 'ol/style';
+import { Stroke, Style } from 'ol/style';
 
 @Component({
   selector: 'app-map',
@@ -58,7 +58,7 @@ export class MapComponent implements AfterViewInit {
     setTimeout(() => this.map.updateSize(), 200);
   }
 
-  drawPath(routeResponse: RouteResponse): void{
+  drawPath(routeResponse: RouteResponse): void {
     // https://routing.openstreetmap.de/routed-bike/route/v1/driving/8.6042708,53.5151533;13.6887164,51.0491468?overview=false&alternatives=true&steps=true
     console.log(routeResponse);
 
@@ -67,7 +67,7 @@ export class MapComponent implements AfterViewInit {
     const lineString: LineString = new LineString(fCoordinates);
     const feature: Feature<Geometry> = new Feature({ geometry: lineString });
     feature.setStyle(this.lineStyle);
-    const vectorSource = new VectorSource({ features: [ feature ]});
+    const vectorSource = new VectorSource({ features: [feature] });
     const vectorLayer = new VectorLayer({ source: vectorSource });
     this.map.removeLayer(this.map.getLayers().item(1))
     this.map.addLayer(vectorLayer);

src/app/search/search.component.html

@@ -1,8 +1,15 @@
-
 <div class="searchField">
-
   <div class="autocomplete">
-	  	<input #inputFrom (click)="getValue(inputFrom.value, true)" (input)="getValue(inputFrom.value, true)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
+    <input
+      #inputFrom
+      (click)="getValue(inputFrom.value, true)"
+      (input)="getValue(inputFrom.value, true)"
+      type="text"
+      name="inputFrom"
+      id="inputFrom"
+      placeholder="From"
+      value="{{ inputFromValue }}"
+    />
     <div class="autocomplete-items autocomplete-items-from">
       <div *ngFor="let item of searchItemsFrom" (click)="select(true, item)">
         <label>{{ item.name }}</label>
@@ -10,9 +17,17 @@
     </div>
   </div>
 
-
   <div class="autocomplete" id="autocompleteTo">
-		<input #inputTo (click)="getValue(inputTo.value, false)" (input)="getValue(inputTo.value, false)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}">
+    <input
+      #inputTo
+      (click)="getValue(inputTo.value, false)"
+      (input)="getValue(inputTo.value, false)"
+      type="text"
+      name="inputTo"
+      id="inputTo"
+      placeholder="To"
+      value="{{ inputToValue }}"
+    />
     <div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
       <div *ngFor="let item of searchItemsTo" (click)="select(false, item)">
         <label>{{ item.name }}</label>
@@ -21,5 +36,9 @@
   </div>
 </div>
 
-<button *ngIf="!isSearching" class="routeBtn" (click)="getRoute()">Route</button>
+<ng-container *ngIfElse="isSearching" else routeBtn>
-<img *ngIf="isSearching"src="/assets/images/loading.gif" style="margin-top:15px; margin-left:10px;width:25px;height: 25px;" />
+  <img src="/assets/images/loading.gif" style="margin-top: 15px; margin-left: 10px; width: 25px; height: 25px" />
+</ng-container>
+<ng-template #routeBtn>
+  <button class="routeBtn" (click)="getRoute()">Route</button>
+</ng-template>

src/app/search/search.component.spec.ts

@@ -8,7 +8,7 @@ describe('SearchComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SearchComponent ]
+      declarations: [SearchComponent]
     })
       .compileComponents();
   });

src/app/search/search.component.ts

@@ -29,12 +29,12 @@ export class SearchComponent {
     private pythonBackendService: PythonBackendService,
   ) { }
 
-  select(isFrom: boolean, item: SearchWay): void{
+  select(isFrom: boolean, item: SearchWay): void {
-    if(isFrom){
+    if (isFrom) {
       this.selectedSearchWayFrom = item;
       this.inputFromValue = item.name;
       this.searchItemsFrom = [];
-    }else{
+    } else {
       this.selectedSearchWayTo = item;
       this.inputToValue = item.name;
       this.searchItemsTo = [];
@@ -50,25 +50,25 @@ export class SearchComponent {
 
     value = value.trim();
 
-    this.pythonBackendService.sendSearchQueryRequest(value, "10")
+    this.pythonBackendService.sendSearchQueryRequest(value, "10") // "10" -> limit of search results
-    .subscribe((response: SearchResponse) => response.ways?.forEach(way =>{
+      .subscribe((response: SearchResponse) => response.ways?.forEach(way => {
-      if(isFrom){
+        if (isFrom) {
           this.searchItemsFrom.push(way);
           this.selectedSearchWayFrom = way;
-      }else{
+        } else {
           this.searchItemsTo.push(way);
           this.selectedSearchWayTo = way;
         }
       }));
   }
 
-  getRoute(): void{
+  getRoute(): void {
-    if(this.selectedSearchWayFrom && this.selectedSearchWayTo)
+    if (this.selectedSearchWayFrom && this.selectedSearchWayTo)
       this.isSearching = true;
     this.pythonBackendService.sendRouteQueryRequest(this.selectedSearchWayFrom.id.toString(), this.selectedSearchWayTo.id.toString())
-      .pipe(catchError(err =>{
+      .pipe(catchError(err => {
         console.error(err);
-        return of({nodes:[]});
+        return of({ nodes: [] });
       }))
       .subscribe(
         (response: RouteResponse) => {