feat(Request service and spinner): Request service that tracks the on… (

#119)

* feat(Request service and spinner): Request service that tracks the ongoing requests and a spinner component that displays itself when more than 0 requests are ongoing

src/app/app.component.html

@@ -1,3 +1,4 @@
 <main>
+  <igo-spinner></igo-spinner>
   <router-outlet></router-outlet>
 </main>

src/app/app.component.spec.ts

@@ -4,8 +4,10 @@ import { LanguageService } from './core/language/language.service';
 
 import { TestModule } from './test.module';
 import { AppComponent } from './app.component';
+import { SpinnerComponent } from './core/spinner/spinner.component';
 import { NavigatorModule, NavigatorRoutingModule } from './pages';
 import { MediaService } from './core/media.service';
+import { RequestService } from './core/request.service';
 import { provideAppStore } from './core/core.module';
 
 import {} from 'jasmine';
@@ -20,12 +22,14 @@ describe('AppComponent', () => {
         NavigatorRoutingModule
       ],
       declarations: [
-        AppComponent
+        AppComponent,
+        SpinnerComponent
       ],
       providers: [
         LanguageService,
         provideAppStore(),
-        MediaService
+        MediaService,
+        RequestService
       ]
     });
     TestBed.compileComponents();

src/app/app.component.styl

@@ -1,3 +1,5 @@
+@require '../css/theme.styl';
+
 :host, main {
   width: 100%;
   height: 100%;
@@ -8,3 +10,11 @@ main {
   padding: 0;
   transition: 0.5s;
 }
+
+/*--- Spinner ---*/
+igo-spinner {
+  position: absolute;
+  top: $igo-margin;
+  right: $igo-margin;
+  z-index: 5;
+}

src/app/core/core.module.ts

@@ -1,6 +1,7 @@
 import { NgModule, Optional, SkipSelf, ModuleWithProviders } from '@angular/core';
 import { Http, Jsonp } from '@angular/http';
 import { CommonModule } from '@angular/common';
+import { MaterialModule } from '@angular/material';
 
 import { MissingTranslationHandler } from 'ng2-translate';
 
@@ -15,15 +16,17 @@ import { browserMedia, mapView, mapLayers, selectedTool,
          focusedResult } from '../reducers';
 
 import { MediaService } from './media.service';
+import { RequestService } from './request.service';
 import { MapService } from './map.service';
-
 import { ToolService } from './tool.service';
 import { SearchService } from './search.service';
 import { SearchSourceService } from './search-source.service';
 import { SearchSource } from '../search/sources/search-source';
 import { SearchSourceNominatim } from '../search/sources/search-source-nominatim';
 import { SearchSourceMSP } from '../search/sources/search-source-msp';
 
+import { SpinnerComponent } from './spinner/spinner.component';
+
 export function searchSourceServiceFactory(sources: SearchSource[]) {
   return new SearchSourceService(sources);
 }
@@ -77,15 +80,18 @@ export function provideAppStore() {
   });
 }
 
-
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    MaterialModule
   ],
-  exports: [],
-  declarations: []
+  exports: [
+    SpinnerComponent
+  ],
+  declarations: [
+    SpinnerComponent
+  ]
 })
-
 export class CoreModule {
   static forRoot(): ModuleWithProviders {
     return {
@@ -94,6 +100,7 @@ export class CoreModule {
         LanguageService,
         { provide: MissingTranslationHandler, useClass: IgoMissingTranslationHandler },
         MediaService,
+        RequestService,
         provideAppStore(),
         provideSearchSourceService(),
         MapService,

src/app/core/request.service.spec.ts

@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { RequestService } from './request.service';
+
+describe('RequestService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [RequestService]
+    });
+  });
+
+  it('should ...', inject([RequestService], (service: RequestService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/core/request.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class RequestService {
+
+  private count = 0;
+  requests = new Subject<number>();
+
+  constructor() { }
+
+  register(request: Observable<any>) {
+    this.count += 1;
+    this.requests.next(this.count);
+
+    return request.finally(this.unregister.call(this));
+  }
+
+  private unregister() {
+    this.count -= 1;
+    this.requests.next(this.count);
+  }
+
+}

src/app/core/search.service.spec.ts

@@ -1,6 +1,7 @@
 import { TestBed, inject } from '@angular/core/testing';
 
 import { SearchService } from './search.service';
+import { RequestService } from './request.service';
 import { HttpModule, JsonpModule } from '@angular/http';
 
 import {
@@ -20,7 +21,8 @@ describe('SearchService', () => {
         provideAppStore(),
         provideSearchSourceService(),
         provideSearchSource(),
-        SearchService
+        SearchService,
+        RequestService
       ]
     });
   });

src/app/core/search.service.ts

@@ -5,6 +5,7 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 
+import { RequestService } from './request.service';
 import { SearchSourceService } from './search-source.service';
 import { SearchResult } from '../search/shared/search-result.interface';
 import { SearchSource } from '../search/sources/search-source';
@@ -17,7 +18,8 @@ export class SearchService {
   subscriptions: Subscription[] = [];
 
   constructor(private store: Store<AppStore>,
-              private searchSourceService: SearchSourceService) {
+              private searchSourceService: SearchSourceService,
+              private requestService: RequestService) {
   }
 
   search(term?: string) {
@@ -29,7 +31,9 @@ export class SearchService {
   }
 
   searchSource(source: SearchSource, term?: string) {
-    return source.search(term)
+    const request = source.search(term);
+
+    return this.requestService.register(request)
       .catch(this.handleError)
       .subscribe((results: SearchResult[]) =>
         this.handleSearchResults(results, source));

src/app/core/spinner/spinner.component.html

@@ -0,0 +1,4 @@
+<div class="igo-spinner" [ngClass]="{'igo-spinner-shown': shown}">
+  <div class="igo-spinner-background"></div>
+  <md-progress-circle mode="indeterminate"></md-progress-circle>
+</div>

src/app/core/spinner/spinner.component.spec.ts

@@ -0,0 +1,32 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestModule } from '../../test.module';
+
+import { RequestService } from '../request.service';
+import { SpinnerComponent } from './spinner.component';
+
+describe('SpinnerComponent', () => {
+  let component: SpinnerComponent;
+  let fixture: ComponentFixture<SpinnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TestModule
+      ],
+      declarations: [ SpinnerComponent ],
+      providers: [ RequestService ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/spinner/spinner.component.styl

@@ -0,0 +1,33 @@
+@require '../../../css/theme.styl';
+
+$igo-spinner-size = 40px;
+$igo-spinner-border-width = 4px;
+$igo-spinner-top-left = 2px;
+
+.igo-spinner {
+  display: none;
+}
+
+.igo-spinner-shown {
+  display: block;
+}
+
+md-progress-circle {
+  height: $igo-spinner-size;
+  width: $igo-spinner-size;
+  border-radius: 50%;
+}
+
+:host >>> md-progress-circle path {
+  stroke: $igo-primary-color;
+}
+
+.igo-spinner-background {
+  height: $igo-spinner-size - $igo-spinner-border-width;
+  width: $igo-spinner-size - $igo-spinner-border-width;
+  border-radius: 50%;
+  border: $igo-spinner-border-width solid $igo-tertiary-color;
+  position: absolute;
+  top: $igo-spinner-top-left;
+  left: $igo-spinner-top-left;
+}

src/app/core/spinner/spinner.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+
+import { RequestService } from '../request.service';
+
+@Component({
+  selector: 'igo-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.styl'],
+})
+export class SpinnerComponent implements OnInit {
+
+  shown: boolean = false;
+
+  constructor(private requestService: RequestService) { }
+
+  ngOnInit() {
+    this.requestService.requests.subscribe((count: number) => {
+      this.shown = count > 0;
+    });
+  }
+
+}

src/app/core/tool.service.ts

@@ -22,16 +22,15 @@ export class ToolService {
     ToolService.toolClasses.push(cls);
   }
 
+  constructor() {
+    ToolService.register(SearchToolComponent);
+  }
+
   getTool(name: string) {
     return ToolService.tools.find(t => t.name === name);
   }
 
   getToolClass(name: string) {
     return ToolService.toolClasses.find(t => t.name_ === name);
   }
-
-  constructor() {
-    ToolService.register(SearchToolComponent);
-  }
-
 }

src/app/map/map/map.component.styl

@@ -5,3 +5,25 @@
   width: 100%;
   height: 100%;
 }
+
+:host >>> .igo-zoom-container {
+  position: absolute;
+  bottom: $igo-margin;
+  right: $igo-margin;
+  width: $igo-icon-button-width;
+
+  +media(mobile) {
+    display: none;
+  }
+}
+
+:host >>> .ol-attribution {
+  left: $igo-margin;
+  right: inherit;
+  text-align: left;
+  padding: 0;
+}
+
+:host >>> .ol-attribution ul {
+  padding: 0;
+}

src/app/map/zoom/zoom.component.styl

@@ -1,17 +1,6 @@
 @require '../../../css/theme.styl';
 @require '../../../css/media.styl';
 
-.igo-zoom-container {
-  position: absolute;
-  top: $igo-margin;
-  right: $igo-margin;
-  width: $igo-icon-button-width;
-
-  +media(mobile) {
-    display: none;
-  }
-}
-
 .igo-zoom-container button:first-child {
   margin-bottom: 2px;
 }

src/app/pages/navigator/navigator.component.spec.ts

@@ -8,6 +8,7 @@ import {
 import { MapService } from '../../core/map.service';
 import { LayerService } from '../../map/shared/layer.service';
 import { SearchService } from '../../core/search.service';
+import { RequestService } from '../../core/request.service';
 
 import { TestModule } from '../../test.module';
 import { SharedModule } from '../../shared/shared.module';
@@ -40,7 +41,8 @@ describe('NavigatorComponent', () => {
         MapService,
         LayerService,
         SearchService,
-        ToolService
+        ToolService,
+        RequestService
       ]
     })
     .compileComponents();