adb-shared 6.2.23 → 6.2.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,10 +10,10 @@ import * as Leaflet from 'leaflet';
|
|
|
10
10
|
import Leaflet__default from 'leaflet';
|
|
11
11
|
import '@geoman-io/leaflet-geoman-free';
|
|
12
12
|
import { Subscription, combineLatest, map, debounceTime } from 'rxjs';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i1$2 from '@angular/router';
|
|
14
14
|
import { RouterModule } from '@angular/router';
|
|
15
15
|
import { finalize } from 'rxjs/operators';
|
|
16
|
-
import * as i3
|
|
16
|
+
import * as i3 from '@angular/common/http';
|
|
17
17
|
import * as i5 from 'adb-shared';
|
|
18
18
|
import { AdbDatePickerModule, AdbPipesModule, AdbFilterSectionModule, AdbPickerModule } from 'adb-shared';
|
|
19
19
|
import { addYears, startOfYear, endOfYear, startOfDay, endOfDay, parseISO } from 'date-fns';
|
|
@@ -101,7 +101,8 @@ class AdbMapUtils {
|
|
|
101
101
|
scrollWheelZoom: options.scrollZoom ?? true,
|
|
102
102
|
zoomControl: options.zoom ?? true,
|
|
103
103
|
dragging: options.zoom ?? true,
|
|
104
|
-
minZoom: -1
|
|
104
|
+
minZoom: -1,
|
|
105
|
+
zoomDelta: 1
|
|
105
106
|
});
|
|
106
107
|
map.setView([62, 17], 5);
|
|
107
108
|
Leaflet.control.scale().addTo(map);
|
|
@@ -279,8 +280,10 @@ class AdbMapConfigService {
|
|
|
279
280
|
taxaListsApi;
|
|
280
281
|
filters;
|
|
281
282
|
observationPage;
|
|
283
|
+
dynamic;
|
|
282
284
|
constructor(config) {
|
|
283
285
|
this.log = config.log ?? false;
|
|
286
|
+
this.dynamic = config.dynamic ?? false;
|
|
284
287
|
this.artfaktaTaxonLists = config.artfaktaTaxonLists ?? 'https://artfakta.se/metadata/listor';
|
|
285
288
|
this.taxaListsApi = config.api + '/taxalists';
|
|
286
289
|
this.observationFeatures = config.api + '/observation-features';
|
|
@@ -291,7 +294,7 @@ class AdbMapConfigService {
|
|
|
291
294
|
showArea: this.hasFilter(AdbMapFilterType.Area, config.filters),
|
|
292
295
|
showOwnArea: this.hasFilter(AdbMapFilterType.OwnArea, config.filters),
|
|
293
296
|
showTaxaLists: this.hasFilter(AdbMapFilterType.TaxaLists, config.filters),
|
|
294
|
-
showDatasets: this.hasFilter(AdbMapFilterType.Datasources, config.filters)
|
|
297
|
+
showDatasets: this.hasFilter(AdbMapFilterType.Datasources, config.filters)
|
|
295
298
|
};
|
|
296
299
|
}
|
|
297
300
|
hasFilter(f, filters) {
|
|
@@ -425,6 +428,9 @@ class AdbObsMapComponent {
|
|
|
425
428
|
});
|
|
426
429
|
this.map.whenReady(() => {
|
|
427
430
|
this.mapReady.set(true);
|
|
431
|
+
if (this.config.dynamic) {
|
|
432
|
+
this.attachUserListeners();
|
|
433
|
+
}
|
|
428
434
|
});
|
|
429
435
|
}
|
|
430
436
|
// Loads data only after:
|
|
@@ -454,7 +460,30 @@ class AdbObsMapComponent {
|
|
|
454
460
|
this.tryLoad();
|
|
455
461
|
}));
|
|
456
462
|
}
|
|
463
|
+
attachUserListeners() {
|
|
464
|
+
const container = this.map.getContainer();
|
|
465
|
+
const zoomIn = container.querySelector('.leaflet-control-zoom-in');
|
|
466
|
+
const zoomOut = container.querySelector('.leaflet-control-zoom-out');
|
|
467
|
+
zoomIn?.addEventListener('click', () => { this.onUserInputRoute(); });
|
|
468
|
+
zoomOut?.addEventListener('click', () => { this.onUserInputRoute(); });
|
|
469
|
+
this.map.on('dragend', () => {
|
|
470
|
+
this.onUserInputRoute();
|
|
471
|
+
});
|
|
472
|
+
}
|
|
473
|
+
onUserInputRoute() {
|
|
474
|
+
const bounds = this.map.getBounds();
|
|
475
|
+
const bbox = this.getMapBoundsToBbox(bounds).join(',');
|
|
476
|
+
this.router.navigate([], {
|
|
477
|
+
relativeTo: this.activatedRoute,
|
|
478
|
+
queryParams: { bbox },
|
|
479
|
+
queryParamsHandling: 'merge'
|
|
480
|
+
});
|
|
481
|
+
}
|
|
457
482
|
loadFeature(qParams) {
|
|
483
|
+
if (this.siteLayer) {
|
|
484
|
+
this.map.removeLayer(this.siteLayer);
|
|
485
|
+
this.siteLayer = undefined;
|
|
486
|
+
}
|
|
458
487
|
this.mapLoading.set(true);
|
|
459
488
|
this.error = null;
|
|
460
489
|
const url = this.config.observationFeatures;
|
|
@@ -490,37 +519,42 @@ class AdbObsMapComponent {
|
|
|
490
519
|
},
|
|
491
520
|
pointToLayer: (feature, latlng) => {
|
|
492
521
|
const marker = Leaflet.marker(latlng, {
|
|
522
|
+
interactive: this.config.dynamic,
|
|
493
523
|
icon: Leaflet.divIcon({
|
|
494
524
|
className: '',
|
|
495
525
|
html: '<div class="adb-map-marker"></div>',
|
|
496
526
|
iconAnchor: [3, 3]
|
|
497
527
|
})
|
|
498
528
|
});
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
529
|
+
if (feature.properties && feature.properties['Occurrence.OccurrenceId']) {
|
|
530
|
+
marker.on('click', () => {
|
|
531
|
+
window.location.href = this.config.observationPage + '/' + feature.properties['Occurrence.OccurrenceId'];
|
|
532
|
+
});
|
|
533
|
+
}
|
|
504
534
|
return marker;
|
|
505
535
|
}, onEachFeature: (feature, layer) => {
|
|
506
536
|
if (feature.geometry.type === "Polygon" ||
|
|
507
537
|
feature.geometry.type === "MultiPolygon") {
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
538
|
+
if (feature.properties.ObservationsCount > 0) {
|
|
539
|
+
if (this.config.dynamic) {
|
|
540
|
+
layer.on('click', () => {
|
|
541
|
+
const boundBox = JSON.stringify(this.getMapBoundsToBbox(layer.getBounds()));
|
|
542
|
+
this.router.navigate([], { queryParams: { bbox: boundBox }, queryParamsHandling: 'merge' });
|
|
543
|
+
});
|
|
544
|
+
layer.on('mouseover', () => {
|
|
545
|
+
layer.setStyle({ className: 'svg cursor-pointer' });
|
|
546
|
+
});
|
|
547
|
+
layer.on('mouseout', () => {
|
|
548
|
+
layer.setStyle({ className: 'svg' });
|
|
549
|
+
});
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
if (!this.config.dynamic) {
|
|
553
|
+
layer.setStyle({ interactive: false });
|
|
554
|
+
}
|
|
555
|
+
else if (feature.properties.FeatureType) { //area
|
|
556
|
+
layer.setStyle({ interactive: false });
|
|
557
|
+
}
|
|
524
558
|
}
|
|
525
559
|
}
|
|
526
560
|
});
|
|
@@ -550,18 +584,23 @@ class AdbObsMapComponent {
|
|
|
550
584
|
return 'map-heat-high';
|
|
551
585
|
}
|
|
552
586
|
getMapBoundsToBbox(bounds) {
|
|
553
|
-
return [
|
|
587
|
+
return [
|
|
588
|
+
bounds.getWest(),
|
|
589
|
+
bounds.getSouth(),
|
|
590
|
+
bounds.getEast(),
|
|
591
|
+
bounds.getNorth()
|
|
592
|
+
];
|
|
554
593
|
}
|
|
555
594
|
ngOnDestroy() {
|
|
556
595
|
this.subscriptions.unsubscribe();
|
|
557
596
|
}
|
|
558
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbObsMapComponent, deps: [{ token:
|
|
559
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdbObsMapComponent, isStandalone: false, selector: "adb-obs-map", ngImport: i0, template: "
|
|
597
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbObsMapComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: AdbMapConfigService }, { token: i1$2.Router }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
598
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdbObsMapComponent, isStandalone: false, selector: "adb-obs-map", ngImport: i0, template: "@if(hasBox&&!mapLoading()){\r\n<div class=\"mb-1 d-flex justify-content-between flex-wrap\">\r\n <a [routerLink]=\"[]\" [queryParams]=\"{bbox:null,z:null}\" queryParamsHandling=\"merge\" class=\"d-flex gap-1 align-items-baseline\">\r\n <span class=\"fas fa-chevron-left\"></span>\r\n Tillbaka upp\r\n </a>\r\n</div>\r\n}\r\n@if(error){\r\n<div class=\"alert alert-danger\">\r\n {{'ERROR.SERVER_ERROR'|translate}}\r\n</div>\r\n}\r\n<div [class.loading]=\"mapLoading()\">\r\n <div [id]=\"mapId\" class=\"mb-1 map-container\"></div>\r\n</div>\r\n<div class=\"mb-1 d-flex gap-3 justify-content-between flex-wrap\">\r\n @if (!mapLoading()&&count) {\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <div class=\"legend map-heat-low\"></div>\r\n <10\r\n </div>\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <div class=\"legend map-heat-medium\"></div>\r\n 10 - 500\r\n </div>\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <div class=\"legend map-heat-high\"></div>\r\n >500\r\n </div>\r\n <div class=\"ms-auto\">\r\n {{count|adbSpacing}} {{'OBSERVATION.OBSERVATIONS'|translate}}\r\n </div>\r\n }\r\n</div>", dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.NumberSpacingPipe, name: "adbSpacing" }] });
|
|
560
599
|
}
|
|
561
600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbObsMapComponent, decorators: [{
|
|
562
601
|
type: Component,
|
|
563
|
-
args: [{ selector: 'adb-obs-map', standalone: false, template: "
|
|
564
|
-
}], ctorParameters: () => [{ type:
|
|
602
|
+
args: [{ selector: 'adb-obs-map', standalone: false, template: "@if(hasBox&&!mapLoading()){\r\n<div class=\"mb-1 d-flex justify-content-between flex-wrap\">\r\n <a [routerLink]=\"[]\" [queryParams]=\"{bbox:null,z:null}\" queryParamsHandling=\"merge\" class=\"d-flex gap-1 align-items-baseline\">\r\n <span class=\"fas fa-chevron-left\"></span>\r\n Tillbaka upp\r\n </a>\r\n</div>\r\n}\r\n@if(error){\r\n<div class=\"alert alert-danger\">\r\n {{'ERROR.SERVER_ERROR'|translate}}\r\n</div>\r\n}\r\n<div [class.loading]=\"mapLoading()\">\r\n <div [id]=\"mapId\" class=\"mb-1 map-container\"></div>\r\n</div>\r\n<div class=\"mb-1 d-flex gap-3 justify-content-between flex-wrap\">\r\n @if (!mapLoading()&&count) {\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <div class=\"legend map-heat-low\"></div>\r\n <10\r\n </div>\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <div class=\"legend map-heat-medium\"></div>\r\n 10 - 500\r\n </div>\r\n <div class=\"d-flex align-items-center gap-1\">\r\n <div class=\"legend map-heat-high\"></div>\r\n >500\r\n </div>\r\n <div class=\"ms-auto\">\r\n {{count|adbSpacing}} {{'OBSERVATION.OBSERVATIONS'|translate}}\r\n </div>\r\n }\r\n</div>" }]
|
|
603
|
+
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: AdbMapConfigService }, { type: i1$2.Router }, { type: i3.HttpClient }] });
|
|
565
604
|
|
|
566
605
|
const DateTypes = {
|
|
567
606
|
THIS_YEAR: '1',
|
|
@@ -748,13 +787,13 @@ class AdbMapFilters {
|
|
|
748
787
|
ngOnDestroy() {
|
|
749
788
|
this.subscriptions.unsubscribe();
|
|
750
789
|
}
|
|
751
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapFilters, deps: [{ token: i0.ChangeDetectorRef }, { token: AdbMapConfigService }, { token: i3
|
|
752
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdbMapFilters, isStandalone: false, selector: "adb-map-filters", inputs: { inline: "inline" }, ngImport: i0, template: "@if(form){\r\n<form [formGroup]=\"form\" class=\"form mb-3\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"mb-3\">\r\n <adb-filter-section titleResource=\"TAXON.TAXA\" [expanded]=\"true\">\r\n @if(filters.showTaxon&&!hasTaxonInUrlParameter){\r\n <div class=\"mb-3\">\r\n <label for=\"species\">{{'TAXON.TAXON'|translate}}</label>\r\n <adb-taxon-picker formControlName=\"taxonId\" id=\"species\"></adb-taxon-picker>\r\n </div>\r\n }\r\n </adb-filter-section>\r\n @if(filters.showTime){\r\n <adb-filter-section [count]=\"periodCount\" titleResource=\"OBSERVATION.PERIOD\">\r\n <div class=\"mb-1\">\r\n <select class=\"form-select\" formControlName=\"period\" id=\"period\">\r\n <option value=\"1\">{{thisYear|date:'yyyy'}}</option>\r\n <option value=\"2\">{{lastYear|date:'yyyy'}}</option>\r\n <option value=\"3\">{{'OBSERVATION.ALL_YEAR'|translate}}</option>\r\n <option value=\"4\">{{'OBSERVATION.LAST_5_YEAR'|translate}}</option>\r\n <option value=\"5\">{{'OBSERVATION.LAST_25_YEAR'|translate}}</option>\r\n <option value=\"6\">{{'OBSERVATION.CUSTOMIZED'|translate}}</option>\r\n </select>\r\n </div>\r\n @if (form.value?.period==='6') {\r\n <div class=\"mb-2\">\r\n <label for=\"startAt\">{{'FROM' |translate}}</label>\r\n <input adbDatepicker type=\"text\" class=\"form-control datepicker\" id=\"startAt\" formControlName=\"startAt\" [settings]=\"dateStartConfig\">\r\n </div>\r\n <div class=\"mb-2\">\r\n <label for=\"endAt\">{{'TO' |translate}}</label>\r\n <input adbDatepicker type=\"text\" class=\"form-control datepicker\" id=\"endAt\" formControlName=\"endAt\" [settings]=\"dateEndConfig\">\r\n </div>\r\n }\r\n </adb-filter-section>\r\n }\r\n @if(filters.showArea){\r\n <adb-filter-section [count]=\"areaCount\" titleResource=\"GEOGRAPHY\" [lazy]=\"true\">\r\n <ng-template>\r\n @if(filters.showOwnArea){\r\n <div role=\"tablist\" aria-label=\"{{'AREA'|translate}}\" class=\"d-flex gap-2 justify-content-end\">\r\n <button class=\"btn btn-link p-0\" [class.text-dark]=\"!hasOwnArea\" (click)=\"hasOwnArea=false\" role=\"tab\" id=\"tab-select\" aria-selected=\"{{!hasOwnArea}}\" aria-controls=\"panel-select\">\r\n {{'CHOOSE'|translate}}\r\n </button>\r\n <button class=\"btn btn-link p-0\" [class.text-dark]=\"hasOwnArea\" (click)=\"hasOwnArea=true\" role=\"tab\" id=\"tab-draw\" aria-selected=\"false\" aria-controls=\"panel-draw\">\r\n {{'OWN_AREA'|translate}}\r\n </button>\r\n </div>\r\n }\r\n <div class=\"mb-2\">\r\n @if(hasOwnArea&&filters.showOwnArea){\r\n <div class=\"pt-1\" role=\"tabpanel\" id=\"area-draw\" aria-labelledby=\"tab-draw\">\r\n <div>\r\n <adb-polygon-drawer formControlName=\"geo\"></adb-polygon-drawer>\r\n </div>\r\n </div>\r\n }@else{\r\n <div role=\"tabpanel\" id=\"area-select\" aria-labelledby=\"tab-select\">\r\n <div formArrayName=\"areas\">\r\n <div class=\"d-flex align-items-end mb-1\">\r\n <label>{{'AREAS'|translate}}</label>\r\n <button class=\"ms-auto text-dark btn btn-sm btn-secondary\" attr.aria-label=\"{{'OBSERVATION.ADD_AREA'|translate}}\" title=\"{{'OBSERVATION.ADD_AREA'|translate}}\" type=\"button\" (click)=\"addArea()\">\r\n <span class=\"fas fa-plus\"></span>\r\n </button>\r\n </div>\r\n @for (ctrl of areasArray.controls; track ctrl; let i = $index; let last = $last) {\r\n <div class=\"d-flex mb-2\">\r\n <adb-area-picker id=\"area-{{i}}\" [formControlName]=\"i\"></adb-area-picker>\r\n @if(areasArray.length>1){\r\n <button class=\"btn btn-secondary ms-1\" attr.aria-label=\"{{'DELETE'|translate}}\" title=\"{{'DELETE'|translate}}\" type=\"button\" (click)=\"removeArea(i)\">\r\n <span class=\"fas fa-trash\"></span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </adb-filter-section>\r\n }\r\n @if(form.get('taxonId')){\r\n @if(filters.showTaxaLists){\r\n <adb-filter-section [count]=\"taxonListCount\" titleResource=\"LISTS.NATURE_CONSERVATION_LISTS\">\r\n <div class=\"mb-3\">\r\n <app-treeview formControlName=\"list\" [nodes]=\"taxaLists\"></app-treeview>\r\n </div>\r\n {{'LISTS.READ_MORE'|translate}}\r\n <a [href]=\"artfakta\">{{'LISTS.LIST_CONTENT'|translate}}</a>\r\n </adb-filter-section>\r\n }\r\n @if(filters.showDatasets){\r\n <adb-filter-section [count]=\"dataSetCount\" titleResource=\"DATASET.DATASETS\">\r\n @if (form.get('ds')) {\r\n <div formArrayName=\"ds\">\r\n @for (item of dsControls; track item; let i = $index) {\r\n <div [formGroupName]=\"i\" class=\"form-check\">\r\n <input type=\"checkbox\" formControlName=\"selected\" [id]=\"'ds-' + item.value.id\" class=\"form-check-input\">\r\n <label [for]=\"'ds-' + item.value.id\" class=\"form-check-label\">{{ 'PROVIDERS.'+item.value.id |translate }}</label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </adb-filter-section>\r\n }\r\n }\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n @if (inline) {\r\n <a class=\"btn btn-secondary\" [routerLink]=\"[]\">\r\n {{'CANCEL'|translate}}\r\n </a>\r\n }\r\n <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"form.invalid||form.pristine\">{{'FILTER'|translate}}</button>\r\n </div>\r\n</form>\r\n}", dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type:
|
|
790
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapFilters, deps: [{ token: i0.ChangeDetectorRef }, { token: AdbMapConfigService }, { token: i3.HttpClient }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
791
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdbMapFilters, isStandalone: false, selector: "adb-map-filters", inputs: { inline: "inline" }, ngImport: i0, template: "@if(form){\r\n<form [formGroup]=\"form\" class=\"form mb-3\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"mb-3\">\r\n <adb-filter-section titleResource=\"TAXON.TAXA\" [expanded]=\"true\">\r\n @if(filters.showTaxon&&!hasTaxonInUrlParameter){\r\n <div class=\"mb-3\">\r\n <label for=\"species\">{{'TAXON.TAXON'|translate}}</label>\r\n <adb-taxon-picker formControlName=\"taxonId\" id=\"species\"></adb-taxon-picker>\r\n </div>\r\n }\r\n </adb-filter-section>\r\n @if(filters.showTime){\r\n <adb-filter-section [count]=\"periodCount\" titleResource=\"OBSERVATION.PERIOD\">\r\n <div class=\"mb-1\">\r\n <select class=\"form-select\" formControlName=\"period\" id=\"period\">\r\n <option value=\"1\">{{thisYear|date:'yyyy'}}</option>\r\n <option value=\"2\">{{lastYear|date:'yyyy'}}</option>\r\n <option value=\"3\">{{'OBSERVATION.ALL_YEAR'|translate}}</option>\r\n <option value=\"4\">{{'OBSERVATION.LAST_5_YEAR'|translate}}</option>\r\n <option value=\"5\">{{'OBSERVATION.LAST_25_YEAR'|translate}}</option>\r\n <option value=\"6\">{{'OBSERVATION.CUSTOMIZED'|translate}}</option>\r\n </select>\r\n </div>\r\n @if (form.value?.period==='6') {\r\n <div class=\"mb-2\">\r\n <label for=\"startAt\">{{'FROM' |translate}}</label>\r\n <input adbDatepicker type=\"text\" class=\"form-control datepicker\" id=\"startAt\" formControlName=\"startAt\" [settings]=\"dateStartConfig\">\r\n </div>\r\n <div class=\"mb-2\">\r\n <label for=\"endAt\">{{'TO' |translate}}</label>\r\n <input adbDatepicker type=\"text\" class=\"form-control datepicker\" id=\"endAt\" formControlName=\"endAt\" [settings]=\"dateEndConfig\">\r\n </div>\r\n }\r\n </adb-filter-section>\r\n }\r\n @if(filters.showArea){\r\n <adb-filter-section [count]=\"areaCount\" titleResource=\"GEOGRAPHY\" [lazy]=\"true\">\r\n <ng-template>\r\n @if(filters.showOwnArea){\r\n <div role=\"tablist\" aria-label=\"{{'AREA'|translate}}\" class=\"d-flex gap-2 justify-content-end\">\r\n <button class=\"btn btn-link p-0\" [class.text-dark]=\"!hasOwnArea\" (click)=\"hasOwnArea=false\" role=\"tab\" id=\"tab-select\" aria-selected=\"{{!hasOwnArea}}\" aria-controls=\"panel-select\">\r\n {{'CHOOSE'|translate}}\r\n </button>\r\n <button class=\"btn btn-link p-0\" [class.text-dark]=\"hasOwnArea\" (click)=\"hasOwnArea=true\" role=\"tab\" id=\"tab-draw\" aria-selected=\"false\" aria-controls=\"panel-draw\">\r\n {{'OWN_AREA'|translate}}\r\n </button>\r\n </div>\r\n }\r\n <div class=\"mb-2\">\r\n @if(hasOwnArea&&filters.showOwnArea){\r\n <div class=\"pt-1\" role=\"tabpanel\" id=\"area-draw\" aria-labelledby=\"tab-draw\">\r\n <div>\r\n <adb-polygon-drawer formControlName=\"geo\"></adb-polygon-drawer>\r\n </div>\r\n </div>\r\n }@else{\r\n <div role=\"tabpanel\" id=\"area-select\" aria-labelledby=\"tab-select\">\r\n <div formArrayName=\"areas\">\r\n <div class=\"d-flex align-items-end mb-1\">\r\n <label>{{'AREAS'|translate}}</label>\r\n <button class=\"ms-auto text-dark btn btn-sm btn-secondary\" attr.aria-label=\"{{'OBSERVATION.ADD_AREA'|translate}}\" title=\"{{'OBSERVATION.ADD_AREA'|translate}}\" type=\"button\" (click)=\"addArea()\">\r\n <span class=\"fas fa-plus\"></span>\r\n </button>\r\n </div>\r\n @for (ctrl of areasArray.controls; track ctrl; let i = $index; let last = $last) {\r\n <div class=\"d-flex mb-2\">\r\n <adb-area-picker id=\"area-{{i}}\" [formControlName]=\"i\"></adb-area-picker>\r\n @if(areasArray.length>1){\r\n <button class=\"btn btn-secondary ms-1\" attr.aria-label=\"{{'DELETE'|translate}}\" title=\"{{'DELETE'|translate}}\" type=\"button\" (click)=\"removeArea(i)\">\r\n <span class=\"fas fa-trash\"></span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </adb-filter-section>\r\n }\r\n @if(form.get('taxonId')){\r\n @if(filters.showTaxaLists){\r\n <adb-filter-section [count]=\"taxonListCount\" titleResource=\"LISTS.NATURE_CONSERVATION_LISTS\">\r\n <div class=\"mb-3\">\r\n <app-treeview formControlName=\"list\" [nodes]=\"taxaLists\"></app-treeview>\r\n </div>\r\n {{'LISTS.READ_MORE'|translate}}\r\n <a [href]=\"artfakta\">{{'LISTS.LIST_CONTENT'|translate}}</a>\r\n </adb-filter-section>\r\n }\r\n @if(filters.showDatasets){\r\n <adb-filter-section [count]=\"dataSetCount\" titleResource=\"DATASET.DATASETS\">\r\n @if (form.get('ds')) {\r\n <div formArrayName=\"ds\">\r\n @for (item of dsControls; track item; let i = $index) {\r\n <div [formGroupName]=\"i\" class=\"form-check\">\r\n <input type=\"checkbox\" formControlName=\"selected\" [id]=\"'ds-' + item.value.id\" class=\"form-check-input\">\r\n <label [for]=\"'ds-' + item.value.id\" class=\"form-check-label\">{{ 'PROVIDERS.'+item.value.id |translate }}</label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </adb-filter-section>\r\n }\r\n }\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n @if (inline) {\r\n <a class=\"btn btn-secondary\" [routerLink]=\"[]\">\r\n {{'CANCEL'|translate}}\r\n </a>\r\n }\r\n <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"form.invalid||form.pristine\">{{'FILTER'|translate}}</button>\r\n </div>\r\n</form>\r\n}", dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i5.AdbDatePickerDirective, selector: "input[adbDatepicker]", inputs: ["format", "toLeft", "settings"], outputs: ["adbBlur"] }, { kind: "component", type: i5.FilterSectionComponent, selector: "adb-filter-section", inputs: ["titleResource", "helpResource", "count", "expanded", "lazy"] }, { kind: "component", type: i5.AdbAreaPickerComponent, selector: "adb-area-picker", inputs: ["placeholder", "useObject", "prefill"] }, { kind: "component", type: i5.AdbTaxonPickerComponent, selector: "adb-taxon-picker", inputs: ["placeholder", "useObject", "prefill"] }, { kind: "component", type: PolygonDrawerInput, selector: "adb-polygon-drawer" }, { kind: "component", type: TreeviewComponent, selector: "app-treeview", inputs: ["nodes"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
753
792
|
}
|
|
754
793
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdbMapFilters, decorators: [{
|
|
755
794
|
type: Component,
|
|
756
795
|
args: [{ selector: 'adb-map-filters', standalone: false, template: "@if(form){\r\n<form [formGroup]=\"form\" class=\"form mb-3\" (ngSubmit)=\"onSubmit()\">\r\n <div class=\"mb-3\">\r\n <adb-filter-section titleResource=\"TAXON.TAXA\" [expanded]=\"true\">\r\n @if(filters.showTaxon&&!hasTaxonInUrlParameter){\r\n <div class=\"mb-3\">\r\n <label for=\"species\">{{'TAXON.TAXON'|translate}}</label>\r\n <adb-taxon-picker formControlName=\"taxonId\" id=\"species\"></adb-taxon-picker>\r\n </div>\r\n }\r\n </adb-filter-section>\r\n @if(filters.showTime){\r\n <adb-filter-section [count]=\"periodCount\" titleResource=\"OBSERVATION.PERIOD\">\r\n <div class=\"mb-1\">\r\n <select class=\"form-select\" formControlName=\"period\" id=\"period\">\r\n <option value=\"1\">{{thisYear|date:'yyyy'}}</option>\r\n <option value=\"2\">{{lastYear|date:'yyyy'}}</option>\r\n <option value=\"3\">{{'OBSERVATION.ALL_YEAR'|translate}}</option>\r\n <option value=\"4\">{{'OBSERVATION.LAST_5_YEAR'|translate}}</option>\r\n <option value=\"5\">{{'OBSERVATION.LAST_25_YEAR'|translate}}</option>\r\n <option value=\"6\">{{'OBSERVATION.CUSTOMIZED'|translate}}</option>\r\n </select>\r\n </div>\r\n @if (form.value?.period==='6') {\r\n <div class=\"mb-2\">\r\n <label for=\"startAt\">{{'FROM' |translate}}</label>\r\n <input adbDatepicker type=\"text\" class=\"form-control datepicker\" id=\"startAt\" formControlName=\"startAt\" [settings]=\"dateStartConfig\">\r\n </div>\r\n <div class=\"mb-2\">\r\n <label for=\"endAt\">{{'TO' |translate}}</label>\r\n <input adbDatepicker type=\"text\" class=\"form-control datepicker\" id=\"endAt\" formControlName=\"endAt\" [settings]=\"dateEndConfig\">\r\n </div>\r\n }\r\n </adb-filter-section>\r\n }\r\n @if(filters.showArea){\r\n <adb-filter-section [count]=\"areaCount\" titleResource=\"GEOGRAPHY\" [lazy]=\"true\">\r\n <ng-template>\r\n @if(filters.showOwnArea){\r\n <div role=\"tablist\" aria-label=\"{{'AREA'|translate}}\" class=\"d-flex gap-2 justify-content-end\">\r\n <button class=\"btn btn-link p-0\" [class.text-dark]=\"!hasOwnArea\" (click)=\"hasOwnArea=false\" role=\"tab\" id=\"tab-select\" aria-selected=\"{{!hasOwnArea}}\" aria-controls=\"panel-select\">\r\n {{'CHOOSE'|translate}}\r\n </button>\r\n <button class=\"btn btn-link p-0\" [class.text-dark]=\"hasOwnArea\" (click)=\"hasOwnArea=true\" role=\"tab\" id=\"tab-draw\" aria-selected=\"false\" aria-controls=\"panel-draw\">\r\n {{'OWN_AREA'|translate}}\r\n </button>\r\n </div>\r\n }\r\n <div class=\"mb-2\">\r\n @if(hasOwnArea&&filters.showOwnArea){\r\n <div class=\"pt-1\" role=\"tabpanel\" id=\"area-draw\" aria-labelledby=\"tab-draw\">\r\n <div>\r\n <adb-polygon-drawer formControlName=\"geo\"></adb-polygon-drawer>\r\n </div>\r\n </div>\r\n }@else{\r\n <div role=\"tabpanel\" id=\"area-select\" aria-labelledby=\"tab-select\">\r\n <div formArrayName=\"areas\">\r\n <div class=\"d-flex align-items-end mb-1\">\r\n <label>{{'AREAS'|translate}}</label>\r\n <button class=\"ms-auto text-dark btn btn-sm btn-secondary\" attr.aria-label=\"{{'OBSERVATION.ADD_AREA'|translate}}\" title=\"{{'OBSERVATION.ADD_AREA'|translate}}\" type=\"button\" (click)=\"addArea()\">\r\n <span class=\"fas fa-plus\"></span>\r\n </button>\r\n </div>\r\n @for (ctrl of areasArray.controls; track ctrl; let i = $index; let last = $last) {\r\n <div class=\"d-flex mb-2\">\r\n <adb-area-picker id=\"area-{{i}}\" [formControlName]=\"i\"></adb-area-picker>\r\n @if(areasArray.length>1){\r\n <button class=\"btn btn-secondary ms-1\" attr.aria-label=\"{{'DELETE'|translate}}\" title=\"{{'DELETE'|translate}}\" type=\"button\" (click)=\"removeArea(i)\">\r\n <span class=\"fas fa-trash\"></span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </adb-filter-section>\r\n }\r\n @if(form.get('taxonId')){\r\n @if(filters.showTaxaLists){\r\n <adb-filter-section [count]=\"taxonListCount\" titleResource=\"LISTS.NATURE_CONSERVATION_LISTS\">\r\n <div class=\"mb-3\">\r\n <app-treeview formControlName=\"list\" [nodes]=\"taxaLists\"></app-treeview>\r\n </div>\r\n {{'LISTS.READ_MORE'|translate}}\r\n <a [href]=\"artfakta\">{{'LISTS.LIST_CONTENT'|translate}}</a>\r\n </adb-filter-section>\r\n }\r\n @if(filters.showDatasets){\r\n <adb-filter-section [count]=\"dataSetCount\" titleResource=\"DATASET.DATASETS\">\r\n @if (form.get('ds')) {\r\n <div formArrayName=\"ds\">\r\n @for (item of dsControls; track item; let i = $index) {\r\n <div [formGroupName]=\"i\" class=\"form-check\">\r\n <input type=\"checkbox\" formControlName=\"selected\" [id]=\"'ds-' + item.value.id\" class=\"form-check-input\">\r\n <label [for]=\"'ds-' + item.value.id\" class=\"form-check-label\">{{ 'PROVIDERS.'+item.value.id |translate }}</label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </adb-filter-section>\r\n }\r\n }\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n @if (inline) {\r\n <a class=\"btn btn-secondary\" [routerLink]=\"[]\">\r\n {{'CANCEL'|translate}}\r\n </a>\r\n }\r\n <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"form.invalid||form.pristine\">{{'FILTER'|translate}}</button>\r\n </div>\r\n</form>\r\n}" }]
|
|
757
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AdbMapConfigService }, { type: i3
|
|
796
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AdbMapConfigService }, { type: i3.HttpClient }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { inline: [{
|
|
758
797
|
type: Input
|
|
759
798
|
}] } });
|
|
760
799
|
|