feat(user): add user button on map

src/lib/auth/shared/auth.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { Http, Headers } from '@angular/http';
 import { Router } from '@angular/router';
 
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Rx';
 import { JwtHelper } from 'angular2-jwt';
 
@@ -12,16 +13,19 @@ import { AuthOptions } from '../shared';
 
 @Injectable()
 export class AuthService {
+  public authenticate$ = new BehaviorSubject<Boolean>(undefined);
   public redirectUrl: string;
   private options: AuthOptions;
   private token: string;
+  private anonymous: boolean = false;
 
   constructor(private http: Http,
               private config: ConfigService,
               private router: Router) {
 
     this.options = this.config.getConfig('auth') || {};
     this.token = localStorage.getItem(this.options.tokenKey);
+    this.authenticate$.next(this.authenticated);
   }
 
   login(username: string, password: string): any {
@@ -38,6 +42,7 @@ export class AuthService {
         const data = res.json();
         this.token = data.token;
         localStorage.setItem(this.options.tokenKey, this.token);
+        this.authenticate$.next(true);
       })
       .catch((err: any) => {
         const body = err.json();
@@ -59,16 +64,24 @@ export class AuthService {
         const data = res.json();
         this.token = data.token;
         localStorage.setItem(this.options.tokenKey, this.token);
+        this.authenticate$.next(true);
       })
       .catch((err: any) => {
         const body = err.json();
         return Observable.throw([{text: body.message}]);
       });
   }
 
+  loginAnonymous() {
+    this.anonymous = true;
+    return Observable.of(true);
+  }
+
   logout() {
+    this.anonymous = false;
     this.token = undefined;
     localStorage.removeItem(this.options.tokenKey);
+    this.authenticate$.next(false);
     return Observable.of(true);
   }
 
@@ -105,7 +118,15 @@ export class AuthService {
     return Base64.encode(password);
   }
 
-  get logged() {
+  get logged(): boolean {
+    return this.authenticated || this.isAnonymous;
+  }
+
+  get isAnonymous(): boolean {
+    return this.anonymous;
+  }
+
+  get authenticated(): boolean {
     return this.isAuthenticated();
   }
 }

src/lib/auth/shared/index.ts

@@ -3,3 +3,5 @@ export * from './auth.interface';
 export * from './auth-http.provider';
 export * from './auth.guard';
 export * from './protected.directive';
+export * from './poi/poi.service';
+export * from './poi/poi.interface';

src/lib/auth/shared/poi/poi.interface.ts

@@ -0,0 +1,7 @@
+export interface Poi {
+  id?: string;
+  title: string;
+  x: number;
+  y: number;
+  zoom: number;
+}

src/lib/auth/shared/poi/poi.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { RequestService, ConfigService } from '../../../core';
+import { AuthHttp } from '../../../auth';
+import { Poi } from './poi.interface';
+
+@Injectable()
+export class PoiService {
+
+  private baseUrl: string;
+
+  constructor(private authHttp: AuthHttp,
+              private requestService: RequestService,
+              private config: ConfigService) {
+
+    this.baseUrl = this.config.getConfig('context.url');
+  }
+
+  get(): Observable<Poi[]> {
+    const url = this.baseUrl + '/pois';
+    const request = this.authHttp.get(url);
+    return this.requestService.register(request, 'Get POIs error')
+      .map((res) => {
+        const pois: Poi[] = res.json();
+        return pois;
+      });
+  }
+
+  delete(id: string): Observable<void> {
+    const url = this.baseUrl + '/pois/' + id;
+    const request = this.authHttp.delete(url);
+    return this.requestService.register(request, 'Delete POI error')
+      .map((res) => {
+        return res;
+      });
+  }
+
+  create(context: Poi): Observable<Poi> {
+    const url = this.baseUrl + '/pois';
+    const request = this.authHttp.post(url, JSON.stringify(context));
+    return this.requestService.register(request, 'Create POI error')
+      .map((res) => {
+        return res.json();
+      });
+  }
+
+}

src/lib/map/bookmark/bookmark.component.html → src/lib/map/bookmark-button/bookmark-button.component.html

@@ -1,4 +1,4 @@
-<div class="igo-bookmark-container">
+<div class="igo-bookmark-button-container">
   <button
     md-icon-button
     [color]="color"

src/lib/map/bookmark-button/bookmark-button.component.spec.ts

@@ -0,0 +1,30 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IgoSharedModule } from '../../shared';
+
+import { BookmarkButtonComponent } from './bookmark-button.component';
+
+describe('bookmarkButtonComponent', () => {
+  let component: BookmarkButtonComponent;
+  let fixture: ComponentFixture<BookmarkButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        IgoSharedModule
+      ],
+      declarations: [ BookmarkButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookmarkButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/lib/map/bookmark/bookmark.component.styl → src/lib/map/bookmark-button/bookmark-button.component.styl

@@ -1,6 +1,6 @@
 @require '../../../style/var.styl';
 
-.igo-bookmark-container {
+.igo-bookmark-button-container {
   width: $igo-icon-size;
   button {
     background-color: #fff;

src/lib/map/bookmark/bookmark.component.ts → src/lib/map/bookmark-button/bookmark-button.component.ts

@@ -9,11 +9,11 @@ import { IgoMap } from '../shared';
 import { BookmarkDialogComponent } from './bookmark-dialog.component';
 
 @Component({
-  selector: 'igo-bookmark',
-  templateUrl: './bookmark.component.html',
-  styleUrls: ['./bookmark.component.styl']
+  selector: 'igo-bookmark-button',
+  templateUrl: './bookmark-button.component.html',
+  styleUrls: ['./bookmark-button.component.styl']
 })
-export class BookmarkComponent {
+export class BookmarkButtonComponent {
 
   @Input()
   get map(): IgoMap { return this._map; }

src/lib/map/bookmark/index.ts → src/lib/map/bookmark-button/index.ts

@@ -1,2 +1,2 @@
-export * from './bookmark.component';
+export * from './bookmark-button.component';
 export * from './bookmark-dialog.component';

src/lib/map/geolocate/geolocate.component.html → src/lib/map/geolocate-button/geolocate-button.component.html

@@ -1,4 +1,4 @@
-<div class="igo-geolocate-container">
+<div class="igo-geolocate-button-container">
   <button
     md-icon-button
     [color]="color"

src/lib/map/geolocate-button/geolocate-button.component.spec.ts

@@ -0,0 +1,30 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IgoSharedModule } from '../../shared';
+
+import { GeolocateButtonComponent } from './geolocate-button.component';
+
+describe('geolocateButtonComponent', () => {
+  let component: GeolocateButtonComponent;
+  let fixture: ComponentFixture<GeolocateButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        IgoSharedModule
+      ],
+      declarations: [ GeolocateButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeolocateButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/lib/map/geolocate/geolocate.component.styl → src/lib/map/geolocate-button/geolocate-button.component.styl

@@ -1,6 +1,6 @@
 @require '../../../style/var.styl';
 
-.igo-geolocate-container {
+.igo-geolocate-button-container {
   width: $igo-icon-size;
   background-color: #fff;
 }

src/lib/map/geolocate/geolocate.component.ts → src/lib/map/geolocate-button/geolocate-button.component.ts

@@ -3,11 +3,11 @@ import { Component, Input } from '@angular/core';
 import { IgoMap } from '../shared/map';
 
 @Component({
-  selector: 'igo-geolocate',
-  templateUrl: './geolocate.component.html',
-  styleUrls: ['./geolocate.component.styl']
+  selector: 'igo-geolocate-button',
+  templateUrl: './geolocate-button.component.html',
+  styleUrls: ['./geolocate-button.component.styl']
 })
-export class GeolocateComponent {
+export class GeolocateButtonComponent {
 
   @Input()
   get map(): IgoMap { return this._map; }

src/lib/map/geolocate-button/index.ts

@@ -0,0 +1 @@
+export * from './geolocate-button.component';

src/lib/map/map-browser/map-browser.component.styl

@@ -11,7 +11,7 @@
   height: 100%;
 }
 
-:host >>> igo-zoom {
+:host >>> igo-zoom-button {
   position: absolute;
   bottom: $igo-margin;
   right: $igo-margin;
@@ -21,14 +21,16 @@
   }
 }
 
-:host >>> igo-bookmark {
+:host >>> igo-user-button {
   position: absolute;
   bottom: $igo-margin;
   right: "calc(%s + 50px)" % $igo-margin;
-  width: $igo-icon-button-width;
+  +media(mobile) {
+    right: "calc(%s + 90px)" % $igo-margin;
+  }
 }
 
-:host >>> igo-geolocate {
+:host >>> igo-geolocate-button {
   position: absolute;
   bottom: 95px;
   right: $igo-margin;

src/lib/map/module.ts

@@ -4,9 +4,11 @@ import { IgoSharedModule } from '../shared';
 
 import { MapService } from './shared';
 import { MapBrowserComponent, MapBrowserBindingDirective } from './map-browser';
-import { ZoomComponent } from './zoom';
-import { GeolocateComponent } from './geolocate';
-import { BookmarkComponent, BookmarkDialogComponent } from './bookmark';
+import { ZoomButtonComponent } from './zoom-button';
+import { GeolocateButtonComponent } from './geolocate-button';
+import { BookmarkButtonComponent, BookmarkDialogComponent } from './bookmark-button';
+import { PoiButtonComponent, PoiDialogComponent } from './poi-button';
+import { UserButtonComponent, UserDialogComponent } from './user-button';
 
 
 @NgModule({
@@ -16,20 +18,28 @@ import { BookmarkComponent, BookmarkDialogComponent } from './bookmark';
   exports: [
     MapBrowserComponent,
     MapBrowserBindingDirective,
-    ZoomComponent,
-    GeolocateComponent,
-    BookmarkComponent
+    ZoomButtonComponent,
+    GeolocateButtonComponent,
+    BookmarkButtonComponent,
+    PoiButtonComponent,
+    UserButtonComponent
   ],
   declarations: [
     MapBrowserComponent,
     MapBrowserBindingDirective,
-    ZoomComponent,
-    GeolocateComponent,
-    BookmarkComponent,
-    BookmarkDialogComponent
+    ZoomButtonComponent,
+    GeolocateButtonComponent,
+    BookmarkButtonComponent,
+    BookmarkDialogComponent,
+    PoiButtonComponent,
+    PoiDialogComponent,
+    UserButtonComponent,
+    UserDialogComponent
   ],
   entryComponents: [
-    BookmarkDialogComponent
+    BookmarkDialogComponent,
+    PoiDialogComponent,
+    UserDialogComponent
   ]
 })
 export class IgoMapModule {
@@ -44,7 +54,9 @@ export class IgoMapModule {
 }
 
 export * from './map-browser';
-export * from './zoom';
-export * from './geolocate';
-export * from './bookmark';
+export * from './zoom-button';
+export * from './geolocate-button';
+export * from './bookmark-button';
+export * from './poi-button';
+export * from './user-button';
 export * from './shared';

src/lib/map/poi-button/index.ts

@@ -0,0 +1,2 @@
+export * from './poi-button.component';
+export * from './poi-dialog.component';

src/lib/map/poi-button/poi-button.component.html

@@ -0,0 +1,24 @@
+<md-select placeholder="Zones of interest" floatPlaceholder="never" (change)="handlePoiChanged($event.value)">
+  <md-option>
+    <div class="titlePoi">Create a new zone</div>
+    <button igoStopPropagation class="addPoi buttonPoi"
+      md-icon-button
+      color="primary"
+      (click)="createPoi()">
+      <md-icon>
+        <span></span>
+      </md-icon>
+    </button>
+  </md-option>
+  <md-option *ngFor="let poi of pois" [value]="poi.id">
+    <div class="titlePoi">{{ poi.title }}</div>
+    <button igoStopPropagation class="deletePoi buttonPoi"
+      md-icon-button
+      color="warn"
+      (click)="deletePoi(poi)">
+      <md-icon>
+        <span></span>
+      </md-icon>
+    </button>
+  </md-option>
+</md-select>