Skip to content

Commit

Permalink
feat(geo.filter.time-filter) init issue #506
Browse files Browse the repository at this point in the history
  • Loading branch information
Marc-André Trottier committed Nov 14, 2019
1 parent cc89f47 commit d9aa890
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 108 deletions.
51 changes: 32 additions & 19 deletions demo/src/app/geo/time-filter/time-filter.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,27 +47,28 @@ export class AppTimeFilterComponent {
);
});

// const datasource: TimeFilterableDataSourceOptions = {
// type: 'wms',
// url: 'https://geoegl.msp.gouv.qc.ca/ws/igo_gouvouvert.fcgi',
// params: {
// layers: 'vg_observation_v_inondation_embacle_wmst',
// version: '1.3.0'
// },
// timeFilterable: true,
// timeFilter: {
// min: '2017-01-01',
// max: '2018-01-01',
// range: true,
// type: TimeFilterType.DATETIME,
// style: TimeFilterStyle.SLIDER,
// step: 86400000,
// timeInterval: 2000
// }
// };
const datasourceDateTime: TimeFilterableDataSourceOptions = {
id: 'test1',
type: 'wms',
url: 'https://geoegl.msp.gouv.qc.ca/ws/igo_gouvouvert.fcgi',
params: {
layers: 'vg_observation_v_inondation_embacle_wmst',
version: '1.3.0'
},
timeFilterable: true,
timeFilter: {
min: '2019-01-01',
max: '2020-01-01',
range: true,
value: '2019-04-01 13:00/2019-04-05 19:00',
type: TimeFilterType.DATETIME,
style: TimeFilterStyle.CALENDAR
}
};

const datasourceYear: TimeFilterableDataSourceOptions = {
type: 'wms',
id: 'test2',
url: 'https://geoegl.msp.gouv.qc.ca/ws/igo_gouvouvert.fcgi',
params: {
layers: 'vg_observation_v_inondation_embacle_wmst',
Expand All @@ -90,7 +91,19 @@ export class AppTimeFilterComponent {
.subscribe(dataSource => {
this.map.addLayer(
this.layerService.createLayer({
title: 'Embâcle YEAR',
title: 'Ice jam (Style: YEAR)',
visible: true,
source: dataSource
})
);
});

this.dataSourceService
.createAsyncDataSource(datasourceDateTime)
.subscribe(dataSource => {
this.map.addLayer(
this.layerService.createLayer({
title: 'Ice jam (Style: Date Time)',
visible: true,
source: dataSource
})
Expand Down
25 changes: 13 additions & 12 deletions packages/geo/src/lib/filter/time-filter-form/time-filter-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,18 +98,6 @@
</mat-slider>
<span>{{endYear}}</span>
<p *ngIf= "options.enabled" class="date-below">{{year}}</p>
<div #actions class="igo-layer-actions-container">
<mat-slide-toggle (change)="toggleFilterState()" tooltip-position="below" matTooltipShowDelay="500"
[matTooltip]="'igo.geo.filter.toggleFilterState' | translate" [color]="color" [checked]="options.enabled"
[disabled]="!layer.visible">
</mat-slide-toggle>
<button [disabled]= "!options.enabled || !layer.visible" mat-icon-button color="primary" (click)="playYear($event)">
<mat-icon svgIcon="{{playIcon}}"></mat-icon>
</button>
<button [disabled]="!options.enabled || !layer.visible" mat-icon-button color="primary" (click)="resetFilter($event)">
<mat-icon svgIcon="{{resetIcon}}"></mat-icon>
</button>
</div>
</div>

<div *ngIf="style === 'slider' && type !== 'year'" class="igo-col igo-col-100 igo-col-100-m">
Expand All @@ -129,3 +117,16 @@
<mat-icon svgIcon="{{playIcon}}"></mat-icon>
</button>
</div>

<div #actions class="igo-layer-actions-container">
<mat-slide-toggle (change)="toggleFilterState()" tooltip-position="below" matTooltipShowDelay="500"
[matTooltip]="'igo.geo.filter.toggleFilterState' | translate" [color]="color" [checked]="options.enabled"
[disabled]="!layer.visible">
</mat-slide-toggle>
<button *ngIf="style === 'slider'" [disabled]= "(!options.enabled || !layer.visible)" mat-icon-button color="primary" (click)="playYear($event)">
<mat-icon svgIcon="{{playIcon}}"></mat-icon>
</button>
<button [disabled]="!options.enabled || !layer.visible" mat-icon-button color="primary" (click)="resetFilter($event)">
<mat-icon svgIcon="{{resetIcon}}"></mat-icon>
</button>
</div>
174 changes: 98 additions & 76 deletions packages/geo/src/lib/filter/time-filter-form/time-filter-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,26 +35,6 @@ export class TimeFilterFormComponent implements OnInit {
public listYears: Array<string> = [];
public startListYears: Array<string> = [];
public endListYears: Array<string> = [];

@Input()
set currentValue(value: string) {
if (value) {
if (this.type !== TimeFilterType.YEAR) {
const valueArray = value.split('/');
if (valueArray.length > 0) {
const startDate = new Date(valueArray[0]);
const endDate = new Date(valueArray[1]);
if (!isNaN(startDate.valueOf())) {
this.startDate = startDate;
}
if (!isNaN(endDate.valueOf())) {
this.endDate = endDate;
}
}
}
}
}

public interval: any;
public playIcon = 'play-circle';
public resetIcon = 'replay';
Expand Down Expand Up @@ -127,82 +107,64 @@ export class TimeFilterFormComponent implements OnInit {
constructor() {}

ngOnInit() {
if (this.startDate === undefined) {
const utcmin = new Date(this.min);
this.startDate = new Date(
utcmin.getTime() + utcmin.getTimezoneOffset() * 60000
);
}
if (this.endDate === undefined) {
const utcmax = new Date(this.max);
this.endDate = new Date(
utcmax.getTime() + utcmax.getTimezoneOffset() * 60000
);
}
if (this.startYear === undefined) {
this.startYear = new Date(this.startDate).getFullYear();
this.initStartYear = this.startYear;
}
if (this.endYear === undefined) {
this.endYear = new Date(this.endDate).getFullYear();
this.initEndYear = this.endYear;
}

if (!this.isRange) {
for (let i = this.startYear; i <= this.endYear + 1; i++) {
this.listYears.push(i);
}
} else {
for (let i = this.startYear; i < this.endYear; i++) {
this.startListYears.push(i);
}
for (let i = this.startYear + 1; i <= this.endYear; i++) {
this.endListYears.push(i);
}
}
this.options.enabled = this.options.enabled === undefined ? true : this.options.enabled;
this.initStartEnd();
this.checkFilterValue();
this.options.enabled = this.options.enabled === undefined ? true : this.options.enabled;

if (this.options.enabled) {
if (!this.isRange && this.style === 'slider' && this.type === 'year') {
this.yearChange.emit(this.year);
} else {
this.handleDateChange(undefined);
}
} else {
this.storeCurrentFilterValue();
this.yearChange.emit(undefined); // TODO: FIX THIS for ALL OTHER TYPES STYLES OR RANGE.
this.yearChange.emit(undefined);
}
}

storeCurrentFilterValue() {
// TODO: FIX THIS for ALL OTHER TYPES STYLES OR RANGE.
if (!this.isRange && this.style === TimeFilterStyle.SLIDER && this.type === TimeFilterType.YEAR) {
this.options.value = this.year.toString();
} else if (!this.options.value) {
const datetimeStart = this.startDate.toLocaleDateString() + ' ' + this.startDate.toLocaleTimeString();
const datetimeEnd = this.endDate.toLocaleDateString() + ' ' + this.endDate.toLocaleTimeString();
this.options.value = datetimeStart + '/' + datetimeEnd;
}
}

checkFilterValue() {
const timeFromWms = this.layer.dataSource.ol.getParams().time;
if (!this.isRange && this.style === TimeFilterStyle.SLIDER && this.type === TimeFilterType.YEAR) {
if (timeFromWms) {
this.year = new Date(timeFromWms.toString()).getFullYear() + 1;
} else if (this.options.value) {
this.year = new Date(this.options.value.toString()).getFullYear() + 1;
checkFilterValue(forcedValue ?: string) {
const timeValue = forcedValue || this.layer.dataSource.ol.getParams().time || this.options.value;

if (timeValue) {
if (!this.isRange && this.style === TimeFilterStyle.SLIDER && this.type === TimeFilterType.YEAR) {
this.year = new Date(timeValue.toString()).getFullYear() + 1;
} else {
this.year = new Date(this.min).getFullYear() + 1;
const valueArray = timeValue.split('/');
if (valueArray.length > 1) {
const startDate = new Date(valueArray[0]);
const endDate = new Date(valueArray[1]);
if (!isNaN(startDate.valueOf())) {
this.startDate = startDate;
}
if (!isNaN(endDate.valueOf())) {
this.endDate = endDate;
}
} else {
const startDate = new Date(timeValue);
if (!isNaN(startDate.valueOf())) {
this.date = startDate;
}
}
}
} else {
// TODO: FIX THIS for ALL OTHER TYPES STYLES OR RANGE.
}
}

handleDateChange(event: any) {
this.setupDateOutput();
this.applyTypeChange();

// Only if is range, use 2 dates to make the range
if (this.isRange) {
this.change.emit([this.startDate, this.endDate]);
} else {
this.change.emit(this.startDate);
if (this.options.enabled) {
this.emitChange();
}
}

Expand Down Expand Up @@ -271,22 +233,24 @@ export class TimeFilterFormComponent implements OnInit {
if (this.options.enabled) {
if (!this.isRange && TimeFilterStyle.SLIDER && this.type === TimeFilterType.YEAR) {
this.yearChange.emit(this.year);
} else {
this.emitChange();
}
} else {
this.stopFilter();
this.storeCurrentFilterValue();
this.change.emit(undefined); // TODO: FIX THIS for ALL OTHER TYPES STYLES OR RANGE.
}
}

resetFilter(event: any) {
this.date = new Date(this.min);
this.year = this.date.getFullYear() + 1;
this.initStartEnd(true);
this.checkFilterValue((this.style === 'slider' ? this.listYears[0] : this.options.value));

if (!this.isRange && TimeFilterStyle.SLIDER && this.type === TimeFilterType.YEAR) {
this.yearChange.emit(this.year);
} else {
this.setupDateOutput();
this.change.emit(undefined); // TODO: FIX THIS for ALL OTHER TYPES STYLES OR RANGE.
this.emitChange();
}
}

Expand Down Expand Up @@ -493,4 +457,62 @@ export class TimeFilterFormComponent implements OnInit {
getStepDefinition(step) {
return moment.duration(step).asMilliseconds();
}

initStartEnd(force?: boolean) {

if (this.date === undefined || force) {
const utcmin = new Date(this.min);
this.date = new Date(
utcmin.getTime() + utcmin.getTimezoneOffset() * 60000
);
}
if (this.startDate === undefined || force) {
const utcmin = new Date(this.min);
this.startDate = new Date(
utcmin.getTime() + utcmin.getTimezoneOffset() * 60000
);
}
if (this.endDate === undefined || force) {
const utcmax = new Date(this.max);
this.endDate = new Date(
utcmax.getTime() + utcmax.getTimezoneOffset() * 60000
);
}
if (this.startYear === undefined || force) {
this.startYear = new Date(this.startDate).getFullYear();
this.initStartYear = this.startYear;
}
if (this.endYear === undefined || force) {
this.endYear = new Date(this.endDate).getFullYear();
this.initEndYear = this.endYear;
}

if (!this.isRange) {
for (let i = this.startYear; i <= this.endYear + 1; i++) {
this.listYears.push(i);
}
} else {
for (let i = this.startYear; i < this.endYear; i++) {
this.startListYears.push(i);
}
for (let i = this.startYear + 1; i <= this.endYear; i++) {
this.endListYears.push(i);
}
}
if (!this.isRange && this.style === TimeFilterStyle.SLIDER && this.type === TimeFilterType.YEAR) {
this.year = new Date(this.min).getFullYear() + 1;
}
}

emitChange(forcedValue?: Date | [Date, Date]) {
if (forcedValue) {
this.change.emit(forcedValue);
}

if (this.isRange && !forcedValue) {
this.change.emit([this.startDate, this.endDate]);
} else {
this.change.emit(this.date);
}
}
}
1 change: 0 additions & 1 deletion packages/geo/src/lib/filter/time-filter-item/time-filter-item.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ <h4 (click)="toggleLegendOnClick()" [ngStyle]="{'cursor': filtersCollapsed ? 'de
<igo-time-filter-form
[layer]= "layer"
[options]="datasource.options.timeFilter"
[currentValue]="datasource.options.params.time"
(change)="handleDateChange($event)"
(yearChange)="handleYearChange($event)">
</igo-time-filter-form>
Expand Down

0 comments on commit d9aa890

Please sign in to comment.