From 9ebce8e0bb3ac0a1eef4ecc68213cfba9cf32c00 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 5 Nov 2019 17:19:33 +0100 Subject: [PATCH] Some refactoring --- projects/common-map/package-lock.json | 6 +- projects/common-map/package.json | 5 +- .../src/fm-map/common-map.module.ts | 23 +++++- .../fm-map/components/map/map.component.html | 46 +---------- .../fm-map/components/map/map.component.scss | 5 -- projects/common/src/fm/common.module.ts | 22 ++---- .../src/fm/services/auth-guard.service.ts | 4 +- .../src/fm/services/date-adapter.service.ts | 4 +- .../common/src/fm/services/event.service.ts | 4 +- .../common/src/fm/services/folder.service.ts | 4 +- .../fm/services/full-screen-guard.service.ts | 4 +- .../common/src/fm/services/item.service.ts | 4 +- .../src/fm/services/itemtype.service.ts | 4 +- .../src/fm/services/nav-bar-guard.service.ts | 4 +- .../src/fm/services/timespan.service.ts | 4 +- .../src/fm/services/typeahead.service.ts | 4 +- .../common/src/fm/services/user.service.ts | 4 +- projects/common/src/fm/shared/app.config.ts | 1 - src/app/app-routing.module.ts | 16 +++- src/app/app.component.html | 3 - src/app/app.component.scss | 0 src/app/app.component.ts | 5 +- src/app/app.module.ts | 6 +- src/app/logo/logo.component.spec.ts | 25 ++++++ src/app/logo/logo.component.ts | 15 ++++ src/app/menu/menu.component.html | 32 ++++++++ src/app/menu/menu.component.scss | 41 ++++++++++ src/app/menu/menu.component.spec.ts | 25 ++++++ src/app/menu/menu.component.ts | 77 +++++++++++++++++++ 29 files changed, 306 insertions(+), 91 deletions(-) delete mode 100644 src/app/app.component.html delete mode 100644 src/app/app.component.scss create mode 100644 src/app/logo/logo.component.spec.ts create mode 100644 src/app/logo/logo.component.ts create mode 100644 src/app/menu/menu.component.html create mode 100644 src/app/menu/menu.component.scss create mode 100644 src/app/menu/menu.component.spec.ts create mode 100644 src/app/menu/menu.component.ts diff --git a/projects/common-map/package-lock.json b/projects/common-map/package-lock.json index 4a71f1e..6e5c34d 100644 --- a/projects/common-map/package-lock.json +++ b/projects/common-map/package-lock.json @@ -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", diff --git a/projects/common-map/package.json b/projects/common-map/package.json index 4270006..c2a690d 100644 --- a/projects/common-map/package.json +++ b/projects/common-map/package.json @@ -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" } } diff --git a/projects/common-map/src/fm-map/common-map.module.ts b/projects/common-map/src/fm-map/common-map.module.ts index ca9815b..dbfdced 100644 --- a/projects/common-map/src/fm-map/common-map.module.ts +++ b/projects/common-map/src/fm-map/common-map.module.ts @@ -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, diff --git a/projects/common-map/src/fm-map/components/map/map.component.html b/projects/common-map/src/fm-map/components/map/map.component.html index 1c6009d..6ad1c2a 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.html +++ b/projects/common-map/src/fm-map/components/map/map.component.html @@ -46,51 +46,11 @@
- - - - - -
+ +
diff --git a/projects/common-map/src/fm-map/components/map/map.component.scss b/projects/common-map/src/fm-map/components/map/map.component.scss index 8b4f02a..71dac1a 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.scss +++ b/projects/common-map/src/fm-map/components/map/map.component.scss @@ -91,11 +91,6 @@ div.logo { margin-bottom:1em; } -div.logo img { - width:100%; - align-self:center; -} - div.logo button { margin-left:1em; } diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts index 7da9a9c..021dacb 100644 --- a/projects/common/src/fm/common.module.ts +++ b/projects/common/src/fm/common.module.ts @@ -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 + } ] }; } diff --git a/projects/common/src/fm/services/auth-guard.service.ts b/projects/common/src/fm/services/auth-guard.service.ts index 5c75284..3799812 100644 --- a/projects/common/src/fm/services/auth-guard.service.ts +++ b/projects/common/src/fm/services/auth-guard.service.ts @@ -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; diff --git a/projects/common/src/fm/services/date-adapter.service.ts b/projects/common/src/fm/services/date-adapter.service.ts index a942580..fea6b8a 100644 --- a/projects/common/src/fm/services/date-adapter.service.ts +++ b/projects/common/src/fm/services/date-adapter.service.ts @@ -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 { fromModel(date: Date): NgbDateStruct { diff --git a/projects/common/src/fm/services/event.service.ts b/projects/common/src/fm/services/event.service.ts index 70755b7..2391478 100644 --- a/projects/common/src/fm/services/event.service.ts +++ b/projects/common/src/fm/services/event.service.ts @@ -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 = new Subject(); diff --git a/projects/common/src/fm/services/folder.service.ts b/projects/common/src/fm/services/folder.service.ts index f714b77..5ac8740 100644 --- a/projects/common/src/fm/services/folder.service.ts +++ b/projects/common/src/fm/services/folder.service.ts @@ -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) { diff --git a/projects/common/src/fm/services/full-screen-guard.service.ts b/projects/common/src/fm/services/full-screen-guard.service.ts index 59e9e1d..9e36f5a 100644 --- a/projects/common/src/fm/services/full-screen-guard.service.ts +++ b/projects/common/src/fm/services/full-screen-guard.service.ts @@ -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; diff --git a/projects/common/src/fm/services/item.service.ts b/projects/common/src/fm/services/item.service.ts index 2b42895..1024d4e 100644 --- a/projects/common/src/fm/services/item.service.ts +++ b/projects/common/src/fm/services/item.service.ts @@ -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) { } diff --git a/projects/common/src/fm/services/itemtype.service.ts b/projects/common/src/fm/services/itemtype.service.ts index 62fed20..dc030af 100644 --- a/projects/common/src/fm/services/itemtype.service.ts +++ b/projects/common/src/fm/services/itemtype.service.ts @@ -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; diff --git a/projects/common/src/fm/services/nav-bar-guard.service.ts b/projects/common/src/fm/services/nav-bar-guard.service.ts index 93142af..5a82428 100644 --- a/projects/common/src/fm/services/nav-bar-guard.service.ts +++ b/projects/common/src/fm/services/nav-bar-guard.service.ts @@ -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; diff --git a/projects/common/src/fm/services/timespan.service.ts b/projects/common/src/fm/services/timespan.service.ts index cb623b0..6c7ce41 100644 --- a/projects/common/src/fm/services/timespan.service.ts +++ b/projects/common/src/fm/services/timespan.service.ts @@ -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) { } diff --git a/projects/common/src/fm/services/typeahead.service.ts b/projects/common/src/fm/services/typeahead.service.ts index d979092..a4e7495 100644 --- a/projects/common/src/fm/services/typeahead.service.ts +++ b/projects/common/src/fm/services/typeahead.service.ts @@ -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) { } diff --git a/projects/common/src/fm/services/user.service.ts b/projects/common/src/fm/services/user.service.ts index 2c29fc2..fd9e668 100644 --- a/projects/common/src/fm/services/user.service.ts +++ b/projects/common/src/fm/services/user.service.ts @@ -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) { } diff --git a/projects/common/src/fm/shared/app.config.ts b/projects/common/src/fm/shared/app.config.ts index d966676..9640b7d 100644 --- a/projects/common/src/fm/shared/app.config.ts +++ b/projects/common/src/fm/shared/app.config.ts @@ -20,7 +20,6 @@ export class AppConfig { return this.config[key]; } - public load(): Promise { return this.httpClient.get('/configuration.json') .toPromise() diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 21dda87..ceaf760 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -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' + } + ] } ]}, ]; diff --git a/src/app/app.component.html b/src/app/app.component.html deleted file mode 100644 index 506f70a..0000000 --- a/src/app/app.component.html +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/app/app.component.scss b/src/app/app.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 51a6f2d..fa37eb8 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,9 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + template:'' }) export class AppRootComponent { - title = 'farmmaps-lib-app'; + title = 'FarmMaps'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 781f739..410325c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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[]) { @NgModule({ declarations: [ - AppRootComponent + AppRootComponent, + LogoComponent, + MenuComponent ], imports: [ AppRoutingModule, diff --git a/src/app/logo/logo.component.spec.ts b/src/app/logo/logo.component.spec.ts new file mode 100644 index 0000000..09020df --- /dev/null +++ b/src/app/logo/logo.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LogoComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LogoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/logo/logo.component.ts b/src/app/logo/logo.component.ts new file mode 100644 index 0000000..7465c7d --- /dev/null +++ b/src/app/logo/logo.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-logo', + template: '', + styles:['img {width:100%;align-self:center;}'] +}) +export class LogoComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/menu/menu.component.html b/src/app/menu/menu.component.html new file mode 100644 index 0000000..c0802e6 --- /dev/null +++ b/src/app/menu/menu.component.html @@ -0,0 +1,32 @@ +
+ + + +
diff --git a/src/app/menu/menu.component.scss b/src/app/menu/menu.component.scss new file mode 100644 index 0000000..b3a923a --- /dev/null +++ b/src/app/menu/menu.component.scss @@ -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; + } \ No newline at end of file diff --git a/src/app/menu/menu.component.spec.ts b/src/app/menu/menu.component.spec.ts new file mode 100644 index 0000000..beb2d9b --- /dev/null +++ b/src/app/menu/menu.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MenuComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/menu/menu.component.ts b/src/app/menu/menu.component.ts new file mode 100644 index 0000000..23aa692 --- /dev/null +++ b/src/app/menu/menu.component.ts @@ -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>; + public selectedOverlayLayer: Observable; + public baseLayers: Observable>; + public selectedBaseLayer: Observable; + + + constructor( private store: Store ) { } + + 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)); + } + +}