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

Some refactoring
FarmMaps.Develop/FarmMapsLib/develop This commit looks good Details

pull/1/head
Willem Dantuma 2019-11-05 17:19:33 +01:00
parent 28fabab175
commit 9ebce8e0bb
29 changed files with 306 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
projects/common-map/package-lock.json generated
View File

@ -5,9 +5,9 @@
"requires": true,
"dependencies": {
"@farmmaps/common": {
"version": "0.0.1-prerelease.51",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.51.tgz",
"integrity": "sha512-1E7BDQVQ34N+dFiipHHUj9X50fpU3c8UqTLqwb9UpE+PpfLp+njN4rg2MXYwglbB8chlz/glaPPurYwjzDadxQ==",
"version": "0.0.1-prerelease.56",
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.56.tgz",
"integrity": "sha512-m9KxWsLkTSz2JI074gIJH1kDR0PCLsFAug8oBjtlU/QxgBySrvqHCRiODpNmNWnFyNTZHqKHJQefn3Q9iAil4g==",
"requires": {
"angular-oauth2-oidc": "^5.0.2",
"ngx-uploadx": "^3.1.3",

5
projects/common-map/package.json
View File

@ -5,7 +5,7 @@
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
},
"dependencies": {
"@farmmaps/common": "0.0.1-prerelease.51",
"@farmmaps/common": "0.0.1-prerelease.56",
"ngx-openlayers": "1.0.0-next.9",
"ol": "^5.3.3"
},
@ -15,6 +15,7 @@
"@ngrx/effects": "^7.2",
"@ngrx/router-store": "^7.2",
"@ngrx/store": "^7.2",
"tassign": "^1.0.0"
"tassign": "^1.0.0",
"@farmmaps/common": "^0.0.1"
}
}

23
projects/common-map/src/fm-map/common-map.module.ts
View File

@ -12,9 +12,17 @@ import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { AppCommonModule } from '@farmmaps/common';
import { MODULE_NAME } from './module-name';
import * as mapReducer from './reducers/map.reducer';
import * as mapReducers from './reducers/map.reducer';
import * as mapActions from './actions/map.actions';
import * as mapEffects from './effects/map.effects';
import { IMapState} from './models';
import { ISelectedFeatures } from './models';
import { IItemLayer } from './models';
import { ItemLayer} from './models';
import { IQueryState } from './models';
import { IPeriodState } from './models';
// components
import { GpsLocation} from './components/aol/gps-location/gps-location.component';
//import {Switch2D3DComponent } from './components/aol/switch2d3d/switch2d3d.component';
@ -58,7 +66,8 @@ import { WidgetStatusComponent } from './components/widget-status/widget-status.
export {
mapEffects,
mapReducer,
mapReducers,
mapActions,
ZoomToExtentComponent,
ItemVectorSourceComponent,
ItemFeaturesSourceComponent,
@ -99,7 +108,13 @@ export {
AbstractItemListItemComponent,
AbstractItemListComponent,
StateSerializerService,
GeolocationService
GeolocationService,
IMapState,
ISelectedFeatures,
IItemLayer,
ItemLayer,
IQueryState,
IPeriodState
}
@NgModule({
@ -107,7 +122,7 @@ export {
CommonModule,
AngularOpenlayersModule,
MapRoutingModule,
StoreModule.forFeature(MODULE_NAME, mapReducer.reducer),
StoreModule.forFeature(MODULE_NAME, mapReducers.reducer),
EffectsModule.forFeature([mapEffects.MapEffects]),
NgbModule,
FormsModule,

46
projects/common-map/src/fm-map/components/map/map.component.html
View File

@ -46,51 +46,11 @@
<div class="container-fluid">
<div class="body">
<div class="logo">
<span><img src="/images/farmmapslogo.png" /></span>
<router-outlet name="side-panel-logo"></router-outlet>
<span><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></span>
</div>
<div class="card menu-card">
<div class="d-flex flex-row flex-wrap">
<div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})">
<div class="icon rounded-circle farm-icon"><i class="fm fm-farm" aria-hidden="true"></i></div>
<div class="caption" i18n>Farms</div>
</div>
<div class="shortcut-icon" (click)="handleTrijntjeClick($event,{itemType:'vnd.farmmaps.itemtype.trijntje'})">
<div class="icon rounded-circle trijntje-icon"><i class="fa fa-tint" aria-hidden="true"></i></div>
<div class="caption" i18n>Trijntje</div>
</div>
</div>
</div>
<div class="card menu-card">
<ul class="navbar-nav">
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer/folder/my_drive']" class="nav-link"><span i18n><i class="fa fa-folder" aria-hidden="true"></i> My Drive</span></a></li>
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer/folder/map_uploads']" class="nav-link"><span i18n><i class="fa fa-cloud-upload" aria-hidden="true"></i> Map uploads</span></a></li>
</ul>
</div>
<div class="card menu-card">
<ul class="navbar-nav">
<li class="nav-item py-0">
<a class="nav-link" href="#" (click)="handleToggleBaseLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps <i class="fa" [ngClass]="{'fa-caret-down':baseLayersCollapsed,'fa-caret-up':!baseLayersCollapsed}" aria-hidden="true"></i></a>
<div [ngbCollapse]="baseLayersCollapsed" class="mb-4">
<fm-map-layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></fm-map-layer-list>
</div>
</li>
<li class="nav-item py-0">
<a class="nav-link" href="#" (click)="handleToggleOverlayLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays <i class="fa" [ngClass]="{'fa-caret-down':overlayLayersCollapsed,'fa-caret-up':!overlayLayersCollapsed}" aria-hidden="true"></i></a>
<div [ngbCollapse]="overlayLayersCollapsed" class="mb-4">
<fm-map-layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
</div>
</li>
</ul>
</div>
<!--<div class="card menu-card">
<ul class="navbar-nav">
<li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})"><span i18n>Farms</span></a></li>
<li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.layer'})"><span i18n>Layers</span></a></li>
</ul>
</div>-->
</div>
<router-outlet name="side-panel-menu"></router-outlet>
</div>
</div>
</fm-side-panel>

5
projects/common-map/src/fm-map/components/map/map.component.scss
View File

@ -91,11 +91,6 @@ div.logo {
margin-bottom:1em;
}
div.logo img {
width:100%;
align-self:center;
}
div.logo button {
margin-left:1em;
}

22
projects/common/src/fm/common.module.ts
View File

@ -1,5 +1,5 @@
// angular modules
import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector } from '@angular/core';
import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector,Optional,SkipSelf } from '@angular/core';
import { CommonModule, DatePipe } from '@angular/common';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
@ -137,6 +137,12 @@ export {FolderService,
]
})
export class AppCommonModule {
constructor (@Optional() @SkipSelf() parentModule: AppCommonModule) {
if (parentModule) {
throw new Error(
'AppCommonModule is already loaded. Import it in the AppModule only');
}
}
static forRoot(): ModuleWithProviders {
return {
ngModule: AppCommonModule,
@ -152,19 +158,7 @@ export class AppCommonModule {
provide: HTTP_INTERCEPTORS,
useClass: AccessTokenInterceptor,
multi: true
},
ResumableFileUploadService,
EventService,
FolderService,
UserService,
ItemService,
TypeaheadService,
AuthCallbackGuard,
AuthGuard,
NavBarGuard,
FullScreenGuard,
TimespanService,
ItemTypeService
}
]
};
}

4
projects/common/src/fm/services/auth-guard.service.ts
View File

@ -13,7 +13,9 @@ import * as appCommonReducer from '../reducers/app-common.reducer'
import * as appCommonActions from '../actions/app-common.actions';
@Injectable()
@Injectable({
providedIn: 'root',
})
export class AuthGuard implements CanActivate, CanLoad, CanActivateChild {
private loginDispatched = false;

4
projects/common/src/fm/services/date-adapter.service.ts
View File

@ -1,7 +1,9 @@
import { Component, Injectable } from '@angular/core';
import { NgbDateAdapter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
@Injectable()
@Injectable({
providedIn: 'root',
})
export class NgbDateNativeAdapter extends NgbDateAdapter<Date> {
fromModel(date: Date): NgbDateStruct {

4
projects/common/src/fm/services/event.service.ts
View File

@ -6,7 +6,9 @@ import { HubConnection, HubConnectionBuilder, LogLevel ,HttpTransportType} from
import { AppConfig } from "../shared/app.config";
@Injectable()
@Injectable({
providedIn: 'root',
})
export class EventService {
public event:Subject <IEventMessage> = new Subject<IEventMessage>();

4
projects/common/src/fm/services/folder.service.ts
View File

@ -6,7 +6,9 @@ import { IItem } from '../models/item';
import { HttpClient } from "@angular/common/http";
import { AppConfig } from "../shared/app.config";
@Injectable()
@Injectable({
providedIn: 'root',
})
export class FolderService {
constructor(public httpClient: HttpClient, public appConfig: AppConfig) {

4
projects/common/src/fm/services/full-screen-guard.service.ts
View File

@ -7,7 +7,9 @@ import * as appCommonReducer from '../reducers/app-common.reducer'
import * as appCommonActions from '../actions/app-common.actions';
@Injectable()
@Injectable({
providedIn: 'root',
})
export class FullScreenGuard implements CanActivate {
private loginDispatched = false;

4
projects/common/src/fm/services/item.service.ts
View File

@ -7,7 +7,9 @@ import { IItemTask } from '../models/itemTask';
import { HttpClient, HttpParams } from "@angular/common/http";
import { AppConfig } from "../shared/app.config";
@Injectable()
@Injectable({
providedIn: 'root',
})
export class ItemService {
constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
}

4
projects/common/src/fm/services/itemtype.service.ts
View File

@ -4,7 +4,9 @@ import * as appCommonReducer from '../reducers/app-common.reducer'
import {IItemTypes} from '../models/item.types'
import {IItem} from '../models/item'
@Injectable()
@Injectable({
providedIn: 'root',
})
export class ItemTypeService {
public itemTypes: IItemTypes;

4
projects/common/src/fm/services/nav-bar-guard.service.ts
View File

@ -7,7 +7,9 @@ import * as appCommonReducer from '../reducers/app-common.reducer'
import * as appCommonActions from '../actions/app-common.actions';
@Injectable()
@Injectable({
providedIn: 'root',
})
export class NavBarGuard implements CanActivate {
private loginDispatched = false;

4
projects/common/src/fm/services/timespan.service.ts
View File

@ -3,7 +3,9 @@ import { DatePipe } from '@angular/common';
import { Observable , Observer } from 'rxjs';
import { ITypeaheadItem } from '../models/typeahead.item';
@Injectable()
@Injectable({
providedIn: 'root',
})
export class TimespanService {
constructor(private datePipe: DatePipe) {
}

4
projects/common/src/fm/services/typeahead.service.ts
View File

@ -4,7 +4,9 @@ import { ITypeaheadItem } from '../models/typeahead.item';
import { HttpClient, HttpParams } from "@angular/common/http";
import { AppConfig } from "../shared/app.config";
@Injectable()
@Injectable({
providedIn: 'root',
})
export class TypeaheadService {
constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
}

4
projects/common/src/fm/services/user.service.ts
View File

@ -4,7 +4,9 @@ import { IUser } from '../models/user';
import { HttpClient } from "@angular/common/http";
import { AppConfig } from "../shared/app.config";
@Injectable()
@Injectable({
providedIn: 'root',
})
export class UserService {
constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
}

1
projects/common/src/fm/shared/app.config.ts
View File

@ -20,7 +20,6 @@ export class AppConfig {
return this.config[key];
}
public load(): Promise<any> {
return this.httpClient.get('/configuration.json')
.toPromise()

16
src/app/app-routing.module.ts
View File

@ -3,6 +3,8 @@ import { RouterModule } from '@angular/router';
import { AuthGuard,FullScreenGuard } from '@farmmaps/common';
import { MapComponent } from '@farmmaps/common-map';
import { LogoComponent } from './logo/logo.component';
import { MenuComponent } from './menu/menu.component';
const routes = [
{
@ -17,7 +19,19 @@ const routes = [
},
{
path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
component: MapComponent
component: MapComponent,
children:[
{
path: '',
component: LogoComponent,
outlet: 'side-panel-logo'
},
{
path: '',
component: MenuComponent,
outlet: 'side-panel-menu'
}
]
}
]},
];

3
src/app/app.component.html
View File

@ -1,3 +0,0 @@
<fm-app></fm-app>

0
src/app/app.component.scss
View File

5
src/app/app.component.ts
View File

@ -2,9 +2,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
template:'<fm-app></fm-app>'
})
export class AppRootComponent {
title = 'farmmaps-lib-app';
title = 'FarmMaps';
}

6
src/app/app.module.ts
View File

@ -16,6 +16,8 @@ import {EffectsModule, EffectSources} from '@ngrx/effects';
import { StoreRouterConnectingModule} from '@ngrx/router-store';
import {AppRoutingModule} from './app-routing.module';
import { LogoComponent } from './logo/logo.component';
import { MenuComponent } from './menu/menu.component';
export const BOOTSTRAP_EFFECTS = new InjectionToken('Bootstrap Effects');
@ -44,7 +46,9 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
@NgModule({
declarations: [
AppRootComponent
AppRootComponent,
LogoComponent,
MenuComponent
],
imports: [
AppRoutingModule,

25
src/app/logo/logo.component.spec.ts 100644
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LogoComponent } from './logo.component';
describe('LogoComponent', () => {
let component: LogoComponent;
let fixture: ComponentFixture<LogoComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LogoComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LogoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/logo/logo.component.ts 100644
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-logo',
template: '<span><img src="/images/farmmapslogo.png" /></span>',
styles:['img {width:100%;align-self:center;}']
})
export class LogoComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

32
src/app/menu/menu.component.html 100644
View File

@ -0,0 +1,32 @@
<div>
<div class="card menu-card">
<div class="d-flex flex-row flex-wrap">
<div class="shortcut-icon" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})">
<div class="icon rounded-circle farm-icon"><i class="fm fm-farm" aria-hidden="true"></i></div>
<div class="caption" i18n>Farms</div>
</div>
</div>
</div>
<div class="card menu-card">
<ul class="navbar-nav">
<li class="nav-item py-0">
<a class="nav-link" href="#" (click)="handleToggleBaseLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps <i class="fa" [ngClass]="{'fa-caret-down':baseLayersCollapsed,'fa-caret-up':!baseLayersCollapsed}" aria-hidden="true"></i></a>
<div [ngbCollapse]="baseLayersCollapsed" class="mb-4">
<fm-map-layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></fm-map-layer-list>
</div>
</li>
<li class="nav-item py-0">
<a class="nav-link" href="#" (click)="handleToggleOverlayLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays <i class="fa" [ngClass]="{'fa-caret-down':overlayLayersCollapsed,'fa-caret-up':!overlayLayersCollapsed}" aria-hidden="true"></i></a>
<div [ngbCollapse]="overlayLayersCollapsed" class="mb-4">
<fm-map-layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
</div>
</li>
</ul>
</div>
<!--<div class="card menu-card">
<ul class="navbar-nav">
<li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.croppingscheme'})"><span i18n>Farms</span></a></li>
<li class="nav-item py-0"><a class="nav-link" href="#" (click)="handlePredefinedQuery($event,{itemType:'vnd.farmmaps.itemtype.layer'})"><span i18n>Layers</span></a></li>
</ul>
</div>-->
</div>

41
src/app/menu/menu.component.scss 100644
View File

@ -0,0 +1,41 @@
.menu-card {
margin-left:-7px;
padding-left:7px;
margin-right:-7px;
padding-right:7px;
margin-bottom:7px;
}
.shortcut-icon {
display: inline-block;
text-align: center;
margin: 0.5rem;
cursor:pointer;
}
.shortcut-icon > .icon {
width: 3rem;
height: 3rem;
background-color: #731e64;
display: inline-block;
text-align: center;
line-height: 3rem;
color: #ffffff;
font-size: 2rem;
}
.shortcut-icon > .caption {
text-align: center;
width: 4rem;
overflow: hidden;
text-overflow: ellipsis;
color: theme-color();
}
.shortcut-icon > .farm-icon {
background-color: #731E64;
}
.shortcut-icon > .trijntje-icon {
background-color: #FAA33F;
}

25
src/app/menu/menu.component.spec.ts 100644
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MenuComponent } from './menu.component';
describe('MenuComponent', () => {
let component: MenuComponent;
let fixture: ComponentFixture<MenuComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MenuComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MenuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

77
src/app/menu/menu.component.ts 100644
View File

@ -0,0 +1,77 @@
import { Component, OnInit } from '@angular/core';
import { commonReducers, } from '@farmmaps/common';
import { } from '@farmmaps/common-map';
import {mapReducers,mapActions,IItemLayer} from '@farmmaps/common-map';
import { Store } from '@ngrx/store';
import { tassign } from 'tassign';
import { Observable } from 'rxjs';
import {createEmpty,extend } from 'ol/extent';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
public baseLayersCollapsed:boolean = true;
public overlayLayersCollapsed: boolean = true;
public overlayLayers: Observable<Array<IItemLayer>>;
public selectedOverlayLayer: Observable<IItemLayer>;
public baseLayers: Observable<Array<IItemLayer>>;
public selectedBaseLayer: Observable<IItemLayer>;
constructor( private store: Store<mapReducers.State | commonReducers.State> ) { }
ngOnInit() {
this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
}
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));
}
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));
}
handleOnDelete(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
}
handleZoomToExtent(itemLayer: IItemLayer) {
var extent = createEmpty();
extend(extent, itemLayer.layer.getExtent());
if (extent) {
this.store.dispatch(new mapActions.SetExtent(extent));
}
}
handleSelectOverlayLayer(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
}
handleSelectBaseLayer(itemLayer: IItemLayer) {
this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
}
}