Update to angular 8.2
This commit is contained in:
Willem Dantuma
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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({});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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(); }
|
||||
}
|
||||
|
||||
@@ -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_].*")])]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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));
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user