Context list

.angular-cli.json

@@ -26,6 +26,7 @@
       "outDir": "dist",
       "assets": [
         "assets",
+        "contexts",
         { "glob": "**/*", "input": "../assets/", "output": "./assets/igo2/" }
       ],
       "index": "index.html",

src/demo-app/app/app.component.html

@@ -28,6 +28,14 @@
     </button>
   </div>
 
+  <md-card>
+    <md-card-subtitle>Context module</md-card-subtitle>
+    <md-card-title>context-list.component</md-card-title>
+    <md-card-content>
+      <igo-context-list igoContextListBinding></igo-context-list>
+    </md-card-content>
+  </md-card>
+
   <md-card>
     <md-card-subtitle>Search module</md-card-subtitle>
     <md-card-title>search-bar.component</md-card-title>

src/demo-app/app/app.component.spec.ts

@@ -33,6 +33,7 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('md-card-subtitle').textContent).toContain('Search module');
+    expect(compiled.querySelector('md-card-subtitle').textContent)
+      .toContain('Context module');
   }));
 });

src/demo-app/app/app.component.ts

@@ -1,8 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 import { ContextService, Feature, FeatureService, IgoMap,
-         LanguageService, OverlayService, QueryFormat,
-         ToolService, WMSLayerOptions } from '../../lib';
+         LanguageService, OverlayService, ToolService} from '../../lib';
 
 @Component({
   selector: 'igo-demo',
@@ -11,9 +10,8 @@ import { ContextService, Feature, FeatureService, IgoMap,
 })
 export class AppComponent implements OnInit {
 
-  public searchTerm: string;
-
   public map = new IgoMap();
+  public searchTerm: string;
 
   constructor(public contextService: ContextService,
               public featureService: FeatureService,
@@ -22,73 +20,11 @@ export class AppComponent implements OnInit {
               public language: LanguageService) {}
 
   ngOnInit() {
-    const projection = 'EPSG:3857';
-
-    this.contextService.setContext({
-      uri: 'qc911',
-      title: 'Qc-911',
-      map: {
-        view: {
-          projection: projection,
-          center: [-72, 52],
-          zoom: 6
-        }
-      },
-      layers: [
-        {
-          type: 'osm',
-          title: 'OSM'
-        },
-        {
-          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: projection
-          },
-          queryFormat: QueryFormat.GML2,
-          queryTitle: 'Municipalite'
-        } as WMSLayerOptions,
-        {
-          title: 'Embâcle',
-          type: 'wms',
-          source: {
-            url: 'http://geoegl.msp.gouv.qc.ca/cgi-wms/igo_gouvouvert.fcgi',
-            params: {
-              layers: 'vg_observation_v_inondation_embacle_wmst',
-              version: '1.3.0'
-            },
-            projection: projection
-          },
-          timeFilter: {
-            min: '2017-01-01',
-            max: '2018-01-01',
-            type: 'date',
-            range: true
-          }
-        } as WMSLayerOptions
-      ],
-      toolbar: [
-        'searchResults',
-        'map',
-        'timeFilter'
-      ],
-      tools: [
-        {
-          name: 'searchResults'
-        },
-        {
-          name: 'map'
-        },
-        {
-          name: 'timeAnalysis'
-        }
-      ]
-    });
+    // If you do not want to load a context from a file,
+    // you can simply do contextService.setContext(context)
+    // where "context" is an object with the same interface
+    // as the contexts in ../contexts/
+    this.contextService.loadContext('_default');
   }
 
   handleSearch(term: string) {

src/demo-app/app/module.ts

@@ -5,7 +5,8 @@ import { HttpModule, Http } from '@angular/http';
 import { MaterialModule } from '@angular/material';
 
 import { IgoModule, provideDefaultSearchSources,
-         LanguageLoader, provideLanguageService } from '../../lib';
+         LanguageLoader, provideLanguageService,
+         provideContextServiceOptions } from '../../lib';
 
 import { AppComponent } from './app.component';
 
@@ -26,7 +27,11 @@ export function translateLoader(http: Http) {
   ],
   providers: [
     ...provideDefaultSearchSources({
-        limit: 5
+      limit: 5
+    }),
+    provideContextServiceOptions({
+      basePath: './contexts',
+      contextListFile: '_contexts.json'
     }),
     /*{
       provide: SearchSource,

src/demo-app/contexts/_contexts.json

@@ -0,0 +1,10 @@
+[
+  {
+    "uri": "_default",
+    "title": "Default Context"
+  },
+  {
+    "uri": "embacle",
+    "title": "Embâcle (analyse temporelle)"
+  }
+]

src/demo-app/contexts/_default.json

@@ -0,0 +1,37 @@
+{
+  "uri": "_default",
+  "title": "Default Context",
+  "map": {
+    "view": {
+      "projection": "EPSG:3857",
+      "center": [-72, 50],
+      "zoom": 5
+    }
+  },
+  "layers": [
+    {
+      "title" : "OSM",
+      "type" : "osm"
+    }
+  ],
+  "toolbar": [
+    "searchResults",
+    "mapDetails",
+    "timeAnalysis",
+    "contextManager"
+  ],
+  "tools": [
+    {
+      "name": "searchResults"
+    },
+    {
+      "name": "mapDetails"
+    },
+    {
+      "name": "timeAnalysis"
+    },
+    {
+      "name": "contextManager"
+    }
+  ]
+}

src/demo-app/contexts/embacle.json

@@ -0,0 +1,53 @@
+{
+  "uri": "embacle",
+  "title": "Embâcle (analyse temporelle)",
+  "map": {
+    "view": {
+      "projection": "EPSG:3857",
+      "center": [-72, 48],
+      "zoom": 7
+    }
+  },
+  "layers": [
+    {
+      "title": "MSP Base Map",
+      "type": "xyz",
+      "source": {
+        "url": "https://geoegl.msp.gouv.qc.ca/cgi-wms/mapcache.fcgi/tms/1.0.0/carte_gouv_qc_ro@EPSG_3857/{z}/{x}/{-y}.png"
+      }
+    },
+    {
+      "title": "Embâcle",
+      "type": "wms",
+      "source": {
+        "url": "http://geoegl.msp.gouv.qc.ca/cgi-wms/igo_gouvouvert.fcgi",
+        "params": {
+          "layers": "vg_observation_v_inondation_embacle_wmst",
+          "version": "1.3.0"
+        },
+        "projection": "EPSG:3857"
+      },
+      "timeFilter": {
+        "min": "2017-01-01",
+        "max": "2018-01-01",
+        "range": true,
+        "type": "datetime"
+      }
+     }
+  ],
+  "toolbar": [
+    "timeAnalysis",
+    "mapDetails"
+  ],
+  "tools": [
+    {
+      "name": "mapDetails",
+      "options": {
+        "toggleLegendOnVisibilityChange": true
+      }
+    },
+    {
+      "name": "timeAnalysis"
+    }
+  ]
+}

src/lib/context/context-item/context-item.component.html

@@ -0,0 +1,4 @@
+<md-list-item>
+  <md-icon md-list-avatar>{{context.icon ? context.icon : 'star'}}</md-icon>
+  <h4 md-line>{{context.title}}</h4>
+</md-list-item>

src/lib/context/context-item/context-item.component.spec.ts

@@ -0,0 +1,31 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IgoSharedModule } from '../../shared';
+
+import { ContextItemComponent } from './context-item.component';
+
+describe('ContextItemComponent', () => {
+  let component: ContextItemComponent;
+  let fixture: ComponentFixture<ContextItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        IgoSharedModule
+      ],
+      declarations: [
+        ContextItemComponent
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContextItemComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/lib/context/context-item/context-item.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+import { Context } from '../shared/context.interface';
+
+@Component({
+  selector: 'igo-context-item',
+  templateUrl: './context-item.component.html',
+  styleUrls: ['./context-item.component.styl']
+})
+export class ContextItemComponent {
+
+  @Input() context: Context;
+  @Input() edition: boolean = true;
+
+  @Output() editContext: EventEmitter<Context> = new EventEmitter();
+
+  handleEditButtonClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.editContext.emit(this.context);
+  }
+
+  constructor() { }
+
+}

src/lib/context/context-item/index.ts

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

src/lib/context/context-list/context-list-binding.directive.spec.ts

@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+
+describe('ContextListBindingDirective', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [],
+      providers: []
+    });
+  });
+
+  it('should create an instance', () => {
+    expect(true).toBeTruthy();
+  });
+});

src/lib/context/context-list/context-list-binding.directive.ts

@@ -0,0 +1,51 @@
+import { Directive, Self, OnInit, OnDestroy,
+         HostListener } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+
+import { Context, ContextService } from '../shared';
+import { ContextListComponent } from './context-list.component';
+
+
+@Directive({
+  selector: '[igoContextListBinding]'
+})
+export class ContextListBindingDirective implements OnInit, OnDestroy {
+
+  private component: ContextListComponent;
+  private contexts$$: Subscription;
+  private selectedContext$$: Subscription;
+
+  @HostListener('select', ['$event']) onSelect(context: Context) {
+    this.contextService.loadContext(context.uri);
+  }
+
+  constructor(@Self() component: ContextListComponent,
+              private contextService: ContextService) {
+    this.component = component;
+  }
+
+  ngOnInit() {
+    // Override input contexts
+    this.component.contexts = [];
+
+    this.contexts$$ = this.contextService.contexts$
+      .subscribe(contexts => this.handleContextsChange(contexts));
+
+    // See feature-list.component for an explanation about the debounce time
+    this.selectedContext$$ = this.contextService.context$
+      .debounceTime(100)
+      .subscribe(context => this.component.selectedContext = context);
+
+    this.contextService.loadContexts();
+  }
+
+  ngOnDestroy() {
+    this.contexts$$.unsubscribe();
+    this.selectedContext$$.unsubscribe();
+  }
+
+  private handleContextsChange(contexts: Context[]) {
+    this.component.contexts = contexts;
+  }
+
+}