FarmMaps
/
FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update to angular 8.2

pull/1/head
Willem Dantuma 2019-11-25 14:34:51 +01:00
parent 16db063339
commit 7bd5dada2b
22 changed files with 5929 additions and 4352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/browserslist → browserslist
View File

@ -1,11 +1,11 @@
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
#
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
> 0.5%
last 2 versions
Firefox ESR
not dead
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
#
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

6300
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

126
package.json
View File

@ -1,63 +1,63 @@
{
"name": "farmmaps-lib-app",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@aspnet/signalr": "^1.1.4",
"@farmmaps/common": ">=0.0.1-prerelease.77 <0.0.1",
"@farmmaps/common-map": ">=0.0.1-prerelease.77 <0.0.1",
"@ng-bootstrap/ng-bootstrap": "^4.2.1",
"@ngrx/effects": "^7.2.0",
"@ngrx/router-store": "^7.2.0",
"@ngrx/store": "^7.2.0",
"bootstrap": "^4.3.1",
"font-awesome": "^4.7.0",
"core-js": "^2.5.4",
"ngrx-store-localstorage": "^8.0.0",
"resumablejs": "^1.1.0",
"rxjs": "~6.3.3",
"tassign": "^1.0.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular-devkit/build-ng-packagr": "~0.13.0",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"ng-packagr": "^4.2.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tsickle": ">=0.34.0",
"tslib": "^1.9.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
{
"name": "farmmaps-lib-app",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@aspnet/signalr": "^1.1.4",
"@farmmaps/common": ">=0.0.1-prerelease.77 <0.0.1",
"@farmmaps/common-map": ">=0.0.1-prerelease.77 <0.0.1",
"@ng-bootstrap/ng-bootstrap": "^4.2.1",
"@ngrx/effects": "^7.2.0",
"@ngrx/router-store": "^7.2.0",
"@ngrx/store": "^7.2.0",
"bootstrap": "^4.3.1",
"font-awesome": "^4.7.0",
"core-js": "^2.5.4",
"ngrx-store-localstorage": "^8.0.0",
"resumablejs": "^1.1.0",
"rxjs": "~6.5.3",
"tassign": "^1.0.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.19",
"@angular-devkit/build-ng-packagr": "~0.803.19",
"@angular/cli": "~8.3.19",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"ng-packagr": "^5.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tsickle": "^0.37.0",
"tslib": "^1.9.0",
"tslint": "~5.11.0",
"typescript": "~3.5.3"
}
}

136
projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts
View File

@ -1,68 +1,68 @@
import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
import { MapComponent } from 'ngx-openlayers';
import Overlay from 'ol/Overlay';
import { fromLonLat, toLonLat } from 'ol/proj';
@Component({
selector: 'fm-map-gps-location',
templateUrl: './gps-location.component.html',
styleUrls: ['./gps-location.component.scss']
})
export class GpsLocation implements OnInit,OnChanges{
@Input() enable:boolean;
public instance: Overlay;
@Input() position: Position;
@Input() location: number[]=[0,0];
@Input() locationTolerance: number = 0;
@Input() showHeading: boolean = false;
@Input() heading: number = 0;
@Input() headingTolerance: number = 0;
public locTolerancePixels: number = 0;
public path: string = "";
public rotate: string = "";
private resolution: number = 0;
@ViewChild('location') locationElement: ElementRef;
constructor(private map: MapComponent) {
}
recalcLocationTolerance() {
this.locTolerancePixels = this.resolution >0? this.locationTolerance / this.resolution:0;
}
ngOnInit() {
this.instance = new Overlay({
stopEvent:false,
positioning: 'center-center',
position: fromLonLat( this.location),
element: this.locationElement.nativeElement
});
var x = Math.tan(this.headingTolerance * Math.PI / 180)*40;
var y = Math.cos(this.headingTolerance * Math.PI / 180) * 40;
var y1 = Math.round(500 - y);
var x1 = Math.round(500 - x);
var y2 = Math.round(y1);
var x2 = Math.round(500 + x);
this.path = "M " + x2 + " " + y2 + " A 45 45,0,0,0, " + x1 + " " + y1 + " L 493 500 L 507 500 Z";
this.rotate = "rotate(" + Math.round(this.heading) + " 500 500)";
this.locTolerancePixels = this.locationTolerance;
this.map.instance.addOverlay(this.instance);
this.map.instance.getView().on('change:resolution', (evt) => {
this.resolution = evt.target.get('resolution');
this.recalcLocationTolerance();
});
}
ngOnChanges(changes: SimpleChanges) {
if (changes.position && this.instance) {
var p = changes.position.currentValue as Position;
this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
this.locationTolerance = p.coords.accuracy;
this.recalcLocationTolerance();
this.heading = p.coords.heading;
}
}
}
import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
import { MapComponent } from 'ngx-openlayers';
import Overlay from 'ol/Overlay';
import { fromLonLat, toLonLat } from 'ol/proj';
@Component({
selector: 'fm-map-gps-location',
templateUrl: './gps-location.component.html',
styleUrls: ['./gps-location.component.scss']
})
export class GpsLocation implements OnInit,OnChanges{
@Input() enable:boolean;
public instance: Overlay;
@Input() position: Position;
@Input() location: number[]=[0,0];
@Input() locationTolerance: number = 0;
@Input() showHeading: boolean = false;
@Input() heading: number = 0;
@Input() headingTolerance: number = 0;
public locTolerancePixels: number = 0;
public path: string = "";
public rotate: string = "";
private resolution: number = 0;
@ViewChild('location', { static: true }) locationElement: ElementRef;
constructor(private map: MapComponent) {
}
recalcLocationTolerance() {
this.locTolerancePixels = this.resolution >0? this.locationTolerance / this.resolution:0;
}
ngOnInit() {
this.instance = new Overlay({
stopEvent:false,
positioning: 'center-center',
position: fromLonLat( this.location),
element: this.locationElement.nativeElement
});
var x = Math.tan(this.headingTolerance * Math.PI / 180)*40;
var y = Math.cos(this.headingTolerance * Math.PI / 180) * 40;
var y1 = Math.round(500 - y);
var x1 = Math.round(500 - x);
var y2 = Math.round(y1);
var x2 = Math.round(500 + x);
this.path = "M " + x2 + " " + y2 + " A 45 45,0,0,0, " + x1 + " " + y1 + " L 493 500 L 507 500 Z";
this.rotate = "rotate(" + Math.round(this.heading) + " 500 500)";
this.locTolerancePixels = this.locationTolerance;
this.map.instance.addOverlay(this.instance);
this.map.instance.getView().on('change:resolution', (evt) => {
this.resolution = evt.target.get('resolution');
this.recalcLocationTolerance();
});
}
ngOnChanges(changes: SimpleChanges) {
if (changes.position && this.instance) {
var p = changes.position.currentValue as Position;
this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
this.locationTolerance = p.coords.accuracy;
this.recalcLocationTolerance();
this.heading = p.coords.heading;
}
}
}

118
projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts
View File

@ -1,59 +1,59 @@
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
import { Feature } from 'ol';
import { FeatureListComponent,AbstractFeatureListComponent } from '../feature-list/feature-list.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
import {IQueryState } from '../../models/query.state';
import * as mapReducers from '../../reducers/map.reducer';
import * as mapActions from '../../actions/map.actions';
import { Store } from '@ngrx/store';
@Component({
selector: 'fm-map-feature-list-container',
templateUrl: './feature-list-container.component.html',
styleUrls: ['./feature-list-container.component.scss']
})
export class FeatureListContainerComponent {
constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[] ) {
}
@Input() features: Array<Feature>
@Input() queryState: IQueryState;
@ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective;
loadComponent(queryState:IQueryState) {
var componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default
var selected = -1;
for (var i = 0; i < this.featureLists.length; i++) {
if (this.featureLists[i]['forItemType'] == queryState.itemType && this.featureLists[i]['forChild'] && queryState.parentCode && queryState.parentCode != "") {
selected = i;
break;
} else if (this.featureLists[i]['forItemType'] == queryState.itemType) {
selected = i;
break;
}
}
if (selected >= 0) {
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
if (this.featureLists[selected]['collapseSearch'] === true) {
this.store.dispatch(new mapActions.CollapseSearch());
}
}
const viewContainerRef = this.widgetHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractFeatureListComponent>componentRef.instance).features = this.features;
(<AbstractFeatureListComponent>componentRef.instance).queryState = this.queryState;
}
ngOnChanges(changes: SimpleChanges) {
if (changes["features"] && changes["features"].currentValue) {
if (this.queryState) {
this.loadComponent(this.queryState);
}
}
}
}
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
import { Feature } from 'ol';
import { FeatureListComponent,AbstractFeatureListComponent } from '../feature-list/feature-list.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
import {IQueryState } from '../../models/query.state';
import * as mapReducers from '../../reducers/map.reducer';
import * as mapActions from '../../actions/map.actions';
import { Store } from '@ngrx/store';
@Component({
selector: 'fm-map-feature-list-container',
templateUrl: './feature-list-container.component.html',
styleUrls: ['./feature-list-container.component.scss']
})
export class FeatureListContainerComponent {
constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[] ) {
}
@Input() features: Array<Feature>
@Input() queryState: IQueryState;
@ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective;
loadComponent(queryState:IQueryState) {
var componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default
var selected = -1;
for (var i = 0; i < this.featureLists.length; i++) {
if (this.featureLists[i]['forItemType'] == queryState.itemType && this.featureLists[i]['forChild'] && queryState.parentCode && queryState.parentCode != "") {
selected = i;
break;
} else if (this.featureLists[i]['forItemType'] == queryState.itemType) {
selected = i;
break;
}
}
if (selected >= 0) {
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
if (this.featureLists[selected]['collapseSearch'] === true) {
this.store.dispatch(new mapActions.CollapseSearch());
}
}
const viewContainerRef = this.widgetHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractFeatureListComponent>componentRef.instance).features = this.features;
(<AbstractFeatureListComponent>componentRef.instance).queryState = this.queryState;
}
ngOnChanges(changes: SimpleChanges) {
if (changes["features"] && changes["features"].currentValue) {
if (this.queryState) {
this.loadComponent(this.queryState);
}
}
}
}

86
projects/common-map/src/fm-map/components/feature-list-feature-container/feature-list-feature-container.component.ts
View File

@ -1,43 +1,43 @@
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
import { Feature } from 'ol';
import { AbstractFeatureListFeatureComponent,FeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
@Component({
selector: 'fm-map-feature-list-feature-container',
template: `
<div>
<ng-template fm-map-widget-host></ng-template>
</div>
`
})
export class FeatureListFeatureContainerComponent {
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListFeatureComponent) public featureLists: AbstractFeatureListFeatureComponent[] ) {
}
@Input() feature: Feature;
@ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective;
loadComponent() {
var componentFactory: ComponentFactory<AbstractFeatureListFeatureComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListFeatureComponent); // default
for (var i = 0; i < this.featureLists.length; i++) {
if (this.featureLists[i]['forItemType'] == this.feature.get("itemType")) {
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
}
}
const viewContainerRef = this.widgetHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractFeatureListFeatureComponent>componentRef.instance).feature = this.feature;
}
ngOnChanges(changes: SimpleChanges) {
if (changes["feature"] && changes["feature"].currentValue) {
this.loadComponent();
}
}
}
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
import { Feature } from 'ol';
import { AbstractFeatureListFeatureComponent,FeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
@Component({
selector: 'fm-map-feature-list-feature-container',
template: `
<div>
<ng-template fm-map-widget-host></ng-template>
</div>
`
})
export class FeatureListFeatureContainerComponent {
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListFeatureComponent) public featureLists: AbstractFeatureListFeatureComponent[] ) {
}
@Input() feature: Feature;
@ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective;
loadComponent() {
var componentFactory: ComponentFactory<AbstractFeatureListFeatureComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListFeatureComponent); // default
for (var i = 0; i < this.featureLists.length; i++) {
if (this.featureLists[i]['forItemType'] == this.feature.get("itemType")) {
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
}
}
const viewContainerRef = this.widgetHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractFeatureListFeatureComponent>componentRef.instance).feature = this.feature;
}
ngOnChanges(changes: SimpleChanges) {
if (changes["feature"] && changes["feature"].currentValue) {
this.loadComponent();
}
}
}

94
projects/common-map/src/fm-map/components/item-list-item-container/item-list-item-container.component.ts
View File

@ -1,47 +1,47 @@
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
import { AbstractItemListItemComponent,ItemListItemComponent } from '../item-list-item/item-list-item.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
import { IItem, IListItem } from '@farmmaps/common';
@Component({
selector: 'fm-map-item-list-item-container',
template: `
<div style="height:100%">
<ng-template fm-map-widget-host></ng-template>
</div>
`
})
export class ItemListItemContainerComponent {
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractItemListItemComponent) public itemComponentList: AbstractItemListItemComponent[] ) {
}
@Input() item: IListItem;
@ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective;
loadComponent() {
var componentFactory: ComponentFactory<AbstractItemListItemComponent> = this.componentFactoryResolver.resolveComponentFactory(ItemListItemComponent); // default
for (var i = 0; i < this.itemComponentList.length; i++) {
if (this.itemComponentList[i]['forItemType'] &&
this.itemComponentList[i]['forItemType'].indexOf(this.item.itemType) >= 0 &&
this.itemComponentList[i]['forSourceTask'] &&
this.itemComponentList[i]['forSourceTask'].indexOf(this.item.sourceTask) >= 0 )
{
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.itemComponentList[i]['constructor'] as any);
}
}
const viewContainerRef = this.widgetHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractItemListItemComponent>componentRef.instance).item = this.item;
}
ngOnChanges(changes: SimpleChanges) {
if (changes["item"] && changes["item"].currentValue) {
this.loadComponent();
}
}
}
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
import { AbstractItemListItemComponent,ItemListItemComponent } from '../item-list-item/item-list-item.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
import { IItem, IListItem } from '@farmmaps/common';
@Component({
selector: 'fm-map-item-list-item-container',
template: `
<div style="height:100%">
<ng-template fm-map-widget-host></ng-template>
</div>
`
})
export class ItemListItemContainerComponent {
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractItemListItemComponent) public itemComponentList: AbstractItemListItemComponent[] ) {
}
@Input() item: IListItem;
@ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective;
loadComponent() {
var componentFactory: ComponentFactory<AbstractItemListItemComponent> = this.componentFactoryResolver.resolveComponentFactory(ItemListItemComponent); // default
for (var i = 0; i < this.itemComponentList.length; i++) {
if (this.itemComponentList[i]['forItemType'] &&
this.itemComponentList[i]['forItemType'].indexOf(this.item.itemType) >= 0 &&
this.itemComponentList[i]['forSourceTask'] &&
this.itemComponentList[i]['forSourceTask'].indexOf(this.item.sourceTask) >= 0 )
{
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.itemComponentList[i]['constructor'] as any);
}
}
const viewContainerRef = this.widgetHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractItemListItemComponent>componentRef.instance).item = this.item;
}
ngOnChanges(changes: SimpleChanges) {
if (changes["item"] && changes["item"].currentValue) {
this.loadComponent();
}
}
}

358
projects/common-map/src/fm-map/components/map-search/map-search.component.ts
View File

@ -1,179 +1,179 @@
import { Component, Input, Output, OnInit, EventEmitter, SimpleChanges, OnChanges, ViewChild } from '@angular/core';
import { Observable , of } from 'rxjs';
import { debounceTime,distinctUntilChanged,tap,switchMap,merge,catchError} from 'rxjs/operators';
import { TypeaheadService, TimespanService } from '@farmmaps/common';
import { IQueryState } from '../../models/query.state';
import { IPeriodState } from '../../models/period.state';
import { fillProperties } from '@angular/core/src/util/property';
import { tassign } from 'tassign';
@Component({
selector: 'fm-map-map-search',
templateUrl: './map-search.component.html',
styleUrls: ['./map-search.component.scss']
})
export class MapSearchComponent {
@ViewChild('searchText') searchText;
@Input() clearEnabled: boolean
@Input() set collapsed(collapsed: boolean) {
this.collapsedLocal = collapsed;
if (collapsed) this.searchText.nativeElement.blur();
}
@Input() set searchMinified(minified: boolean) {
this.searchMinifiedLocal = minified;
}
@Input() period: IPeriodState
@Output() onSearch = new EventEmitter<IQueryState>();
@Output() onClear = new EventEmitter<any>();
@Output() onSearchCollapse = new EventEmitter<any>();
@Output() onSearchExpand = new EventEmitter<any>();
@Output() onToggleMenu = new EventEmitter<any>();
@Output() onOpenModal = new EventEmitter<string>();
@Output() onCloseModal = new EventEmitter<any>();
@Input() openedModalName: string;
@Input() set filterOptions(filterOptions: IQueryState) {
if (filterOptions && filterOptions.query && filterOptions.query.length > 0) {
this.disabled = false;
} else {
this.disabled = true;
}
this.filterOptionsLocal = tassign(this.filterOptionsLocal, { tags: filterOptions.tags, query: filterOptions.query,bbox:filterOptions.bbox });
if (filterOptions.tags) {
this.searchTextLocal = { name: filterOptions.tags };
} else {
this.searchTextLocal = { name: filterOptions.query };
}
if (this.dateFilter) {
this.filterOptionsLocal.startDate = this.startDate;
this.filterOptionsLocal.endDate = this.endDate;
}
}
public collapsedLocal: boolean = true;
public searchMinifiedLocal: boolean = false;
public filterOptionsLocal: IQueryState;
private extent: number[];
public searchTextLocal: any;
public searchTextLocalOutput: string;
public dateFilter: boolean = true;
public startDate: Date = new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1);
public endDate: Date = new Date(Date.now());
public startEndCaption: string = this.timespanService.getCaption(this.startDate, this.endDate, 4);
searching = false;
searchFailed = false;
hideSearchingWhenUnsubscribed = new Observable(() => () => this.searching = false);
public disabled: boolean = true;
constructor(private typeaheadService: TypeaheadService, private timespanService: TimespanService) {
this.filterOptionsLocal = { query: "", tags: "", startDate: null, endDate: null, bboxFilter: true, itemType: null, itemCode:null,level:0,parentCode:null,bbox:[] };
}
search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(300),
distinctUntilChanged(),
tap(() => this.searching = true),
switchMap(term => term.length < 1 ? of([]) :
this.typeaheadService.getSearchTypeaheadItems(term).pipe(
tap(() => this.searchFailed = false),
catchError(() => {
this.searchFailed = true;
return of([]);
})) ),
tap(() => this.searching = false),
merge(this.hideSearchingWhenUnsubscribed));
formatter = (x: { name: string }) => x.name;
handleSearch(event) {
this.filterOptionsLocal.tags = null;
this.filterOptionsLocal.itemType = null;
this.filterOptionsLocal.itemCode = null;
this.filterOptionsLocal.parentCode = null;
this.filterOptionsLocal.query = this.searchTextLocalOutput;
if (this.dateFilter) {
this.filterOptionsLocal.startDate = this.startDate;
this.filterOptionsLocal.endDate = this.endDate;
}
this.onSearch.emit(this.filterOptionsLocal);
}
handleOpenSelectPeriodModal(event: MouseEvent) {
event.preventDefault();
this.onOpenModal.emit('selectPeriodModal');
}
handleCloseModal() {
this.onCloseModal.emit({});
}
handleSelect(event) {
event.preventDefault();
this.filterOptionsLocal.query = null;
this.filterOptionsLocal.itemType = null;
this.filterOptionsLocal.itemCode = null;
this.filterOptionsLocal.parentCode = null;
this.filterOptionsLocal.tags = event.item.name;
if (this.dateFilter) {
this.filterOptionsLocal.startDate = this.startDate;
this.filterOptionsLocal.endDate = this.endDate;
}
this.onSearch.emit(this.filterOptionsLocal);
this.searchTextLocal = { name: this.filterOptionsLocal.tags };
}
handleSelectPeriod(event: { startDate: Date, endDate: Date }) {
this.startDate = event.startDate;
this.endDate = event.endDate;
this.handleCloseModal();
this.startEndCaption = this.timespanService.getCaption(event.startDate, event.endDate, 4);
this.onSearch.emit(this.filterOptionsLocal);
}
handleChangeEnableDateFilter(enabled) {
this.dateFilter = enabled;
if (enabled) {
this.filterOptionsLocal.startDate = this.startDate;
this.filterOptionsLocal.endDate = this.endDate;
} else {
this.filterOptionsLocal.startDate = null;
this.filterOptionsLocal.endDate = null;
}
if(this.filterOptionsLocal.query || this.filterOptionsLocal.tags)
this.onSearch.emit(this.filterOptionsLocal);
}
handleChangeEnableBBOXFilter(enabled) {
this.filterOptionsLocal.bboxFilter = enabled;
if (this.filterOptionsLocal.query || this.filterOptionsLocal.tags)
this.onSearch.emit(this.filterOptionsLocal);
}
handleToggleMenu(event) {
this.onToggleMenu.emit({});
}
handleFocus(event) {
this.onSearchExpand.emit({});
}
handleChange(event: string) {
this.searchTextLocalOutput = event;
if (event && event.length == 1) {
this.onSearchExpand.emit({});
}
if (event && event.length > 0)
this.disabled = false;
else
this.disabled = true;
}
handleClearClick(event) {
this.onClear.emit({});
}
}
import { Component, Input, Output, OnInit, EventEmitter, SimpleChanges, OnChanges, ViewChild } from '@angular/core';
import { Observable , of } from 'rxjs';
import { debounceTime,distinctUntilChanged,tap,switchMap,merge,catchError} from 'rxjs/operators';
import { TypeaheadService, TimespanService } from '@farmmaps/common';
import { IQueryState } from '../../models/query.state';
import { IPeriodState } from '../../models/period.state';
import { fillProperties } from '@angular/core/src/util/property';
import { tassign } from 'tassign';
@Component({
selector: 'fm-map-map-search',
templateUrl: './map-search.component.html',
styleUrls: ['./map-search.component.scss']
})
export class MapSearchComponent {
@ViewChild('searchText', { static: true }) searchText;
@Input() clearEnabled: boolean
@Input() set collapsed(collapsed: boolean) {
this.collapsedLocal = collapsed;
if (collapsed) this.searchText.nativeElement.blur();
}
@Input() set searchMinified(minified: boolean) {
this.searchMinifiedLocal = minified;
}
@Input() period: IPeriodState
@Output() onSearch = new EventEmitter<IQueryState>();
@Output() onClear = new EventEmitter<any>();
@Output() onSearchCollapse = new EventEmitter<any>();
@Output() onSearchExpand = new EventEmitter<any>();
@Output() onToggleMenu = new EventEmitter<any>();
@Output() onOpenModal = new EventEmitter<string>();
@Output() onCloseModal = new EventEmitter<any>();
@Input() openedModalName: string;
@Input() set filterOptions(filterOptions: IQueryState) {
if (filterOptions && filterOptions.query && filterOptions.query.length > 0) {
this.disabled = false;
} else {
this.disabled = true;
}
this.filterOptionsLocal = tassign(this.filterOptionsLocal, { tags: filterOptions.tags, query: filterOptions.query,bbox:filterOptions.bbox });
if (filterOptions.tags) {
this.searchTextLocal = { name: filterOptions.tags };
} else {
this.searchTextLocal = { name: filterOptions.query };
}
if (this.dateFilter) {
this.filterOptionsLocal.startDate = this.startDate;
this.filterOptionsLocal.endDate = this.endDate;
}
}
public collapsedLocal: boolean = true;
public searchMinifiedLocal: boolean = false;
public filterOptionsLocal: IQueryState;
private extent: number[];
public searchTextLocal: any;
public searchTextLocalOutput: string;
public dateFilter: boolean = true;
public startDate: Date = new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1);
public endDate: Date = new Date(Date.now());
public startEndCaption: string = this.timespanService.getCaption(this.startDate, this.endDate, 4);
searching = false;
searchFailed = false;
hideSearchingWhenUnsubscribed = new Observable(() => () => this.searching = false);
public disabled: boolean = true;
constructor(private typeaheadService: TypeaheadService, private timespanService: TimespanService) {
this.filterOptionsLocal = { query: "", tags: "", startDate: null, endDate: null, bboxFilter: true, itemType: null, itemCode:null,level:0,parentCode:null,bbox:[] };
}
search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(300),
distinctUntilChanged(),
tap(() => this.searching = true),
switchMap(term => term.length < 1 ? of([]) :
this.typeaheadService.getSearchTypeaheadItems(term).pipe(
tap(() => this.searchFailed = false),
catchError(() => {
this.searchFailed = true;
return of([]);
})) ),
tap(() => this.searching = false),
merge(this.hideSearchingWhenUnsubscribed));
formatter = (x: { name: string }) => x.name;
handleSearch(event) {
this.filterOptionsLocal.tags = null;
this.filterOptionsLocal.itemType = null;
this.filterOptionsLocal.itemCode = null;
this.filterOptionsLocal.parentCode = null;
this.filterOptionsLocal.query = this.searchTextLocalOutput;
if (this.dateFilter) {
this.filterOptionsLocal.startDate = this.startDate;
this.filterOptionsLocal.endDate = this.endDate;
}
this.onSearch.emit(this.filterOptionsLocal);
}
handleOpenSelectPeriodModal(event: MouseEvent) {
event.preventDefault();
this.onOpenModal.emit('selectPeriodModal');
}
handleCloseModal() {
this.onCloseModal.emit({});
}
handleSelect(event) {
event.preventDefault();
this.filterOptionsLocal.query = null;
this.filterOptionsLocal.itemType = null;
this.filterOptionsLocal.itemCode = null;
this.filterOptionsLocal.parentCode = null;
this.filterOptionsLocal.tags = event.item.name;
if (this.dateFilter) {
this.filterOptionsLocal.startDate = this.startDate;
this.filterOptionsLocal.endDate = this.endDate;
}
this.onSearch.emit(this.filterOptionsLocal);
this.searchTextLocal = { name: this.filterOptionsLocal.tags };
}
handleSelectPeriod(event: { startDate: Date, endDate: Date }) {
this.startDate = event.startDate;
this.endDate = event.endDate;
this.handleCloseModal();
this.startEndCaption = this.timespanService.getCaption(event.startDate, event.endDate, 4);
this.onSearch.emit(this.filterOptionsLocal);
}
handleChangeEnableDateFilter(enabled) {
this.dateFilter = enabled;
if (enabled) {
this.filterOptionsLocal.startDate = this.startDate;
this.filterOptionsLocal.endDate = this.endDate;
} else {
this.filterOptionsLocal.startDate = null;
this.filterOptionsLocal.endDate = null;
}
if(this.filterOptionsLocal.query || this.filterOptionsLocal.tags)
this.onSearch.emit(this.filterOptionsLocal);
}
handleChangeEnableBBOXFilter(enabled) {
this.filterOptionsLocal.bboxFilter = enabled;
if (this.filterOptionsLocal.query || this.filterOptionsLocal.tags)
this.onSearch.emit(this.filterOptionsLocal);
}
handleToggleMenu(event) {
this.onToggleMenu.emit({});
}
handleFocus(event) {
this.onSearchExpand.emit({});
}
handleChange(event: string) {
this.searchTextLocalOutput = event;
if (event && event.length == 1) {
this.onSearchExpand.emit({});
}
if (event && event.length > 0)
this.disabled = false;
else
this.disabled = true;
}
handleClearClick(event) {
this.onClear.emit({});
}
}

614
projects/common-map/src/fm-map/components/map/map.component.ts
View File

@ -1,307 +1,307 @@
import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit } from '@angular/core';
import { Location } from '@angular/common';
import { Observable, Subject, Subscription,combineLatest, from } from 'rxjs';
import { debounce, withLatestFrom, first, combineAll } from 'rxjs/operators';
import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
import { Store } from '@ngrx/store';
//import { proj,Map } from 'openlayers';
// Map
import * as mapReducers from '../../reducers/map.reducer';
import * as mapActions from '../../actions/map.actions';
import { IMapState} from '../../models/map.state';
import { ISelectedFeatures } from '../../models/selected.features';
import { IItemLayer } from '../../models/item.layer';
import { IQueryState } from '../../models/query.state';
import { IPeriodState } from '../../models/period.state';
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
import { IMetaData } from '../meta-data-modal/meta-data-modal.component';
import { StateSerializerService } from '../../services/state-serializer.service';
import { GeolocationService} from '../../services/geolocation.service';
// AppCommon
import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
import { IItemType, IItem } from '@farmmaps/common';
import {commonReducers} from '@farmmaps/common';
import {commonActions} from '@farmmaps/common';
import {Feature} from 'ol';
import {Extent,createEmpty,extend } from 'ol/extent';
import {transform} from 'ol/proj';
import { query } from '@angular/animations';
import { tassign } from 'tassign';
@Component({
selector: 'fm-map-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
title: string = 'Map';
public openedModalName: Observable<string>;
public itemTypes: Observable<{ [id: string]: IItemType }>;
public mapState: Observable<IMapState>;
public features: Observable<Array<Feature>>;
public overlayLayers: Observable<Array<IItemLayer>>;
public selectedOverlayLayer: Observable<IItemLayer>;
public selectedItemLayer: Observable<IItemLayer>;
public baseLayers: Observable<Array<IItemLayer>>;
public selectedBaseLayer: Observable<IItemLayer>;
public projection: Observable<string>;
public selectedFeatures: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
public droppedFile: Subject<IDroppedFile> = new Subject<IDroppedFile>();
private paramSub: Subscription;
private itemTypeSub: Subscription;
private mapStateSub: Subscription;
private queryStateSub: Subscription;
public parentCode: Observable<string>;
public panelVisible: Observable<boolean>;
public panelCollapsed: Observable<boolean>;
public selectedFeature: Observable<Feature>;
public selectedItem: Observable<IItem>;
public queryState: Observable<IQueryState>;
public period: Observable<IPeriodState>;
public clearEnabled: Observable<boolean>;
public searchCollapsed: Observable<boolean>;
public searchMinified: Observable<boolean>;
public menuVisible: Observable<boolean>;
public query: Observable<IQueryState>;
public position: Observable<Position>;
public baseLayersCollapsed:boolean = true;
public overlayLayersCollapsed: boolean = true;
public extent: Observable<Extent>;
@ViewChild('map') map;
constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
}
@HostListener('document:keyup', ['$event'])
escapeClose(event: KeyboardEvent) {
let x = event.keyCode;
if (x === 27) {
this.handleCloseModal()
}
}
handleOpenModal(modalName: string) {
this.store.dispatch(new commonActions.OpenModal(modalName));
}
handleCloseModal() {
this.store.dispatch(new commonActions.CloseModal());
}
handleFileDropped(droppedFile: IDroppedFile) {
this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry });
}
handleFeaturesSelected(feature: Feature) {
if (feature) {
let newQuery = tassign(mapReducers.initialQueryState, { itemCode: feature.get('code') });
this.store.dispatch(new mapActions.DoQuery(newQuery));
}
}
handleSearch(queryState: IQueryState) {
this.store.dispatch(new mapActions.DoQuery(queryState));
}
ngOnInit() {
this.store.dispatch(new mapActions.Init());
this.selectedFeatures.next({x:0,y:0,features:[]});
this.mapState = this.store.select(mapReducers.selectGetMapState);
this.parentCode = this.store.select(mapReducers.selectGetParentCode);
this.features = this.store.select(mapReducers.selectGetFeatures);
this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
this.projection = this.store.select(mapReducers.selectGetProjection);
this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
this.panelVisible = this.store.select(mapReducers.selectGetPanelVisible);
this.panelCollapsed = this.store.select(mapReducers.selectGetPanelCollapsed);
this.selectedFeature = this.store.select(mapReducers.selectGetSelectedFeature);
this.selectedItem = this.store.select(mapReducers.selectGetSelectedItem);
this.queryState = this.store.select(mapReducers.selectGetQueryState);
this.clearEnabled = this.store.select(mapReducers.selectGetClearEnabled);
this.searchCollapsed = this.store.select(mapReducers.selectGetSearchCollapsed);
this.searchMinified = this.store.select(mapReducers.selectGetSearchMinified);
this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
this.query = this.store.select(mapReducers.selectGetQuery);
this.extent = this.store.select(mapReducers.selectGetExtent);
this.selectedFeatures.next(null);
this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
this.period = this.store.select(mapReducers.selectGetPeriod);
this.position = this.geolocationService.getCurrentPosition();
this.mapState.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
this.replaceUrl(state[0], state[1], true);
});
this.query.pipe(withLatestFrom(this.mapState)).subscribe((state) => {
this.replaceUrl(state[1], state[0],false);
});
}
private stateSetCount: number = 0;
private lastQueryState: string = this.serializeService.serialize(mapReducers.initialQueryState);
private lastMapState: string = "";
ngAfterViewInit() {
this.paramSub = this.route.paramMap.subscribe((params: ParamMap) => {
//console.log("Param sub");
var newMapState: IMapState = null;
var newQueryState: IQueryState = null;
var mapStateChanged = false;
var queryStateChanged = false;
if (params.has("xCenter") && params.has("yCenter")) {
let xCenter = parseFloat(params.get("xCenter"));
let yCenter = parseFloat(params.get("yCenter"));
let zoom = parseFloat(params.get("zoom"));
let rotation = parseFloat(params.get("rotation"));
let baseLayer = params.get("baseLayer")?params.get("baseLayer"):"";
newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
mapStateChanged = this.lastMapState != JSON.stringify(newMapState) && this.stateSetCount == 0;
this.lastMapState = JSON.stringify(newMapState);
}
if (params.has("queryState")) {
let queryState = params.get("queryState");
newQueryState = tassign(mapReducers.initialQueryState);
if (queryState != "") {
newQueryState = this.serializeService.deserialize(queryState);
}
queryStateChanged = this.lastQueryState != queryState;
this.lastQueryState = queryState;
}
if (mapStateChanged && queryStateChanged) {
//console.log("Both states");
this.store.dispatch(new mapActions.SetState(newMapState, newQueryState));
} else if (mapStateChanged) {
//console.log("Map state");
this.store.dispatch(new mapActions.SetMapState(newMapState));
} else if (queryStateChanged) {
//console.log("Query state");
this.store.dispatch(new mapActions.SetQueryState(newQueryState));
}
this.stateSetCount += 1;
});
setTimeout(() => {
this.map.instance.updateSize();
}, 500);
}
handleSearchCollapse(event) {
this.store.dispatch(new mapActions.CollapseSearch());
}
handleSearchExpand(event) {
this.store.dispatch(new mapActions.ExpandSearch());
}
handleToggleMenu(event) {
this.store.dispatch(new mapActions.ToggleMenu());
}
handleToggleBaseLayers(event:MouseEvent) {
this.baseLayersCollapsed = !this.baseLayersCollapsed;
event.preventDefault();
}
handleToggleOverlayLayers(event: MouseEvent) {
this.overlayLayersCollapsed = !this.overlayLayersCollapsed;
event.preventDefault();
}
handlePredefinedQuery(event: MouseEvent, query: any) {
event.preventDefault();
var queryState = tassign(mapReducers.initialQueryState, query);
this.store.dispatch(new mapActions.DoQuery(queryState));
}
handleTrijntjeClick(event: MouseEvent, query: any) {
event.preventDefault();
var queryState = tassign(mapReducers.initialQueryState, query);
var mapState = JSON.parse(this.lastMapState);
this.router.navigate(["app","trijntje" , mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: false });
}
replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
console.debug(`Replace url : Baselayer(${mapState.baseLayerCode}) Querystate(${this.serializeService.serialize(queryState)})`);
let parts =["."];
parts.push(mapState.xCenter.toFixed(5));
parts.push(mapState.yCenter.toFixed(5));
parts.push( mapState.zoom.toFixed(0));
parts.push( mapState.rotation.toFixed(2));
if(mapState.baseLayerCode!="") {
parts.push(mapState.baseLayerCode);
parts.push( this.serializeService.serialize(queryState));
this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
}
}
handleOnMoveEnd(event) {
var map = event.map;
var view = map.getView();
var rotation = view.getRotation();
var zoom = view.getZoom();
var center = transform(view.getCenter(), view.getProjection(), "EPSG:4326");
var extent = view.calculateExtent(this.map.instance.getSize());
let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
let state = { mapState: mapState, extent: extent };
let source = from([state]);
source.pipe(withLatestFrom(this.selectedBaseLayer), withLatestFrom(this.queryState)).subscribe(([[state, baselayer], queryState]) => {
if (mapState && baselayer && queryState) {
let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code });
this.replaceUrl(newMapState, tassign(queryState, { bbox: queryState.bboxFilter ? state.extent : queryState.bbox }));
this.store.dispatch(new mapActions.SetViewExtent(state.extent));
}
});
}
handleOnMouseDown(event: MouseEvent) {
this.store.dispatch(new mapActions.CollapseSearch());
}
handleOnDownload(event) {
}
handleClearSearch(event) {
this.store.dispatch(new commonActions.Escape(true, false));
}
handleOnDelete(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
}
handleOnToggleVisibility(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
}
handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) {
this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
}
handleZoomToExtent(itemLayer: IItemLayer) {
var extent = createEmpty();
extend(extent, itemLayer.layer.getExtent());
if (extent) {
this.store.dispatch(new mapActions.SetExtent(extent));
}
}
handleSelectBaseLayer(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
}
handleSelectOverlayLayer(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
}
ngOnDestroy() {
this.paramSub.unsubscribe();
if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
if (this.mapStateSub) this.mapStateSub.unsubscribe();
if (this.queryStateSub) this.queryStateSub.unsubscribe(); }
}
import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit } from '@angular/core';
import { Location } from '@angular/common';
import { Observable, Subject, Subscription,combineLatest, from } from 'rxjs';
import { debounce, withLatestFrom, first, combineAll } from 'rxjs/operators';
import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
import { Store } from '@ngrx/store';
//import { proj,Map } from 'openlayers';
// Map
import * as mapReducers from '../../reducers/map.reducer';
import * as mapActions from '../../actions/map.actions';
import { IMapState} from '../../models/map.state';
import { ISelectedFeatures } from '../../models/selected.features';
import { IItemLayer } from '../../models/item.layer';
import { IQueryState } from '../../models/query.state';
import { IPeriodState } from '../../models/period.state';
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
import { IMetaData } from '../meta-data-modal/meta-data-modal.component';
import { StateSerializerService } from '../../services/state-serializer.service';
import { GeolocationService} from '../../services/geolocation.service';
// AppCommon
import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
import { IItemType, IItem } from '@farmmaps/common';
import {commonReducers} from '@farmmaps/common';
import {commonActions} from '@farmmaps/common';
import {Feature} from 'ol';
import {Extent,createEmpty,extend } from 'ol/extent';
import {transform} from 'ol/proj';
import { query } from '@angular/animations';
import { tassign } from 'tassign';
@Component({
selector: 'fm-map-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
title: string = 'Map';
public openedModalName: Observable<string>;
public itemTypes: Observable<{ [id: string]: IItemType }>;
public mapState: Observable<IMapState>;
public features: Observable<Array<Feature>>;
public overlayLayers: Observable<Array<IItemLayer>>;
public selectedOverlayLayer: Observable<IItemLayer>;
public selectedItemLayer: Observable<IItemLayer>;
public baseLayers: Observable<Array<IItemLayer>>;
public selectedBaseLayer: Observable<IItemLayer>;
public projection: Observable<string>;
public selectedFeatures: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
public droppedFile: Subject<IDroppedFile> = new Subject<IDroppedFile>();
private paramSub: Subscription;
private itemTypeSub: Subscription;
private mapStateSub: Subscription;
private queryStateSub: Subscription;
public parentCode: Observable<string>;
public panelVisible: Observable<boolean>;
public panelCollapsed: Observable<boolean>;
public selectedFeature: Observable<Feature>;
public selectedItem: Observable<IItem>;
public queryState: Observable<IQueryState>;
public period: Observable<IPeriodState>;
public clearEnabled: Observable<boolean>;
public searchCollapsed: Observable<boolean>;
public searchMinified: Observable<boolean>;
public menuVisible: Observable<boolean>;
public query: Observable<IQueryState>;
public position: Observable<Position>;
public baseLayersCollapsed:boolean = true;
public overlayLayersCollapsed: boolean = true;
public extent: Observable<Extent>;
@ViewChild('map', { static: true }) map;
constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
}
@HostListener('document:keyup', ['$event'])
escapeClose(event: KeyboardEvent) {
let x = event.keyCode;
if (x === 27) {
this.handleCloseModal()
}
}
handleOpenModal(modalName: string) {
this.store.dispatch(new commonActions.OpenModal(modalName));
}
handleCloseModal() {
this.store.dispatch(new commonActions.CloseModal());
}
handleFileDropped(droppedFile: IDroppedFile) {
this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry });
}
handleFeaturesSelected(feature: Feature) {
if (feature) {
let newQuery = tassign(mapReducers.initialQueryState, { itemCode: feature.get('code') });
this.store.dispatch(new mapActions.DoQuery(newQuery));
}
}
handleSearch(queryState: IQueryState) {
this.store.dispatch(new mapActions.DoQuery(queryState));
}
ngOnInit() {
this.store.dispatch(new mapActions.Init());
this.selectedFeatures.next({x:0,y:0,features:[]});
this.mapState = this.store.select(mapReducers.selectGetMapState);
this.parentCode = this.store.select(mapReducers.selectGetParentCode);
this.features = this.store.select(mapReducers.selectGetFeatures);
this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
this.projection = this.store.select(mapReducers.selectGetProjection);
this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
this.panelVisible = this.store.select(mapReducers.selectGetPanelVisible);
this.panelCollapsed = this.store.select(mapReducers.selectGetPanelCollapsed);
this.selectedFeature = this.store.select(mapReducers.selectGetSelectedFeature);
this.selectedItem = this.store.select(mapReducers.selectGetSelectedItem);
this.queryState = this.store.select(mapReducers.selectGetQueryState);
this.clearEnabled = this.store.select(mapReducers.selectGetClearEnabled);
this.searchCollapsed = this.store.select(mapReducers.selectGetSearchCollapsed);
this.searchMinified = this.store.select(mapReducers.selectGetSearchMinified);
this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
this.query = this.store.select(mapReducers.selectGetQuery);
this.extent = this.store.select(mapReducers.selectGetExtent);
this.selectedFeatures.next(null);
this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
this.period = this.store.select(mapReducers.selectGetPeriod);
this.position = this.geolocationService.getCurrentPosition();
this.mapState.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
this.replaceUrl(state[0], state[1], true);
});
this.query.pipe(withLatestFrom(this.mapState)).subscribe((state) => {
this.replaceUrl(state[1], state[0],false);
});
}
private stateSetCount: number = 0;
private lastQueryState: string = this.serializeService.serialize(mapReducers.initialQueryState);
private lastMapState: string = "";
ngAfterViewInit() {
this.paramSub = this.route.paramMap.subscribe((params: ParamMap) => {
//console.log("Param sub");
var newMapState: IMapState = null;
var newQueryState: IQueryState = null;
var mapStateChanged = false;
var queryStateChanged = false;
if (params.has("xCenter") && params.has("yCenter")) {
let xCenter = parseFloat(params.get("xCenter"));
let yCenter = parseFloat(params.get("yCenter"));
let zoom = parseFloat(params.get("zoom"));
let rotation = parseFloat(params.get("rotation"));
let baseLayer = params.get("baseLayer")?params.get("baseLayer"):"";
newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
mapStateChanged = this.lastMapState != JSON.stringify(newMapState) && this.stateSetCount == 0;
this.lastMapState = JSON.stringify(newMapState);
}
if (params.has("queryState")) {
let queryState = params.get("queryState");
newQueryState = tassign(mapReducers.initialQueryState);
if (queryState != "") {
newQueryState = this.serializeService.deserialize(queryState);
}
queryStateChanged = this.lastQueryState != queryState;
this.lastQueryState = queryState;
}
if (mapStateChanged && queryStateChanged) {
//console.log("Both states");
this.store.dispatch(new mapActions.SetState(newMapState, newQueryState));
} else if (mapStateChanged) {
//console.log("Map state");
this.store.dispatch(new mapActions.SetMapState(newMapState));
} else if (queryStateChanged) {
//console.log("Query state");
this.store.dispatch(new mapActions.SetQueryState(newQueryState));
}
this.stateSetCount += 1;
});
setTimeout(() => {
this.map.instance.updateSize();
}, 500);
}
handleSearchCollapse(event) {
this.store.dispatch(new mapActions.CollapseSearch());
}
handleSearchExpand(event) {
this.store.dispatch(new mapActions.ExpandSearch());
}
handleToggleMenu(event) {
this.store.dispatch(new mapActions.ToggleMenu());
}
handleToggleBaseLayers(event:MouseEvent) {
this.baseLayersCollapsed = !this.baseLayersCollapsed;
event.preventDefault();
}
handleToggleOverlayLayers(event: MouseEvent) {
this.overlayLayersCollapsed = !this.overlayLayersCollapsed;
event.preventDefault();
}
handlePredefinedQuery(event: MouseEvent, query: any) {
event.preventDefault();
var queryState = tassign(mapReducers.initialQueryState, query);
this.store.dispatch(new mapActions.DoQuery(queryState));
}
handleTrijntjeClick(event: MouseEvent, query: any) {
event.preventDefault();
var queryState = tassign(mapReducers.initialQueryState, query);
var mapState = JSON.parse(this.lastMapState);
this.router.navigate(["app","trijntje" , mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: false });
}
replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
console.debug(`Replace url : Baselayer(${mapState.baseLayerCode}) Querystate(${this.serializeService.serialize(queryState)})`);
let parts =["."];
parts.push(mapState.xCenter.toFixed(5));
parts.push(mapState.yCenter.toFixed(5));
parts.push( mapState.zoom.toFixed(0));
parts.push( mapState.rotation.toFixed(2));
if(mapState.baseLayerCode!="") {
parts.push(mapState.baseLayerCode);
parts.push( this.serializeService.serialize(queryState));
this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
}
}
handleOnMoveEnd(event) {
var map = event.map;
var view = map.getView();
var rotation = view.getRotation();
var zoom = view.getZoom();
var center = transform(view.getCenter(), view.getProjection(), "EPSG:4326");
var extent = view.calculateExtent(this.map.instance.getSize());
let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
let state = { mapState: mapState, extent: extent };
let source = from([state]);
source.pipe(withLatestFrom(this.selectedBaseLayer), withLatestFrom(this.queryState)).subscribe(([[state, baselayer], queryState]) => {
if (mapState && baselayer && queryState) {
let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code });
this.replaceUrl(newMapState, tassign(queryState, { bbox: queryState.bboxFilter ? state.extent : queryState.bbox }));
this.store.dispatch(new mapActions.SetViewExtent(state.extent));
}
});
}
handleOnMouseDown(event: MouseEvent) {
this.store.dispatch(new mapActions.CollapseSearch());
}
handleOnDownload(event) {
}
handleClearSearch(event) {
this.store.dispatch(new commonActions.Escape(true, false));
}
handleOnDelete(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
}
handleOnToggleVisibility(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
}
handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) {
this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
}
handleZoomToExtent(itemLayer: IItemLayer) {
var extent = createEmpty();
extend(extent, itemLayer.layer.getExtent());
if (extent) {
this.store.dispatch(new mapActions.SetExtent(extent));
}
}
handleSelectBaseLayer(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
}
handleSelectOverlayLayer(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
}
ngOnDestroy() {
this.paramSub.unsubscribe();
if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
if (this.mapStateSub) this.mapStateSub.unsubscribe();
if (this.queryStateSub) this.queryStateSub.unsubscribe(); }
}

122
projects/common-map/src/fm-map/components/meta-data-modal/meta-data-modal.component.ts
View File

@ -1,61 +1,61 @@
import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
import { FormGroup,FormBuilder, Validators } from '@angular/forms';
import { IListItem } from '@farmmaps/common';
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
export interface IMetaData {
droppedFile: IDroppedFile,
attributes: any
}
@Component({
selector: 'fm-map-meta-data-modal',
templateUrl: 'meta-data-modal.component.html'
})
export class MetaDataModalComponent {
private modalName: string = 'metaDataModal';
private modalRef: NgbModalRef;
@ViewChild('content') _templateModal:ElementRef;
@Input() droppedFile: IDroppedFile;
@Input() set modalState(_modalState:any) {;
if(_modalState == this.modalName) {
this.openModal()
} else if(this.modalRef) {
this.closeModal();
}
}
@Input() event: IListItem;
@Output() onCloseModal = new EventEmitter<any>();
@Output() onAddFilesWithMetaData = new EventEmitter<IMetaData>();
constructor(private modalService: NgbModal, public fb: FormBuilder) { }
public metaDataForm: FormGroup;
handleMetaDataEntered(event) {
if (this.metaDataForm.valid) {
this.onAddFilesWithMetaData.emit({ droppedFile: this.droppedFile, attributes: { name: this.metaDataForm.value.name } });
}
}
openModal() {
//Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false }));
}
closeModal() {
this.modalRef.close();
this.metaDataForm.patchValue({ name: "" });
}
ngOnInit(): void {
this.metaDataForm = this.fb.group({
name: ["", Validators.compose([Validators.required, Validators.pattern("[a-zA-Z0-9_].*")])]
});
}
}
import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
import { FormGroup,FormBuilder, Validators } from '@angular/forms';
import { IListItem } from '@farmmaps/common';
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
export interface IMetaData {
droppedFile: IDroppedFile,
attributes: any
}
@Component({
selector: 'fm-map-meta-data-modal',
templateUrl: 'meta-data-modal.component.html'
})
export class MetaDataModalComponent {
private modalName: string = 'metaDataModal';
private modalRef: NgbModalRef;
@ViewChild('content', { static: true }) _templateModal:ElementRef;
@Input() droppedFile: IDroppedFile;
@Input() set modalState(_modalState:any) {;
if(_modalState == this.modalName) {
this.openModal()
} else if(this.modalRef) {
this.closeModal();
}
}
@Input() event: IListItem;
@Output() onCloseModal = new EventEmitter<any>();
@Output() onAddFilesWithMetaData = new EventEmitter<IMetaData>();
constructor(private modalService: NgbModal, public fb: FormBuilder) { }
public metaDataForm: FormGroup;
handleMetaDataEntered(event) {
if (this.metaDataForm.valid) {
this.onAddFilesWithMetaData.emit({ droppedFile: this.droppedFile, attributes: { name: this.metaDataForm.value.name } });
}
}
openModal() {
//Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false }));
}
closeModal() {
this.modalRef.close();
this.metaDataForm.patchValue({ name: "" });
}
ngOnInit(): void {
this.metaDataForm = this.fb.group({
name: ["", Validators.compose([Validators.required, Validators.pattern("[a-zA-Z0-9_].*")])]
});
}
}

186
projects/common-map/src/fm-map/components/select-period-modal/select-period-modal.component.ts
View File

@ -1,93 +1,93 @@
import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NgbModal, NgbModalRef, NgbDateStruct, NgbCalendar, NgbDateAdapter } from "@ng-bootstrap/ng-bootstrap";
import { NgbDateNativeAdapter } from '@farmmaps/common';
const equals = (one: NgbDateStruct, two: NgbDateStruct) =>
one && two && two.year === one.year && two.month === one.month && two.day === one.day;
const before = (one: NgbDateStruct, two: NgbDateStruct) =>
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
? false : one.day < two.day : one.month < two.month : one.year < two.year;
const after = (one: NgbDateStruct, two: NgbDateStruct) =>
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
? false : one.day > two.day : one.month > two.month : one.year > two.year;
@Component({
selector: 'fm-map-select-period-modal',
templateUrl: 'select-period-modal.component.html',
styleUrls: ['select-period-modal.component.scss']
})
export class SelectPeriodModalComponent {
private modalName: string = 'selectPeriodModal';
private modalRef: NgbModalRef;
private dateAdapter = new NgbDateNativeAdapter();
hoveredDate: NgbDateStruct;
fromDate: NgbDateStruct;
toDate: NgbDateStruct;
@ViewChild('content') _templateModal:ElementRef;
@Input() set modalState(_modalState:any) {;
if(_modalState == this.modalName) {
this.openModal()
} else if(this.modalRef) {
this.closeModal();
}
}
@Input() set startDate(_modalState: Date) {
this.fromDate = this.dateAdapter.fromModel(_modalState);
}
@Input() set endDate(_modalState: Date) {
var d = new Date(_modalState);
d.setDate(d.getDate() - 1);
this.toDate = this.dateAdapter.fromModel(d);
}
@Output() onCloseModal = new EventEmitter<any>();
@Output() onSelect = new EventEmitter<{ startDate: Date, endDate: Date }>();
constructor(private modalService: NgbModal, private calendar: NgbCalendar) { }
openModal() {
//Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false}));
}
closeModal() {
this.modalRef.close();
}
ngOnInit(): void {
}
onDateChange(date: NgbDateStruct) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
this.toDate = date;
} else {
this.toDate = null;
this.fromDate = date;
}
}
handleSelect(event:MouseEvent) {
event.preventDefault();
if (this.fromDate && this.toDate && before(this.fromDate, this.toDate)) {
var endDate = new Date(this.dateAdapter.toModel(this.toDate));
endDate.setDate(endDate.getDate() + 1);
this.onSelect.emit({startDate:this.dateAdapter.toModel(this.fromDate),endDate:endDate})
}
}
isHovered = date => this.fromDate && !this.toDate && this.hoveredDate && after(date, this.fromDate) && before(date, this.hoveredDate);
isInside = date => after(date, this.fromDate) && before(date, this.toDate);
isFrom = date => equals(date, this.fromDate);
isTo = date => equals(date, this.toDate);
}
import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NgbModal, NgbModalRef, NgbDateStruct, NgbCalendar, NgbDateAdapter } from "@ng-bootstrap/ng-bootstrap";
import { NgbDateNativeAdapter } from '@farmmaps/common';
const equals = (one: NgbDateStruct, two: NgbDateStruct) =>
one && two && two.year === one.year && two.month === one.month && two.day === one.day;
const before = (one: NgbDateStruct, two: NgbDateStruct) =>
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
? false : one.day < two.day : one.month < two.month : one.year < two.year;
const after = (one: NgbDateStruct, two: NgbDateStruct) =>
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
? false : one.day > two.day : one.month > two.month : one.year > two.year;
@Component({
selector: 'fm-map-select-period-modal',
templateUrl: 'select-period-modal.component.html',
styleUrls: ['select-period-modal.component.scss']
})
export class SelectPeriodModalComponent {
private modalName: string = 'selectPeriodModal';
private modalRef: NgbModalRef;
private dateAdapter = new NgbDateNativeAdapter();
hoveredDate: NgbDateStruct;
fromDate: NgbDateStruct;
toDate: NgbDateStruct;
@ViewChild('content', { static: true }) _templateModal:ElementRef;
@Input() set modalState(_modalState:any) {;
if(_modalState == this.modalName) {
this.openModal()
} else if(this.modalRef) {
this.closeModal();
}
}
@Input() set startDate(_modalState: Date) {
this.fromDate = this.dateAdapter.fromModel(_modalState);
}
@Input() set endDate(_modalState: Date) {
var d = new Date(_modalState);
d.setDate(d.getDate() - 1);
this.toDate = this.dateAdapter.fromModel(d);
}
@Output() onCloseModal = new EventEmitter<any>();
@Output() onSelect = new EventEmitter<{ startDate: Date, endDate: Date }>();
constructor(private modalService: NgbModal, private calendar: NgbCalendar) { }
openModal() {
//Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false}));
}
closeModal() {
this.modalRef.close();
}
ngOnInit(): void {
}
onDateChange(date: NgbDateStruct) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
this.toDate = date;
} else {
this.toDate = null;
this.fromDate = date;
}
}
handleSelect(event:MouseEvent) {
event.preventDefault();
if (this.fromDate && this.toDate && before(this.fromDate, this.toDate)) {
var endDate = new Date(this.dateAdapter.toModel(this.toDate));
endDate.setDate(endDate.getDate() + 1);
this.onSelect.emit({startDate:this.dateAdapter.toModel(this.fromDate),endDate:endDate})
}
}
isHovered = date => this.fromDate && !this.toDate && this.hoveredDate && after(date, this.fromDate) && before(date, this.hoveredDate);
isInside = date => after(date, this.fromDate) && before(date, this.toDate);
isFrom = date => equals(date, this.fromDate);
isTo = date => equals(date, this.toDate);
}

80
projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts
View File

@ -1,40 +1,40 @@
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
import { IItem } from '@farmmaps/common';
import { AbstractSelectedItemComponent, SelectedItemComponent } from '../selected-item/selected-item.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
@Component({
selector: 'fm-map-selected-item-container',
templateUrl: './selected-item-container.component.html',
styleUrls: ['./selected-item-container.component.scss']
})
export class SelectedItemContainerComponent {
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractSelectedItemComponent) public selectedItemComponents: AbstractSelectedItemComponent[] ) {
}
@Input() item: IItem;
@ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective;
loadComponent() {
var componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
for (var i = 0; i < this.selectedItemComponents.length; i++) {
if (this.selectedItemComponents[i]['forItemType'] == this.item.itemType) {
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.selectedItemComponents[i]['constructor'] as any);
}
}
const viewContainerRef = this.widgetHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractSelectedItemComponent>componentRef.instance).item = this.item;
}
ngOnChanges(changes: SimpleChanges) {
if (changes["item"] && changes["item"].currentValue) {
this.loadComponent();
}
}
}
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
import { IItem } from '@farmmaps/common';
import { AbstractSelectedItemComponent, SelectedItemComponent } from '../selected-item/selected-item.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
@Component({
selector: 'fm-map-selected-item-container',
templateUrl: './selected-item-container.component.html',
styleUrls: ['./selected-item-container.component.scss']
})
export class SelectedItemContainerComponent {
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractSelectedItemComponent) public selectedItemComponents: AbstractSelectedItemComponent[] ) {
}
@Input() item: IItem;
@ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective;
loadComponent() {
var componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
for (var i = 0; i < this.selectedItemComponents.length; i++) {
if (this.selectedItemComponents[i]['forItemType'] == this.item.itemType) {
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.selectedItemComponents[i]['constructor'] as any);
}
}
const viewContainerRef = this.widgetHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractSelectedItemComponent>componentRef.instance).item = this.item;
}
ngOnChanges(changes: SimpleChanges) {
if (changes["item"] && changes["item"].currentValue) {
this.loadComponent();
}
}
}

24
projects/common-map/src/fm-map/services/device-orientation.service.ts 100644
View File

@ -0,0 +1,24 @@
import { Injectable } from '@angular/core';
import { Observer, Observable } from 'rxjs';
@Injectable()
export class DeviceOrientationService {
/**
* Tries HTML5 geolocation.
*
* Wraps the Geolocation API into an observable.
*
* @return An observable of Bearing
*/
getCurrentBearing(): Observable<number> {
return Observable.create((observer: Observer<number>) => {
let sensor = new Magnetometer();
sensor.onreading= (ev:Event) => {
observer.next(Math.atan2(sensor.y, sensor.x) * (180 / Math.PI));
};
});
}
}

258
projects/common/src/fm/components/app/app.component.ts
View File

@ -1,129 +1,129 @@
import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener } from '@angular/core';
import { Router, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
import { Meta, Title, DOCUMENT, MetaDefinition } from '@angular/platform-browser';
import { Subscription , Observable } from 'rxjs';
import { Store, Action } from '@ngrx/store';
//AppCommon
import { IEventMessage } from '../../models/event.message';
import { IListItem} from '../../models/list.item';
import { EventService } from '../../services/event.service';
import * as commonActions from '../../actions/app-common.actions';
import * as appReducers from '../../reducers/app-common.reducer';
@Component({
selector: 'fm-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements OnInit, OnDestroy {
// This will go at the END of your title for example "Home - Angular Universal..." <-- after the dash (-)
private endPageTitle: string = 'Farmmaps';
// If no Title is provided, we'll use a default one before the dash(-)
private defaultPageTitle: string = 'Farmmaps';
private routerSub$: Subscription;
private eventSub$: Subscription;
public currentFolder: Observable<IListItem>;
public folderParents: Observable<IListItem[]>;
public browseFileElement: any;
public browseDirectoryElement: any;
public fileDroptarget: any;
public fullScreen: Observable<boolean>;
public routeLoading: Observable<boolean>;
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private title: Title,
private meta: Meta,
private store: Store<appReducers.State>,
private eventService: EventService,
) {
}
getActionFromEvent(event: IEventMessage): Action {
var action: Action = null;
console.debug(`${event.eventType} Event received`);
switch (event.eventType) {
case "ItemChanged": {
action = new commonActions.ItemChangedEvent(event.itemCode, event.attributes);
break;
}
case "ItemAdded": {
action = new commonActions.ItemAddedEvent(event.itemCode, event.attributes);
break;
}
case "ItemDeleted": {
action = new commonActions.ItemDeletedEvent(event.itemCode, event.attributes);
break;
}
case "taskStart": {
action = new commonActions.TaskStartEvent(event.itemCode, event.attributes);
break;
}
case "taskEnd": {
action = new commonActions.TaskEndEvent(event.itemCode, event.attributes);
break;
}
case "taskError": {
action = new commonActions.TaskErrorEvent(event.itemCode, event.attributes);
break;
}
}
return action;
}
ngOnInit() {
this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
this.InstallRouteEventHandler();
this.InstallEventServiceEventHandler();
}
@HostListener('document:keyup', ['$event'])
keyUp(event: KeyboardEvent) {
let x = event.keyCode;
if (x === 27) {
this.store.dispatch(new commonActions.Escape(true,false));
}
}
ngOnDestroy() {
// Subscription clean-up
if(this.routerSub$) this.routerSub$.unsubscribe();
if(this.eventSub$) this.eventSub$.unsubscribe();
}
private InstallRouteEventHandler() {
var other = this;
this.routerSub$ = this.router.events.subscribe(event => {
if (event instanceof RouteConfigLoadStart) {
other.store.dispatch(new commonActions.StartRouteLoading());
}
if (event instanceof RouteConfigLoadEnd) {
other.store.dispatch(new commonActions.EndRouteLoading());
}
});
}
private InstallEventServiceEventHandler() {
var other = this;
this.eventSub$ = this.eventService.event.subscribe(event => {
var action = other.getActionFromEvent(event);
if (action) other.store.dispatch(action);
});
}
handleClick(event: MouseEvent) {
this.store.dispatch(new commonActions.Escape(false,true));
}
}
import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener } from '@angular/core';
import { Router, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
import { Meta, Title, MetaDefinition } from '@angular/platform-browser';import { DOCUMENT } from "@angular/common";
import { Subscription , Observable } from 'rxjs';
import { Store, Action } from '@ngrx/store';
//AppCommon
import { IEventMessage } from '../../models/event.message';
import { IListItem} from '../../models/list.item';
import { EventService } from '../../services/event.service';
import * as commonActions from '../../actions/app-common.actions';
import * as appReducers from '../../reducers/app-common.reducer';
@Component({
selector: 'fm-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements OnInit, OnDestroy {
// This will go at the END of your title for example "Home - Angular Universal..." <-- after the dash (-)
private endPageTitle: string = 'Farmmaps';
// If no Title is provided, we'll use a default one before the dash(-)
private defaultPageTitle: string = 'Farmmaps';
private routerSub$: Subscription;
private eventSub$: Subscription;
public currentFolder: Observable<IListItem>;
public folderParents: Observable<IListItem[]>;
public browseFileElement: any;
public browseDirectoryElement: any;
public fileDroptarget: any;
public fullScreen: Observable<boolean>;
public routeLoading: Observable<boolean>;
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private title: Title,
private meta: Meta,
private store: Store<appReducers.State>,
private eventService: EventService,
) {
}
getActionFromEvent(event: IEventMessage): Action {
var action: Action = null;
console.debug(`${event.eventType} Event received`);
switch (event.eventType) {
case "ItemChanged": {
action = new commonActions.ItemChangedEvent(event.itemCode, event.attributes);
break;
}
case "ItemAdded": {
action = new commonActions.ItemAddedEvent(event.itemCode, event.attributes);
break;
}
case "ItemDeleted": {
action = new commonActions.ItemDeletedEvent(event.itemCode, event.attributes);
break;
}
case "taskStart": {
action = new commonActions.TaskStartEvent(event.itemCode, event.attributes);
break;
}
case "taskEnd": {
action = new commonActions.TaskEndEvent(event.itemCode, event.attributes);
break;
}
case "taskError": {
action = new commonActions.TaskErrorEvent(event.itemCode, event.attributes);
break;
}
}
return action;
}
ngOnInit() {
this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
this.InstallRouteEventHandler();
this.InstallEventServiceEventHandler();
}
@HostListener('document:keyup', ['$event'])
keyUp(event: KeyboardEvent) {
let x = event.keyCode;
if (x === 27) {
this.store.dispatch(new commonActions.Escape(true,false));
}
}
ngOnDestroy() {
// Subscription clean-up
if(this.routerSub$) this.routerSub$.unsubscribe();
if(this.eventSub$) this.eventSub$.unsubscribe();
}
private InstallRouteEventHandler() {
var other = this;
this.routerSub$ = this.router.events.subscribe(event => {
if (event instanceof RouteConfigLoadStart) {
other.store.dispatch(new commonActions.StartRouteLoading());
}
if (event instanceof RouteConfigLoadEnd) {
other.store.dispatch(new commonActions.EndRouteLoading());
}
});
}
private InstallEventServiceEventHandler() {
var other = this;
this.eventSub$ = this.eventService.event.subscribe(event => {
var action = other.getActionFromEvent(event);
if (action) other.store.dispatch(action);
});
}
handleClick(event: MouseEvent) {
this.store.dispatch(new commonActions.Escape(false,true));
}
}

170
projects/common/src/fm/components/side-panel/side-panel.component.ts
View File

@ -1,85 +1,85 @@
import { Component, Input,ViewChild,ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'fm-side-panel',
templateUrl: 'side-panel.component.html',
styleUrls: ['side-panel.component.scss']
})
export class SidePanelComponent implements OnChanges {
@Input() public visible: boolean;
@Input() public collapsed: boolean;
@Input() public collapsable: boolean;
@Input() public resizeable: boolean = false;
@ViewChild("resizeGrip") elementView: ElementRef;
public mobile:boolean = true;
private parentHeight:number = 0;
public top = "100%";
private resizeTop:number=50;
public resizing:boolean=false;
constructor(private element: ElementRef,private ref: ChangeDetectorRef) {
this.collapsable = false;
this.setTop();
}
checkMobile():boolean {
let size = parseFloat(getComputedStyle(document.documentElement).width);
let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
let threshold = 44 * rem;
return !(size>threshold);
}
setTop() {
this.mobile = this.checkMobile();
this.resizeTop = this.mobile?50:0;
this.top = (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
}
ngAfterViewInit() {
this.parentHeight = this.element.nativeElement.offsetParent.clientHeight;
}
handleToggleClick(event) {
if (this.collapsable) {
this.collapsed = !this.collapsed;
}
}
handleStartGripDrag(event:DragEvent|TouchEvent) {
this.resizing=true;
if(event instanceof DragEvent) {
var crt = new Image();
crt.style.display = "none";
document.body.appendChild(crt);
event.dataTransfer.setDragImage(crt,0,0);
}
}
handleEndGripDrag() {
this.resizing = false;
}
handleGripDrag(event:DragEvent|TouchEvent) {
var clientY = 0;
if((event instanceof TouchEvent)) {
clientY = (event as TouchEvent).changedTouches[0].clientY;
} else {
clientY=(event as DragEvent).clientY;
}
this.resizeTop = Math.min(98, Math.max(0, clientY / (this.parentHeight / 100)));
this.top = (this.visible? this.resizeTop:(this.mobile? 100:0)) + "%";
}
ngOnChanges(changes: SimpleChanges) {
if(changes.visible) {
this.top = (changes.visible.currentValue?this.resizeTop:(this.mobile? 100:0)) + "%";
}
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.setTop();
}
}
import { Component, Input,ViewChild,ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'fm-side-panel',
templateUrl: 'side-panel.component.html',
styleUrls: ['side-panel.component.scss']
})
export class SidePanelComponent implements OnChanges {
@Input() public visible: boolean;
@Input() public collapsed: boolean;
@Input() public collapsable: boolean;
@Input() public resizeable: boolean = false;
@ViewChild("resizeGrip", { static: false }) elementView: ElementRef;
public mobile:boolean = true;
private parentHeight:number = 0;
public top = "100%";
private resizeTop:number=50;
public resizing:boolean=false;
constructor(private element: ElementRef,private ref: ChangeDetectorRef) {
this.collapsable = false;
this.setTop();
}
checkMobile():boolean {
let size = parseFloat(getComputedStyle(document.documentElement).width);
let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
let threshold = 44 * rem;
return !(size>threshold);
}
setTop() {
this.mobile = this.checkMobile();
this.resizeTop = this.mobile?50:0;
this.top = (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
}
ngAfterViewInit() {
this.parentHeight = this.element.nativeElement.offsetParent.clientHeight;
}
handleToggleClick(event) {
if (this.collapsable) {
this.collapsed = !this.collapsed;
}
}
handleStartGripDrag(event:DragEvent|TouchEvent) {
this.resizing=true;
if(event instanceof DragEvent) {
var crt = new Image();
crt.style.display = "none";
document.body.appendChild(crt);
event.dataTransfer.setDragImage(crt,0,0);
}
}
handleEndGripDrag() {
this.resizing = false;
}
handleGripDrag(event:DragEvent|TouchEvent) {
var clientY = 0;
if((event instanceof TouchEvent)) {
clientY = (event as TouchEvent).changedTouches[0].clientY;
} else {
clientY=(event as DragEvent).clientY;
}
this.resizeTop = Math.min(98, Math.max(0, clientY / (this.parentHeight / 100)));
this.top = (this.visible? this.resizeTop:(this.mobile? 100:0)) + "%";
}
ngOnChanges(changes: SimpleChanges) {
if(changes.visible) {
this.top = (changes.visible.currentValue?this.resizeTop:(this.mobile? 100:0)) + "%";
}
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.setTop();
}
}

208
projects/common/src/fm/components/tag-input/tag-input.component.ts
View File

@ -1,104 +1,104 @@
import { Component, Input, forwardRef,ElementRef,ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR,NgModel } from '@angular/forms';
import { Observable,of } from 'rxjs';
import { tap,catchError,debounceTime,distinctUntilChanged,switchMap } from 'rxjs/operators'
import { TypeaheadService } from '../../services/typeahead.service';
@Component({
selector: 'fm-tag-input',
templateUrl: 'tag-input.component.html',
styleUrls: ['tag-input.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TagInputComponent),
multi: true
}
]
})
export class TagInputComponent implements ControlValueAccessor {
@Input() tags: string[]
@ViewChild('taginput') tagInputElement: ElementRef;
public tag: string;
searching = false;
searchFailed = false;
constructor(private typeaheadService: TypeaheadService) {
}
tagExists(tag) {
if (tag.length == 0) return true;
for (let t of this.tags) {
if (t.toLowerCase() == tag.toLowerCase()) return true;
}
return false;
}
handleDeleteTag(tag) {
let tags = [];
for (let t of this.tags) {
if (t != tag) tags.push(t);
}
this.tags = tags;
this.propagateChange(tags);
}
handleAddTag(event) {
if (!this.tagExists(this.tag)) {
this.tags.push(this.tag);
this.propagateChange(this.tags);
}
this.tag = "";
this.tagInputElement.nativeElement.focus();
}
handleCheckAddTag(event: KeyboardEvent) {
if (event.keyCode == 188) {
let tag = this.tag.substr(0, this.tag.length - 1); // strip ,
if (!this.tagExists(tag)) {
this.tags.push(tag);
this.propagateChange(this.tags);
}
this.tag = "";
}
}
handleSelect(event) {
if (!this.tagExists(event.item)) {
this.tags.push(event.item);
this.propagateChange(this.tags);
}
event.preventDefault();
this.tag = "";
}
propagateChange = (_: any) => { };
registerOnChange(fn) {
this.propagateChange = fn;
}
findTag = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
tap(() => this.searching = true),
switchMap(term => term.length < 1 ? of([]) :
this.typeaheadService.getTagTypeaheadItems(term).pipe(
tap(() => this.searchFailed = false),
catchError(() => {
this.searchFailed = true;
return of([]);
}))
),
tap(() => this.searching = false)
);
writeValue(value: any) {
this.tags = value;
this.tag = "";
}
registerOnTouched() { }
}
import { Component, Input, forwardRef,ElementRef,ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR,NgModel } from '@angular/forms';
import { Observable,of } from 'rxjs';
import { tap,catchError,debounceTime,distinctUntilChanged,switchMap } from 'rxjs/operators'
import { TypeaheadService } from '../../services/typeahead.service';
@Component({
selector: 'fm-tag-input',
templateUrl: 'tag-input.component.html',
styleUrls: ['tag-input.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TagInputComponent),
multi: true
}
]
})
export class TagInputComponent implements ControlValueAccessor {
@Input() tags: string[]
@ViewChild('taginput', { static: true }) tagInputElement: ElementRef;
public tag: string;
searching = false;
searchFailed = false;
constructor(private typeaheadService: TypeaheadService) {
}
tagExists(tag) {
if (tag.length == 0) return true;
for (let t of this.tags) {
if (t.toLowerCase() == tag.toLowerCase()) return true;
}
return false;
}
handleDeleteTag(tag) {
let tags = [];
for (let t of this.tags) {
if (t != tag) tags.push(t);
}
this.tags = tags;
this.propagateChange(tags);
}
handleAddTag(event) {
if (!this.tagExists(this.tag)) {
this.tags.push(this.tag);
this.propagateChange(this.tags);
}
this.tag = "";
this.tagInputElement.nativeElement.focus();
}
handleCheckAddTag(event: KeyboardEvent) {
if (event.keyCode == 188) {
let tag = this.tag.substr(0, this.tag.length - 1); // strip ,
if (!this.tagExists(tag)) {
this.tags.push(tag);
this.propagateChange(this.tags);
}
this.tag = "";
}
}
handleSelect(event) {
if (!this.tagExists(event.item)) {
this.tags.push(event.item);
this.propagateChange(this.tags);
}
event.preventDefault();
this.tag = "";
}
propagateChange = (_: any) => { };
registerOnChange(fn) {
this.propagateChange = fn;
}
findTag = (text$: Observable<string>) =>
text$.pipe(
debounceTime(200),
distinctUntilChanged(),
tap(() => this.searching = true),
switchMap(term => term.length < 1 ? of([]) :
this.typeaheadService.getTagTypeaheadItems(term).pipe(
tap(() => this.searchFailed = false),
catchError(() => {
this.searchFailed = true;
return of([]);
}))
),
tap(() => this.searching = false)
);
writeValue(value: any) {
this.tags = value;
this.tag = "";
}
registerOnTouched() { }
}

1166
projects/common/src/fm/components/timespan/timespan.component.ts
View File

File diff suppressed because it is too large Load Diff

2
src/polyfills.ts
View File

@ -43,7 +43,7 @@
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge

22
src/tsconfig.app.json
View File

@ -1,11 +1,11 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}

36
src/tsconfig.spec.json
View File

@ -1,18 +1,18 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts",
"polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts",
"polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}

5
tsconfig.json
View File

@ -2,15 +2,16 @@
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"downlevelIteration": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],

150
tslint.json
View File

@ -1,75 +1,75 @@
{
"extends": "tslint:recommended",
"rulesDirectory": [
"codelyzer"
],
"rules": {
"array-type": false,
"arrow-parens": false,
"deprecation": {
"severity": "warn"
},
"import-blacklist": [
true,
"rxjs/Rx"
],
"interface-name": false,
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-consecutive-blank-lines": false,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-use-before-declare": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single"
],
"trailing-comma": false,
"no-output-on-prefix": true,
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-input-rename": true,
"no-output-rename": true,
"use-life-cycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true
}
}
{
"extends": "tslint:recommended",
"rulesDirectory": [
"codelyzer"
],
"rules": {
"array-type": false,
"arrow-parens": false,
"deprecation": {
"severity": "warn"
},
"import-blacklist": [
true,
"rxjs/Rx"
],
"interface-name": false,
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-consecutive-blank-lines": false,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-use-before-declare": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single"
],
"trailing-comma": false,
"no-output-on-prefix": true,
"no-inputs-metadata-property": true,
"no-outputs-metadata-property": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-output-rename": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true
}
}