Merge branch 'develop' of https://git.akkerweb.nl/FarmMaps/FarmMapsLib into develop
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
This commit is contained in:
commit
2c3c8fbff2
10
package-lock.json
generated
10
package-lock.json
generated
@ -1997,9 +1997,9 @@
|
||||
}
|
||||
},
|
||||
"@farmmaps/common": {
|
||||
"version": "0.0.1-prerelease.103",
|
||||
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.103.tgz",
|
||||
"integrity": "sha512-QI2OZLcM073Q6yN4dQlVCYueMhPLavl5nrzHttfZmdXlMyeFFZwzQaEUArbEdCuXsRX65qqvs6N4p+B97NGQ5A==",
|
||||
"version": "0.0.1-prerelease.109",
|
||||
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.109.tgz",
|
||||
"integrity": "sha512-m8YA6FZLWP6EuK95HMEbnr5EFG32uaYfqWLWz9vWvyEBn+vhWc1TsZJkA1B6g4pGx3v3SoWpqhvmikicPYvf2w==",
|
||||
"requires": {
|
||||
"angular-oauth2-oidc": "^8.0.2",
|
||||
"ngx-uploadx": "^3.3.2",
|
||||
@ -2007,9 +2007,7 @@
|
||||
}
|
||||
},
|
||||
"@farmmaps/common-map": {
|
||||
"version": "0.0.1-prerelease.103",
|
||||
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.103.tgz",
|
||||
"integrity": "sha512-ID4fMP3JNiUoUayPy1Zj8ZkciwuQxLhl9AnwdrAIw4fbYoNqnNI7cnj2QiF/QWlZL3IqvVpP8RUa3irN0zFoKw==",
|
||||
"version": "file:dist/common-map",
|
||||
"requires": {
|
||||
"ngx-openlayers": "1.0.0-next.13",
|
||||
"ol": "^6.0.0",
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
"@angular/platform-browser-dynamic": "~8.2.14",
|
||||
"@angular/router": "~8.2.14",
|
||||
"@aspnet/signalr": "^1.1.4",
|
||||
"@farmmaps/common": ">=0.0.1-prerelease.103 <0.0.1",
|
||||
"@farmmaps/common-map": ">=0.0.1-prerelease.103 <0.0.1",
|
||||
"@farmmaps/common": ">=0.0.1-prerelease.109 <0.0.1",
|
||||
"@farmmaps/common-map": ">=0.0.1-prerelease.109 <0.0.1",
|
||||
"@ng-bootstrap/ng-bootstrap": "^4.2.1",
|
||||
"@ngrx/effects": "^8.2.0",
|
||||
"@ngrx/router-store": "^8.2.0",
|
||||
|
||||
@ -15,6 +15,6 @@
|
||||
"@ngrx/router-store": "^8.2",
|
||||
"@ngrx/store": "^8.2",
|
||||
"tassign": "^1.0.0",
|
||||
"@farmmaps/common": ">=0.0.1-prerelease.102 <0.0.1"
|
||||
"@farmmaps/common": ">=0.0.1-prerelease.109 <0.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,243 +1,235 @@
|
||||
import { Action } from '@ngrx/store';
|
||||
|
||||
import { IMapState } from '../models/map.state';
|
||||
import { IItemLayer } from '../models/item.layer';
|
||||
import { IQueryState } from '../models/query.state';
|
||||
import { IItem } from '@farmmaps/common';
|
||||
import { Feature } from 'ol';
|
||||
import { Extent } from 'ol/extent';
|
||||
|
||||
export const SETSTATE = '[Map] SetState';
|
||||
export const SETMAPSTATE = '[Map] MapState';
|
||||
export const SETVIEWEXTENT = '[Map] SetViewExtent';
|
||||
export const INIT = '[Map] Init';
|
||||
export const SETPARENT = '[Map] SetParent';
|
||||
export const STARTSEARCH = '[Map] StartSearch';
|
||||
export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
|
||||
export const SELECTFEATURE = '[Map] SelectFeature';
|
||||
export const SELECTITEM = '[Map] SelectItem';
|
||||
export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
|
||||
export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess';
|
||||
export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess';
|
||||
export const EXPANDSEARCH = '[Map] ExpandSearch';
|
||||
export const COLLAPSESEARCH = '[Map] CollapseSearch';
|
||||
export const TOGGLEMENU = '[Map] ToggleMenu';
|
||||
export const SETEXTENT = '[Map] SetExtent';
|
||||
export const SETQUERYSTATE = '[Map] SetQueryState';
|
||||
export const SETTIMESPAN = '[Map] SetTimeSpan';
|
||||
export const ADDLAYER = '[Map] AddLayer';
|
||||
export const SETVISIBILITY = '[Map] SetVisibility';
|
||||
export const SETOPACITY = '[Map] SetOpacity';
|
||||
export const SETLAYERINDEX = '[Map] SetLayerIndex';
|
||||
export const REMOVELAYER = '[Map] RemoveLayer';
|
||||
export const LOADBASELAYERS = '[Map] LoadLayers';
|
||||
export const LOADBASELAYERSSUCCESS = '[Map] LoadLayersSuccess';
|
||||
export const SELECTBASELAYER = '[Map] SelectBaseLayers';
|
||||
export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers';
|
||||
export const ZOOMTOEXTENT = '[Map] ZoomToExtent';
|
||||
export const DOQUERY = '[Map] DoQuery';
|
||||
|
||||
export class SetState implements Action {
|
||||
readonly type = SETSTATE;
|
||||
|
||||
constructor(public mapState: IMapState,public queryState:IQueryState) { }
|
||||
}
|
||||
|
||||
export class SetMapState implements Action {
|
||||
readonly type = SETMAPSTATE;
|
||||
|
||||
constructor(public mapState: IMapState) { }
|
||||
}
|
||||
|
||||
export class SetViewExtent implements Action {
|
||||
readonly type = SETVIEWEXTENT;
|
||||
|
||||
constructor(public extent:number[]) { }
|
||||
}
|
||||
|
||||
export class Init implements Action {
|
||||
readonly type = INIT;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class SetParent implements Action {
|
||||
readonly type = SETPARENT;
|
||||
|
||||
constructor(public parentCode:string) { }
|
||||
}
|
||||
|
||||
export class StartSearch implements Action {
|
||||
readonly type = STARTSEARCH;
|
||||
|
||||
constructor(public queryState: IQueryState) { }
|
||||
}
|
||||
|
||||
export class StartSearchSuccess implements Action {
|
||||
readonly type = STARTSEARCHSUCCESS;
|
||||
|
||||
constructor(public features: Array<Feature>, public query:IQueryState) { }
|
||||
}
|
||||
|
||||
export class SelectFeature implements Action {
|
||||
readonly type = SELECTFEATURE;
|
||||
|
||||
constructor(public feature:Feature) { }
|
||||
}
|
||||
|
||||
export class SelectItem implements Action {
|
||||
readonly type = SELECTITEM;
|
||||
|
||||
constructor(public itemCode:string) { }
|
||||
}
|
||||
|
||||
export class SelectItemSuccess implements Action {
|
||||
readonly type = SELECTITEMSUCCESS;
|
||||
|
||||
constructor(public item: IItem) { }
|
||||
}
|
||||
|
||||
export class AddFeatureSuccess implements Action {
|
||||
readonly type = ADDFEATURESUCCESS;
|
||||
|
||||
constructor(public feature: Feature) { }
|
||||
}
|
||||
|
||||
export class UpdateFeatureSuccess implements Action {
|
||||
readonly type = UPDATEFEATURESUCCESS;
|
||||
|
||||
constructor(public feature: Feature) { }
|
||||
}
|
||||
|
||||
export class ExpandSearch implements Action {
|
||||
readonly type = EXPANDSEARCH;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class CollapseSearch implements Action {
|
||||
readonly type = COLLAPSESEARCH;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class ToggleMenu implements Action {
|
||||
readonly type = TOGGLEMENU;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class SetExtent implements Action {
|
||||
readonly type = SETEXTENT;
|
||||
|
||||
constructor(public extent:number[]) { }
|
||||
}
|
||||
|
||||
export class SetQueryState implements Action {
|
||||
readonly type = SETQUERYSTATE;
|
||||
|
||||
constructor(public queryState: IQueryState) { }
|
||||
}
|
||||
|
||||
export class SetTimeSpan implements Action {
|
||||
readonly type = SETTIMESPAN;
|
||||
|
||||
constructor(public startDate: Date, public endDate: Date) { }
|
||||
}
|
||||
|
||||
export class AddLayer implements Action {
|
||||
readonly type = ADDLAYER;
|
||||
|
||||
constructor(public item:IItem,public layerIndex=-1) { }
|
||||
}
|
||||
|
||||
export class SetVisibility implements Action {
|
||||
readonly type = SETVISIBILITY;
|
||||
|
||||
constructor(public itemLayer:IItemLayer,public visibility:boolean) { }
|
||||
}
|
||||
|
||||
export class SetOpacity implements Action {
|
||||
readonly type = SETOPACITY;
|
||||
|
||||
constructor(public itemLayer: IItemLayer, public opacity: number) { }
|
||||
}
|
||||
|
||||
export class SetLayerIndex implements Action {
|
||||
readonly type = SETLAYERINDEX;
|
||||
|
||||
constructor(public layerIndex: number, public itemLayer: IItemLayer = null) { }
|
||||
}
|
||||
|
||||
export class RemoveLayer implements Action {
|
||||
readonly type = REMOVELAYER;
|
||||
|
||||
constructor(public itemLayer: IItemLayer) { }
|
||||
}
|
||||
|
||||
export class LoadBaseLayers implements Action {
|
||||
readonly type = LOADBASELAYERS;
|
||||
|
||||
constructor(public projection: string) { }
|
||||
}
|
||||
|
||||
export class LoadBaseLayersSuccess implements Action {
|
||||
readonly type = LOADBASELAYERSSUCCESS;
|
||||
|
||||
constructor(public items: IItem[] ) { }
|
||||
}
|
||||
|
||||
export class SelectBaseLayer implements Action {
|
||||
readonly type = SELECTBASELAYER;
|
||||
|
||||
constructor(public itemLayer: IItemLayer) { }
|
||||
}
|
||||
|
||||
export class SelectOverlayLayer implements Action {
|
||||
readonly type = SELECTOVERLAYLAYER;
|
||||
|
||||
constructor(public itemLayer: IItemLayer) { }
|
||||
}
|
||||
|
||||
export class ZoomToExtent implements Action {
|
||||
readonly type = ZOOMTOEXTENT;
|
||||
|
||||
constructor(public itemLayer: IItemLayer) { }
|
||||
}
|
||||
|
||||
export class DoQuery implements Action {
|
||||
readonly type = DOQUERY;
|
||||
|
||||
constructor(public query:IQueryState) { }
|
||||
}
|
||||
|
||||
export type Actions = SetMapState
|
||||
| Init
|
||||
| SetParent
|
||||
| StartSearch
|
||||
| StartSearchSuccess
|
||||
| SelectFeature
|
||||
| SelectItem
|
||||
| SelectItemSuccess
|
||||
| AddFeatureSuccess
|
||||
| UpdateFeatureSuccess
|
||||
| ExpandSearch
|
||||
| CollapseSearch
|
||||
| ToggleMenu
|
||||
| SetExtent
|
||||
| SetQueryState
|
||||
| SetTimeSpan
|
||||
| AddLayer
|
||||
| RemoveLayer
|
||||
| SetVisibility
|
||||
| SetOpacity
|
||||
| SetLayerIndex
|
||||
| LoadBaseLayers
|
||||
| LoadBaseLayersSuccess
|
||||
| SelectBaseLayer
|
||||
| SelectOverlayLayer
|
||||
| ZoomToExtent
|
||||
| SetState
|
||||
| SetViewExtent
|
||||
| DoQuery;
|
||||
|
||||
import { Action } from '@ngrx/store';
|
||||
|
||||
import { IMapState } from '../models/map.state';
|
||||
import { IItemLayer } from '../models/item.layer';
|
||||
import { IQueryState } from '../models/query.state';
|
||||
import { IItem } from '@farmmaps/common';
|
||||
import { Feature } from 'ol';
|
||||
import { Extent } from 'ol/extent';
|
||||
|
||||
export const SETSTATE = '[Map] SetState';
|
||||
export const SETMAPSTATE = '[Map] MapState';
|
||||
export const SETVIEWEXTENT = '[Map] SetViewExtent';
|
||||
export const INIT = '[Map] Init';
|
||||
export const SETPARENT = '[Map] SetParent';
|
||||
export const STARTSEARCH = '[Map] StartSearch';
|
||||
export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
|
||||
export const SELECTFEATURE = '[Map] SelectFeature';
|
||||
export const SELECTITEM = '[Map] SelectItem';
|
||||
export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
|
||||
export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess';
|
||||
export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess';
|
||||
export const EXPANDSEARCH = '[Map] ExpandSearch';
|
||||
export const COLLAPSESEARCH = '[Map] CollapseSearch';
|
||||
export const SETEXTENT = '[Map] SetExtent';
|
||||
export const SETQUERYSTATE = '[Map] SetQueryState';
|
||||
export const SETTIMESPAN = '[Map] SetTimeSpan';
|
||||
export const ADDLAYER = '[Map] AddLayer';
|
||||
export const SETVISIBILITY = '[Map] SetVisibility';
|
||||
export const SETOPACITY = '[Map] SetOpacity';
|
||||
export const SETLAYERINDEX = '[Map] SetLayerIndex';
|
||||
export const REMOVELAYER = '[Map] RemoveLayer';
|
||||
export const LOADBASELAYERS = '[Map] LoadLayers';
|
||||
export const LOADBASELAYERSSUCCESS = '[Map] LoadLayersSuccess';
|
||||
export const SELECTBASELAYER = '[Map] SelectBaseLayers';
|
||||
export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers';
|
||||
export const ZOOMTOEXTENT = '[Map] ZoomToExtent';
|
||||
export const DOQUERY = '[Map] DoQuery';
|
||||
|
||||
export class SetState implements Action {
|
||||
readonly type = SETSTATE;
|
||||
|
||||
constructor(public mapState: IMapState,public queryState:IQueryState) { }
|
||||
}
|
||||
|
||||
export class SetMapState implements Action {
|
||||
readonly type = SETMAPSTATE;
|
||||
|
||||
constructor(public mapState: IMapState) { }
|
||||
}
|
||||
|
||||
export class SetViewExtent implements Action {
|
||||
readonly type = SETVIEWEXTENT;
|
||||
|
||||
constructor(public extent:number[]) { }
|
||||
}
|
||||
|
||||
export class Init implements Action {
|
||||
readonly type = INIT;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class SetParent implements Action {
|
||||
readonly type = SETPARENT;
|
||||
|
||||
constructor(public parentCode:string) { }
|
||||
}
|
||||
|
||||
export class StartSearch implements Action {
|
||||
readonly type = STARTSEARCH;
|
||||
|
||||
constructor(public queryState: IQueryState) { }
|
||||
}
|
||||
|
||||
export class StartSearchSuccess implements Action {
|
||||
readonly type = STARTSEARCHSUCCESS;
|
||||
|
||||
constructor(public features: Array<Feature>, public query:IQueryState) { }
|
||||
}
|
||||
|
||||
export class SelectFeature implements Action {
|
||||
readonly type = SELECTFEATURE;
|
||||
|
||||
constructor(public feature:Feature) { }
|
||||
}
|
||||
|
||||
export class SelectItem implements Action {
|
||||
readonly type = SELECTITEM;
|
||||
|
||||
constructor(public itemCode:string) { }
|
||||
}
|
||||
|
||||
export class SelectItemSuccess implements Action {
|
||||
readonly type = SELECTITEMSUCCESS;
|
||||
|
||||
constructor(public item: IItem) { }
|
||||
}
|
||||
|
||||
export class AddFeatureSuccess implements Action {
|
||||
readonly type = ADDFEATURESUCCESS;
|
||||
|
||||
constructor(public feature: Feature) { }
|
||||
}
|
||||
|
||||
export class UpdateFeatureSuccess implements Action {
|
||||
readonly type = UPDATEFEATURESUCCESS;
|
||||
|
||||
constructor(public feature: Feature) { }
|
||||
}
|
||||
|
||||
export class ExpandSearch implements Action {
|
||||
readonly type = EXPANDSEARCH;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class CollapseSearch implements Action {
|
||||
readonly type = COLLAPSESEARCH;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class SetExtent implements Action {
|
||||
readonly type = SETEXTENT;
|
||||
|
||||
constructor(public extent:number[]) { }
|
||||
}
|
||||
|
||||
export class SetQueryState implements Action {
|
||||
readonly type = SETQUERYSTATE;
|
||||
|
||||
constructor(public queryState: IQueryState) { }
|
||||
}
|
||||
|
||||
export class SetTimeSpan implements Action {
|
||||
readonly type = SETTIMESPAN;
|
||||
|
||||
constructor(public startDate: Date, public endDate: Date) { }
|
||||
}
|
||||
|
||||
export class AddLayer implements Action {
|
||||
readonly type = ADDLAYER;
|
||||
|
||||
constructor(public item:IItem,public layerIndex=-1) { }
|
||||
}
|
||||
|
||||
export class SetVisibility implements Action {
|
||||
readonly type = SETVISIBILITY;
|
||||
|
||||
constructor(public itemLayer:IItemLayer,public visibility:boolean) { }
|
||||
}
|
||||
|
||||
export class SetOpacity implements Action {
|
||||
readonly type = SETOPACITY;
|
||||
|
||||
constructor(public itemLayer: IItemLayer, public opacity: number) { }
|
||||
}
|
||||
|
||||
export class SetLayerIndex implements Action {
|
||||
readonly type = SETLAYERINDEX;
|
||||
|
||||
constructor(public layerIndex: number, public itemLayer: IItemLayer = null) { }
|
||||
}
|
||||
|
||||
export class RemoveLayer implements Action {
|
||||
readonly type = REMOVELAYER;
|
||||
|
||||
constructor(public itemLayer: IItemLayer) { }
|
||||
}
|
||||
|
||||
export class LoadBaseLayers implements Action {
|
||||
readonly type = LOADBASELAYERS;
|
||||
|
||||
constructor(public projection: string) { }
|
||||
}
|
||||
|
||||
export class LoadBaseLayersSuccess implements Action {
|
||||
readonly type = LOADBASELAYERSSUCCESS;
|
||||
|
||||
constructor(public items: IItem[] ) { }
|
||||
}
|
||||
|
||||
export class SelectBaseLayer implements Action {
|
||||
readonly type = SELECTBASELAYER;
|
||||
|
||||
constructor(public itemLayer: IItemLayer) { }
|
||||
}
|
||||
|
||||
export class SelectOverlayLayer implements Action {
|
||||
readonly type = SELECTOVERLAYLAYER;
|
||||
|
||||
constructor(public itemLayer: IItemLayer) { }
|
||||
}
|
||||
|
||||
export class ZoomToExtent implements Action {
|
||||
readonly type = ZOOMTOEXTENT;
|
||||
|
||||
constructor(public itemLayer: IItemLayer) { }
|
||||
}
|
||||
|
||||
export class DoQuery implements Action {
|
||||
readonly type = DOQUERY;
|
||||
|
||||
constructor(public query:IQueryState) { }
|
||||
}
|
||||
|
||||
export type Actions = SetMapState
|
||||
| Init
|
||||
| SetParent
|
||||
| StartSearch
|
||||
| StartSearchSuccess
|
||||
| SelectFeature
|
||||
| SelectItem
|
||||
| SelectItemSuccess
|
||||
| AddFeatureSuccess
|
||||
| UpdateFeatureSuccess
|
||||
| ExpandSearch
|
||||
| CollapseSearch
|
||||
| SetExtent
|
||||
| SetQueryState
|
||||
| SetTimeSpan
|
||||
| AddLayer
|
||||
| RemoveLayer
|
||||
| SetVisibility
|
||||
| SetOpacity
|
||||
| SetLayerIndex
|
||||
| LoadBaseLayers
|
||||
| LoadBaseLayersSuccess
|
||||
| SelectBaseLayer
|
||||
| SelectOverlayLayer
|
||||
| ZoomToExtent
|
||||
| SetState
|
||||
| SetViewExtent
|
||||
| DoQuery;
|
||||
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MapComponent } from './components/map/map.component';
|
||||
import { AuthGuard } from '@farmmaps/common';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '', canActivateChild: [AuthGuard], children: [
|
||||
{
|
||||
path: '',
|
||||
component: MapComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState', canActivateChild: [AuthGuard], children: [
|
||||
{
|
||||
path: '',
|
||||
component: MapComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class MapRoutingModule { }
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MapComponent } from './components/map/map.component';
|
||||
import { AuthGuard } from '@farmmaps/common';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '', canActivateChild: [AuthGuard], children: [
|
||||
{
|
||||
path: '',
|
||||
component: MapComponent
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState', canActivateChild: [AuthGuard], children: [
|
||||
{
|
||||
path: '',
|
||||
component: MapComponent
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class MapRoutingModule { }
|
||||
|
||||
@ -61,13 +61,32 @@ import { LayerVectorImageComponent } from './components/aol/layer-vector-image/l
|
||||
import { StateSerializerService } from './services/state-serializer.service';
|
||||
import { GeolocationService } from './services/geolocation.service';
|
||||
import {DeviceOrientationService} from './services/device-orientation.service';
|
||||
import { localStorageSync } from 'ngrx-store-localstorage';
|
||||
import { WidgetStatusComponent } from './components/widget-status/widget-status.component';
|
||||
import { ForChild} from './components/for-item/for-child.decorator';
|
||||
import {ForItemType } from './components/for-item/for-itemtype.decorator';
|
||||
import { ForSourceTask} from './components/for-item/for-sourcetask.decorator';
|
||||
import { PanToLocation} from './components/aol/pan-to-location/pan-to-location.component';
|
||||
|
||||
export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
|
||||
const r = function(state, action) {
|
||||
const r2 = reducer(state, action);
|
||||
|
||||
if(action.type == "@ngrx/store/update-reducers") {
|
||||
let ms = window.localStorage.getItem(MODULE_NAME+"_mapState");
|
||||
if(ms) {
|
||||
r2["mapState"] = JSON.parse(ms);
|
||||
}
|
||||
}
|
||||
if(action.type == "[Map] MapState" || action.type == "[Map] SetState") {
|
||||
window.localStorage.setItem(MODULE_NAME + "_mapState",JSON.stringify(r2["mapState"]));
|
||||
}
|
||||
|
||||
return r2;
|
||||
};
|
||||
return r;
|
||||
}
|
||||
|
||||
const metaReducers: Array<MetaReducer<any, any>> = [LocalStorageSync];
|
||||
|
||||
export {
|
||||
mapEffects,
|
||||
@ -132,7 +151,7 @@ export {
|
||||
CommonModule,
|
||||
AngularOpenlayersModule,
|
||||
MapRoutingModule,
|
||||
StoreModule.forFeature(MODULE_NAME, mapReducers.reducer),
|
||||
StoreModule.forFeature(MODULE_NAME, mapReducers.reducer,{metaReducers:metaReducers}),
|
||||
EffectsModule.forFeature([mapEffects.MapEffects]),
|
||||
NgbModule,
|
||||
FormsModule,
|
||||
@ -227,6 +246,7 @@ export {
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
export class AppCommonMapModule {
|
||||
static forRoot(): ModuleWithProviders {
|
||||
return {
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
searchMinified:searchMinified$|async,
|
||||
selectedItem:selectedItem$|async,
|
||||
queryState:queryState$|async,
|
||||
menuVisible:menuVisible$|async,
|
||||
searchCollapsed:searchCollapsed$|async,
|
||||
clearEnabled:clearEnabled$|async,
|
||||
period:period$|async,
|
||||
@ -64,19 +63,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</fm-side-panel>
|
||||
<fm-side-panel [visible]="state.menuVisible" class="menu">
|
||||
<div class="container-fluid">
|
||||
<div class="body">
|
||||
<div class="d-flex flex-row">
|
||||
<div class="mt-2 mb-2 flex-grow-1 logo"><router-outlet name="side-panel-logo"></router-outlet></div>
|
||||
<div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
|
||||
</div>
|
||||
<div class="d-flex flex-column cards">
|
||||
<router-outlet name="side-panel-menu"></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fm-side-panel>
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
||||
@ -1,171 +1,167 @@
|
||||
@import "../../_theme.scss";
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
aol-map { position:absolute;width:100%;height:100%;}
|
||||
|
||||
.arrow {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.popover {
|
||||
max-height:22rem;
|
||||
min-width:15rem;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
max-height:19rem;
|
||||
overflow:hidden;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size:1rem;
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
margin-left:-7px;
|
||||
padding-left:7px;
|
||||
margin-right:-7px;
|
||||
padding-right:7px;
|
||||
margin-bottom:7px;
|
||||
}
|
||||
|
||||
.icon-top {
|
||||
font-size: 6rem;
|
||||
text-align: center;
|
||||
height: 9.75rem;
|
||||
}
|
||||
|
||||
.icon-top i {
|
||||
padding-top: 1.875rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
|
||||
.control-container {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
switch2d3d {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
.panel-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.panel-top {
|
||||
display: block;
|
||||
height:0;
|
||||
}
|
||||
|
||||
.panel-bottom {
|
||||
overflow:auto;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.no-results > span {
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
div.header {
|
||||
display:flex;
|
||||
padding-top:1em;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
div.header button {
|
||||
margin-left:1em;
|
||||
}
|
||||
|
||||
.logo {
|
||||
overflow: hidden;
|
||||
max-height: 2.5em;
|
||||
}
|
||||
|
||||
timespan {
|
||||
position: absolute;
|
||||
transition: left 0.5s;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
timespan.menuVisible {
|
||||
left: 22rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .timespan div.clearfix {
|
||||
transition: height 0.5s;
|
||||
}
|
||||
|
||||
:host ::ng-deep .menu .side-panel {
|
||||
z-index: 100;
|
||||
background-color: rgb(245,245,245);
|
||||
}
|
||||
|
||||
@media screen and (min-width:44rem) {
|
||||
.panel-top {
|
||||
height: 8.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
transition: margin-left 0.3s;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/*.panel-visible {
|
||||
margin-left:22rem;
|
||||
}*/
|
||||
@import "../../_theme.scss";
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
aol-map { position:absolute;width:100%;height:100%;}
|
||||
|
||||
.arrow {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.popover {
|
||||
max-height:22rem;
|
||||
min-width:15rem;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
max-height:19rem;
|
||||
overflow:hidden;
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size:1rem;
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
margin-left:-7px;
|
||||
padding-left:7px;
|
||||
margin-right:-7px;
|
||||
padding-right:7px;
|
||||
margin-bottom:7px;
|
||||
}
|
||||
|
||||
.icon-top {
|
||||
font-size: 6rem;
|
||||
text-align: center;
|
||||
height: 9.75rem;
|
||||
}
|
||||
|
||||
.icon-top i {
|
||||
padding-top: 1.875rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
|
||||
.control-container {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
switch2d3d {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
}
|
||||
|
||||
.panel-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.panel-top {
|
||||
display: block;
|
||||
height:0;
|
||||
}
|
||||
|
||||
.panel-bottom {
|
||||
overflow:auto;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.no-results > span {
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
div.header {
|
||||
display:flex;
|
||||
padding-top:1em;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
div.header button {
|
||||
margin-left:1em;
|
||||
}
|
||||
|
||||
.logo {
|
||||
overflow: hidden;
|
||||
max-height: 2.5em;
|
||||
}
|
||||
|
||||
timespan {
|
||||
position: absolute;
|
||||
transition: left 0.5s;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
timespan.menuVisible {
|
||||
left: 22rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .timespan div.clearfix {
|
||||
transition: height 0.5s;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width:44rem) {
|
||||
.panel-top {
|
||||
height: 8.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
transition: margin-left 0.3s;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/*.panel-visible {
|
||||
margin-left:22rem;
|
||||
}*/
|
||||
|
||||
@ -138,7 +138,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
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);
|
||||
@ -175,6 +174,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
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);
|
||||
window.localStorage.setItem("FarmMapsCommonMap_mapState",this.lastMapState);
|
||||
}
|
||||
if (params.has("queryState")) {
|
||||
let queryState = params.get("queryState");
|
||||
@ -212,7 +212,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
}
|
||||
|
||||
handleToggleMenu(event) {
|
||||
this.store.dispatch(new mapActions.ToggleMenu());
|
||||
this.store.dispatch(new commonActions.ToggleMenu());
|
||||
}
|
||||
|
||||
handleToggleBaseLayers(event:MouseEvent) {
|
||||
|
||||
@ -104,7 +104,7 @@ export class MapEffects {
|
||||
ofType(mapActions.STARTSEARCHSUCCESS),
|
||||
mergeMap((action: mapActions.StartSearchSuccess) => {
|
||||
if (action.query.bboxFilter) {
|
||||
return [];
|
||||
return [new commonActions.SetMenuVisible(false)];
|
||||
} else {
|
||||
var extent = createEmpty();
|
||||
|
||||
@ -114,7 +114,7 @@ export class MapEffects {
|
||||
}
|
||||
}
|
||||
//return [];
|
||||
return of(new mapActions.SetExtent(extent));
|
||||
return [new mapActions.SetExtent(extent),new commonActions.SetMenuVisible(false)];
|
||||
}
|
||||
}));
|
||||
|
||||
|
||||
@ -44,8 +44,7 @@ export interface State {
|
||||
selectedItem:IItem,
|
||||
clearEnabled: boolean,
|
||||
searchCollapsed: boolean,
|
||||
searchMinified: boolean,
|
||||
menuVisible: boolean,
|
||||
searchMinified: boolean,
|
||||
extent: number[],
|
||||
baseLayers: Array<IItemLayer>
|
||||
overlayLayers: Array<IItemLayer>,
|
||||
@ -79,7 +78,6 @@ export const initialState: State = {
|
||||
clearEnabled: false,
|
||||
searchCollapsed: true,
|
||||
searchMinified:false,
|
||||
menuVisible: true,
|
||||
extent: null,
|
||||
baseLayers: [],
|
||||
overlayLayers: [],
|
||||
@ -165,8 +163,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
||||
selectedItemLayer:null,
|
||||
queryState: tassign(a.queryState),
|
||||
searchCollapsed: false,
|
||||
searchMinified: true,
|
||||
menuVisible:false
|
||||
searchMinified: true
|
||||
});
|
||||
}
|
||||
case mapActions.DOQUERY: {
|
||||
@ -181,7 +178,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
||||
return tassign(state, {
|
||||
panelVisible: true,
|
||||
selectedFeature: a.feature,
|
||||
menuVisible: false,
|
||||
extent: a.feature.getGeometry().getExtent(),
|
||||
searchCollapsed: false,
|
||||
clearEnabled:true,
|
||||
@ -207,9 +203,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
||||
case mapActions.COLLAPSESEARCH: {
|
||||
return tassign(state, { searchCollapsed: state.panelVisible ? false: true});
|
||||
}
|
||||
case mapActions.TOGGLEMENU: {
|
||||
return tassign(state, { menuVisible: !state.menuVisible });
|
||||
}
|
||||
case mapActions.SETEXTENT: {
|
||||
let a = action as mapActions.SetExtent;
|
||||
return tassign(state, { extent: a.extent });
|
||||
@ -310,7 +303,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
||||
clearEnabled: false,
|
||||
searchCollapsed: true,
|
||||
searchMinified: false,
|
||||
menuVisible:false,
|
||||
features: [],
|
||||
query:initialState.query
|
||||
});
|
||||
@ -335,7 +327,6 @@ export const getQueryState = (state: State) => state.queryState;
|
||||
export const getClearEnabled = (state: State) => state.clearEnabled;
|
||||
export const getSearchCollapsed = (state: State) => state.searchCollapsed;
|
||||
export const getSearchMinified = (state: State) => state.searchMinified;
|
||||
export const getMenuVisible = (state: State) => state.menuVisible;
|
||||
export const getExtent = (state: State) => state.extent;
|
||||
export const getOverlayLayers = (state: State) => state.overlayLayers;
|
||||
export const getBaseLayers = (state: State) => state.baseLayers;
|
||||
@ -358,7 +349,6 @@ export const selectGetQueryState = createSelector(selectMapState, getQueryState)
|
||||
export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);
|
||||
export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed);
|
||||
export const selectGetSearchMinified = createSelector(selectMapState, getSearchMinified);
|
||||
export const selectGetMenuVisible = createSelector(selectMapState, getMenuVisible);
|
||||
export const selectGetExtent = createSelector(selectMapState, getExtent);
|
||||
export const selectGetOverlayLayers = createSelector(selectMapState, getOverlayLayers);
|
||||
export const selectGetBaseLayers = createSelector(selectMapState, getBaseLayers);
|
||||
|
||||
@ -46,6 +46,10 @@ export const FAIL = '[AppCommon] Fail';
|
||||
|
||||
export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick';
|
||||
|
||||
export const TOGGLEMENU = '[AppCommon] ToggleMenu';
|
||||
|
||||
export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible';
|
||||
|
||||
export class InitUser implements Action {
|
||||
readonly type = INITUSER;
|
||||
|
||||
@ -212,6 +216,18 @@ export class UploadedFileClick implements Action {
|
||||
readonly type = UPLOADEDFILECLICK;
|
||||
constructor(public itemCode:string) { }
|
||||
}
|
||||
|
||||
export class ToggleMenu implements Action {
|
||||
readonly type = TOGGLEMENU;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class SetMenuVisible implements Action {
|
||||
readonly type = SETMENUVISIBLE;
|
||||
|
||||
constructor(public visible:boolean) { }
|
||||
}
|
||||
|
||||
|
||||
export type Actions = OpenModal
|
||||
@ -240,4 +256,6 @@ export type Actions = OpenModal
|
||||
| TaskStartEvent
|
||||
| TaskEndEvent
|
||||
| TaskErrorEvent
|
||||
| DeviceUpdateEvent;
|
||||
| DeviceUpdateEvent
|
||||
| ToggleMenu
|
||||
| SetMenuVisible;
|
||||
|
||||
@ -1,14 +1,27 @@
|
||||
<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
|
||||
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
|
||||
</ul>
|
||||
<router-outlet name="menu"></router-outlet>
|
||||
</nav>
|
||||
<div class="body">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<fm-resumable-file-upload></fm-resumable-file-upload>
|
||||
</div>
|
||||
<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
|
||||
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
|
||||
</ul>
|
||||
<router-outlet name="menu"></router-outlet>
|
||||
</nav>
|
||||
<div class="body">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
|
||||
<div class="container-fluid">
|
||||
<div class="body">
|
||||
<div class="d-flex flex-row">
|
||||
<div class="mt-2 mb-2 flex-grow-1 logo"><router-outlet name="side-panel-logo"></router-outlet></div>
|
||||
<div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
|
||||
</div>
|
||||
<div class="d-flex flex-column cards">
|
||||
<router-outlet name="side-panel-menu"></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fm-side-panel>
|
||||
<fm-resumable-file-upload></fm-resumable-file-upload>
|
||||
</div>
|
||||
|
||||
@ -1,72 +1,77 @@
|
||||
//@import "theme.scss";
|
||||
|
||||
/* Import Bootstrap & Fonts */
|
||||
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
|
||||
// custom styles
|
||||
|
||||
.btn:focus {
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.input-group > .form-control:focus {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
box-shadow: none;
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
|
||||
/* *** Overall APP Styling can go here ***
|
||||
--------------------------------------------
|
||||
Note: This Component has ViewEncapsulation.None so the styles will bleed out
|
||||
|
||||
*/
|
||||
|
||||
body { background: #f1f1f1; line-height: 18px; user-select:none;}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.app {
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
.app > .navbar {
|
||||
position: absolute;
|
||||
transition: top 0.5s ease-out;
|
||||
top:0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3.1rem;
|
||||
}
|
||||
|
||||
.app > .body {
|
||||
position: absolute;
|
||||
transition: top 0.5s ease-out;
|
||||
top: 3.1rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.app.fullscreen > .navbar {
|
||||
top: -3.1rem;
|
||||
}
|
||||
|
||||
.app.fullscreen > .body {
|
||||
top:0;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-primary:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
//@import "theme.scss";
|
||||
|
||||
/* Import Bootstrap & Fonts */
|
||||
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
|
||||
// custom styles
|
||||
|
||||
.btn:focus {
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.input-group > .form-control:focus {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
box-shadow: none;
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
|
||||
/* *** Overall APP Styling can go here ***
|
||||
--------------------------------------------
|
||||
Note: This Component has ViewEncapsulation.None so the styles will bleed out
|
||||
|
||||
*/
|
||||
|
||||
body { background: #f1f1f1; line-height: 18px; user-select:none;}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.app {
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
.app > .navbar {
|
||||
position: absolute;
|
||||
transition: top 0.5s ease-out;
|
||||
top:0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3.1rem;
|
||||
}
|
||||
|
||||
.app > .body {
|
||||
position: absolute;
|
||||
transition: top 0.5s ease-out;
|
||||
top: 3.1rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.app.fullscreen > .navbar {
|
||||
top: -3.1rem;
|
||||
}
|
||||
|
||||
.app.fullscreen > .body {
|
||||
top:0;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-primary:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.menu .side-panel {
|
||||
z-index: 100;
|
||||
background-color: rgb(245,245,245);
|
||||
}
|
||||
|
||||
|
||||
@ -36,6 +36,7 @@ export class AppComponent implements OnInit, OnDestroy {
|
||||
public fileDroptarget: any;
|
||||
public fullScreen: Observable<boolean>;
|
||||
public routeLoading: Observable<boolean>;
|
||||
public menuVisible:Observable<boolean>;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
@ -88,6 +89,7 @@ export class AppComponent implements OnInit, OnDestroy {
|
||||
ngOnInit() {
|
||||
this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
|
||||
this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
|
||||
this.menuVisible = this.store.select(appReducers.SelectGetMenuVisible);
|
||||
this.InstallRouteEventHandler();
|
||||
this.InstallEventServiceEventHandler();
|
||||
}
|
||||
@ -129,5 +131,13 @@ export class AppComponent implements OnInit, OnDestroy {
|
||||
handleClick(event: MouseEvent) {
|
||||
this.store.dispatch(new commonActions.Escape(false,true));
|
||||
}
|
||||
|
||||
handleStopBubble(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
handleToggleMenu(event) {
|
||||
this.store.dispatch(new commonActions.ToggleMenu());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing }" [ngStyle]="{'top':top}">
|
||||
<div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
|
||||
<i class="fa fa-chevron-left" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
|
||||
<div></div>
|
||||
<span class="rounded"></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ng-content>
|
||||
|
||||
</ng-content>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-panel hidden collapsed left" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
|
||||
<div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
|
||||
<i class="fa fa-chevron-left" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
|
||||
<div></div>
|
||||
<span class="rounded"></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ng-content>
|
||||
|
||||
</ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,100 +1,113 @@
|
||||
.side-panel {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
top:50%;
|
||||
transition: left 0.3s, top 0.3s;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.side-panel.resizing {
|
||||
transition: left 0s, top 0s;
|
||||
}
|
||||
|
||||
.side-panel.collapsed {
|
||||
left:-22rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 100%;
|
||||
background-color: inherit;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.arrow i {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.collapsed .arrow i {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.side-panel.hidden {
|
||||
top:100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
height:100% ;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
overflow-y:auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
.resizegrip {
|
||||
height:2rem;
|
||||
line-height: 1rem;
|
||||
display: none;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
div.resizegrip > div {
|
||||
position: absolute;
|
||||
top:0px;
|
||||
height: 1rem;
|
||||
width: 100%;
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
div.resizegrip > span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height:0.3rem;
|
||||
width:4rem;
|
||||
background-color:rgba(0, 0, 0, 0.3);
|
||||
top:-0.3rem;
|
||||
}
|
||||
|
||||
.resizeable .resizegrip {
|
||||
display:block;
|
||||
|
||||
}
|
||||
|
||||
.resizeable .content {
|
||||
height:calc(100% - 1rem);
|
||||
top:-1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width:44rem) {
|
||||
.side-panel {
|
||||
top:0px;
|
||||
width: 22rem;
|
||||
height:100%;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.side-panel.hidden {
|
||||
width: 22rem;
|
||||
left:-24rem;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
}
|
||||
.side-panel {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
top:50%;
|
||||
transition: left 0.3s, top 0.3s;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.side-panel.resizing {
|
||||
transition: left 0s, top 0s;
|
||||
}
|
||||
|
||||
.side-panel.collapsed {
|
||||
left:-22rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 100%;
|
||||
background-color: inherit;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.arrow i {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.collapsed .arrow i {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.side-panel.hidden {
|
||||
top:100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
height:100% ;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
overflow-y:auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
.resizegrip {
|
||||
height:2rem;
|
||||
line-height: 1rem;
|
||||
display: none;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
div.resizegrip > div {
|
||||
position: absolute;
|
||||
top:0px;
|
||||
height: 1rem;
|
||||
width: 100%;
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
div.resizegrip > span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height:0.3rem;
|
||||
width:4rem;
|
||||
background-color:rgba(0, 0, 0, 0.3);
|
||||
top:-0.3rem;
|
||||
}
|
||||
|
||||
.resizeable .resizegrip {
|
||||
display:block;
|
||||
|
||||
}
|
||||
|
||||
.resizeable .content {
|
||||
height:calc(100% - 1rem);
|
||||
top:-1rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width:44rem) {
|
||||
.side-panel {
|
||||
top:0px;
|
||||
width: 22rem;
|
||||
height:100%;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.side-panel.hidden {
|
||||
width: 22rem;
|
||||
left:-24rem;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.side-panel.left {
|
||||
top:0px;
|
||||
width: 22rem;
|
||||
height:100%;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.side-panel.left.hidden {
|
||||
width: 22rem;
|
||||
left:-24rem;
|
||||
height:100%;
|
||||
}
|
||||
@ -12,6 +12,7 @@ export class SidePanelComponent implements OnChanges {
|
||||
@Input() public collapsed: boolean;
|
||||
@Input() public collapsable: boolean;
|
||||
@Input() public resizeable: boolean = false;
|
||||
@Input() public left: boolean = false;
|
||||
@ViewChild("resizeGrip", { static: false }) elementView: ElementRef;
|
||||
public mobile:boolean = true;
|
||||
private parentHeight:number = 0;
|
||||
@ -32,7 +33,7 @@ export class SidePanelComponent implements OnChanges {
|
||||
}
|
||||
|
||||
setTop() {
|
||||
this.mobile = this.checkMobile();
|
||||
this.mobile = this.checkMobile() && ! this.left;
|
||||
this.resizeTop = this.mobile?50:0;
|
||||
this.top = (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
|
||||
}
|
||||
|
||||
@ -1,95 +1,109 @@
|
||||
import { tassign } from 'tassign';
|
||||
import { IItemTypes} from '../models/item.types';
|
||||
import { IListItem } from '../models/list.item';
|
||||
import { IUser } from '../models/user';
|
||||
import * as appCommonActions from '../actions/app-common.actions';
|
||||
import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store';
|
||||
|
||||
import { MODULE_NAME } from '../module-name';
|
||||
|
||||
export interface State {
|
||||
openedModalName: string,
|
||||
initialized: boolean,
|
||||
rootItems: IListItem[],
|
||||
itemTypes: IItemTypes,
|
||||
user:IUser,
|
||||
fullScreen: boolean,
|
||||
routeLoading:boolean
|
||||
}
|
||||
|
||||
export const initialState: State = {
|
||||
openedModalName: null,
|
||||
initialized: false,
|
||||
rootItems: [],
|
||||
itemTypes: {},
|
||||
user:null,
|
||||
fullScreen: true,
|
||||
routeLoading: false
|
||||
}
|
||||
|
||||
export function reducer(state = initialState, action: appCommonActions.Actions ): State {
|
||||
switch (action.type) {
|
||||
case appCommonActions.INITUSERSUCCESS: {
|
||||
let a = action as appCommonActions.InitUserSuccess;
|
||||
return tassign(state, { user: a.user });
|
||||
}
|
||||
case appCommonActions.INITROOTSUCCESS: {
|
||||
let a = action as appCommonActions.InitRootSuccess;
|
||||
return tassign(state, { rootItems:a.items});
|
||||
}
|
||||
case appCommonActions.OPENMODAL: {
|
||||
return tassign(state, { openedModalName: action.modalName });
|
||||
}
|
||||
case appCommonActions.CLOSEMODAL: {
|
||||
return tassign(state, { openedModalName: null });
|
||||
}
|
||||
case appCommonActions.INITIALIZED: {
|
||||
return tassign(state, { initialized: true });
|
||||
}
|
||||
case appCommonActions.LOADITEMTYPESSUCCESS: {
|
||||
let a = action as appCommonActions.LoadItemTypesSuccess;
|
||||
return tassign(state, { itemTypes: a.itemTypes });
|
||||
}
|
||||
case appCommonActions.FULLSCREEN: {
|
||||
return tassign(state, {
|
||||
fullScreen:true
|
||||
});
|
||||
}
|
||||
case appCommonActions.SHOWNAVBAR: {
|
||||
return tassign(state, {
|
||||
fullScreen: false
|
||||
});
|
||||
}
|
||||
case appCommonActions.STARTROUTELOADING: {
|
||||
return tassign(state, {
|
||||
routeLoading: true
|
||||
});
|
||||
}
|
||||
case appCommonActions.ENDROUTELOADING: {
|
||||
return tassign(state, {
|
||||
routeLoading: false
|
||||
});
|
||||
}
|
||||
default: {
|
||||
return state;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const getOpenedModalName = (state: State) => state.openedModalName;
|
||||
export const getInitialized = (state: State) => state.initialized;
|
||||
export const getItemTypes = (state: State) => state.itemTypes;
|
||||
export const getRootItems = (state: State) => state.rootItems;
|
||||
export const getFullScreen = (state: State) => state.fullScreen;
|
||||
export const getRouteLoading = (state: State) => state.routeLoading;
|
||||
|
||||
|
||||
export const selectAppCommonState = createFeatureSelector<State>(MODULE_NAME);
|
||||
|
||||
export const selectOpenedModalName = createSelector(selectAppCommonState, getOpenedModalName);
|
||||
export const selectGetInitialized = createSelector(selectAppCommonState, getInitialized);
|
||||
export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTypes);
|
||||
export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems);
|
||||
export const selectGetFullScreen = createSelector(selectAppCommonState, getFullScreen);
|
||||
export const selectGetRouteLoading = createSelector(selectAppCommonState, getRouteLoading);
|
||||
|
||||
import { tassign } from 'tassign';
|
||||
import { IItemTypes} from '../models/item.types';
|
||||
import { IListItem } from '../models/list.item';
|
||||
import { IUser } from '../models/user';
|
||||
import * as appCommonActions from '../actions/app-common.actions';
|
||||
import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store';
|
||||
|
||||
import { MODULE_NAME } from '../module-name';
|
||||
|
||||
export interface State {
|
||||
openedModalName: string,
|
||||
initialized: boolean,
|
||||
rootItems: IListItem[],
|
||||
itemTypes: IItemTypes,
|
||||
user:IUser,
|
||||
fullScreen: boolean,
|
||||
routeLoading:boolean,
|
||||
menuVisible: boolean,
|
||||
}
|
||||
|
||||
export const initialState: State = {
|
||||
openedModalName: null,
|
||||
initialized: false,
|
||||
rootItems: [],
|
||||
itemTypes: {},
|
||||
user:null,
|
||||
fullScreen: true,
|
||||
routeLoading: false,
|
||||
menuVisible: true
|
||||
}
|
||||
|
||||
export function reducer(state = initialState, action: appCommonActions.Actions ): State {
|
||||
switch (action.type) {
|
||||
case appCommonActions.INITUSERSUCCESS: {
|
||||
let a = action as appCommonActions.InitUserSuccess;
|
||||
return tassign(state, { user: a.user });
|
||||
}
|
||||
case appCommonActions.INITROOTSUCCESS: {
|
||||
let a = action as appCommonActions.InitRootSuccess;
|
||||
return tassign(state, { rootItems:a.items});
|
||||
}
|
||||
case appCommonActions.OPENMODAL: {
|
||||
return tassign(state, { openedModalName: action.modalName });
|
||||
}
|
||||
case appCommonActions.CLOSEMODAL: {
|
||||
return tassign(state, { openedModalName: null });
|
||||
}
|
||||
case appCommonActions.INITIALIZED: {
|
||||
return tassign(state, { initialized: true });
|
||||
}
|
||||
case appCommonActions.LOADITEMTYPESSUCCESS: {
|
||||
let a = action as appCommonActions.LoadItemTypesSuccess;
|
||||
return tassign(state, { itemTypes: a.itemTypes });
|
||||
}
|
||||
case appCommonActions.FULLSCREEN: {
|
||||
return tassign(state, {
|
||||
fullScreen:true
|
||||
});
|
||||
}
|
||||
case appCommonActions.SHOWNAVBAR: {
|
||||
return tassign(state, {
|
||||
fullScreen: false
|
||||
});
|
||||
}
|
||||
case appCommonActions.STARTROUTELOADING: {
|
||||
return tassign(state, {
|
||||
routeLoading: true
|
||||
});
|
||||
}
|
||||
case appCommonActions.ENDROUTELOADING: {
|
||||
return tassign(state, {
|
||||
routeLoading: false
|
||||
});
|
||||
}
|
||||
case appCommonActions.TOGGLEMENU: {
|
||||
return tassign(state, { menuVisible: !state.menuVisible });
|
||||
}
|
||||
case appCommonActions.ESCAPE: {
|
||||
return tassign(state, { menuVisible: false });
|
||||
}
|
||||
case appCommonActions.SETMENUVISIBLE: {
|
||||
let a = action as appCommonActions.SetMenuVisible;
|
||||
return tassign(state, { menuVisible: a.visible });
|
||||
}
|
||||
default: {
|
||||
return state;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const getOpenedModalName = (state: State) => state.openedModalName;
|
||||
export const getInitialized = (state: State) => state.initialized;
|
||||
export const getItemTypes = (state: State) => state.itemTypes;
|
||||
export const getRootItems = (state: State) => state.rootItems;
|
||||
export const getFullScreen = (state: State) => state.fullScreen;
|
||||
export const getRouteLoading = (state: State) => state.routeLoading;
|
||||
export const getMenuVisible = (state: State) => state.menuVisible;
|
||||
|
||||
|
||||
export const selectAppCommonState = createFeatureSelector<State>(MODULE_NAME);
|
||||
|
||||
export const selectOpenedModalName = createSelector(selectAppCommonState, getOpenedModalName);
|
||||
export const selectGetInitialized = createSelector(selectAppCommonState, getInitialized);
|
||||
export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTypes);
|
||||
export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems);
|
||||
export const selectGetFullScreen = createSelector(selectAppCommonState, getFullScreen);
|
||||
export const selectGetRouteLoading = createSelector(selectAppCommonState, getRouteLoading);
|
||||
export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuVisible);
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { RouterModule ,UrlSegment} from '@angular/router';
|
||||
|
||||
import { AuthGuard,FullScreenGuard } from '@farmmaps/common';
|
||||
import { MapComponent } from '@farmmaps/common-map';
|
||||
@ -7,12 +7,26 @@ import { LogoComponent } from './logo/logo.component';
|
||||
import { MenuComponent } from './menu/menu.component';
|
||||
import {NotImplementedComponent} from '@farmmaps/common';
|
||||
|
||||
export function urlMatcher(url: UrlSegment[]) {
|
||||
return {consumed:url};
|
||||
}
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
component: LogoComponent,
|
||||
outlet: 'side-panel-logo'
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: MenuComponent,
|
||||
outlet: 'side-panel-menu'
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'map',
|
||||
pathMatch: 'full'
|
||||
},
|
||||
},
|
||||
{
|
||||
path:'editor/:type/item/:itemcode',
|
||||
component: NotImplementedComponent
|
||||
@ -28,21 +42,9 @@ const routes = [
|
||||
},
|
||||
{
|
||||
path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
|
||||
component: MapComponent,
|
||||
children:[
|
||||
{
|
||||
path: '',
|
||||
component: LogoComponent,
|
||||
outlet: 'side-panel-logo'
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: MenuComponent,
|
||||
outlet: 'side-panel-menu'
|
||||
}
|
||||
]
|
||||
}
|
||||
]},
|
||||
component: MapComponent
|
||||
}
|
||||
]}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user