Update README.md

feat(wms): Refresh interval on WMS (infra-geo-ouverte#177)

* setting demo to refresh a layer every 15 seconds.

* adding refreshIntervalSec on DataSourceOptions

* adding refresh interval on wms.

* moving from datasource interface to wms interface.
feat(print): Improve Print module (infra-geo-ouverte#179)

* Add printing output format (pdf, Image) combobox
Change print format to print paper format

* (change) to (selectionChange) after angular update

* Temporary remove Resolution parameter for printing
Fix image size to fit pdf page

* Fix Internet Explorer issue with window.open and getComputedStyle to generate the legend (use local div instead)
Add WorldFile for tiff
Remove resolution for future TODO amelioration

* Update fr.geo.json

* Update print.service.ts

* Add jsZip to be able to download one file in print module
Add checkbox for zip
Add loading
Fix pdf with legend in IE

* Add layer "embâcle" in the demo
Ajust css display
change element display instead of disabling

* Update package.json

Add dependencies for geo lib

* Update ng-package.prod.json

* Update ng-package.json

README.md

@@ -22,7 +22,7 @@ IGO2 library is divided into several elements:
 
 ## Demo
 
-- [Demo IGO2 Library](https://infra-geo-ouverte.github.io/igo2-lib/home)
+- [Demo IGO2 Library](https://infra-geo-ouverte.github.io/igo2-lib/)
 - [Demo IGO2 for Open Data Quebec](https://geoegl.msp.gouv.qc.ca/igo2/apercu-qc/)
 - [Demo IGO2 on GitHub](https://github.com/infra-geo-ouverte/igo2#table-of-content-english)
 

demo/src/app/geo/layer/layer.component.ts

@@ -67,6 +67,7 @@ export class AppLayerComponent {
     const datasource: WMSoptions = {
       type: 'wms',
       url: 'https://geoegl.msp.gouv.qc.ca/igo2/api/ws/igo_gouvouvert.fcgi',
+      refreshIntervalSec: 15,
       params: {
         layers: 'vg_observation_v_inondation_embacle_wmst',
         version: '1.3.0'

demo/src/app/geo/print/print.component.ts

@@ -52,5 +52,19 @@ export class AppPrintComponent {
         }
       })
       .subscribe(l => this.map.addLayer(l));
+
+    this.layerService
+      .createAsyncLayer({
+        title: 'Embacle',
+        sourceOptions: {
+          type: 'wms',
+          url: '/ws/igo_gouvouvert.fcgi',
+          params: {
+            layers: 'vg_observation_v_inondation_embacle_wmst',
+            version: '1.3.0'
+          }
+        }
+      })
+      .subscribe(l => this.map.addLayer(l));
   }
 }

package.json

@@ -31,16 +31,18 @@
     "pretest": "ng lint",
     "test": "ng test --watch=false",
     "test.watch": "ng test",
-    "test.libs": "npm run lint && npm run test.core && npm run test.common && npm run test.geo && npm run test.context && npm run test.demo",
+    "test.all": "npm run test.libs && npm run test.demo",
+    "test.libs": "npm run lint && npm run test.core && npm run test.common && npm run test.geo && npm run test.context",
     "test.core": "ng test core --watch=false --code-coverage",
     "test.common": "ng test common --watch=false --code-coverage",
     "test.geo": "ng test geo --watch=false --code-coverage",
     "test.context": "ng test context --watch=false --code-coverage",
     "test.demo": "ng test demo --watch=false --code-coverage && ng e2e --port 4300",
+    "clean": "rimraf ./dist && rimraf ./node_modules && npm cache clean --force && git checkout -- package.json && git checkout -- package-lock.json",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "changelog-current": "conventional-changelog -p angular -r 2",
     "publish": "npm publish ./dist/igo2-utils && npm publish ./dist/igo2-core && npm publish ./dist/igo2-common && npm publish ./dist/igo2-auth && npm publish ./dist/igo2-geo && npm publish ./dist/igo2-context && npm publish ./dist/igo2-tools",
-    "preversion": "npm run test.libs",
+    "preversion": "rimraf ./dist && npm run build.all && npm run test.all",
     "version": "gulp bumpVersion && npm run build.libs && npm run changelog && git add .",
     "postversion": "git push && git push --tags && npm run publish && npm run ghpages && npm run ghrelease",
     "preghpages": "npm run build.demo -- --output-path ./dist/ghpages --base-href /igo2-lib/ && echo \"include: ['_default.json', '_contexts.json']\" > dist/ghpages/_config.yml",
@@ -71,11 +73,13 @@
     "hammerjs": "^2.0.8",
     "html2canvas": "^1.0.0-alpha.12",
     "jspdf": "^1.4.1",
+    "jszip": "^3.1.5",
     "jwt-decode": "^2.2.0",
     "moment": "^2.22.2",
     "ol": "^5.2.0",
     "proj4": "^2.5.0",
     "rxjs": "^6.3.2",
+    "stream": "^0.0.2",
     "ts-md5": "^1.2.4",
     "web-animations-js": "^2.3.1",
     "zone.js": "^0.8.26"

projects/geo/ng-package.json

@@ -5,5 +5,5 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "whitelistedNonPeerDependencies": ["ts-md5", "file-saver"]
+  "whitelistedNonPeerDependencies": ["ts-md5"]
 }

projects/geo/ng-package.prod.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "whitelistedNonPeerDependencies": ["ts-md5", "file-saver"]
+  "whitelistedNonPeerDependencies": ["ts-md5"]
 }

projects/geo/package.json

@@ -31,8 +31,11 @@
   },
   "optionalDependencies": {
     "@mat-datetimepicker/core": "^2.0.1",
-    "moment": "^2.22.2",
+    "file-saver": "^1.3.8",
     "html2canvas": "^1.0.0-alpha.12",
-    "jspdf": "^1.4.1"
+    "jspdf": "^1.4.1",
+    "jszip": "^3.1.5",
+    "moment": "^2.22.2",
+    "stream": "^0.0.2"
   }
 }

projects/geo/src/lib/datasource/shared/datasources/wms-datasource.interface.ts

@@ -15,6 +15,7 @@ export interface WMSDataSourceOptions extends DataSourceOptions {
   serverType?: string;
   ratio?: number;
   ol?: olSourceImageWMS;
+  refreshIntervalSec?: number;
 }
 
 export interface WMSDataSourceOptionsParams {

projects/geo/src/lib/datasource/shared/datasources/wms-datasource.ts

@@ -38,6 +38,11 @@ export class WMSDataSource extends DataSource {
     if (sourceParams && sourceParams.version) {
       sourceParams.VERSION = sourceParams.version;
     }
+    if (options.refreshIntervalSec && options.refreshIntervalSec > 0) {
+      setInterval(() => {
+        this.ol.updateParams({'igoRefresh': Math.random()});
+      }, options.refreshIntervalSec * 1000); // Convert seconds to MS
+    }
   }
 
   protected createOlSource(): olSourceImageWMS {

projects/geo/src/lib/filter/ogc-filter-form/ogc-filter-form.component.html

@@ -1,7 +1,7 @@
 <mat-list-item>
 
   <div class="igo-col igo-col-90 igo-col-100-m">
-    <mat-select class="logical" [disabled]="!currentFilter.active" (change)="disableRefreshFilter()" [(ngModel)]="currentFilter.parentLogical"
+    <mat-select class="logical" [disabled]="!currentFilter.active" (selectionChange)="disableRefreshFilter()" [(ngModel)]="currentFilter.parentLogical"
       *ngIf="activeFilters.indexOf(currentFilter) !== 0 && currentFilter.active===true">
       <mat-option value="And">{{'igo.geo.operators.And' | translate}}</mat-option>
       <mat-option value="Or">{{'igo.geo.operators.Or' | translate}}</mat-option>
@@ -12,7 +12,7 @@
     <span *ngIf="fields && fields.length > 0 && fields[0].name !== ''">
       <mat-select [disabled]="!currentFilter.active" *ngIf="['Contains','Intersects','Within'].indexOf(currentFilter.operator) === -1"
         [(ngModel)]="currentFilter.propertyName" tooltip-position="below" matTooltipShowDelay="500" [matTooltip]="'igo.geo.sourceFields.selectField' | translate"
-        (change)="updateField(false)">
+        (selectionChange)="updateField(false)">
         <mat-option *ngFor="let field of fields" [value]="field.name">{{field.alias}}</mat-option>
       </mat-select>
     </span>
@@ -30,7 +30,7 @@
   </div>
 
   <div class="igo-col igo-col-90 igo-col-100-m" *ngIf="(currentFilter.operator !== 'Intersects' && currentFilter.operator !== 'Contains' && currentFilter.operator !== 'Within')">
-    <mat-select [disabled]="!currentFilter.active" [(ngModel)]="currentFilter.operator" (change)="disableRefreshFilter()">
+    <mat-select [disabled]="!currentFilter.active" [(ngModel)]="currentFilter.operator" (selectionChange)="disableRefreshFilter()">
       <mat-option *ngFor="let operator of operators | keyvalue" [value]="operator.key">{{operator.value.alias}}</mat-option>
     </mat-select>
   </div>
@@ -164,12 +164,12 @@
 
   <!-- PropertySpatial  -->
   <div class="igo-col igo-col-90 igo-col-100-m" *ngIf="(currentFilter.operator === 'Intersects' || currentFilter.operator === 'Contains' || currentFilter.operator === 'Within')">
-    <mat-select [disabled]="!currentFilter.active" [(ngModel)]="currentFilter.operator" (change)="disableRefreshFilter()">
+    <mat-select [disabled]="!currentFilter.active" [(ngModel)]="currentFilter.operator" (selectionChange)="disableRefreshFilter()">
       <mat-option *ngFor="let operator of operators | keyvalue" [value]="operator.key">{{operator.value.alias}}</mat-option>
     </mat-select>
   </div>
   <div class="igo-col igo-col-90 igo-col-100-m" *ngIf="(currentFilter.operator === 'Intersects' || currentFilter.operator === 'Contains' || currentFilter.operator === 'Within')">
-    <mat-select [disabled]="!currentFilter.active" [(ngModel)]="currentFilter.igoSpatialSelector" (change)="changeGeometry(currentFilter,value)">
+    <mat-select [disabled]="!currentFilter.active" [(ngModel)]="currentFilter.igoSpatialSelector" (selectionChange)="changeGeometry(currentFilter,value)">
       <mat-option *ngFor="let igoSpatialSelector of igoSpatialSelectors" [value]="igoSpatialSelector.type">{{igoSpatialSelector.alias}}</mat-option>
     </mat-select>
   </div>

projects/geo/src/lib/filter/time-filter-form/time-filter-form.component.html

@@ -53,7 +53,7 @@
 
   <div *ngIf="!isRange" class="igo-col igo-col-100 igo-col-100-m">
         <mat-form-field>
-            <mat-select placeholder="{{'igo.geo.timeFilter.date' | translate}}" [(ngModel)]="year" (change)="handleYearChange($event)">
+            <mat-select placeholder="{{'igo.geo.timeFilter.date' | translate}}" [(ngModel)]="year" (selectionChange)="handleYearChange($event)">
                   <mat-option [value]="year" *ngFor="let year of listYears">{{year}}</mat-option>
             </mat-select>
         </mat-form-field>
@@ -62,15 +62,15 @@
   <div *ngIf="isRange">
     <div class="igo-col igo-col-100">
         <mat-form-field>
-            <mat-select placeholder="{{'igo.geo.timeFilter.startDate' | translate}}" [(ngModel)]="startYear" (change)="handleYearChange($event)">
+            <mat-select placeholder="{{'igo.geo.timeFilter.startDate' | translate}}" [(ngModel)]="startYear" (selectionChange)="handleYearChange($event)">
               <mat-option [value]="startYear" *ngFor="let startYear of startListYears">{{startYear}}</mat-option>
             </mat-select>
       </mat-form-field>
     </div>
 
     <div class="igo-col igo-col-100">
     <mat-form-field>
-        <mat-select placeholder="{{'igo.geo.timeFilter.endDate' | translate}}" [(ngModel)]="endYear" (change)="handleYearChange($event)">
+        <mat-select placeholder="{{'igo.geo.timeFilter.endDate' | translate}}" [(ngModel)]="endYear" (selectionChange)="handleYearChange($event)">
               <mat-option [value]="endYear" *ngFor="let endYear of endListYears">{{endYear}}</mat-option>
         </mat-select>
       </mat-form-field>
@@ -93,7 +93,7 @@
       [value]="handleSliderValue()"
       thumbLabel
       (input)="handleSliderDateChange($event)"
-      (change)="handleSliderDateChange($event)">
+      (selectionChange)="handleSliderDateChange($event)">
   </mat-slider>
   <p class="date-below">{{handleSliderTooltip()}}</p>
   <button mat-icon-button color="primary" (click)="playFilter($event)">

projects/geo/src/lib/pnt/print-form/print-form.component.html

@@ -19,30 +19,45 @@
   </div>
 
   <div class="igo-input-container">
-    <mat-checkbox class="horizontal-left" formControlName="showProjection">
+    <mat-checkbox class="horizontal-left right-padding" formControlName="showProjection">
         {{'igo.geo.printForm.showProjection' | translate}}
     </mat-checkbox>
-     <mat-checkbox class="horizontal-left" formControlName="showScale">
+     <mat-checkbox class="horizontal-left right-padding" formControlName="showScale">
         {{'igo.geo.printForm.showScale' | translate}}
     </mat-checkbox>
-     <mat-checkbox class="horizontal-left" formControlName="showLegend">
+     <mat-checkbox class="horizontal-left right-padding" formControlName="showLegend">
         {{'igo.geo.printForm.showLegend' | translate}}
     </mat-checkbox>
+    <mat-checkbox class="horizontal-left right-padding" formControlName="doZipFile" [style.display]="isPrintService ? 'none' : 'inline'" >
+       {{'igo.geo.printForm.doZipFile' | translate}}
+   </mat-checkbox>
   </div>
 
   <div class="igo-input-container">
     <mat-form-field>
-      <mat-select (change)="toggleImageSaveProp()"
-        formControlName="format"
-        placeholder="{{'igo.geo.printForm.format' | translate}}">
-        <mat-option *ngFor="let format of formats | keyvalue " [value]="format.key">
-          {{format.value}}
+      <mat-select (selectionChange)="toggleImageSaveProp()"
+        formControlName="outputFormat"
+        placeholder="{{'igo.geo.printForm.outputFormat' | translate}}">
+        <mat-option *ngFor="let outputFormat of outputFormats | keyvalue " [value]="outputFormat.key">
+          {{outputFormat.value}}
         </mat-option>
       </mat-select>
     </mat-form-field>
   </div>
 
-  <div class="igo-input-container">
+  <div class="igo-input-container" [style.display]="isPrintService ? 'block' : 'none'">
+    <mat-form-field>
+      <mat-select
+        formControlName="paperFormat"
+        placeholder="{{'igo.geo.printForm.paperFormat' | translate}}">
+        <mat-option *ngFor="let paperFormat of paperFormats | keyvalue " [value]="paperFormat.key">
+          {{paperFormat.value}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <div class="igo-input-container" [style.display]="isPrintService ? 'none' : 'block'">
     <mat-form-field>
       <mat-select
         formControlName="imageFormat"
@@ -54,7 +69,7 @@
     </mat-form-field>
   </div>
 
-  <div class="igo-input-container">
+  <div class="igo-input-container" style="display: none;">
     <mat-form-field>
       <mat-select
         formControlName="resolution"
@@ -66,15 +81,15 @@
     </mat-form-field>
   </div>
 
-  <div class="igo-input-container">
+  <div class="igo-input-container" [style.display]="isPrintService ? 'block' : 'none'">
     <mat-radio-group formControlName="orientation" class="horizontal">
       <mat-radio-button *ngFor="let orientation of orientations | keyvalue " [value]="orientation.key">
         {{('igo.geo.printForm.' + orientation.value) | translate}}
       </mat-radio-button>
     </mat-radio-group>
   </div>
 
-  <div class="igo-form-button-group">
+  <div class="igo-form-button-group print-button-top-padding">
     <button
       mat-raised-button
       type="button"

projects/geo/src/lib/pnt/print-form/print-form.component.scss

@@ -14,3 +14,11 @@ mat-checkbox.horizontal-left {
  mat-checkbox.horizontal-left span {
   padding: 0 8px;
 }
+
+mat-checkbox, mat-radio-button {
+  padding-right: 20px;
+}
+
+.print-button-top-padding {
+  padding-top: 10px;
+}