refactor(map & feature): Refactor map and search results into map, fe… (

#2)

* refactor(map & feature): Refactor map and search results into map, feature, layer, query and overlay modules

.angular-cli.json

@@ -44,9 +44,11 @@
       "prefix": "igo",
       "mobile": true,
       "styles": [
-        "css/styles.styl"
+        "../node_modules/openlayers/dist/ol.css",
+        "css/styles.styl"      ],
+      "scripts": [
+        "../node_modules/openlayers/dist/ol.js"
       ],
-      "scripts": [],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",

demo-app/app/app.component.html

@@ -12,9 +12,23 @@
 </md-card>
 
 <md-card>
-  <md-card-subtitle>Search module</md-card-subtitle>
-  <md-card-title>search-tool.component</md-card-title>
+  <md-card-subtitle>Feature module</md-card-subtitle>
+  <md-card-title>feature-list.component</md-card-title>   
   <md-card-content>
-    <igo-search-tool></igo-search-tool>
+    <igo-feature-list></igo-feature-list>
+  </md-card-content>
+</md-card>
+
+<md-card>
+  <md-card-subtitle>Map module</md-card-subtitle>
+  <md-card-title>map-browser.component</md-card-title>   
+  <md-card-content class="igo-map-browser-container">
+    <igo-map-browser
+      [map]="map"
+      [view]="mapView"
+      igoQuery
+      igoOverlay>
+      <igo-zoom [map]="map" color="primary"></igo-zoom>
+    </igo-map-browser>
   </md-card-content>
 </md-card>

demo-app/app/app.component.styl

@@ -0,0 +1,8 @@
+.igo-map-browser-container {
+  width: 100%;
+  height: 300px;
+}
+
+igo-zoom >>> button {
+  background-color: #fff;
+}

demo-app/app/app.component.ts

@@ -1,17 +1,50 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
-import { SearchService } from '../../lib';
+import { IgoMap, LayerService, QueryFormat,
+         SearchService, WMSLayerOptions } from '../../lib';
 
 @Component({
   selector: 'igo-demo',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.styl']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
   public searchTerm: string;
 
-  constructor(public searchService: SearchService) {}
+  public map = new IgoMap();
+  public mapView = {
+    projection: 'EPSG:3857',
+    center: [-72, 52],
+    zoom: 6
+  };
+
+  constructor(public layerService: LayerService,
+              public searchService: SearchService) {}
+
+  ngOnInit() {
+    this.map.removeLayers();
+
+    this.layerService.createAsyncLayer({
+      type: 'osm',
+      title: 'OSM'
+    }).subscribe(layer => this.map.addLayer(layer));
+
+    this.layerService.createAsyncLayer({
+      title: 'MSP DESSERTE MUN 911',
+      type: 'wms',
+      source: {
+        url: '/cgi-wms/igo_gouvouvert.fcgi',
+        params: {
+          layers: 'MSP_DESSERTE_MUN_911',
+          version: '1.3.0'
+        },
+        projection: 'EPSG:3857'
+      },
+      queryFormat: QueryFormat.GML2,
+      queryTitle: 'Municipalite'
+    } as WMSLayerOptions).subscribe(layer => this.map.addLayer(layer));
+  }
 
   handleSearch(term: string) {
     this.searchTerm = term;

karma.lib.conf.js

@@ -16,6 +16,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     files: [
+      './node_modules/openlayers/dist/ol.js',
       { pattern: './lib/test.ts', watched: false }
     ],
     preprocessors: {

lib/core/index.ts

@@ -1 +1 @@
-export * from './core';
+export * from './module';

lib/feature/feature-details/feature-details.component.html

@@ -0,0 +1,12 @@
+<table class="igo-striped">
+  <tbody>
+    <tr *ngFor="let property of feature.properties | keyvalue">
+      <td>
+        {{property.key}}
+      </td>
+      <td>
+        {{property.value}}
+      </td>
+    </tr>
+  </tbody>
+</table>

lib/feature/feature-details/feature-details.component.spec.ts

@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IgoSharedModule } from '../../shared';
+
+import { FeatureType, FeatureFormat } from '../shared';
+import { FeatureDetailsComponent } from './feature-details.component';
+
+describe('FeatureDetailsComponent', () => {
+  let component: FeatureDetailsComponent;
+  let fixture: ComponentFixture<FeatureDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        IgoSharedModule
+      ],
+      declarations: [ FeatureDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FeatureDetailsComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    component.feature = {
+      id: '1',
+      type: FeatureType.Feature,
+      format: FeatureFormat.GeoJSON,
+      title: 'foo',
+      icon: 'bar',
+      source: 'foo'
+    };
+    expect(component).toBeTruthy();
+  });
+});

lib/feature/feature-details/feature-details.component.styl

@@ -0,0 +1,10 @@
+@require '../../styles.styl';
+
+table {
+  width: 100%;
+  padding: $igo-padding;
+}
+
+table tbody tr td:first-child {
+  font-weight: bold;
+}

lib/feature/feature-details/feature-details.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+
+import { Feature } from '../shared/feature.interface';
+
+@Component({
+  selector: 'igo-feature-details',
+  templateUrl: './feature-details.component.html',
+  styleUrls: ['./feature-details.component.styl']
+})
+export class FeatureDetailsComponent {
+
+  @Input()
+  get feature(): Feature { return this._feature; }
+  set feature(value: Feature) {
+    this._feature = value;
+  }
+  private _feature: Feature;
+
+  constructor() { }
+
+}

lib/feature/feature-item/feature-item.component.html

@@ -0,0 +1,5 @@
+<md-list-item>
+  <md-icon md-list-avatar>{{feature.icon}}</md-icon>
+  <h4 md-line *ngIf="feature.title_html" [innerHtml]="feature.title_html"></h4>
+  <h4 md-line *ngIf="!feature.title_html">{{feature.title}}</h4>
+</md-list-item>

lib/feature/feature-item/feature-item.component.spec.ts

@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IgoSharedModule } from '../../shared';
+
+import { FeatureType, FeatureFormat } from '../shared';
+import { FeatureItemComponent } from './feature-item.component';
+
+describe('FeatureItemComponent', () => {
+  let component: FeatureItemComponent;
+  let fixture: ComponentFixture<FeatureItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        IgoSharedModule
+      ],
+      declarations: [ FeatureItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FeatureItemComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    component.feature = {
+      id: '1',
+      type: FeatureType.Feature,
+      format: FeatureFormat.GeoJSON,
+      title: 'foo',
+      icon: 'bar',
+      source: 'foo'
+    };
+    expect(component).toBeTruthy();
+  });
+});

lib/feature/feature-item/feature-item.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+
+import { Feature } from '../shared';
+
+@Component({
+  selector: 'igo-feature-item',
+  templateUrl: './feature-item.component.html',
+  styleUrls: ['./feature-item.component.styl'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FeatureItemComponent {
+
+  @Input()
+  get feature(): Feature { return this._feature; }
+  set feature(value: Feature) {
+    this._feature = value;
+  }
+  private _feature: Feature;
+
+  constructor() { }
+
+}

lib/feature/feature-item/index.ts

@@ -0,0 +1 @@
+export * from './feature-item.component';

lib/feature/feature-list/feature-list.component.html

@@ -0,0 +1,18 @@
+<igo-list [navigation]="true"> 
+  <template ngFor let-sourceFeature [ngForOf]="sourceFeatures">
+    <igo-collapsible title="{{sourceFeature[0]}} ({{sourceFeature[1].length}})">
+      <template ngFor let-feature [ngForOf]="sourceFeature[1]">
+        <igo-feature-item
+          igoListItem
+          color="primary"
+          [feature]="feature"
+          [focused]="featureService.focusedFeature$.value
+                     && featureService.focusedFeature$.value.id === feature.id
+                     && featureService.focusedFeature$.value.source === sourceFeature[0]"
+          (focus)="featureService.focusFeature(feature)"
+          (select)="featureService.selectFeature(feature)">
+        </igo-feature-item>
+      </template>
+    </igo-collapsible>
+  </template>
+</igo-list>