Refactor map for menu removal
Some checks failed
FarmMaps.Develop/FarmMapsLib/develop There was a failure building this commit
Some checks failed
FarmMaps.Develop/FarmMapsLib/develop There was a failure building this commit
This commit is contained in:
parent
73550b3201
commit
bf0dc15a00
@ -15,6 +15,6 @@
|
|||||||
"@ngrx/router-store": "^8.2",
|
"@ngrx/router-store": "^8.2",
|
||||||
"@ngrx/store": "^8.2",
|
"@ngrx/store": "^8.2",
|
||||||
"tassign": "^1.0.0",
|
"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 { Action } from '@ngrx/store';
|
||||||
|
|
||||||
import { IMapState } from '../models/map.state';
|
import { IMapState } from '../models/map.state';
|
||||||
import { IItemLayer } from '../models/item.layer';
|
import { IItemLayer } from '../models/item.layer';
|
||||||
import { IQueryState } from '../models/query.state';
|
import { IQueryState } from '../models/query.state';
|
||||||
import { IItem } from '@farmmaps/common';
|
import { IItem } from '@farmmaps/common';
|
||||||
import { Feature } from 'ol';
|
import { Feature } from 'ol';
|
||||||
import { Extent } from 'ol/extent';
|
import { Extent } from 'ol/extent';
|
||||||
|
|
||||||
export const SETSTATE = '[Map] SetState';
|
export const SETSTATE = '[Map] SetState';
|
||||||
export const SETMAPSTATE = '[Map] MapState';
|
export const SETMAPSTATE = '[Map] MapState';
|
||||||
export const SETVIEWEXTENT = '[Map] SetViewExtent';
|
export const SETVIEWEXTENT = '[Map] SetViewExtent';
|
||||||
export const INIT = '[Map] Init';
|
export const INIT = '[Map] Init';
|
||||||
export const SETPARENT = '[Map] SetParent';
|
export const SETPARENT = '[Map] SetParent';
|
||||||
export const STARTSEARCH = '[Map] StartSearch';
|
export const STARTSEARCH = '[Map] StartSearch';
|
||||||
export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
|
export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
|
||||||
export const SELECTFEATURE = '[Map] SelectFeature';
|
export const SELECTFEATURE = '[Map] SelectFeature';
|
||||||
export const SELECTITEM = '[Map] SelectItem';
|
export const SELECTITEM = '[Map] SelectItem';
|
||||||
export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
|
export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
|
||||||
export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess';
|
export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess';
|
||||||
export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess';
|
export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess';
|
||||||
export const EXPANDSEARCH = '[Map] ExpandSearch';
|
export const EXPANDSEARCH = '[Map] ExpandSearch';
|
||||||
export const COLLAPSESEARCH = '[Map] CollapseSearch';
|
export const COLLAPSESEARCH = '[Map] CollapseSearch';
|
||||||
export const TOGGLEMENU = '[Map] ToggleMenu';
|
export const SETEXTENT = '[Map] SetExtent';
|
||||||
export const SETEXTENT = '[Map] SetExtent';
|
export const SETQUERYSTATE = '[Map] SetQueryState';
|
||||||
export const SETQUERYSTATE = '[Map] SetQueryState';
|
export const SETTIMESPAN = '[Map] SetTimeSpan';
|
||||||
export const SETTIMESPAN = '[Map] SetTimeSpan';
|
export const ADDLAYER = '[Map] AddLayer';
|
||||||
export const ADDLAYER = '[Map] AddLayer';
|
export const SETVISIBILITY = '[Map] SetVisibility';
|
||||||
export const SETVISIBILITY = '[Map] SetVisibility';
|
export const SETOPACITY = '[Map] SetOpacity';
|
||||||
export const SETOPACITY = '[Map] SetOpacity';
|
export const SETLAYERINDEX = '[Map] SetLayerIndex';
|
||||||
export const SETLAYERINDEX = '[Map] SetLayerIndex';
|
export const REMOVELAYER = '[Map] RemoveLayer';
|
||||||
export const REMOVELAYER = '[Map] RemoveLayer';
|
export const LOADBASELAYERS = '[Map] LoadLayers';
|
||||||
export const LOADBASELAYERS = '[Map] LoadLayers';
|
export const LOADBASELAYERSSUCCESS = '[Map] LoadLayersSuccess';
|
||||||
export const LOADBASELAYERSSUCCESS = '[Map] LoadLayersSuccess';
|
export const SELECTBASELAYER = '[Map] SelectBaseLayers';
|
||||||
export const SELECTBASELAYER = '[Map] SelectBaseLayers';
|
export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers';
|
||||||
export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers';
|
export const ZOOMTOEXTENT = '[Map] ZoomToExtent';
|
||||||
export const ZOOMTOEXTENT = '[Map] ZoomToExtent';
|
export const DOQUERY = '[Map] DoQuery';
|
||||||
export const DOQUERY = '[Map] DoQuery';
|
|
||||||
|
export class SetState implements Action {
|
||||||
export class SetState implements Action {
|
readonly type = SETSTATE;
|
||||||
readonly type = SETSTATE;
|
|
||||||
|
constructor(public mapState: IMapState,public queryState:IQueryState) { }
|
||||||
constructor(public mapState: IMapState,public queryState:IQueryState) { }
|
}
|
||||||
}
|
|
||||||
|
export class SetMapState implements Action {
|
||||||
export class SetMapState implements Action {
|
readonly type = SETMAPSTATE;
|
||||||
readonly type = SETMAPSTATE;
|
|
||||||
|
constructor(public mapState: IMapState) { }
|
||||||
constructor(public mapState: IMapState) { }
|
}
|
||||||
}
|
|
||||||
|
export class SetViewExtent implements Action {
|
||||||
export class SetViewExtent implements Action {
|
readonly type = SETVIEWEXTENT;
|
||||||
readonly type = SETVIEWEXTENT;
|
|
||||||
|
constructor(public extent:number[]) { }
|
||||||
constructor(public extent:number[]) { }
|
}
|
||||||
}
|
|
||||||
|
export class Init implements Action {
|
||||||
export class Init implements Action {
|
readonly type = INIT;
|
||||||
readonly type = INIT;
|
|
||||||
|
constructor() { }
|
||||||
constructor() { }
|
}
|
||||||
}
|
|
||||||
|
export class SetParent implements Action {
|
||||||
export class SetParent implements Action {
|
readonly type = SETPARENT;
|
||||||
readonly type = SETPARENT;
|
|
||||||
|
constructor(public parentCode:string) { }
|
||||||
constructor(public parentCode:string) { }
|
}
|
||||||
}
|
|
||||||
|
export class StartSearch implements Action {
|
||||||
export class StartSearch implements Action {
|
readonly type = STARTSEARCH;
|
||||||
readonly type = STARTSEARCH;
|
|
||||||
|
constructor(public queryState: IQueryState) { }
|
||||||
constructor(public queryState: IQueryState) { }
|
}
|
||||||
}
|
|
||||||
|
export class StartSearchSuccess implements Action {
|
||||||
export class StartSearchSuccess implements Action {
|
readonly type = STARTSEARCHSUCCESS;
|
||||||
readonly type = STARTSEARCHSUCCESS;
|
|
||||||
|
constructor(public features: Array<Feature>, public query:IQueryState) { }
|
||||||
constructor(public features: Array<Feature>, public query:IQueryState) { }
|
}
|
||||||
}
|
|
||||||
|
export class SelectFeature implements Action {
|
||||||
export class SelectFeature implements Action {
|
readonly type = SELECTFEATURE;
|
||||||
readonly type = SELECTFEATURE;
|
|
||||||
|
constructor(public feature:Feature) { }
|
||||||
constructor(public feature:Feature) { }
|
}
|
||||||
}
|
|
||||||
|
export class SelectItem implements Action {
|
||||||
export class SelectItem implements Action {
|
readonly type = SELECTITEM;
|
||||||
readonly type = SELECTITEM;
|
|
||||||
|
constructor(public itemCode:string) { }
|
||||||
constructor(public itemCode:string) { }
|
}
|
||||||
}
|
|
||||||
|
export class SelectItemSuccess implements Action {
|
||||||
export class SelectItemSuccess implements Action {
|
readonly type = SELECTITEMSUCCESS;
|
||||||
readonly type = SELECTITEMSUCCESS;
|
|
||||||
|
constructor(public item: IItem) { }
|
||||||
constructor(public item: IItem) { }
|
}
|
||||||
}
|
|
||||||
|
export class AddFeatureSuccess implements Action {
|
||||||
export class AddFeatureSuccess implements Action {
|
readonly type = ADDFEATURESUCCESS;
|
||||||
readonly type = ADDFEATURESUCCESS;
|
|
||||||
|
constructor(public feature: Feature) { }
|
||||||
constructor(public feature: Feature) { }
|
}
|
||||||
}
|
|
||||||
|
export class UpdateFeatureSuccess implements Action {
|
||||||
export class UpdateFeatureSuccess implements Action {
|
readonly type = UPDATEFEATURESUCCESS;
|
||||||
readonly type = UPDATEFEATURESUCCESS;
|
|
||||||
|
constructor(public feature: Feature) { }
|
||||||
constructor(public feature: Feature) { }
|
}
|
||||||
}
|
|
||||||
|
export class ExpandSearch implements Action {
|
||||||
export class ExpandSearch implements Action {
|
readonly type = EXPANDSEARCH;
|
||||||
readonly type = EXPANDSEARCH;
|
|
||||||
|
constructor() { }
|
||||||
constructor() { }
|
}
|
||||||
}
|
|
||||||
|
export class CollapseSearch implements Action {
|
||||||
export class CollapseSearch implements Action {
|
readonly type = COLLAPSESEARCH;
|
||||||
readonly type = COLLAPSESEARCH;
|
|
||||||
|
constructor() { }
|
||||||
constructor() { }
|
}
|
||||||
}
|
|
||||||
|
export class SetExtent implements Action {
|
||||||
export class ToggleMenu implements Action {
|
readonly type = SETEXTENT;
|
||||||
readonly type = TOGGLEMENU;
|
|
||||||
|
constructor(public extent:number[]) { }
|
||||||
constructor() { }
|
}
|
||||||
}
|
|
||||||
|
export class SetQueryState implements Action {
|
||||||
export class SetExtent implements Action {
|
readonly type = SETQUERYSTATE;
|
||||||
readonly type = SETEXTENT;
|
|
||||||
|
constructor(public queryState: IQueryState) { }
|
||||||
constructor(public extent:number[]) { }
|
}
|
||||||
}
|
|
||||||
|
export class SetTimeSpan implements Action {
|
||||||
export class SetQueryState implements Action {
|
readonly type = SETTIMESPAN;
|
||||||
readonly type = SETQUERYSTATE;
|
|
||||||
|
constructor(public startDate: Date, public endDate: Date) { }
|
||||||
constructor(public queryState: IQueryState) { }
|
}
|
||||||
}
|
|
||||||
|
export class AddLayer implements Action {
|
||||||
export class SetTimeSpan implements Action {
|
readonly type = ADDLAYER;
|
||||||
readonly type = SETTIMESPAN;
|
|
||||||
|
constructor(public item:IItem,public layerIndex=-1) { }
|
||||||
constructor(public startDate: Date, public endDate: Date) { }
|
}
|
||||||
}
|
|
||||||
|
export class SetVisibility implements Action {
|
||||||
export class AddLayer implements Action {
|
readonly type = SETVISIBILITY;
|
||||||
readonly type = ADDLAYER;
|
|
||||||
|
constructor(public itemLayer:IItemLayer,public visibility:boolean) { }
|
||||||
constructor(public item:IItem,public layerIndex=-1) { }
|
}
|
||||||
}
|
|
||||||
|
export class SetOpacity implements Action {
|
||||||
export class SetVisibility implements Action {
|
readonly type = SETOPACITY;
|
||||||
readonly type = SETVISIBILITY;
|
|
||||||
|
constructor(public itemLayer: IItemLayer, public opacity: number) { }
|
||||||
constructor(public itemLayer:IItemLayer,public visibility:boolean) { }
|
}
|
||||||
}
|
|
||||||
|
export class SetLayerIndex implements Action {
|
||||||
export class SetOpacity implements Action {
|
readonly type = SETLAYERINDEX;
|
||||||
readonly type = SETOPACITY;
|
|
||||||
|
constructor(public layerIndex: number, public itemLayer: IItemLayer = null) { }
|
||||||
constructor(public itemLayer: IItemLayer, public opacity: number) { }
|
}
|
||||||
}
|
|
||||||
|
export class RemoveLayer implements Action {
|
||||||
export class SetLayerIndex implements Action {
|
readonly type = REMOVELAYER;
|
||||||
readonly type = SETLAYERINDEX;
|
|
||||||
|
constructor(public itemLayer: IItemLayer) { }
|
||||||
constructor(public layerIndex: number, public itemLayer: IItemLayer = null) { }
|
}
|
||||||
}
|
|
||||||
|
export class LoadBaseLayers implements Action {
|
||||||
export class RemoveLayer implements Action {
|
readonly type = LOADBASELAYERS;
|
||||||
readonly type = REMOVELAYER;
|
|
||||||
|
constructor(public projection: string) { }
|
||||||
constructor(public itemLayer: IItemLayer) { }
|
}
|
||||||
}
|
|
||||||
|
export class LoadBaseLayersSuccess implements Action {
|
||||||
export class LoadBaseLayers implements Action {
|
readonly type = LOADBASELAYERSSUCCESS;
|
||||||
readonly type = LOADBASELAYERS;
|
|
||||||
|
constructor(public items: IItem[] ) { }
|
||||||
constructor(public projection: string) { }
|
}
|
||||||
}
|
|
||||||
|
export class SelectBaseLayer implements Action {
|
||||||
export class LoadBaseLayersSuccess implements Action {
|
readonly type = SELECTBASELAYER;
|
||||||
readonly type = LOADBASELAYERSSUCCESS;
|
|
||||||
|
constructor(public itemLayer: IItemLayer) { }
|
||||||
constructor(public items: IItem[] ) { }
|
}
|
||||||
}
|
|
||||||
|
export class SelectOverlayLayer implements Action {
|
||||||
export class SelectBaseLayer implements Action {
|
readonly type = SELECTOVERLAYLAYER;
|
||||||
readonly type = SELECTBASELAYER;
|
|
||||||
|
constructor(public itemLayer: IItemLayer) { }
|
||||||
constructor(public itemLayer: IItemLayer) { }
|
}
|
||||||
}
|
|
||||||
|
export class ZoomToExtent implements Action {
|
||||||
export class SelectOverlayLayer implements Action {
|
readonly type = ZOOMTOEXTENT;
|
||||||
readonly type = SELECTOVERLAYLAYER;
|
|
||||||
|
constructor(public itemLayer: IItemLayer) { }
|
||||||
constructor(public itemLayer: IItemLayer) { }
|
}
|
||||||
}
|
|
||||||
|
export class DoQuery implements Action {
|
||||||
export class ZoomToExtent implements Action {
|
readonly type = DOQUERY;
|
||||||
readonly type = ZOOMTOEXTENT;
|
|
||||||
|
constructor(public query:IQueryState) { }
|
||||||
constructor(public itemLayer: IItemLayer) { }
|
}
|
||||||
}
|
|
||||||
|
export type Actions = SetMapState
|
||||||
export class DoQuery implements Action {
|
| Init
|
||||||
readonly type = DOQUERY;
|
| SetParent
|
||||||
|
| StartSearch
|
||||||
constructor(public query:IQueryState) { }
|
| StartSearchSuccess
|
||||||
}
|
| SelectFeature
|
||||||
|
| SelectItem
|
||||||
export type Actions = SetMapState
|
| SelectItemSuccess
|
||||||
| Init
|
| AddFeatureSuccess
|
||||||
| SetParent
|
| UpdateFeatureSuccess
|
||||||
| StartSearch
|
| ExpandSearch
|
||||||
| StartSearchSuccess
|
| CollapseSearch
|
||||||
| SelectFeature
|
| SetExtent
|
||||||
| SelectItem
|
| SetQueryState
|
||||||
| SelectItemSuccess
|
| SetTimeSpan
|
||||||
| AddFeatureSuccess
|
| AddLayer
|
||||||
| UpdateFeatureSuccess
|
| RemoveLayer
|
||||||
| ExpandSearch
|
| SetVisibility
|
||||||
| CollapseSearch
|
| SetOpacity
|
||||||
| ToggleMenu
|
| SetLayerIndex
|
||||||
| SetExtent
|
| LoadBaseLayers
|
||||||
| SetQueryState
|
| LoadBaseLayersSuccess
|
||||||
| SetTimeSpan
|
| SelectBaseLayer
|
||||||
| AddLayer
|
| SelectOverlayLayer
|
||||||
| RemoveLayer
|
| ZoomToExtent
|
||||||
| SetVisibility
|
| SetState
|
||||||
| SetOpacity
|
| SetViewExtent
|
||||||
| SetLayerIndex
|
| DoQuery;
|
||||||
| LoadBaseLayers
|
|
||||||
| LoadBaseLayersSuccess
|
|
||||||
| SelectBaseLayer
|
|
||||||
| SelectOverlayLayer
|
|
||||||
| ZoomToExtent
|
|
||||||
| SetState
|
|
||||||
| SetViewExtent
|
|
||||||
| DoQuery;
|
|
||||||
|
|
||||||
|
@ -1,29 +1,29 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
import { MapComponent } from './components/map/map.component';
|
import { MapComponent } from './components/map/map.component';
|
||||||
import { AuthGuard } from '@farmmaps/common';
|
import { AuthGuard } from '@farmmaps/common';
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '', canActivateChild: [AuthGuard], children: [
|
path: '', canActivateChild: [AuthGuard], children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: MapComponent
|
component: MapComponent
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState', canActivateChild: [AuthGuard], children: [
|
path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState', canActivateChild: [AuthGuard], children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: MapComponent
|
component: MapComponent
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [RouterModule.forChild(routes)],
|
imports: [RouterModule.forChild(routes)],
|
||||||
exports: [RouterModule]
|
exports: [RouterModule]
|
||||||
})
|
})
|
||||||
export class MapRoutingModule { }
|
export class MapRoutingModule { }
|
||||||
|
@ -13,7 +13,6 @@
|
|||||||
searchMinified:searchMinified$|async,
|
searchMinified:searchMinified$|async,
|
||||||
selectedItem:selectedItem$|async,
|
selectedItem:selectedItem$|async,
|
||||||
queryState:queryState$|async,
|
queryState:queryState$|async,
|
||||||
menuVisible:menuVisible$|async,
|
|
||||||
searchCollapsed:searchCollapsed$|async,
|
searchCollapsed:searchCollapsed$|async,
|
||||||
clearEnabled:clearEnabled$|async,
|
clearEnabled:clearEnabled$|async,
|
||||||
period:period$|async,
|
period:period$|async,
|
||||||
@ -64,19 +63,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fm-side-panel>
|
</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>
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,171 +1,167 @@
|
|||||||
@import "../../_theme.scss";
|
@import "../../_theme.scss";
|
||||||
@import "~bootstrap/scss/bootstrap.scss";
|
@import "~bootstrap/scss/bootstrap.scss";
|
||||||
|
|
||||||
aol-map { position:absolute;width:100%;height:100%;}
|
aol-map { position:absolute;width:100%;height:100%;}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
top: 3rem;
|
top: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover {
|
.popover {
|
||||||
max-height:22rem;
|
max-height:22rem;
|
||||||
min-width:15rem;
|
min-width:15rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover-body {
|
.popover-body {
|
||||||
max-height:19rem;
|
max-height:19rem;
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
overflow-y:auto;
|
overflow-y:auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
font-size:1rem;
|
font-size:1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-card {
|
.menu-card {
|
||||||
margin-left:-7px;
|
margin-left:-7px;
|
||||||
padding-left:7px;
|
padding-left:7px;
|
||||||
margin-right:-7px;
|
margin-right:-7px;
|
||||||
padding-right:7px;
|
padding-right:7px;
|
||||||
margin-bottom:7px;
|
margin-bottom:7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-top {
|
.icon-top {
|
||||||
font-size: 6rem;
|
font-size: 6rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 9.75rem;
|
height: 9.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-top i {
|
.icon-top i {
|
||||||
padding-top: 1.875rem;
|
padding-top: 1.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
white-space:nowrap;
|
white-space:nowrap;
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
text-overflow:ellipsis;
|
text-overflow:ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.control-container {
|
.control-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1em;
|
right: 1em;
|
||||||
bottom: 1em;
|
bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch2d3d {
|
switch2d3d {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 1em;
|
right: 1em;
|
||||||
bottom: 1em;
|
bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-wrapper {
|
.panel-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-top {
|
.panel-top {
|
||||||
display: block;
|
display: block;
|
||||||
height:0;
|
height:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-bottom {
|
.panel-bottom {
|
||||||
overflow:auto;
|
overflow:auto;
|
||||||
flex:1;
|
flex:1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-results {
|
.no-results {
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-results > span {
|
.no-results > span {
|
||||||
font-style:italic;
|
font-style:italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.header {
|
div.header {
|
||||||
display:flex;
|
display:flex;
|
||||||
padding-top:1em;
|
padding-top:1em;
|
||||||
margin-bottom:1em;
|
margin-bottom:1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.header button {
|
div.header button {
|
||||||
margin-left:1em;
|
margin-left:1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-height: 2.5em;
|
max-height: 2.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
timespan {
|
timespan {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transition: left 0.5s;
|
transition: left 0.5s;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
timespan.menuVisible {
|
timespan.menuVisible {
|
||||||
left: 22rem;
|
left: 22rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host ::ng-deep .timespan div.clearfix {
|
:host ::ng-deep .timespan div.clearfix {
|
||||||
transition: height 0.5s;
|
transition: height 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host ::ng-deep .menu .side-panel {
|
|
||||||
z-index: 100;
|
@media screen and (min-width:44rem) {
|
||||||
background-color: rgb(245,245,245);
|
.panel-top {
|
||||||
}
|
height: 8.1rem;
|
||||||
|
}
|
||||||
@media screen and (min-width:44rem) {
|
}
|
||||||
.panel-top {
|
|
||||||
height: 8.1rem;
|
.map {
|
||||||
}
|
transition: margin-left 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.map {
|
.shortcut-icon {
|
||||||
transition: margin-left 0.3s;
|
display: inline-block;
|
||||||
}
|
text-align: center;
|
||||||
|
margin: 0.5rem;
|
||||||
.shortcut-icon {
|
cursor:pointer;
|
||||||
display: inline-block;
|
}
|
||||||
text-align: center;
|
|
||||||
margin: 0.5rem;
|
.shortcut-icon > .icon {
|
||||||
cursor:pointer;
|
width: 3rem;
|
||||||
}
|
height: 3rem;
|
||||||
|
background-color: #731e64;
|
||||||
.shortcut-icon > .icon {
|
display: inline-block;
|
||||||
width: 3rem;
|
text-align: center;
|
||||||
height: 3rem;
|
line-height: 3rem;
|
||||||
background-color: #731e64;
|
color: #ffffff;
|
||||||
display: inline-block;
|
font-size: 2rem;
|
||||||
text-align: center;
|
}
|
||||||
line-height: 3rem;
|
|
||||||
color: #ffffff;
|
.shortcut-icon > .caption {
|
||||||
font-size: 2rem;
|
text-align: center;
|
||||||
}
|
width: 4rem;
|
||||||
|
overflow: hidden;
|
||||||
.shortcut-icon > .caption {
|
text-overflow: ellipsis;
|
||||||
text-align: center;
|
color: theme-color();
|
||||||
width: 4rem;
|
}
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
.shortcut-icon > .farm-icon {
|
||||||
color: theme-color();
|
background-color: #731E64;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shortcut-icon > .farm-icon {
|
.shortcut-icon > .trijntje-icon {
|
||||||
background-color: #731E64;
|
background-color: #FAA33F;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shortcut-icon > .trijntje-icon {
|
/*.panel-visible {
|
||||||
background-color: #FAA33F;
|
margin-left:22rem;
|
||||||
}
|
}*/
|
||||||
|
|
||||||
/*.panel-visible {
|
|
||||||
margin-left:22rem;
|
|
||||||
}*/
|
|
||||||
|
@ -138,7 +138,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
|||||||
this.clearEnabled$ = this.store.select(mapReducers.selectGetClearEnabled);
|
this.clearEnabled$ = this.store.select(mapReducers.selectGetClearEnabled);
|
||||||
this.searchCollapsed$ = this.store.select(mapReducers.selectGetSearchCollapsed);
|
this.searchCollapsed$ = this.store.select(mapReducers.selectGetSearchCollapsed);
|
||||||
this.searchMinified$ = this.store.select(mapReducers.selectGetSearchMinified);
|
this.searchMinified$ = this.store.select(mapReducers.selectGetSearchMinified);
|
||||||
this.menuVisible$ = this.store.select(mapReducers.selectGetMenuVisible);
|
|
||||||
this.openedModalName$ = this.store.select(commonReducers.selectOpenedModalName);
|
this.openedModalName$ = this.store.select(commonReducers.selectOpenedModalName);
|
||||||
this.query$ = this.store.select(mapReducers.selectGetQuery);
|
this.query$ = this.store.select(mapReducers.selectGetQuery);
|
||||||
this.extent$ = this.store.select(mapReducers.selectGetExtent);
|
this.extent$ = this.store.select(mapReducers.selectGetExtent);
|
||||||
@ -213,7 +212,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleToggleMenu(event) {
|
handleToggleMenu(event) {
|
||||||
this.store.dispatch(new mapActions.ToggleMenu());
|
this.store.dispatch(new commonActions.ToggleMenu());
|
||||||
}
|
}
|
||||||
|
|
||||||
handleToggleBaseLayers(event:MouseEvent) {
|
handleToggleBaseLayers(event:MouseEvent) {
|
||||||
|
@ -104,7 +104,7 @@ export class MapEffects {
|
|||||||
ofType(mapActions.STARTSEARCHSUCCESS),
|
ofType(mapActions.STARTSEARCHSUCCESS),
|
||||||
mergeMap((action: mapActions.StartSearchSuccess) => {
|
mergeMap((action: mapActions.StartSearchSuccess) => {
|
||||||
if (action.query.bboxFilter) {
|
if (action.query.bboxFilter) {
|
||||||
return [];
|
return [new commonActions.SetMenuVisible(false)];
|
||||||
} else {
|
} else {
|
||||||
var extent = createEmpty();
|
var extent = createEmpty();
|
||||||
|
|
||||||
@ -114,7 +114,7 @@ export class MapEffects {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
//return [];
|
//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,
|
selectedItem:IItem,
|
||||||
clearEnabled: boolean,
|
clearEnabled: boolean,
|
||||||
searchCollapsed: boolean,
|
searchCollapsed: boolean,
|
||||||
searchMinified: boolean,
|
searchMinified: boolean,
|
||||||
menuVisible: boolean,
|
|
||||||
extent: number[],
|
extent: number[],
|
||||||
baseLayers: Array<IItemLayer>
|
baseLayers: Array<IItemLayer>
|
||||||
overlayLayers: Array<IItemLayer>,
|
overlayLayers: Array<IItemLayer>,
|
||||||
@ -79,7 +78,6 @@ export const initialState: State = {
|
|||||||
clearEnabled: false,
|
clearEnabled: false,
|
||||||
searchCollapsed: true,
|
searchCollapsed: true,
|
||||||
searchMinified:false,
|
searchMinified:false,
|
||||||
menuVisible: true,
|
|
||||||
extent: null,
|
extent: null,
|
||||||
baseLayers: [],
|
baseLayers: [],
|
||||||
overlayLayers: [],
|
overlayLayers: [],
|
||||||
@ -165,8 +163,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
|||||||
selectedItemLayer:null,
|
selectedItemLayer:null,
|
||||||
queryState: tassign(a.queryState),
|
queryState: tassign(a.queryState),
|
||||||
searchCollapsed: false,
|
searchCollapsed: false,
|
||||||
searchMinified: true,
|
searchMinified: true
|
||||||
menuVisible:false
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
case mapActions.DOQUERY: {
|
case mapActions.DOQUERY: {
|
||||||
@ -181,7 +178,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
|||||||
return tassign(state, {
|
return tassign(state, {
|
||||||
panelVisible: true,
|
panelVisible: true,
|
||||||
selectedFeature: a.feature,
|
selectedFeature: a.feature,
|
||||||
menuVisible: false,
|
|
||||||
extent: a.feature.getGeometry().getExtent(),
|
extent: a.feature.getGeometry().getExtent(),
|
||||||
searchCollapsed: false,
|
searchCollapsed: false,
|
||||||
clearEnabled:true,
|
clearEnabled:true,
|
||||||
@ -207,9 +203,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
|||||||
case mapActions.COLLAPSESEARCH: {
|
case mapActions.COLLAPSESEARCH: {
|
||||||
return tassign(state, { searchCollapsed: state.panelVisible ? false: true});
|
return tassign(state, { searchCollapsed: state.panelVisible ? false: true});
|
||||||
}
|
}
|
||||||
case mapActions.TOGGLEMENU: {
|
|
||||||
return tassign(state, { menuVisible: !state.menuVisible });
|
|
||||||
}
|
|
||||||
case mapActions.SETEXTENT: {
|
case mapActions.SETEXTENT: {
|
||||||
let a = action as mapActions.SetExtent;
|
let a = action as mapActions.SetExtent;
|
||||||
return tassign(state, { extent: a.extent });
|
return tassign(state, { extent: a.extent });
|
||||||
@ -310,7 +303,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
|
|||||||
clearEnabled: false,
|
clearEnabled: false,
|
||||||
searchCollapsed: true,
|
searchCollapsed: true,
|
||||||
searchMinified: false,
|
searchMinified: false,
|
||||||
menuVisible:false,
|
|
||||||
features: [],
|
features: [],
|
||||||
query:initialState.query
|
query:initialState.query
|
||||||
});
|
});
|
||||||
@ -335,7 +327,6 @@ export const getQueryState = (state: State) => state.queryState;
|
|||||||
export const getClearEnabled = (state: State) => state.clearEnabled;
|
export const getClearEnabled = (state: State) => state.clearEnabled;
|
||||||
export const getSearchCollapsed = (state: State) => state.searchCollapsed;
|
export const getSearchCollapsed = (state: State) => state.searchCollapsed;
|
||||||
export const getSearchMinified = (state: State) => state.searchMinified;
|
export const getSearchMinified = (state: State) => state.searchMinified;
|
||||||
export const getMenuVisible = (state: State) => state.menuVisible;
|
|
||||||
export const getExtent = (state: State) => state.extent;
|
export const getExtent = (state: State) => state.extent;
|
||||||
export const getOverlayLayers = (state: State) => state.overlayLayers;
|
export const getOverlayLayers = (state: State) => state.overlayLayers;
|
||||||
export const getBaseLayers = (state: State) => state.baseLayers;
|
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 selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);
|
||||||
export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed);
|
export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed);
|
||||||
export const selectGetSearchMinified = createSelector(selectMapState, getSearchMinified);
|
export const selectGetSearchMinified = createSelector(selectMapState, getSearchMinified);
|
||||||
export const selectGetMenuVisible = createSelector(selectMapState, getMenuVisible);
|
|
||||||
export const selectGetExtent = createSelector(selectMapState, getExtent);
|
export const selectGetExtent = createSelector(selectMapState, getExtent);
|
||||||
export const selectGetOverlayLayers = createSelector(selectMapState, getOverlayLayers);
|
export const selectGetOverlayLayers = createSelector(selectMapState, getOverlayLayers);
|
||||||
export const selectGetBaseLayers = createSelector(selectMapState, getBaseLayers);
|
export const selectGetBaseLayers = createSelector(selectMapState, getBaseLayers);
|
||||||
|
Loading…
Reference in New Issue
Block a user