Merge branch 'develop'

# Conflicts:
#	package-lock.json
#	package.json

.eslintrc.js

@@ -18,6 +18,5 @@ module.exports = {
         "@typescript-eslint"
     ],
     "rules": {
-        "@typescript-eslint/no-explicit-any": "off"
     }
 }

package.json

@@ -66,11 +66,11 @@
     "@types/arcgis-rest-api": "^10.4.5",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "^2.0.9",
-    "@types/node": "^18.11.6",
+    "@types/node": "^12.20.15",
     "@typescript-eslint/eslint-plugin": "^6.18.0",
     "@typescript-eslint/eslint-plugin-tslint": "^6.18.0",
     "@typescript-eslint/parser": "^6.18.0",
-    "codelyzer": "^6.0.2",
+    "codelyzer": "^0.0.28",
     "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.27.5",

projects/common-map/.eslintrc.js

@@ -18,6 +18,5 @@ module.exports = {
         "@typescript-eslint"
     ],
     "rules": {
-        "@typescript-eslint/no-explicit-any": "off"
     }
 }

projects/common-map/src/fm-map/actions/map.actions.ts

@@ -1,12 +1,13 @@
 import { Action } from '@ngrx/store';
 
-import { IItem, IQueryState } from '@farmmaps/common';
+import { IMapState } from '../models/map.state';
-import { Feature } from 'ol';
-import { Geometry } from 'ol/geom';
-import { Style } from 'ol/style';
 import { IItemLayer } from '../models/item.layer';
 import { ILayervalue } from '../models/layer.value';
-import { IMapState } from '../models/map.state';
+import { IQueryState } from '@farmmaps/common';
+import { IItem } from '@farmmaps/common';
+import { Feature } from 'ol';
+import { Style } from 'ol/style';
+import { Geometry } from 'ol/geom';
 import { IPeriodState } from '../models/period.state';
 
 export const SETSTATE = '[Map] SetState';
@@ -157,7 +158,7 @@ export class PreviousTemporal implements Action {
 export class SelectTemporal implements Action {
   readonly type = SELECTTEMPORAL;
 
-  constructor() { }
+  constructor(item:IItem) { }
 }
 
 export class AddFeatureSuccess implements Action {

projects/common-map/src/fm-map/common-map-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { MapComponent } from './components/map/map.component';
+import { AuthGuard } from '@farmmaps/common';
 
 const routes = [
     {

projects/common-map/src/fm-map/common-map.module.ts

@@ -1,78 +1,78 @@
+import { NgModule ,ModuleWithProviders} from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 //external modules
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { EffectsModule } from '@ngrx/effects';
-import { ActionReducer, MetaReducer, StoreModule } from '@ngrx/store';
 import { AngularOpenlayersModule } from 'ng-openlayers';
+import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 
 //common modules
-import { AppCommonModule, ItemTypeService } from '@farmmaps/common';
+import { AppCommonModule } from '@farmmaps/common';
 
-import * as mapActions from './actions/map.actions';
-import * as mapEffects from './effects/map.effects';
 import { MODULE_NAME } from './module-name';
 import * as mapReducers from './reducers/map.reducer';
+import * as mapActions from './actions/map.actions';
+import * as mapEffects from './effects/map.effects';
 
-import { IClickedFeature } from './models/clicked.feature';
-import { IItemLayer, ItemLayer, ITemporalItemLayer, TemporalItemLayer } from './models/item.layer';
 import { IMapState} from './models/map.state';
-import { IPeriodState } from './models/period.state';
 import { ISelectedFeatures } from './models/selected.features';
+import { IItemLayer,ItemLayer,ITemporalItemLayer,TemporalItemLayer } from './models/item.layer';
+import { IClickedFeature } from './models/clicked.feature';
+import { IPeriodState } from './models/period.state';
 
 // components
-import { MapRoutingModule } from './common-map-routing.module';
-import { FileDropTargetComponent } from './components/aol/file-drop-target/file-drop-target.component';
 import { GpsLocation} from './components/aol/gps-location/gps-location.component';
-import { ItemLayersComponent } from './components/aol/item-layers/item-layers.component';
-import { ItemVectorSourceComponent } from './components/aol/item-vector-source/item-vector-source.component';
-import { LayerListComponent } from './components/aol/layer-list/layer-list.component';
-import { LayerValuesComponent } from './components/aol/layer-values/layer-values.component';
-import { LayerVectorImageComponent } from './components/aol/layer-vector-image/layer-vector-image.component';
-import { PanToLocation } from './components/aol/pan-to-location/pan-to-location.component';
-import { RotationResetComponent } from './components/aol/rotation-reset/rotation-reset.component';
-import { ZoomToExtentComponent } from './components/aol/zoom-to-extent/zoom-to-extent.component';
-import { FeatureListContainerComponent } from './components/feature-list-container/feature-list-container.component';
-import { FeatureListCropfieldComponent } from './components/feature-list-cropfield/feature-list-cropfield.component';
-import { FeatureListCroppingschemeComponent } from './components/feature-list-croppingscheme/feature-list-croppingscheme.component';
-import { FeatureListFeatureContainerComponent } from './components/feature-list-feature-container/feature-list-feature-container.component';
 import {FeatureListFeatureCropfieldComponent } from './components/feature-list-feature-cropfield/feature-list-feature-cropfield.component';
 import { FeatureListFeatureCroppingschemeComponent} from './components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component';
-import { AbstractFeatureListFeatureComponent, FeatureListFeatureComponent } from './components/feature-list-feature/feature-list-feature.component';
-import { AbstractFeatureListComponent, FeatureListComponent } from './components/feature-list/feature-list.component';
-import { GeometryThumbnailComponent } from './components/feature-thumbnail/feature-thumbnail.component';
-import { ForChild } from './components/for-item/for-child.decorator';
-import { ForItemType } from './components/for-item/for-itemtype.decorator';
-import { ForPackage } from './components/for-item/for-package.decorator';
-import { ForSourceTask } from './components/for-item/for-sourcetask.decorator';
-import { ifZoomToShowDirective } from './components/if-zoom-to-show/if-zoom-to-show.directive';
-import { ItemListItemContainerComponent } from './components/item-list-item-container/item-list-item-container.component';
-import { AbstractItemListItemComponent, AbstractItemWidgetComponent, ItemListItemComponent } from './components/item-list-item/item-list-item.component';
-import { AbstractItemListComponent, ItemListComponent } from './components/item-list/item-list.component';
 import { ItemWidgetListComponent} from './components/item-widget-list/item-widget-list.component';
-import { LayerSwitcher } from './components/layer-switcher/layer-switcher.component';
+import { AbstractItemListItemComponent, ItemListItemComponent, AbstractItemWidgetComponent } from './components/item-list-item/item-list-item.component';
-import { HistogramDetailsComponent } from './components/legend/histogram-details/histogram-details.component';
+import { ItemListItemContainerComponent } from './components/item-list-item-container/item-list-item-container.component';
-import { LegendComponent } from './components/legend/legend.component';
+import { AbstractItemListComponent,ItemListComponent} from './components/item-list/item-list.component';
-import { StatisticsDetailsComponent } from './components/legend/statistics-details/statistics-details.component';
+import { AbstractSelectedItemComponent, SelectedItemComponent } from './components/selected-item/selected-item.component';
-import { MapSearchComponent } from './components/map-search/map-search.component';
-import { MapComponent } from './components/map/map.component';
-import { MetaDataModalComponent } from './components/meta-data-modal/meta-data-modal.component';
-import { SelectPeriodModalComponent } from './components/select-period-modal/select-period-modal.component';
-import { SelectedItemContainerComponent } from './components/selected-item-container/selected-item-container.component';
 import { SelectedItemCropfieldComponent } from './components/selected-item-cropfield/selected-item-cropfield.component';
 import { SelectedItemGeotiffComponent } from './components/selected-item-geotiff/selected-item-geotiff.component';
-import { SelectedItemShapeComponent } from './components/selected-item-shape/selected-item-shape.component';
 import { SelectedItemTemporalComponent} from './components/selected-item-temporal/selected-item-temporal.component';
-import { AbstractSelectedItemComponent, SelectedItemComponent } from './components/selected-item/selected-item.component';
+import {SelectedItemShapeComponent } from './components/selected-item-shape/selected-item-shape.component';
+import { SelectedItemContainerComponent } from './components/selected-item-container/selected-item-container.component';
+import { AbstractFeatureListFeatureComponent, FeatureListFeatureComponent } from './components/feature-list-feature/feature-list-feature.component';
+import {FeatureListFeatureContainerComponent } from './components/feature-list-feature-container/feature-list-feature-container.component';
+import { FeatureListCroppingschemeComponent } from './components/feature-list-croppingscheme/feature-list-croppingscheme.component';
+import {FeatureListCropfieldComponent  } from './components/feature-list-cropfield/feature-list-cropfield.component';
+import {FeatureListContainerComponent } from './components/feature-list-container/feature-list-container.component';
 import { WidgetHostDirective} from './components/widget-host/widget-host.directive';
-import { WidgetStatusComponent } from './components/widget-status/widget-status.component';
+import { FeatureListComponent,AbstractFeatureListComponent} from './components/feature-list/feature-list.component';
-import { ZoomToShowAlert } from './components/zoom-to-show-alert/zoom-to-show-alert.component';
+import { FileDropTargetComponent } from './components/aol/file-drop-target/file-drop-target.component';
-import { DeviceOrientationService } from './services/device-orientation.service';
+import { ItemVectorSourceComponent } from './components/aol/item-vector-source/item-vector-source.component';
+import { ItemLayersComponent } from './components/aol/item-layers/item-layers.component';
+import { ZoomToExtentComponent } from './components/aol/zoom-to-extent/zoom-to-extent.component';
+import { RotationResetComponent } from './components/aol/rotation-reset/rotation-reset.component';
+import { LayerListComponent } from './components/aol/layer-list/layer-list.component';
+import { MetaDataModalComponent } from './components/meta-data-modal/meta-data-modal.component';
+import { SelectPeriodModalComponent } from './components/select-period-modal/select-period-modal.component';
+import { MapComponent } from './components/map/map.component';
+import { MapSearchComponent } from './components/map-search/map-search.component';
+import { MapRoutingModule } from './common-map-routing.module';
+import { LegendComponent } from './components/legend/legend.component';
+import { LayerVectorImageComponent } from './components/aol/layer-vector-image/layer-vector-image.component';
 import {FeatureIconService} from './services/feature-icon.service';
 import { GeolocationService } from './services/geolocation.service';
+import {DeviceOrientationService} from './services/device-orientation.service';
 import { TemporalService} from './services/temporal.service';
+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 { ForPackage } from './components/for-item/for-package.decorator';
+import { PanToLocation} from './components/aol/pan-to-location/pan-to-location.component';
+import {LayerSwitcher} from './components/layer-switcher/layer-switcher.component';
+import {HistogramDetailsComponent} from './components/legend/histogram-details/histogram-details.component';
+import {StatisticsDetailsComponent} from './components/legend/statistics-details/statistics-details.component';
+import { ifZoomToShowDirective} from './components/if-zoom-to-show/if-zoom-to-show.directive';
+import { ZoomToShowAlert} from './components/zoom-to-show-alert/zoom-to-show-alert.component';
+import { LayerValuesComponent } from './components/aol/layer-values/layer-values.component';
+import { GeometryThumbnailComponent } from './components/feature-thumbnail/feature-thumbnail.component';
 
 export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
   const r = function(state, action) {
@@ -104,13 +104,70 @@ export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any
 const metaReducers: Array<MetaReducer<any, any>> = [LocalStorageSync];
 
 export {
+  mapEffects,
+  mapReducers,
+  mapActions,
+  ZoomToExtentComponent,
+  ItemVectorSourceComponent,
+  ItemLayersComponent,
+  FileDropTargetComponent,
+  MapComponent,
+  MetaDataModalComponent,
+  RotationResetComponent,
+  MapSearchComponent,
+  SelectPeriodModalComponent,
+  LayerListComponent,
+  LegendComponent,
+  LayerVectorImageComponent,
+  FeatureListComponent,
+  WidgetHostDirective,
+  FeatureListContainerComponent,
+  FeatureListCroppingschemeComponent,
+  FeatureListCropfieldComponent,
+  FeatureListFeatureContainerComponent,
+  FeatureListFeatureComponent,
+  FeatureListFeatureCroppingschemeComponent,
+  FeatureListFeatureCropfieldComponent,
+  SelectedItemContainerComponent,
+  SelectedItemComponent,
+  SelectedItemCropfieldComponent,
+  SelectedItemGeotiffComponent,
+  SelectedItemTemporalComponent,
+  SelectedItemShapeComponent,
+  ItemListItemComponent,
+  ItemListItemContainerComponent,
+  ItemListComponent,
+  ItemWidgetListComponent,
+  WidgetStatusComponent,
+  GpsLocation,
+  PanToLocation,
+  LayerSwitcher,
   AbstractFeatureListComponent,
-  AbstractFeatureListFeatureComponent, AbstractItemListComponent, AbstractItemListItemComponent, AbstractItemWidgetComponent, AbstractSelectedItemComponent, DeviceOrientationService, FeatureIconService, FeatureListComponent, FeatureListContainerComponent, FeatureListCropfieldComponent, FeatureListCroppingschemeComponent, FeatureListFeatureComponent, FeatureListFeatureContainerComponent, FeatureListFeatureCropfieldComponent, FeatureListFeatureCroppingschemeComponent, FileDropTargetComponent, ForChild,
+  AbstractFeatureListFeatureComponent,
-  ForItemType, ForPackage, ForSourceTask, GeolocationService, GeometryThumbnailComponent, GpsLocation, IClickedFeature, ifZoomToShowDirective, IItemLayer, IMapState, IPeriodState, ISelectedFeatures, ItemLayer, ItemLayersComponent, ItemListComponent, ItemListItemComponent,
+  AbstractSelectedItemComponent,
-  ItemListItemContainerComponent, ITemporalItemLayer, ItemVectorSourceComponent, ItemWidgetListComponent, LayerListComponent, LayerSwitcher, LayerVectorImageComponent, LegendComponent, mapActions, MapComponent, mapEffects,
+  AbstractItemWidgetComponent,
-  mapReducers, MapSearchComponent, MetaDataModalComponent, PanToLocation, RotationResetComponent, SelectedItemComponent, SelectedItemContainerComponent, SelectedItemCropfieldComponent,
+  AbstractItemListItemComponent,
-  SelectedItemGeotiffComponent, SelectedItemShapeComponent, SelectedItemTemporalComponent, SelectPeriodModalComponent, TemporalItemLayer, TemporalService, WidgetHostDirective, WidgetStatusComponent, ZoomToExtentComponent, ZoomToShowAlert
+  AbstractItemListComponent,
-};
+  FeatureIconService,
+  GeolocationService,
+  DeviceOrientationService,
+  TemporalService,
+  IMapState,
+  ISelectedFeatures,
+  IItemLayer,
+  ItemLayer,
+  IPeriodState,
+  ForChild,
+  ForItemType,
+  ForSourceTask,
+  ForPackage ,
+  ITemporalItemLayer,
+  TemporalItemLayer,
+  ifZoomToShowDirective,
+  ZoomToShowAlert,
+  IClickedFeature,
+  GeometryThumbnailComponent
+}
 
 @NgModule({
     imports: [
@@ -212,7 +269,6 @@ export {
         GeolocationService,
         DeviceOrientationService,
         TemporalService,
-    ItemTypeService,
         { provide: AbstractFeatureListComponent, useClass: FeatureListCroppingschemeComponent, multi: true },
         { provide: AbstractFeatureListComponent, useClass: FeatureListCropfieldComponent, multi: true },
         { provide: AbstractFeatureListFeatureComponent, useClass: FeatureListFeatureComponent, multi: true },
@@ -228,5 +284,6 @@ export {
     ]
 })
 
+
 export class AppCommonMapModule {  
 }

projects/common-map/src/fm-map/components/aol/file-drop-target/file-drop-target.component.ts

@@ -1,9 +1,10 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, EventEmitter, Output, Inject } from '@angular/core';
 import { MapComponent } from 'ng-openlayers';
 
-import { Feature } from 'ol';
+import * as proj  from 'ol/proj';
+import {Point,Geometry} from 'ol/geom';
 import { GeoJSON } from 'ol/format';
-import { Geometry, Point } from 'ol/geom';
+import { Feature} from 'ol';
 
 export interface IDroppedFile {
   files: any,
@@ -27,6 +28,7 @@ export class FileDropTargetComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.element = this.map.instance.getViewport();
+    const other = this;
     this.element.addEventListener('drop', this.onDrop, false);
     this.element.addEventListener('dragover', this.preventDefault, false);
     this.element.addEventListener('dragenter', this.preventDefault, false);

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts

@@ -1,7 +1,7 @@
-import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges ,Host} from '@angular/core';
 import { MapComponent } from 'ng-openlayers';
 import  Overlay  from 'ol/Overlay';
-import { fromLonLat } from 'ol/proj';
+import { fromLonLat, toLonLat } from 'ol/proj';
 
 
 @Component({

projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts

@@ -1,21 +1,25 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, forwardRef } from '@angular/core';
+import { Component, Host, Input, Output, EventEmitter,OnDestroy, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
-import { AppConfig, IItem, ItemService } from '@farmmaps/common';
 import { LayerGroupComponent, MapComponent } from 'ng-openlayers';
-import Feature from 'ol/Feature';
+import { ItemService,IItem,AppConfig } from '@farmmaps/common';
-import { Extent } from 'ol/extent';
-import { GeoJSON, MVT } from 'ol/format';
-import { Geometry } from 'ol/geom';
-import { Image, Layer, Tile, VectorImage as VectorImageLayer, Vector as VectorLayer } from 'ol/layer';
-import VectorTileLayer from 'ol/layer/VectorTile';
-import * as loadingstrategy from 'ol/loadingstrategy';
-import * as proj from 'ol/proj';
-import Projection from 'ol/proj/Projection';
-import { BingMaps, ImageStatic, OSM, Source, TileArcGISRest, TileJSON, TileWMS, Vector as VectorSource, XYZ } from 'ol/source';
-import VectorTileSource from 'ol/source/VectorTile';
-import * as style from 'ol/style';
-import { IColor, IGradientstop, IHistogram, ILayer, IRenderoutputImage, IRenderoutputTiles } from '../../../models/color.map';
 import { IItemLayer, ITemporalItemLayer} from '../../../models/item.layer';
 import { ILayerData} from '../../../models/layer.data';
+import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram,IColor} from '../../../models/color.map';
+import {Extent} from 'ol/extent';
+import Projection from 'ol/proj/Projection';
+import * as proj from 'ol/proj';
+import * as loadingstrategy from 'ol/loadingstrategy';
+import * as style from 'ol/style';
+import {Tile,Layer,Image} from 'ol/layer';
+import {XYZ,ImageStatic,OSM,BingMaps,TileWMS,TileArcGISRest,TileJSON,Source} from 'ol/source';
+import {Vector as VectorSource} from 'ol/source';
+import { Vector as VectorLayer } from 'ol/layer';
+import { VectorImage as VectorImageLayer } from 'ol/layer';
+import VectorTileSource from 'ol/source/VectorTile';
+import VectorTileLayer from 'ol/layer/VectorTile';
+import {GeoJSON,MVT} from 'ol/format';
+import { Geometry } from 'ol/geom';
+import BaseLayer from 'ol/layer/Base';
+import Feature from 'ol/Feature';
 
 @Component({
   selector: 'fm-map-item-layers',
@@ -90,7 +94,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     return color;
   }
 
-  getColor(item: IItem, layer: any, feature): style.Style {
+  getColor(item: IItem, layer: ILayer, feature): style.Style {
     const value = layer.indexKey ? feature.get(layer.indexKey) : feature.get(layer.name);
     const key = item.code + "_" + value;
     if (!this.styleCache[key]) {
@@ -149,7 +153,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     const data = item.data;
     const l:ILayer = (data && data.layers && data.layers.length > 0) ? data.layers[layerIndex] : null;
     if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") {
-      const rt = l.rendering as IRenderoutputTiles;
+      var rt = l.rendering as IRenderoutputTiles;
       layer = new VectorTileLayer({
         declutter: true,
         source: new VectorTileSource({
@@ -163,7 +167,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
         }
       })
     } else if (l && l.rendering && l.rendering.renderoutputType == "Tiles") {
-      const rt = l.rendering as IRenderoutputTiles;
+      var rt = l.rendering as IRenderoutputTiles;
       layer = new Tile({
         source: new XYZ({
           maxZoom: rt.maxzoom,
@@ -172,12 +176,11 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
         })
       });
     } else {
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
       const __this = this;
       const format = new GeoJSON();
       const source = new VectorSource({
         strategy: loadingstrategy.bbox,
-        loader: function (extent: Extent, _resolution: number, projection: Projection) {
+        loader: function (extent: Extent, resolution: number, projection: Projection) {
           const source = this as VectorSource<Feature<Geometry>>;
           __this.itemService.getItemFeatures(item.code, extent, projection.getCode(), layerIndex).subscribe(function (data) {
             const features = format.readFeatures(data).filter(feature => feature instanceof Feature) as Feature[];
@@ -234,6 +237,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
 
   createSelectionLayer(itemLayer:IItemLayer):Layer<Source> {
     let layerIndex = -1;
+    const layer: Layer<Source> = null; 
     layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index;
     const data = itemLayer.item.data;
     const l:ILayer = (data && data.layers && data.layers.length > 0) ? data.layers[layerIndex] : null;
@@ -261,8 +265,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     return null;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  createExternalLayer(item:IItem,itemLayer:IItemLayer):Layer<Source> {
-  createExternalLayer(item:IItem,_itemLayer:IItemLayer):Layer<Source> {
     const data = item.data as ILayerData;
     let layer: Layer<Source> = null; 
     switch (data.interfaceType) {
@@ -316,6 +319,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
 
   createLayer(itemLayer: IItemLayer): Layer<Source> {
     let layer: Layer<Source> = null;   
+    const layerIndex = -1;
     if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.geotiff.processed') {
       layer = this.createGeotiffLayer(itemLayer.item,itemLayer);
     } else if (itemLayer.item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
@@ -375,6 +379,10 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     if(this.topLayerPrerenderEventhandlerInstalled && this.onPrerender.observers.length > 0 )
     {
       if(this.instance.getVisible()) {
+        const olLayers = this.instance.getLayers().getArray().forEach((l:any) => {
+          l.un('prerender',this.topLayerPrerenderEventhandler);
+          l.un('postrender',this.topLayerPostrenderEventhandler);
+        });
         this.topLayerPrerenderEventhandlerInstalled = false;
       }
     }
@@ -407,15 +415,17 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
 
   updateLayers(itemLayers: IItemLayer[] | IItemLayer) {
     this.unInstallTopLayerPrerenderEventhandler();
+    let dataLayer = false;
     let ils:IItemLayer[] = [];
     if(Array.isArray(itemLayers)) {
        ils = itemLayers;
     } else {
+      dataLayer=true;
        ils=[itemLayers];
     }
     const newLayers: Layer<Source>[] = [];
     if (ils) {
-      ils.forEach((itemLayer) => {
+      ils.forEach((itemLayer, index) => {
         if(itemLayer.item.itemType ==  'vnd.farmmaps.itemtype.temporal') {
           const il = itemLayer as ITemporalItemLayer;
           const previousLayer = this.addOrUpdateOlLayer(il.previousItemLayer,newLayers.length);          

projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts

@@ -1,22 +1,25 @@
-import { Component, EventEmitter, Host, Inject, Input, LOCALE_ID, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, forwardRef } from '@angular/core';
+import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken, OnDestroy, LOCALE_ID } from '@angular/core';
-import { FolderService, IItem, ItemService, ItemTypeService } from '@farmmaps/common';
+import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ng-openlayers';
-import { LayerVectorComponent, MapComponent, SourceVectorComponent } from 'ng-openlayers';
+import { ItemService, ItemTypeService, IItem, IItemType, FolderService } from '@farmmaps/common';
 
-import { formatNumber } from '@angular/common';
+import { Feature } from 'ol';
-import { Feature, MapBrowserEvent } from 'ol';
+import { Point, Geometry } from 'ol/geom';
-import * as color from 'ol/color';
+import { MapBrowserEvent } from 'ol';
-import * as extent from 'ol/extent';
+import { Types } from 'ol/MapBrowserEventType';
-import { getCenter } from 'ol/extent';
-import { GeoJSON } from 'ol/format';
-import { Geometry, Point } from 'ol/geom';
-import { Select } from 'ol/interaction';
-import { Layer } from 'ol/layer';
-import * as loadingstrategy from 'ol/loadingstrategy';
-import { Source, Vector } from 'ol/source';
 import * as style from 'ol/style';
-import { Subscription } from 'rxjs';
+import * as color from 'ol/color';
+import * as loadingstrategy from 'ol/loadingstrategy';
+import * as condition from 'ol/events/condition';
+import * as extent from 'ol/extent';
+import { Vector, Cluster, Source } from 'ol/source';
+import { Layer } from 'ol/layer';
+import { GeoJSON } from 'ol/format';
+import { Select } from 'ol/interaction';
 import { IStyles } from '../../../models/style.cache';
 import { FeatureIconService } from '../../../services/feature-icon.service';
+import { Subscription } from 'rxjs';
+import { getCenter } from 'ol/extent';
+import { formatNumber } from '@angular/common';
 
 @Component({
   selector: 'fm-map-item-source-vector',
@@ -27,8 +30,10 @@ import { FeatureIconService } from '../../../services/feature-icon.service';
 })
 export class ItemVectorSourceComponent extends SourceVectorComponent implements OnInit, OnDestroy, OnChanges {
   instance: Vector<Feature<Geometry>>;
+  private _format: GeoJSON;
   private _select: Select;
   private _hoverSelect: Select;
+  private _iconScale = 0.05;
   @Input() features: Array<Feature<Geometry>>;
   @Input() selectedFeature: Feature<Geometry>;
   @Input() selectedItem: IItem;
@@ -41,6 +46,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
 
   constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService, private featureIconService$: FeatureIconService, private folderService: FolderService, @Inject(LOCALE_ID) private locale: string) {
     super(layer);
+    this._format = new GeoJSON();
   }
 
   geometry(feature: Feature<Geometry>) {
@@ -198,7 +204,6 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements
     if (changes["styles"]) {
       const styles = changes["styles"].currentValue;
       for (const key in styles) {
-        // eslint-disable-next-line no-prototype-builtins
         if (styles.hasOwnProperty(key)) {
           this.stylesCache[key] = styles[key];
         }

projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.ts

@@ -1,16 +1,17 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { IItemLayer } from '../../../models/item.layer';
 import { Store } from '@ngrx/store';
-import { MapComponent } from 'ng-openlayers';
-import { ClipboardService } from 'ngx-clipboard';
-import { toStringHDMS } from 'ol/coordinate';
-import { WKT } from 'ol/format';
-import { Point } from 'ol/geom';
-import { toLonLat } from 'ol/proj';
-import { Observable, Subject, interval } from 'rxjs';
-import { throttle } from 'rxjs/operators';
-import * as mapActions from '../../../actions/map.actions';
-import { ILayervalue } from '../../../models/layer.value';
 import * as mapReducers from '../../../reducers/map.reducer';
+import * as mapActions from '../../../actions/map.actions';
+import { MapComponent } from 'ng-openlayers';
+import { ILayervalue } from '../../../models/layer.value';
+import { Observable, interval, Subject } from 'rxjs';
+import { debounce, throttle } from 'rxjs/operators';
+import { toLonLat } from 'ol/proj';
+import { toStringHDMS } from 'ol/coordinate';
+import { ClipboardService } from 'ngx-clipboard'
+import { GeoJSON, WKT } from 'ol/format';
+import { Point } from 'ol/geom';
 
 @Component({
   selector: 'fm-map-layer-values',
@@ -44,7 +45,7 @@ export class LayerValuesComponent implements OnInit, AfterViewInit {
     this.map.instance.on('moveend', () => {
       this.moveEndSubject.next({});
     });
-    this.moveEndSubject.pipe(throttle(() => interval(100))).subscribe(() => this.updateValuesLocation());
+    this.moveEndSubject.pipe(throttle(ev => interval(100))).subscribe(() => this.updateValuesLocation());
   }
 
   updateValuesLocation() {

projects/common-map/src/fm-map/components/aol/pan-to-location/pan-to-location.component.ts

@@ -1,8 +1,8 @@
-import { ChangeDetectorRef, Component, Host, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Host, OnChanges, SimpleChanges,ChangeDetectorRef } from '@angular/core';
 import { MapComponent } from 'ng-openlayers';
+import {IMapState} from '../../../models/map.state'
 import {View} from 'ol';
 import { fromLonLat } from 'ol/proj';
-import { IMapState } from '../../../models/map.state';
 
 
 @Component({
@@ -29,7 +29,7 @@ export class PanToLocation  implements OnInit,OnChanges{
     });
   }
 
-  ngOnChanges() {
+  ngOnChanges(changes: SimpleChanges) {
     // if (changes.position && this.instance) {
     //   var p = changes.position.currentValue as Position;
     //   this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
@@ -64,17 +64,17 @@ export class PanToLocation  implements OnInit,OnChanges{
       const newCenter = fromLonLat([this.position.coords.longitude,this.position.coords.latitude]);
       const extent = [newCenter[0]-500,newCenter[1]-500,newCenter[0]+500,newCenter[1]+500];
       const options = { padding: [0, 0, 0, 0],minResolution:1 };
-      //const size = this.map.instance.getSize();
+      const size = this.map.instance.getSize();
-      //const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-      //const threshold = 44 * rem;
+      const threshold = 44 * rem;
-      //let left = 1 * rem;
+      let left = 1 * rem;
-      //const right = 1 * rem;
+      const right = 1 * rem;
-      //let bottom = Math.round(size[1] / 2);
+      let bottom = Math.round(size[1] / 2);
-      //const top = 1 * rem;
+      const top = 1 * rem;
-      //if (size[0] > threshold) {
+      if (size[0] > threshold) {
-      //  bottom = 1 * rem;
+        bottom = 1 * rem;
-      //  left = 23 * rem;
+        left = 23 * rem;
-      //}
+      }
       //options.padding = [top, right, bottom, left];
       if (this.animate) options["duration"] = 2000;
       view.fit(extent, options);  

projects/common-map/src/fm-map/components/aol/rotation-reset/rotation-reset.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Component, Host, Input, OnInit, ChangeDetectorRef  } from '@angular/core';
-import { MapComponent } from 'ng-openlayers';
+import { ViewComponent, MapComponent } from 'ng-openlayers';
 
 import {View} from 'ol';
 

projects/common-map/src/fm-map/components/aol/zoom-to-extent/zoom-to-extent.component.ts

@@ -1,6 +1,6 @@
-import { Component, Host, Input, OnChanges } from '@angular/core';
+import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
 import { ActivatedRoute  } from '@angular/router';
-import { MapComponent, ViewComponent } from 'ng-openlayers';
+import { ViewComponent, MapComponent } from 'ng-openlayers';
 
  
 @Component({
@@ -30,7 +30,7 @@ export class ZoomToExtentComponent implements OnChanges {
     }
   }
 
-  ngOnChanges() {
+  ngOnChanges(changes: SimpleChanges) {
     if (this.extent) {
       const options = { padding: [0, 0, 0, 0],minResolution:1 };
       const size = this.map.instance.getSize();

projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts

@@ -1,13 +1,13 @@
-import { Component, ComponentFactory, ComponentFactoryResolver, Inject, Input, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject} from '@angular/core';
-import { IQueryState } from '@farmmaps/common';
-import { Store } from '@ngrx/store';
 import { Feature } from 'ol';
 import { Geometry} from 'ol/geom';
-import { Observable } from 'rxjs';
+import { FeatureListComponent,AbstractFeatureListComponent } from '../feature-list/feature-list.component';
-import * as mapActions from '../../actions/map.actions';
-import * as mapReducers from '../../reducers/map.reducer';
-import { AbstractFeatureListComponent, FeatureListComponent } from '../feature-list/feature-list.component';
 import { WidgetHostDirective } from '../widget-host/widget-host.directive';
+import  {IQueryState,PackageService } from '@farmmaps/common';
+import * as mapReducers from '../../reducers/map.reducer';
+import * as mapActions from '../../actions/map.actions';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
 
 
 @Component({
@@ -17,7 +17,7 @@ import { WidgetHostDirective } from '../widget-host/widget-host.directive';
 })
 export class FeatureListContainerComponent {
 
-  constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[]) {
+  constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[],private packageService:PackageService ) {
     this.featureLists = [...this.featureLists].reverse();
   }
 

projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html

@@ -5,7 +5,7 @@
     <h3>{{schemeItem.name}}</h3>
     <div *ngIf="features;let features">
         <div class="cropfields">
-          <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave()">
+          <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
           <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>

projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.ts

@@ -1,12 +1,12 @@
+import { Component, Injectable,AfterViewInit, OnInit,SimpleChanges, ChangeDetectorRef} from '@angular/core';
 import { Location } from '@angular/common';
-import { Component, Injectable, OnInit } from '@angular/core';
-import { IItem, ItemService, ItemTypeService, commonReducers } from '@farmmaps/common';
-import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
-import * as mapReducers from '../../reducers/map.reducer';
 import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
-import { ForChild } from '../for-item/for-child.decorator';
 import {ForItemType } from '../for-item/for-itemtype.decorator';
+import {ForChild } from '../for-item/for-child.decorator';
+import { Store } from '@ngrx/store';
+import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers, ItemTypeService, IItem,ItemService } from '@farmmaps/common';
+import { Observable } from 'rxjs';
 
 @ForChild()
 @ForItemType("vnd.farmmaps.itemtype.cropfield")

projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html

@@ -4,7 +4,7 @@
       <h3><i class="far fa-farm"></i>&nbsp;<span i18n>Farms</span></h3>
       <div *ngIf="features;let features">
       <div class="farms">
-        <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave()">
+        <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
           <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
         </div>
       </div>      

projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.ts

@@ -1,14 +1,15 @@
-import { Location } from '@angular/common';
 import { Component, Injectable } from '@angular/core';
-import { ItemTypeService, commonReducers } from '@farmmaps/common';
+import { Location } from '@angular/common';
-import { Action, Store } from '@ngrx/store';
-import { Feature } from 'ol';
-import { Geometry } from 'ol/geom';
-import { tassign } from 'tassign';
-import * as mapActions from '../../actions/map.actions';
-import * as mapReducers from '../../reducers/map.reducer';
 import { AbstractFeatureListComponent } from '../feature-list/feature-list.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
+import { Store,Action } from '@ngrx/store';
+import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers, ItemTypeService } from '@farmmaps/common';
+import * as mapActions from '../../actions/map.actions';
+import { tassign } from 'tassign';
+import { Router } from '@angular/router';
+import { Feature } from 'ol';
+import { Geometry} from 'ol/geom';
 
 @ForItemType("vnd.farmmaps.itemtype.croppingscheme")
 @Injectable()
@@ -19,7 +20,7 @@ import { ForItemType } from '../for-item/for-itemtype.decorator';
 })
 export class FeatureListCroppingschemeComponent extends AbstractFeatureListComponent {
 
-    constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location) {
+    constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, private router: Router) {
         super(store, itemTypeService, location);
     }
 

projects/common-map/src/fm-map/components/feature-list-feature-container/feature-list-feature-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentFactory, ComponentFactoryResolver, Inject, Input, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
 import { AbstractFeatureListFeatureComponent,FeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts

@@ -1,12 +1,12 @@
-import { Component, Injectable } from '@angular/core';
+import { Component, Injectable,ViewChild,AfterViewInit} from '@angular/core';
-import { AppConfig, ItemTypeService, commonReducers } from '@farmmaps/common';
-import { Store } from '@ngrx/store';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
-import { getArea } from 'ol/sphere';
+import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers,ItemTypeService,AppConfig } from '@farmmaps/common';
 import { AbstractFeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
+import {getArea} from 'ol/sphere';
 
 
 

projects/common-map/src/fm-map/components/feature-list-feature-croppingscheme/feature-list-feature-croppingscheme.component.ts

@@ -1,7 +1,8 @@
-import { Component, Injectable } from '@angular/core';
+import { Component, Input, Injectable} from '@angular/core';
-import { AppConfig, ItemTypeService, commonReducers } from '@farmmaps/common';
+import { Feature } from 'ol';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers,ItemTypeService,AppConfig } from '@farmmaps/common';
 import { AbstractFeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 

projects/common-map/src/fm-map/components/feature-list/feature-list.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="features;let features">
   <fm-back-button></fm-back-button>
-  <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave()">
+  <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
     <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
   </div>
 </div>

projects/common-map/src/fm-map/components/feature-list/feature-list.component.ts

@@ -1,12 +1,15 @@
+import { Component, Input, Injectable,Directive,SimpleChanges } from '@angular/core';
 import { Location } from '@angular/common';
-import { Component, Directive, Injectable, Input } from '@angular/core';
-import { IQueryState, ItemTypeService, commonReducers } from '@farmmaps/common';
-import { Action, Store } from '@ngrx/store';
 import { Feature } from 'ol';
 import { Geometry} from 'ol/geom';
-import { tassign } from 'tassign';
+import { Store,Action} from '@ngrx/store';
-import * as mapActions from '../../actions/map.actions';
 import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers,ItemTypeService, IItem, Item } from '@farmmaps/common';
+import * as mapActions from '../../actions/map.actions';
+import { Observable, from } from 'rxjs';
+import { withLatestFrom } from 'rxjs/operators';
+import { tassign } from 'tassign';
+import { IQueryState } from '@farmmaps/common';
 
 
 @Injectable()
@@ -34,11 +37,11 @@ export abstract class AbstractFeatureListComponent {
       return new mapActions.DoQuery(newQuery)  
   }
 
-  handleFeatureMouseEnter(feature:Feature<Geometry>) {
+  handleFeatureMouseEnter(feature) {
     this.store.dispatch(new mapActions.SelectFeature(feature));
   }
 
-  handleFeatureMouseLeave() {
+  handleFeatureMouseLeave(feature) {
     this.store.dispatch(new mapActions.SelectFeature(null));
   }
 

projects/common-map/src/fm-map/components/feature-thumbnail/feature-thumbnail.component.ts

@@ -1,7 +1,7 @@
-import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, AfterViewInit, ViewChild } from '@angular/core';
 import { Feature} from 'ol';
+import { Geometry,Polygon,MultiPolygon } from 'ol/geom';
 import * as extent from 'ol/extent';
-import { Geometry, Polygon } from 'ol/geom';
 import * as render from 'ol/render';
 import * as style from 'ol/style';
 

projects/common-map/src/fm-map/components/if-zoom-to-show/if-zoom-to-show.directive.ts

@@ -1,7 +1,7 @@
-import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnChanges } from '@angular/core';
-import { MapComponent } from 'ng-openlayers';
 import { Layer } from 'ol/layer';
 import { Source } from 'ol/source';
+import { MapComponent } from 'ng-openlayers';
 
 @Directive({
   selector: '[fmMapIfZoomToShow]',
@@ -36,7 +36,7 @@ export class ifZoomToShowDirective  implements OnInit {
   }
 
   ngOnInit() {    
-    this.map$.instance.on('moveend', () => {
+    this.map$.instance.on('moveend', (e) => {
       this.checkZoom();     
     });
   }

projects/common-map/src/fm-map/components/item-list-item-container/item-list-item-container.component.ts

@@ -1,7 +1,7 @@
-import { Component, ComponentFactory, ComponentFactoryResolver, Inject, Input, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
-import { IListItem } from '@farmmaps/common';
 import { AbstractItemListItemComponent,ItemListItemComponent } from '../item-list-item/item-list-item.component';
 import { WidgetHostDirective } from '../widget-host/widget-host.directive';
+import { IItem, IListItem } from '@farmmaps/common';
 
 
 @Component({
@@ -27,6 +27,7 @@ export class ItemListItemContainerComponent {
 
     let selected = -1;
     let maxMatches =0;
+    const showItem = true;
     for (let i = 0; i < this.itemComponentList.length; i++) {
       let matches=0;
       let criteria=0;

projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.ts

@@ -1,8 +1,8 @@
+import { Component, Input, Injectable, Inject, Optional,ComponentFactoryResolver, ViewContainerRef, QueryList, ComponentFactory, ViewChildren,AfterViewInit } from '@angular/core';
 import { Location } from '@angular/common';
-import { AfterViewInit, Component, ComponentFactory, ComponentFactoryResolver, Inject, Injectable, Input, Optional, QueryList, ViewChildren, ViewContainerRef } from '@angular/core';
-import { IListItem, ItemTypeService, commonReducers } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
 import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers,ItemTypeService, IItem, Item,IListItem } from '@farmmaps/common';
 import { AbstractItemWidgetComponent } from '../item-list-item/item-list-item.component';
 
 

projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.ts

@@ -1,10 +1,10 @@
-import { Component, OnChanges, OnInit } from '@angular/core';
+import { Component, OnInit,  OnChanges, SimpleChanges } from '@angular/core';
+import {IItemLayer} from '../../models/item.layer';
 import { Store } from '@ngrx/store';
+import * as mapReducers from '../../reducers/map.reducer';
+import * as mapActions from '../../actions/map.actions';
 import {createEmpty,extend } from 'ol/extent';
 import { Observable } from 'rxjs';
-import * as mapActions from '../../actions/map.actions';
-import { IItemLayer } from '../../models/item.layer';
-import * as mapReducers from '../../reducers/map.reducer';
 
 @Component({
   selector: 'fm-map-layer-switcher',
@@ -32,9 +32,11 @@ export class LayerSwitcher  implements OnInit,OnChanges{
     this.showLayerSwitcher = this.store.select(mapReducers.selectGetShowLayerSwitcher);
   }
 
-  ngOnChanges() {
+  ngOnChanges(changes: SimpleChanges) {
   }
 
+
+
   handleClick(event:Event) {
     event.stopPropagation();
     this.store.dispatch(new mapActions.ShowLayerSwitcher(true));
@@ -45,6 +47,8 @@ export class LayerSwitcher  implements OnInit,OnChanges{
     this.store.dispatch(new mapActions.ShowLayerSwitcher(false));
   }
 
+
+
   handleOnToggleVisibility(itemLayer: IItemLayer) {
     this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
   }

projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import { IHistogram } from '../../../models/color.map';
+import {IHistogram, ILayer} from '../../../models/color.map';
 
 @Component({
   selector: 'fm-map-histogram-details',

projects/common-map/src/fm-map/components/legend/legend.component.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
-import { IColor, ILayer, IRenderer } from '../../models/color.map';
+import { IColorMap, IColor, IColorEntry,ILayer, IRenderer } from '../../models/color.map';
 
 
 @Component({

projects/common-map/src/fm-map/components/map-search/map-search.component.html

@@ -5,12 +5,12 @@
 
 <div class="map-search collapsed" [ngClass]="{'collapsed':collapsedLocal,searchcollapsed:searchMinifiedLocal}" (click)="$event.stopPropagation()">
   <div class="card p-2">
-    <form class="form" (ngSubmit)="handleSearch()">
+    <form class="form" (ngSubmit)="handleSearch($event)">
       <div class="input-group">
-        <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu()"><i class="fal fa-bars" aria-hidden="true"></i></button>
+        <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
-        <input #searchText class="form-control" type="text" (focus)="handleFocus()" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
+        <input #searchText class="form-control" type="text" (focus)="handleFocus($event)" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
         <button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fal fa-search"></i></button>
-        <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick()"><i class="fas fa-times"></i></button>
+        <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fas fa-times"></i></button>
       </div>
       <div class="options">
         <div class="form-check">

projects/common-map/src/fm-map/components/map-search/map-search.component.ts

@@ -1,9 +1,10 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, Input, Output, OnInit, EventEmitter, SimpleChanges, OnChanges, ViewChild } from '@angular/core';
-import { IQueryState, TimespanService, TypeaheadService } from '@farmmaps/common';
+import { Observable ,  of,merge,forkJoin } from 'rxjs';
-import { Observable, forkJoin, of } from 'rxjs';
+import { debounceTime,distinctUntilChanged,tap,switchMap,catchError,map} from 'rxjs/operators';
-import { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
+import { TypeaheadService, TimespanService } from '@farmmaps/common';
-import { tassign } from 'tassign';
+import { IQueryState } from '@farmmaps/common';
 import { IPeriodState } from '../../models/period.state';
+import { tassign } from 'tassign';
 
 @Component({
   selector: 'fm-map-map-search',
@@ -53,6 +54,7 @@ export class MapSearchComponent {
   public searchMinifiedLocal = false;
   public periodLocal: IPeriodState = { startDate:new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1), endDate:new Date(Date.now())};
   public filterOptionsLocal: IQueryState;
+  private extent: number[];
   public searchTextLocal: any;
   public searchTextLocalOutput: string; 
   public dateFilter = true; 
@@ -79,12 +81,12 @@ export class MapSearchComponent {
           catchError(() => {
             this.searchFailed = true;
             return of([]);
-          }),map( (sa:string[]) => sa.map((s) => ({"name":s,"type":"tag"})))),
+          }),map( (sa:string[]) => sa.map((s,i) => ({"name":s,"type":"tag"})))),
           this.typeaheadService.getCityTypeaheadItems(term).pipe(
             catchError(() => {
               this.searchFailed = true;
               return of([]);
-            }),map( (sa:string[]) => sa.map((s) => ({"name":s,"type":"city"})))),
+            }),map( (sa:string[]) => sa.map((s,i) => ({"name":s,"type":"city"})))),
         ).pipe(map(([a1,a2]) => [...a1, ...a2] ),map(a => a.sort((a, b) => (a.name.toUpperCase() > b.name.toUpperCase()) ? 1 : -1)))
       ),
       tap(() => this.searching = false),
@@ -92,7 +94,7 @@ export class MapSearchComponent {
 
   formatter = (x: { name: string }) => x.name;
 
-  handleSearch() {
+  handleSearch(event) {
     this.filterOptionsLocal.tags = null;
     this.filterOptionsLocal.itemType = null;
     this.filterOptionsLocal.itemCode = null;
@@ -166,11 +168,11 @@ export class MapSearchComponent {
   }
 
 
-  handleToggleMenu() {
+  handleToggleMenu(event) {
     this.onToggleMenu.emit({});
   }  
 
-  handleFocus() {
+  handleFocus(event) {
     this.onSearchExpand.emit({});
   }
 
@@ -185,7 +187,7 @@ export class MapSearchComponent {
       this.disabled = true;
   }
 
-  handleClearClick() {
+  handleClearClick(event) {
     this.onClear.emit({});
   }
 

projects/common-map/src/fm-map/components/map/map.component.html

@@ -61,7 +61,7 @@
     <fm-map-file-drop-target [parentCode]="state.parentCode" (onFileDropped)="handleFileDropped($event)"></fm-map-file-drop-target>
 
     <div *ngIf="noContent">
-      <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu()" (onSearchCollapse)="handleSearchCollapse()" (onSearchExpand)="handleSearchExpand()" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch()" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)" (onCitySearch)="handleCitySearch($event)"></fm-map-map-search>
+      <fm-map-map-search #mapSearch [openedModalName]="state.openedModalName" (onOpenModal)="handleOpenModal($event)" (onCloseModal)="handleCloseModal()" [ngClass]="{'menuVisible':state.menuVisible}" (onToggleMenu)="handleToggleMenu($event)" (onSearchCollapse)="handleSearchCollapse($event)" (onSearchExpand)="handleSearchExpand($event)" [collapsed]="state.searchCollapsed" [searchMinified]="state.searchMinified" (onSearch)="handleSearch($event)" (onClear)="handleClearSearch($event)" [filterOptions]="state.queryState" [clearEnabled]="state.clearEnabled" [period]="state.period" (onPeriodChange)="handlePeriodChange($event)" (onCitySearch)="handleCitySearch($event)"></fm-map-map-search>
     </div>
     <div class="side-panel-container">
       

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -1,29 +1,42 @@
-/* eslint-disable no-prototype-builtins */
+import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit,NgZone,ElementRef } from '@angular/core';
-import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Location } from '@angular/common';
-import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { Observable, Subject, Subscription, from,of ,EMPTY } from 'rxjs';
-import { DeviceService, GeolocatorService, IItem, IItemType, IQueryState, ItemTypeService, ResumableFileUploadService, StateSerializerService, commonActions, commonReducers } from '@farmmaps/common';
+import { withLatestFrom, switchMap,skip  } from 'rxjs/operators';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { Feature } from 'ol';
+import { DeviceService } from '@farmmaps/common';
-import { Extent, createEmpty, extend } from 'ol/extent';
-import { Circle, Geometry, Point } from 'ol/geom';
-import { transform } from 'ol/proj';
 import {getRenderPixel} from 'ol/render';
-import * as style from 'ol/style';
+
-import { EMPTY, Observable, Subject, Subscription, from, of } from 'rxjs';
+// Map
-import { skip, switchMap, withLatestFrom } from 'rxjs/operators';
-import { tassign } from 'tassign';
-import * as mapActions from '../../actions/map.actions';
-import { IClickedFeature } from '../../models/clicked.feature';
-import { IItemLayer } from '../../models/item.layer';
-import { IMapState } from '../../models/map.state';
-import { IPeriodState } from '../../models/period.state';
-import { ISelectedFeatures } from '../../models/selected.features';
-import { IStyles } from '../../models/style.cache';
 import * as mapReducers from '../../reducers/map.reducer';
-import { IQuery } from '../../reducers/map.reducer';
+import * as mapActions from '../../actions/map.actions';
-import { DeviceOrientationService } from '../../services/device-orientation.service';
+import { IMapState} from '../../models/map.state';
-import { GeolocationService } from '../../services/geolocation.service';
+import { IClickedFeature} from '../../models/clicked.feature';
+import { IQuery } from '../../reducers/map.reducer'
+import { ISelectedFeatures } from '../../models/selected.features';
+import { IItemLayer } from '../../models/item.layer';
+import { IListItem, IQueryState } from '@farmmaps/common';
+import { IPeriodState } from '../../models/period.state';
+import {IStyles} from '../../models/style.cache';
 import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
+import { StateSerializerService } from '@farmmaps/common';
+import { GeolocationService} from '../../services/geolocation.service';
+import { GeolocatorService } from '@farmmaps/common';
+import {DeviceOrientationService} from '../../services/device-orientation.service';
+
+// AppCommon
+import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
+import { IItemType, IItem } from '@farmmaps/common';
+import {commonReducers} from '@farmmaps/common';
+import {commonActions} from '@farmmaps/common';
+
+import {Feature} from 'ol';
+import {Geometry,Point,Circle} from 'ol/geom';
+import {Extent,createEmpty,extend } from 'ol/extent';
+import {transform} from 'ol/proj';
+import { tassign } from 'tassign';
+import * as style from 'ol/style';
+
 
 @Component({
   selector: 'fm-map-map',
@@ -93,6 +106,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     private uploadService: ResumableFileUploadService,
     private serializeService: StateSerializerService,
     public itemTypeService: ItemTypeService,
+    private location: Location,
     private geolocationService: GeolocationService,
     private geolocaterService: GeolocatorService,
     private zone: NgZone,
@@ -375,15 +389,15 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     });
   }
 
-  handleSearchCollapse() {
+  handleSearchCollapse(event) {
     this.store.dispatch(new mapActions.CollapseSearch());
   }
 
-  handleSearchExpand() {
+  handleSearchExpand(event) {
     this.store.dispatch(new mapActions.ExpandSearch());
   }
 
-  handleToggleMenu() {
+  handleToggleMenu(event) {
     this.store.dispatch(new commonActions.ToggleMenu());
   }
 
@@ -464,11 +478,11 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     });
   }
 
-  handleOnDownload() {
+  handleOnDownload(event) {
 
   }
 
-  handleClearSearch() {
+  handleClearSearch(event) {
     this.store.dispatch(new mapActions.Clear());
   }
 

projects/common-map/src/fm-map/components/meta-data-modal/meta-data-modal.component.html

@@ -1,5 +1,5 @@
 <ng-template #content let-c="close" let-d="dismiss">
-  <form [formGroup]="metaDataForm" (ngSubmit)="handleMetaDataEntered()">
+  <form [formGroup]="metaDataForm" (ngSubmit)="handleMetaDataEntered($event)">
     <div class="modal-header">
       <h4 class="modal-title" i18n>Add metadata</h4>
       <button type="button" class="close" aria-label="Close" (click)="d('Cross click'); onCloseModal.emit()">

projects/common-map/src/fm-map/components/meta-data-modal/meta-data-modal.component.ts

@@ -1,8 +1,8 @@
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { UntypedFormGroup,UntypedFormBuilder, Validators } from '@angular/forms';
 import { IListItem } from '@farmmaps/common';
-import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
 import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
+import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
 
 export interface IMetaData {
   droppedFile: IDroppedFile,
@@ -37,7 +37,7 @@ export class MetaDataModalComponent {
 
   public metaDataForm: UntypedFormGroup;
 
-  handleMetaDataEntered() {
+  handleMetaDataEntered(event) {
     if (this.metaDataForm.valid) {
       this.onAddFilesWithMetaData.emit({ droppedFile: this.droppedFile, attributes: { name: this.metaDataForm.value.name } });
     }

projects/common-map/src/fm-map/components/select-period-modal/select-period-modal.component.ts

@@ -1,6 +1,7 @@
-import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { NgbModal, NgbModalRef, NgbDateStruct, NgbCalendar, NgbDateAdapter } from "@ng-bootstrap/ng-bootstrap";
 import { NgbDateNativeAdapter } from '@farmmaps/common';
-import { NgbDateStruct, NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
 
 
 const equals = (one: NgbDateStruct, two: NgbDateStruct) =>
@@ -51,7 +52,7 @@ export class SelectPeriodModalComponent {
   @Output() onCloseModal = new EventEmitter<any>();
   @Output() onSelect = new EventEmitter<{ startDate: Date, endDate: Date }>();
   
-  constructor(private modalService: NgbModal) { }
+  constructor(private modalService: NgbModal, private calendar: NgbCalendar) { }
 
   openModal() {
       //Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError 

projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts

@@ -1,8 +1,8 @@
-import { Component, ComponentFactory, ComponentFactoryResolver, Inject, Input, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
 import { IItem } from '@farmmaps/common';
-import { IItemLayer } from '../../models/item.layer';
 import { AbstractSelectedItemComponent, SelectedItemComponent  } from '../selected-item/selected-item.component';
 import { WidgetHostDirective } from '../widget-host/widget-host.directive';
+import { IItemLayer } from '../../models/item.layer';
 
 
 @Component({
@@ -28,6 +28,7 @@ export class SelectedItemContainerComponent {
 
     let selected = -1;
     let maxMatches =0;
+    const showItem = true;
     for (let i = 0; i < this.selectedItemComponents.length; i++) {
       let matches=0;
       let criteria=0;

projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.ts

@@ -1,15 +1,16 @@
+import { Component, Input, Injectable, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
-import { Component, Injectable, OnInit } from '@angular/core';
+import { Feature } from 'ol';
-import { Router } from '@angular/router';
-import { FolderService, IItem, IListItem, ItemService, ItemTypeService, commonReducers } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
-import { GeoJSON } from 'ol/format';
-import { getArea } from 'ol/sphere';
-import { Observable, of } from 'rxjs';
-import { combineLatest, switchMap } from 'rxjs/operators';
 import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common';
+import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
+import { Observable,of } from 'rxjs';
+import {GeoJSON} from 'ol/format';
+import {getArea} from 'ol/sphere';
+import { withLatestFrom,switchMap,combineLatest } from 'rxjs/operators';
 
 
 @ForItemType("vnd.farmmaps.itemtype.cropfield")

projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.ts

@@ -1,12 +1,12 @@
-import { Location } from '@angular/common';
 import { Component, Injectable } from '@angular/core';
-import { Router } from '@angular/router';
+import { Location } from '@angular/common';
-import { ItemTypeService, commonReducers } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
-import * as mapActions from '../../actions/map.actions';
 import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers, ItemTypeService, ItemService, FolderService } from '@farmmaps/common';
+import { Router } from '@angular/router';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
+import * as mapActions from '../../actions/map.actions';
 
 
 @ForItemType("vnd.farmmaps.itemtype.geotiff.processed")
@@ -18,7 +18,7 @@ import { AbstractSelectedItemComponent } from '../selected-item/selected-item.co
 })
 export class SelectedItemGeotiffComponent extends AbstractSelectedItemComponent {
 
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router) {
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
     super(store, itemTypeService,location,router);
   }
 

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.ts

@@ -1,12 +1,14 @@
+import { Component, Input, Injectable, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
-import { Component, Injectable } from '@angular/core';
+import { Feature } from 'ol';
-import { Router } from '@angular/router';
-import { ItemTypeService, commonReducers } from '@farmmaps/common';
 import { Store } from '@ngrx/store';
-import * as mapActions from '../../actions/map.actions';
 import * as mapReducers from '../../reducers/map.reducer';
+import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common';
+import * as mapActions from '../../actions/map.actions';
+import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
+import { Observable } from 'rxjs';
 
 
 @ForItemType("vnd.farmmaps.itemtype.shape.processed")
@@ -18,7 +20,7 @@ import { AbstractSelectedItemComponent } from '../selected-item/selected-item.co
 })
 export class SelectedItemShapeComponent extends AbstractSelectedItemComponent {
 
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router) {
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
     super(store, itemTypeService,location,router);
   }
   public selectedLayer = 0;

projects/common-map/src/fm-map/effects/map.effects.ts

@@ -1,34 +1,35 @@
 import { Injectable } from '@angular/core';
 
-import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { Store, Action, createFeatureSelector } from '@ngrx/store';
-import * as fromRouter from '@ngrx/router-store';
 import { ROUTER_NAVIGATED, RouterReducerState } from '@ngrx/router-store';
-import { Action, Store, createFeatureSelector } from '@ngrx/store';
+import * as fromRouter from '@ngrx/router-store';
+import { createEffect, Actions, ofType } from '@ngrx/effects';
 
 import { EMPTY, Observable, of } from 'rxjs';
-import { catchError, map, mergeMap, switchMap, withLatestFrom } from 'rxjs/operators';
+import { withLatestFrom, switchMap, map, catchError, mergeMap } from 'rxjs/operators';
 
-import { Feature } from 'ol';
-import { createEmpty, extend, getCenter } from 'ol/extent';
 import { GeoJSON, WKT } from 'ol/format';
-import { Geometry, Point } from 'ol/geom';
+import { Feature } from 'ol';
+import { getCenter, createEmpty, extend } from 'ol/extent';
+import { Point, Geometry } from 'ol/geom'
 
 
-import { commonReducers } from '@farmmaps/common';
 import * as mapActions from '../actions/map.actions';
 import * as mapReducers from '../reducers/map.reducer';
+import { commonReducers } from '@farmmaps/common';
 
 import { commonActions } from '@farmmaps/common';
 
-import { IItem, ItemService } from '@farmmaps/common';
+import { IItem } from '@farmmaps/common';
+import { FolderService, ItemService } from '@farmmaps/common';
 import { tassign } from 'tassign';
 
 import { FeatureIconService } from '../services/feature-icon.service';
 
 import * as style from 'ol/style';
 
-import { IQueryState } from '@farmmaps/common';
+import { ItemTypeService, IQueryState } from '@farmmaps/common';
-import { TemporalItemLayer } from '../models/item.layer';
+import { TemporalItemLayer } from '../models/item.layer'
 
 export const getRouterState = createFeatureSelector<RouterReducerState>('router');
 
@@ -64,7 +65,7 @@ export class MapEffects {
   init$ = createEffect(() => this.actions$.pipe(
     ofType(mapActions.INIT),
     withLatestFrom(this.store$.select(commonReducers.selectGetRootItems)),
-    switchMap(([, rootItems]) => {
+    switchMap(([action, rootItems]) => {
       const actions = [];
       for (const rootItem of rootItems) {
         if (rootItem.itemType == "UPLOADS_FOLDER") actions.push(new mapActions.SetParent(rootItem.code));
@@ -106,12 +107,12 @@ export class MapEffects {
   initBaseLayers$ = createEffect(() => this.actions$.pipe(
     ofType(mapActions.INIT),
     withLatestFrom(this.store$.select(mapReducers.selectGetProjection)),
-    map(([, projection]) => new mapActions.LoadBaseLayers(projection)))
+    map(([action, projection]) => new mapActions.LoadBaseLayers(projection)))
   );
 
   loadBaseLayers$ = createEffect(() => this.actions$.pipe(
     ofType(mapActions.LOADBASELAYERS),
-    switchMap(() => {
+    switchMap((action: mapActions.LoadBaseLayers) => {
       return this.itemService$.getItemList("vnd.farmmaps.itemtype.layer", { "isBaseLayer": true }).pipe(
         map((items: IItem[]) => new mapActions.LoadBaseLayersSuccess(items)),
         catchError(error => of(new commonActions.Fail(error))));
@@ -177,7 +178,7 @@ export class MapEffects {
 
   hideMenu$ = createEffect(() => this.actions$.pipe(
     ofType(mapActions.STARTSEARCHSUCCESS),
-    mergeMap(() => {
+    mergeMap((action: mapActions.StartSearchSuccess) => {
       return of(new commonActions.SetMenuVisible(false));
     })));
 
@@ -335,7 +336,7 @@ export class MapEffects {
     ofType(mapActions.ADDLAYER, mapActions.REMOVELAYER, mapActions.SELECTITEMSUCCESS, mapActions.SELECTTEMPORALITEMSSUCCESS, mapActions.NEXTTEMPORAL, mapActions.PREVIOUSTEMPORAL, mapActions.TOGGLELAYERVALUESENABLED, mapActions.SETLAYERINDEX, mapActions.SETSELECTEDITEMLAYER),
     withLatestFrom(this.store$.select(mapReducers.selectGetLayerValuesX)),
     withLatestFrom(this.store$.select(mapReducers.selectGetLayerValuesY)),
-    map(([[, x], y]) => new mapActions.SetLayerValuesLocation(x, y))
+    map(([[action, x], y]) => new mapActions.SetLayerValuesLocation(x, y))
   ));
 
 
@@ -401,7 +402,7 @@ export class MapEffects {
     })
   ));
 
-  constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private itemService$: ItemService, private featureIconService$: FeatureIconService) {
+  constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private folderService$: FolderService, private itemService$: ItemService, private featureIconService$: FeatureIconService, private itemTypeService$: ItemTypeService) {
     this._geojsonFormat = new GeoJSON();
     this._wktFormat = new WKT();
   }

projects/common-map/src/fm-map/models/item.layer.ts

@@ -1,4 +1,4 @@
-import { IItem } from '@farmmaps/common';
+import { IItem,IListItem } from '@farmmaps/common';
 import {Layer} from 'ol/layer';
 import { Source } from 'ol/source';
 

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -1,15 +1,21 @@
-import { IItem, IQueryState, commonActions } from '@farmmaps/common';
-import { ROUTER_NAVIGATION, RouterNavigationAction } from '@ngrx/router-store';
-import { createFeatureSelector, createSelector } from '@ngrx/store';
-import { Feature } from 'ol';
-import { Geometry } from 'ol/geom';
 import { tassign } from 'tassign';
-import * as mapActions from '../actions/map.actions';
+import { IItem,Item } from '@farmmaps/common';
-import { IItemLayer, ITemporalItemLayer, ItemLayer, TemporalItemLayer } from '../models/item.layer';
+import { IItemLayer,ItemLayer,ITemporalItemLayer,TemporalItemLayer} from '../models/item.layer';
-import { ILayervalue } from '../models/layer.value';
 import { IMapState} from '../models/map.state';
+import { IQueryState} from '@farmmaps/common';
 import { IPeriodState } from '../models/period.state';
 import { IStyles} from '../models/style.cache';
+import { ILayervalue } from '../models/layer.value';
+import * as mapActions from '../actions/map.actions';
+import {commonActions} from '@farmmaps/common';
+import { createSelector, createFeatureSelector } from '@ngrx/store';
+
+import {Feature} from 'ol';
+import {Geometry} from 'ol/geom';
+
+
+import { ROUTER_NAVIGATION, RouterNavigationAction } from '@ngrx/router-store';
+
 import { MODULE_NAME } from '../module-name';
 
 const startDate:Date = new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1);
@@ -119,6 +125,7 @@ export const initialState: State = {
 export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
   switch (action.type) {
     case ROUTER_NAVIGATION: {
+      const a = action as RouterNavigationAction;
       return tassign(state);
     }
     case mapActions.SETMAPSTATE: {
@@ -280,6 +287,9 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
         return state;
       }
     }
+    case mapActions.SELECTTEMPORAL:{
+      //todo implement
+    }
     case mapActions.STARTSEARCH: {
       const a = action as mapActions.StartSearch;
       const panelVisible = a.queryState.itemCode!=null ||a.queryState.itemType!=null||a.queryState.parentCode!=null || a.queryState.query != null || a.queryState.tags != null;
@@ -328,7 +338,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.UPDATEFEATURESUCCESS: {
       const a = action as mapActions.UpdateFeatureSuccess;
       const features: any[] = [];
-      for (let i = 0; i < state.features.length; i++) {
+      var index = -1;
+      for (var i = 0; i < state.features.length; i++) {
         if (state.features[i].getId() == a.feature.getId()) {
           features.push(a.feature);
         } else {
@@ -408,7 +419,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       const a = action as mapActions.SetLayerIndex;
       if (a.itemLayer == null) {
         if(state.selectedItemLayer.item.itemType == "vnd.farmmaps.itemtype.temporal") {
-          const newItemlayer = tassign(state.selectedItemLayer,{layerIndex:a.layerIndex});
+          var newItemlayer = tassign(state.selectedItemLayer,{layerIndex:a.layerIndex});
           const tl = newItemlayer as ITemporalItemLayer;
           if(tl.previousItemLayer) {
             const nl = new ItemLayer(tl.previousItemLayer.item);
@@ -432,7 +443,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
             tl.nextItemLayer = nl;
           }
         } else {
-          // eslint-disable-next-line no-var
           var newItemlayer = new ItemLayer(state.selectedItemLayer.item);
           newItemlayer.layerIndex = a.layerIndex;
 
@@ -454,7 +464,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
         baseLayers.push(l);
       }
       let selectedBaseLayer: IItemLayer = null;
-      const mapState = tassign(state.mapState);
+      var mapState = tassign(state.mapState);
       const sb = baseLayers.filter(layer => layer.item.code === mapState.baseLayerCode);
       const db = baseLayers.filter(layer => layer.item.data && layer.item.data.default === true);
       if (baseLayers.length > 0 && mapState.baseLayerCode != "" && sb.length>0) {
@@ -476,7 +486,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       baseLayers.forEach((l) => l.visible = false);
       const i = state.baseLayers.indexOf(a.itemLayer);
       baseLayers[i].visible = true;
-      const mapState = tassign(state.mapState);
+      var mapState = tassign(state.mapState);
       mapState.baseLayerCode = a.itemLayer.item.code;
       return tassign(state, {mapState:mapState, baseLayers:baseLayers,selectedBaseLayer:a.itemLayer });
     }
@@ -550,8 +560,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
          });
       }
       if(state.features.length>0)  {
-        let index = -1;
+        var index = -1;
-        for (let i = 0; i < state.features.length; i++) {
+        for (var i = 0; i < state.features.length; i++) {
           if (state.features[i].getId() == a.itemCode ) {
             index=i;
           }

projects/common-map/src/fm-map/services/device-orientation.service.ts

@@ -15,6 +15,7 @@ export class DeviceOrientationService {
     // Calculate equation components
     const cA = Math.cos(alphaRad);
     const sA = Math.sin(alphaRad);
+    const cB = Math.cos(betaRad);
     const sB = Math.sin(betaRad);
     const cG = Math.cos(gammaRad);
     const sG = Math.sin(gammaRad);
@@ -22,6 +23,7 @@ export class DeviceOrientationService {
     // Calculate A, B, C rotation components
     const rA = - cA * sG - sA * sB * cG;
     const rB = - sA * sG + cA * sB * cG;
+    const rC = - cB * cG;
   
     // Calculate compass heading
     let compassHeading = Math.atan(rA / rB);

projects/common-map/src/fm-map/services/feature-icon.service.ts

@@ -1,4 +1,8 @@
 import { Injectable} from '@angular/core';
+import { Feature } from 'ol';
+import { Point } from 'ol/geom';
+import * as extent from 'ol/extent';
+
 
 @Injectable()
 export class FeatureIconService {      

projects/common-map/src/fm-map/services/geolocation.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { Observer, Observable,BehaviorSubject } from 'rxjs';
 
 /**
  * GeolocationService class.

projects/common-map/src/fm-map/services/temporal.service.ts

@@ -1,7 +1,7 @@
-import { DatePipe } from '@angular/common';
 import { Injectable} from '@angular/core';
+import {DatePipe} from '@angular/common';
 import {TimespanService} from '@farmmaps/common';
-import { IItemLayer, ITemporalItemLayer } from '../models/item.layer';
+import { IItemLayer, ITemporalItemLayer,TemporalItemLayer} from '../models/item.layer';
 
 
 @Injectable()

projects/common-map/tsconfig.lib.json

@@ -22,9 +22,7 @@
       "node_modules/@angular/*"
 
       ]
-    },
+    }
-    "noUnusedLocals": true,
-    "noUnusedParameters": true
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

projects/common-map/tsconfig.lib.prod.json

@@ -22,9 +22,7 @@
       "node_modules/@angular/*"
 
       ]
-    },
+    }
-    "noUnusedLocals": true,
-    "noUnusedParameters": true
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

projects/common-map3d/.eslintrc.js

@@ -18,6 +18,5 @@ module.exports = {
         "@typescript-eslint"
     ],
     "rules": {
-        "@typescript-eslint/no-explicit-any": "off"
     }
 }

projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.html

@@ -1 +1 @@
-<div *fmHasPackage="'vnd.farmmaps.itemtype.package.3d'" (click)="handleClick()" class="btn btn-outline-primary twotreed"><i class="fas fa-spinner fa-spin loading"  [ngClass]="{'loading':loading}"></i>{{label}}</div>
+<div *fmHasPackage="'vnd.farmmaps.itemtype.package.3d'" (click)="handleClick($event)" class="btn btn-outline-primary twotreed"><i class="fas fa-spinner fa-spin loading"  [ngClass]="{'loading':loading}"></i>{{label}}</div>

projects/common-map3d/src/fm-map3d/components/olcs/switch2d3d/switch2d3d.component.ts

@@ -1,11 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, OnInit,Input,Host  } from '@angular/core';
-import { mapActions, mapReducers } from '@farmmaps/common-map';
-import { Store } from '@ngrx/store';
-import { MapComponent } from 'ng-openlayers';
 import { Interaction} from 'ol/interaction';
+import { MapComponent } from 'ng-openlayers';
 import OLCesium from 'olcs/OLCesium';
 import RasterSynchronizer from 'olcs/RasterSynchronizer';
 import VectorSynchronizer from 'olcs/VectorSynchronizer';
+import { mapReducers,mapActions } from '@farmmaps/common-map';
+import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'fm-map3d-switch2d3d',
@@ -61,7 +61,7 @@ export class Switch2D3DComponent {
     });
   }
 
-  handleClick() {
+  handleClick(event) {
     this.enable = !this.enable; 
     if(this.enable) {
       this.store.dispatch(new mapActions.SetViewState(false));

projects/common-map3d/tsconfig.lib.json

@@ -23,9 +23,7 @@
       "node_modules/@angular/*"
 
       ]
-    },
+    }
-    "noUnusedLocals": true,
-    "noUnusedParameters": true
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

projects/common-map3d/tsconfig.lib.prod.json

@@ -23,9 +23,7 @@
       "node_modules/@angular/*"
 
       ]
-    },
+    }
-    "noUnusedLocals": true,
-    "noUnusedParameters": true
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

projects/common/.eslintrc.js

@@ -18,6 +18,5 @@ module.exports = {
         "@typescript-eslint"
     ],
     "rules": {
-        "@typescript-eslint/no-explicit-any": "off"
     }
 }

projects/common/src/fm/common-routing.module.ts

@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core';
 import {RouterModule} from '@angular/router';
 
 import {AuthCallbackComponent} from './components/auth-callback/auth-callback.component';
-import { NotFoundComponent } from './components/not-found/not-found.component';
+import {AuthCallbackGuard} from './components/auth-callback/auth-callback.guard';
-import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
-import { FullScreenGuard } from './services/full-screen-guard.service';
 import {NavBarGuard} from './services/nav-bar-guard.service';
+import {FullScreenGuard} from './services/full-screen-guard.service';
+import {SessionClearedComponent} from './components/session-cleared/session-cleared.component';
+import {NotFoundComponent} from './components/not-found/not-found.component';
 import { ProductionGuard } from './services/production-guard.service';
 
 

projects/common/src/fm/common.module.ts

@@ -1,16 +1,16 @@
 // angular modules
-import { CommonModule } from '@angular/common';
+import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector, Optional, SkipSelf,InjectionToken } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
+import { CommonModule, DatePipe } from '@angular/common';
-import { InjectionToken, NgModule } from '@angular/core';
+import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 
 // external modules
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { OAuthModule, AuthConfig, OAuthService, OAuthStorage } from 'angular-oauth2-oidc';
+import { StoreModule, Store } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
-import { StoreModule } from '@ngrx/store';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { OAuthModule } from 'angular-oauth2-oidc';
-import { ClipboardModule } from 'ngx-clipboard';
 import { UploadxModule } from 'ngx-uploadx';
+import { ClipboardModule } from 'ngx-clipboard';
 
 
 // routing module
@@ -19,67 +19,111 @@ import { AppCommonRoutingModule } from './common-routing.module';
 import { MODULE_NAME } from './module-name';
 
 //components
-import { AvatarModule } from 'ngx-avatars';
+import { SafePipe } from './shared/safe.pipe';
-import { ImageCropperModule } from 'ngx-image-cropper';
+import { AuthConfigFactory, IAuthconfigFactory } from './shared/authconfigFactory';
-import * as commonActions from './actions/app-common.actions';
-import { AppMenuComponent } from './components/app-menu/app-menu.component';
 import { AppComponent } from './components/app/app.component';
 import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
-import { AvatarComponent } from './components/avatar/avatar.component';
+import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
-import { BackButtonComponent } from './components/back-button/back-button.component';
+import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
-import { EditImageModalComponent } from './components/edit-image-modal/edit-image-modal.component';
-import { GradientSelectComponent } from './components/gradient-select/gradient-select.component';
-import { GradientComponent } from './components/gradient/gradient.component';
-import { HasClaimDirective } from './components/has-claim/has-claim.directive';
-import { HasPackageDirective } from './components/has-package/has-package.directive';
-import { HasRoleDirective } from './components/has-role/has-role.directive';
-import { HelpMenuComponent } from './components/help-menu/help-menu.component';
-import { ItemLinkComponent } from './components/item-link/item-link.component';
-import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { NotImplementedComponent } from './components/not-implemented/not-implemented.component';
-import { NotificationMenuComponent } from './components/notification-menu/notification-menu.component';
-import { PackageExistsDirective } from './components/package-exists/package-exists.directive';
-import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
-import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
 import { SidePanelComponent } from './components/side-panel/side-panel.component';
-import { TagInputComponent } from './components/tag-input/tag-input.component';
-import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
 import { TimespanComponent } from './components/timespan/timespan.component';
+import { TagInputComponent } from './components/tag-input/tag-input.component';
+import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
+import { HasPackageDirective} from './components/has-package/has-package.directive';
+import { PackageExistsDirective} from './components/package-exists/package-exists.directive';
+import { HasClaimDirective } from './components/has-claim/has-claim.directive';
+import { HasRoleDirective } from './components/has-role/has-role.directive';
 import { UserMenuComponent} from './components/user-menu/user-menu.component';
-import * as commonEffects from './effects/app-common.effects';
+import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
 import { Alert } from './enumerations/alert.enum';
-import { IDataLayer } from './models/data.layer';
 import { IEventMessage } from './models/event.message';
-import { IColor, IGradientstop } from './models/gradient';
 import { IItem, Item } from './models/item';
+import { WeatherCurrentObservation } from './models/weatherCurrentObservation';
 import { IItemType } from './models/item.type';
+import { IItemLinkType} from './models/itemlink.type';
+import {IUrlType} from './models/url.type';
 import { IItemTypes } from './models/item.types';
 import { IItemTask, ItemTask } from './models/itemTask';
-import { IItemLinkType } from './models/itemlink.type';
-import { IJsonline } from './models/json-line';
 import { IListItem } from './models/list.item';
-import { IPackage, IPackages } from './models/package';
+import { ITypeaheadItem } from './models/typeahead.item'
-import { IQueryState } from './models/query.state';
+import { IJsonline } from './models/json-line';
 import { ISenMLItem } from './models/senml-item';
-import { ITypeaheadItem } from './models/typeahead.item';
+import { IPackage,IPackages } from './models/package';
-import { IUrlType } from './models/url.type';
 import { IUser } from './models/user';
-import { WeatherCurrentObservation } from './models/weatherCurrentObservation';
+import { IQueryState } from './models/query.state';
+import { IDataLayer } from './models/data.layer';
+import { IColor,IGradientstop} from './models/gradient';
+import * as commonActions from './actions/app-common.actions';
 import * as commonReducers from './reducers/app-common.reducer';
-import { AuthConfigFactory, IAuthconfigFactory } from './shared/authconfigFactory';
+import * as commonEffects from './effects/app-common.effects';
-import { SafePipe } from './shared/safe.pipe';
 import { SecureOAuthStorage} from './shared/secureOAuthStorage';
+import { GradientComponent } from './components/gradient/gradient.component';
+import { GradientSelectComponent } from './components/gradient-select/gradient-select.component';
+import { AppMenuComponent } from './components/app-menu/app-menu.component';
+import { NotificationMenuComponent} from './components/notification-menu/notification-menu.component';
+import { HelpMenuComponent} from './components/help-menu/help-menu.component';
+import { BackButtonComponent } from './components/back-button/back-button.component';
+import { EditImageModalComponent } from './components/edit-image-modal/edit-image-modal.component';
+import { AvatarComponent } from './components/avatar/avatar.component';
+import { ItemLinkComponent } from './components/item-link/item-link.component';
+import { AvatarModule } from 'ngx-avatars';
+import { ImageCropperModule } from 'ngx-image-cropper';
 
 export const FM_COMMON_STARTPAGE = new InjectionToken<string>('fm-common-startpage');
 
 export {
-  Alert, AppComponent, AuthCallbackComponent, AuthConfigFactory, AvatarComponent, BackButtonComponent, EditImageModalComponent,
+  SafePipe,
+  AuthCallbackComponent,
+  AppComponent,
+  SessionClearedComponent,
+  ResumableFileUploadComponent,
+  NotFoundComponent,
+  NotImplementedComponent,
+  SidePanelComponent,
+  TimespanComponent,
+  TagInputComponent,
+  UserMenuComponent,
+  ThumbnailComponent,
+  HasPackageDirective,
+  PackageExistsDirective,
+  HasClaimDirective,
+  HasRoleDirective,
+  Alert,
+  IEventMessage,
+  IItem,
+  Item,
+  IItemType,
+  IItemLinkType,
+  IUrlType,
+  IItemTypes,
+  IItemTask,
+  ItemTask,
+  IListItem,
+  ITypeaheadItem,
+  IUser,
+  IQueryState,
+  IPackage,
+  IPackages,
+  commonActions,
+  commonReducers,
+  IAuthconfigFactory,
+  AuthConfigFactory,
+  MenuBackgroundComponent,
+  SecureOAuthStorage,
+  WeatherCurrentObservation,
+  IJsonline,
+  ISenMLItem,
+  IDataLayer,
+  IColor,
+  IGradientstop,
+  BackButtonComponent,
+  AvatarComponent,
+  ItemLinkComponent,
+  EditImageModalComponent,
   GradientComponent,
-  GradientSelectComponent, HasClaimDirective, HasPackageDirective, HasRoleDirective, IAuthconfigFactory, IColor, IDataLayer, IEventMessage, IGradientstop, IItem, IItemLinkType, IItemTask, IItemType, IItemTypes, IJsonline, IListItem, IPackage,
+  GradientSelectComponent
-  IPackages, IQueryState, ISenMLItem, ITypeaheadItem, IUrlType, IUser, Item, ItemLinkComponent, ItemTask, MenuBackgroundComponent, NotFoundComponent,
-  NotImplementedComponent, PackageExistsDirective, ResumableFileUploadComponent, SafePipe, SecureOAuthStorage, SessionClearedComponent, SidePanelComponent, TagInputComponent, ThumbnailComponent, TimespanComponent, UserMenuComponent, WeatherCurrentObservation, commonActions,
-  commonReducers
 };
 
 @NgModule({

projects/common/src/fm/components/app/app.component.html

@@ -1,4 +1,4 @@
-<div class="app fullscreen" (click)="handleClick()" [ngClass]="{'fullscreen' :(fullScreen|async),'pagemode':(isPageMode|async),'appmode':!(isPageMode|async)}">
+<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async),'pagemode':(isPageMode|async),'appmode':!(isPageMode|async)}">
   <nav class="navbar navbar-light navbar-expand bg-light navigation-clean">
     <div class="container-fluid p-3 justify-content-start">
       <div class="header-logo pageonly"><router-outlet name="header-logo"></router-outlet></div> 
@@ -20,7 +20,7 @@
     <div class="container-fluid">
       <div class="body">
         <div class="d-flex flex-row">
-          <div class="mt-2 mb-2 flex-grow-1 logo" (click)="handleHome()"><router-outlet name="side-panel-logo"></router-outlet></div>
+          <div class="mt-2 mb-2 flex-grow-1 logo" (click)="handleHome($event)"><router-outlet name="side-panel-logo"></router-outlet></div>
           <div class="mt-2 mb-2 ms-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
         </div>
         <div class="d-flex flex-column cards"> 

projects/common/src/fm/components/app/app.component.ts

@@ -1,18 +1,21 @@
-import { ChangeDetectionStrategy, Component, HostListener, Inject, Input, OnDestroy, OnInit, Optional, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject, Optional, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener, Input } from '@angular/core';
-import { NavigationEnd, NavigationStart, RouteConfigLoadEnd, RouteConfigLoadStart, Router } from '@angular/router';
+import { Router, NavigationStart, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
-import { Action, Store } from '@ngrx/store';
+import { Meta, Title, MetaDefinition } from '@angular/platform-browser'; import { DOCUMENT } from "@angular/common";
-import { OAuthErrorEvent, OAuthService } from 'angular-oauth2-oidc';
+import { Subscription, Observable } from 'rxjs';
-import { Observable, Subscription } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
-import { FM_COMMON_STARTPAGE } from '../../common.module';
+import { Store, Action } from '@ngrx/store';
 import { IUser } from '../../models/user';
+import { OAuthService, OAuthErrorEvent } from 'angular-oauth2-oidc';
+import { FM_COMMON_STARTPAGE } from '../../common.module';
 
 //AppCommon
-import * as commonActions from '../../actions/app-common.actions';
 import { IEventMessage } from '../../models/event.message';
 import { IListItem } from '../../models/list.item';
 import { EventService } from '../../services/event.service';
+import { ItemTypeService } from '../../services/itemtype.service';
+import * as  commonActions from '../../actions/app-common.actions';
 import { HealthCheckService } from '../../services/healthcheck.service';
+import { AppConfig } from '../../shared/app.config';
 
 import * as appReducers from '../../reducers/app-common.reducer';
 
@@ -24,6 +27,12 @@ import * as appReducers from '../../reducers/app-common.reducer';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent implements OnInit, OnDestroy {
+
+  // This will go at the END of your title for example "Home - Angular Universal..." <-- after the dash (-)
+  private endPageTitle = 'Farmmaps';
+  // If no Title is provided, we'll use a default one before the dash(-)
+  private defaultPageTitle = 'Farmmaps';
+
   private routerSub$: Subscription;
   private eventSub$: Subscription;
 
@@ -45,12 +54,19 @@ export class AppComponent implements OnInit, OnDestroy {
   constructor(
     @Optional() @Inject(FM_COMMON_STARTPAGE) public startPage: string,
     public router: Router,
+    private activatedRoute$: ActivatedRoute,
+    private title$: Title,
+    private meta$: Meta,
     private store$: Store<appReducers.State>,
     private eventService$: EventService,
     private healthCheckService$: HealthCheckService,
-    private oauthService$: OAuthService) {
+    private itemTypeService$: ItemTypeService,
+    private oauthService$: OAuthService,
+    private appConfig$: AppConfig
+  ) {
   }
 
+
   getActionFromEvent(event: IEventMessage): Action {
     let action: Action = null;
     //console.debug(`${event.eventType} Event received`);
@@ -147,28 +163,30 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   private InstallRouteEventHandler() {
+    const other = this;
     this.routerSub$ = this.router.events.subscribe(event => {
       if (event instanceof RouteConfigLoadStart) {
-        this.store$.dispatch(new commonActions.StartRouteLoading());
+        other.store$.dispatch(new commonActions.StartRouteLoading());
       }
       if (event instanceof NavigationEnd && (event.url == "/" || event.url.startsWith("/content"))) {
-        this.store$.dispatch(new commonActions.SetPageMode(true));
+        other.store$.dispatch(new commonActions.SetPageMode(true));
       } else if (event instanceof NavigationEnd) {
-        this.store$.dispatch(new commonActions.SetPageMode(false));
+        other.store$.dispatch(new commonActions.SetPageMode(false));
       }
       if (event instanceof RouteConfigLoadEnd) {
-        this.store$.dispatch(new commonActions.EndRouteLoading());
+        other.store$.dispatch(new commonActions.EndRouteLoading());
       }
       if (event instanceof NavigationStart) {
-        this.store$.dispatch(new commonActions.SetMenuVisible(false));
+        other.store$.dispatch(new commonActions.SetMenuVisible(false));
       }
     });
   }
 
   private InstallEventServiceEventHandler() {
+    const other = this;
     this.eventSub$ = this.eventService$.event.subscribe(event => {
-      const action = this.getActionFromEvent(event);
+      const action = other.getActionFromEvent(event);
-      if (action) this.store$.dispatch(action);
+      if (action) other.store$.dispatch(action);
     });
   }
 
@@ -183,7 +201,7 @@ export class AppComponent implements OnInit, OnDestroy {
     });
   }
 
-  handleClick() {
+  handleClick(event: MouseEvent) {
     this.store$.dispatch(new commonActions.Escape(false, true));
   }
 
@@ -196,7 +214,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.store$.dispatch(new commonActions.ToggleMenu());
   }
 
-  handleHome() {
+  handleHome(event: MouseEvent) {
     this.router.navigate(['/']);
   }
 }

projects/common/src/fm/components/auth-callback/auth-callback.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { OAuthService } from 'angular-oauth2-oidc';
+import { Location} from '@angular/common';
 
 @Component({
     selector: 'fm-auth-callback',
@@ -9,11 +10,11 @@ import { OAuthService } from 'angular-oauth2-oidc';
 export class AuthCallbackComponent {
 
   constructor(private router$: Router,private oauthService$:OAuthService) {
-    this.oauthService$.loadDiscoveryDocument().then(() => {
+    oauthService$.loadDiscoveryDocument().then(() => {
-      this.oauthService$.tryLoginCodeFlow().then(() => {
+      oauthService$.tryLoginCodeFlow().then(() => {
-        this.router$.navigateByUrl((this.oauthService$.state && this.oauthService$.state!="")?decodeURIComponent(this.oauthService$.state):"");
+        router$.navigateByUrl((oauthService$.state && oauthService$.state!="")?decodeURIComponent(oauthService$.state):"");
       }).catch(() => {
-        this.router$.navigateByUrl("/");
+        router$.navigateByUrl("/");
       });    
     })
   }

projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts

@@ -1,5 +1,6 @@
-import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, OnInit,ViewChild,ElementRef,EventEmitter, Output } from '@angular/core';
-import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { HttpClient, HttpParams,HttpHeaders } from "@angular/common/http";
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap"
 import { ImageCroppedEvent,LoadedImage } from 'ngx-image-cropper';
 import {ImageService } from '../../services/image.service';
 
@@ -46,8 +47,7 @@ export class EditImageModalComponent implements OnInit {
   imageCropped(event: ImageCroppedEvent) {
       this.croppedImage = event.base64;
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  imageLoaded(image: LoadedImage) {
-  imageLoaded(_image: LoadedImage) {
     this.isImageLoaded=true;
   }
   cropperReady() {

projects/common/src/fm/components/has-claim/has-claim.directive.ts

@@ -1,8 +1,11 @@
-import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Directive, ViewContainerRef,TemplateRef,OnInit,Input,OnDestroy } from '@angular/core';
 import { Store} from '@ngrx/store';
-import { Observable } from 'rxjs';
+import * as appCommonReducer from '../../reducers/app-common.reducer'
+import { IPackages } from '../../models/package';
+import { Observable, Subscription } from 'rxjs';
+import { skip } from 'rxjs/operators';
+import {OAuthService } from 'angular-oauth2-oidc';
 import { IUser } from '../../models/user';
-import * as appCommonReducer from '../../reducers/app-common.reducer';
 
 @Directive({
   selector: '[fm-hasclaim]',

projects/common/src/fm/components/has-package/has-package.directive.ts

@@ -34,8 +34,8 @@ export class HasPackageDirective implements OnDestroy, AfterViewInit {
 
   constructor(private hostTemplateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef,
               private store: Store<appCommonReducer.State>, private packageService: PackageService) {
-    this.thenTemplate = this.hostTemplateRef;
+    this.thenTemplate = hostTemplateRef;
-    this.packSub = this.store.select(appCommonReducer.SelectGetValidUserPackages).subscribe(() => {
+    this.packSub = this.store.select(appCommonReducer.SelectGetValidUserPackages).subscribe((_) => {
       this.updateView();
     });
   }

projects/common/src/fm/components/menu-background/menu-background.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit,Input } from '@angular/core';
-import { Store } from '@ngrx/store';
+import { Store, Action } from '@ngrx/store';
-import * as commonActions from '../../actions/app-common.actions';
 import * as appReducers from '../../reducers/app-common.reducer';
+import * as  commonActions  from '../../actions/app-common.actions';
 
 @Component({
     selector: 'fm-menu-background',

projects/common/src/fm/components/package-exists/package-exists.directive.ts

@@ -34,8 +34,8 @@ export class PackageExistsDirective implements OnDestroy, AfterViewInit {
 
   constructor(private hostTemplateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef,
               private store: Store<appCommonReducer.State>, private packageService: PackageService) {
-    this.thenTemplate = this.hostTemplateRef;
+    this.thenTemplate = hostTemplateRef;
-    this.packSub = this.store.select(appCommonReducer.SelectGetPackages).subscribe(() => {
+    this.packSub = this.store.select(appCommonReducer.SelectGetPackages).subscribe((_) => {
       this.updateView();
     });
   }

projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.ts

@@ -1,9 +1,9 @@
-import { ChangeDetectorRef, Component, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input,Output, HostListener, ChangeDetectorRef, OnDestroy, OnInit,EventEmitter } from '@angular/core';
-import { Store } from '@ngrx/store';
+import { ResumableFileUploadService, File } from './resumable-file-upload.service';
 import { Subscription } from 'rxjs';
-import * as commonActions from '../../actions/app-common.actions';
+import { Store } from '@ngrx/store';
 import * as commonReducer from '../../reducers/app-common.reducer';
-import { File, ResumableFileUploadService } from './resumable-file-upload.service';
+import * as commonActions from '../../actions/app-common.actions';
 
 
 @Component({
@@ -29,7 +29,7 @@ export class ResumableFileUploadComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
       this.uploadService.init();
-      this.refreshSub = this.uploadService.refresh.subscribe(() => {
+      this.refreshSub = this.uploadService.refresh.subscribe((e: any) => {
         this.cd.markForCheck();
       });  
     }

projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.service.ts

@@ -1,7 +1,8 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { UploadState, UploadxOptions, UploadxService } from 'ngx-uploadx';
 import { Subject , Subscription } from 'rxjs';
+import { HttpClient } from "@angular/common/http";
+import { UploadxService, UploadState,UploadxOptions} from 'ngx-uploadx';
 import { AppConfig } from '../../shared/app.config';
 
 
@@ -18,7 +19,7 @@ export class ResumableFileUploadService implements OnDestroy{
   private _eventSub:Subscription;
   private initialized = false;
 
-  constructor(private oauthService: OAuthService,private uploadService: UploadxService,public appConfig: AppConfig) {
+  constructor(private httpClient: HttpClient,private oauthService: OAuthService,private uploadService: UploadxService,public appConfig: AppConfig) {
    
   }
 
@@ -40,9 +41,11 @@ export class ResumableFileUploadService implements OnDestroy{
 
   updatetotalprogress() {
     let totalProgress =0;
+    let n=0;
     for(let i =0;i<this.files.length;i++) {
       if(!this.files[i].error) {
         totalProgress+=this.files[i].progress;
+        n++;
       }
     }
     this.totalProgress=totalProgress/this.files.length;
@@ -83,7 +86,7 @@ export class ResumableFileUploadService implements OnDestroy{
       this.refresh.next({});
   }
 
-  addFiles = (files: any[], _event: any, metadata:any) => {
+  addFiles = (files: any[], event: any, metadata:any) => {
     for (const f of files) {
       const options:UploadxOptions = {metadata:metadata};
       this.uploadService.handleFiles(f,options);
@@ -130,6 +133,7 @@ export class ResumableFileUploadService implements OnDestroy{
 }
 
 export class File {
+  private file: any;
   public fileName: string;
   public progress: number;
   public identifier: string;
@@ -138,7 +142,9 @@ export class File {
   public error: boolean;
   public errorMessage: string;
 
+
   constructor(state: UploadState) {
+    this.file = state;
     this.fileName = state.file.name;
     this.progress = state.progress?state.progress:0;
     this.identifier = state.uploadId;

projects/common/src/fm/components/session-cleared/session-cleared.component.ts

@@ -1,8 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { Store } from '@ngrx/store';
-import * as appCommonActions from '../../actions/app-common.actions';
 import * as appCommonReducers from '../../reducers/app-common.reducer';
+import * as appCommonActions from '../../actions/app-common.actions';
 
 
 

projects/common/src/fm/components/side-panel/side-panel.component.html

@@ -1,5 +1,5 @@
 <div class="side-panel hidden" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left,'extrawide':extrawide}" [ngStyle]="{'top':top}">
-  <div *ngIf="collapsable" class="arrow rounded-end p-2" (click)="handleToggleClick()">
+  <div *ngIf="collapsable" class="arrow rounded-end p-2" (click)="handleToggleClick($event)">
     <i class="fal 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)">

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input,Output,ViewChild,EventEmitter, ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef, ViewEncapsulation  } from '@angular/core';
 
 @Component({
   selector: 'fm-side-panel',
@@ -22,7 +22,7 @@ export class SidePanelComponent  implements OnChanges {
   private resizeTop=50;
   public resizing=false;
 
-  constructor(private element: ElementRef) {
+  constructor(private element: ElementRef,private ref: ChangeDetectorRef) {
     this.collapsable = false;
     this.setTop();
   }
@@ -46,7 +46,7 @@ export class SidePanelComponent  implements OnChanges {
     this.setTop();
   }
 
-  handleToggleClick() {
+  handleToggleClick(event) {
     if (this.collapsable) {
       this.collapsed = !this.collapsed;     
     }
@@ -85,7 +85,7 @@ export class SidePanelComponent  implements OnChanges {
   }
 
   @HostListener('window:resize', ['$event'])
-  handleResize() {
+  handleResize(event) {
     this.setTop();
   }
 }

projects/common/src/fm/components/tag-input/tag-input.component.html

@@ -2,7 +2,7 @@
   <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i
     (click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span><input
   type="text" #tagInputElement
-  (blur)="handleBlur(false)"
+  (blur)="handleBlur($event, false)"
   (keyup)="handleKeyUp($event)"
   [(ngModel)]="tag"
   [ngbTypeahead]="findTag"

projects/common/src/fm/components/tag-input/tag-input.component.ts

@@ -65,7 +65,7 @@ export class TagInputComponent implements ControlValueAccessor {
     this.propagateChange(tags);
   }
 
-  handleBlur(keepFocus = true) {
+  handleBlur(event, keepFocus = true) {
     if (!this.typeahead.isPopupOpen()) {
       this.addTag(this.tag, keepFocus);
     } else {
@@ -89,7 +89,6 @@ export class TagInputComponent implements ControlValueAccessor {
     this.tag = '';
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   propagateChange = (_: any) => {
   };
 

projects/common/src/fm/components/timespan/timespan.component.html

@@ -1,4 +1,4 @@
-<div class="timespan p-1" (window:resize)="handleResize()">
+<div class="timespan p-1" (window:resize)="handleResize($event)">
    <div (click)="handleClick()">{{caption}}</div>
    <ng-template #popoverContent let-caption="popoverCaption">{{caption}}</ng-template>
    <div class="popover-anchor" [style.left.px] = "startPopoverLeft" [ngbPopover]="popoverContent" #popoverStart="ngbPopover">&nbsp;</div>
@@ -17,13 +17,13 @@
             <option value="8">Year</option>
           </select>      
      </div> -->
-     <div class="timeline" (window:mousemove)="handleMouseMove($event)" (window:touchmove)="handleMouseMove($event)" (window:mouseup)="handleMouseUp()" (window:touchend)="handleMouseUp()" (wheel)="handleMouseWheel($event)" [style.height.px]="height">
+     <div class="timeline" (window:mousemove)="handleMouseMove($event)" (window:touchmove)="handleMouseMove($event)" (window:mouseup)="handleMouseUp($event)" (window:touchend)="handleMouseUp($event)" (wheel)="handleMouseWheel($event)" [style.height.px]="height">
-        <canvas #timeLine (mousedown)="handleViewPanMouseDown($event)" (touchstart)="handleViewPanMouseDown($event)" (mousemove)="handleCanvasMouseMove($event)" (mouseleave)="handleCanvasMouseLeave()">
+        <canvas #timeLine (mousedown)="handleViewPanMouseDown($event)" (touchstart)="handleViewPanMouseDown($event)" (mousemove)="handleCanvasMouseMove($event)" (mouseleave)="handleCanvasMouseLeave($event)">
         </canvas>
         <div class="control-container"  [style.margin-left.px]="marginLeft" [style.height.px]="lineHeight" >
-            <div class="leftGrip rounded-start" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter()" (mouseleave)="handleLeftGripMouseLeave()"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
+            <div class="leftGrip rounded-start" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
-            <div class="range" [style.width.px]="rangeWidth" (mousedown)="handleRangeGripMouseDown($event)" (touchstart)="handleRangeGripMouseDown($event)" (mouseenter)="handleRangeGripMouseEnter()"></div>
+            <div class="range" [style.width.px]="rangeWidth" (mousedown)="handleRangeGripMouseDown($event)" (touchstart)="handleRangeGripMouseDown($event)" (mouseenter)="handleRangeGripMouseEnter($event)"></div>
-            <div class="rightGrip rounded-end" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter()" (mouseleave)="handleRightGripMouseLeave()"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
+            <div class="rightGrip rounded-end" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
         </div>
      </div>
      <!-- <div>

projects/common/src/fm/components/timespan/timespan.component.ts

@@ -1,5 +1,5 @@
+import { Component, OnInit,Input,ViewChild,OnChanges,ChangeDetectorRef,Output, EventEmitter,SimpleChanges } from '@angular/core';
 import { DatePipe } from '@angular/common';
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';
 import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
 
 export interface TimeSpan {
@@ -73,8 +73,7 @@ export class TimespanComponent implements OnInit, OnChanges {
     canvas.width = this.elementWidth * this.ratio;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getPosibleUnits(scale:number):number[] {
-  getPosibleUnits(_scale:number):number[] {
     const posibleUnits = [];
     for(const u of [3,4,6,8]) {
       if((this.unitScale <=u) )
@@ -120,6 +119,7 @@ export class TimespanComponent implements OnInit, OnChanges {
   }
 
   getStartEndCaption(date:Date,otherDate:Date,unitScale:number,suffix = false,extended=true):string {    
+    const showSuffix = false;
     otherDate=new Date(otherDate.getTime()-1); // fix year edge case
     if(unitScale == 3) { 
       let format="HH:00";
@@ -234,6 +234,9 @@ export class TimespanComponent implements OnInit, OnChanges {
   }
 
   getNextTick(viewStartDate:Date, tick:number,step:number,unitScale:number):number {    
+    const unitTextWidth = this.getUnitTextWidth(unitScale);
+    const dateOffset =this.getUnitDateOffset(viewStartDate,unitScale,tick);
+    const date = new Date(viewStartDate.getTime() + dateOffset);
     let nextTick=tick+step+Math.trunc(step/2);
     const nextDateOffset =this.getUnitDateOffset(viewStartDate,unitScale,nextTick);
     const nextDate = new Date(viewStartDate.getTime() + nextDateOffset);    
@@ -344,8 +347,7 @@ export class TimespanComponent implements OnInit, OnChanges {
     this.caption=this.getCaption(startDate,endDate,this.unitScale);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  snapToUnit(date:Date,unitScale:number):Date {
-  snapToUnit(date:Date,_unitScale:number):Date {
     const d = new Date(date.getTime() + (this.unitScales[this.unitScale]/2));
     const offsetInMilliseconds =this.getUnitDateOffset(d,this.unitScale,0)
     return new Date(d.getTime()+offsetInMilliseconds);
@@ -415,14 +417,14 @@ export class TimespanComponent implements OnInit, OnChanges {
     event.preventDefault();
   }
 
-  handleRightGripMouseEnter() {
+  handleRightGripMouseEnter(event:MouseEvent) {
     this.mouseX=-1;
     this.mouseY=-1;
     this.redraw();    
     if(!this.rangeGripMove && !this.leftGripMove && !this.rightGripMove)  this.popoverEnd.open(this.endCaption);
   }
 
-  handleRightGripMouseLeave() {
+  handleRightGripMouseLeave(event:MouseEvent) {
     if(!this.rightGripMove) this.popoverEnd.close();
   }
 
@@ -433,18 +435,18 @@ export class TimespanComponent implements OnInit, OnChanges {
     event.preventDefault();
   }
 
-  handleLeftGripMouseEnter() {
+  handleLeftGripMouseEnter(event:MouseEvent|TouchEvent) {
     this.mouseX=-1;
     this.mouseY=-1;
     this.redraw();
     if(!this.rangeGripMove && !this.leftGripMove && !this.rightGripMove) this.popoverStart.open(this.startCaption);
   }
 
-  handleLeftGripMouseLeave() {
+  handleLeftGripMouseLeave(event:MouseEvent) {
     if(!this.leftGripMove) this.popoverStart.close();
   }
 
-  handleRangeGripMouseEnter() {
+  handleRangeGripMouseEnter(event:MouseEvent) {
     this.mouseX=-1;
     this.mouseY=-1;
     this.redraw();    
@@ -462,7 +464,7 @@ export class TimespanComponent implements OnInit, OnChanges {
     event.preventDefault();
   }
 
-  handleMouseUp() {
+  handleMouseUp(event:MouseEvent|TouchEvent) {
     //this.updateControl(event);
     this.startDate = this.getStartDate(this.lastOffsetInPixels);
     this.endDate = this.getEndDate(this.lastOffsetInPixels);
@@ -496,7 +498,7 @@ export class TimespanComponent implements OnInit, OnChanges {
     this.redraw();
   }
 
-  handleCanvasMouseLeave() {
+  handleCanvasMouseLeave(event:MouseEvent) {
     this.mouseX = -1;
     this.mouseY = -1;
     this.redraw();
@@ -508,6 +510,7 @@ export class TimespanComponent implements OnInit, OnChanges {
       return true;
     } else {
       nextScale*=1.1;
+      const canZoom=false;
       const oneUnit = (this.getUnitDateOffset(this.viewMinDate,8,1)- this.getUnitDateOffset(this.viewMinDate,8,0)) / nextScale;   
       const unitTextWidth=this.getUnitTextWidth(8);
       const steps=this.getSteps(8);
@@ -562,7 +565,7 @@ export class TimespanComponent implements OnInit, OnChanges {
     this.updateStyle(this.startDate,this.endDate);
   }
 
-  handleResize() {
+  handleResize(event:any) {
     if(this.initialized) {
       this.setCanvasSize();
       this.updateStyle(this.startDate,this.endDate);
@@ -570,7 +573,7 @@ export class TimespanComponent implements OnInit, OnChanges {
     }   
   }
 
-  ngOnChanges() {
+  ngOnChanges (changes: SimpleChanges) {
     if(this.initialized) {
       this.setCanvasSize();
       this.updateStyle(this.startDate,this.endDate);

projects/common/src/fm/effects/app-common.effects.ts

@@ -20,7 +20,7 @@ export class AppCommonEffects {
   login$ =  createEffect(() => this.actions$.pipe(
     ofType(appCommonActions.LOGIN),
     withLatestFrom(this.store$.select(appCommonReducers.selectGetInitialized)),
-    mergeMap(([action]) => {
+    mergeMap(([action, initialized]) => {
       const a = (action as appCommonActions.Login);
       this.oauthService$.initCodeFlow(a.url,{"prompt":"login"});
       return [];
@@ -28,14 +28,14 @@ export class AppCommonEffects {
 
     logout$ =  createEffect(() => this.actions$.pipe(
       ofType(appCommonActions.LOGOUT),
-      mergeMap(() => {
+      mergeMap((action) => {
         this.oauthService$.revokeTokenAndLogout();
         return [];
       })),{dispatch:false});
 
   loadItemTypes$ =  createEffect(() => this.actions$.pipe(
     ofType(appCommonActions.LOADITEMTYPES),
-    switchMap(() => {
+    switchMap((action) => {
       return this.itemService$.getItemTypes().pipe(
         map((itemTypes: IItemTypes) => new appCommonActions.LoadItemTypesSuccess(itemTypes)),
         catchError(error => of(new appCommonActions.Fail(error))))
@@ -45,7 +45,7 @@ export class AppCommonEffects {
   initUser$ =  createEffect(() => this.actions$.pipe(
     ofType(appCommonActions.INITUSER),
     first(),
-    switchMap(() => {
+    switchMap((action) => {
         return zip(this.userService$.getCurrentUser(),from(this.oauthService$.loadUserProfile())).pipe(
         switchMap(([user,userInfo]) => {return of(new appCommonActions.InitUserSuccess(user,userInfo as UserInfo))} ),
         catchError(error => of(new appCommonActions.Fail(error))))
@@ -85,7 +85,7 @@ export class AppCommonEffects {
   
   initUserSettingsRoot$ =  createEffect(() => this.actions$.pipe(
     ofType(appCommonActions.INITUSERSETTINGSROOT),
-    switchMap(() => {
+    switchMap(_ => {
       return this.folderService$.getFolder('my_settings').pipe(
         switchMap((item) => of(new appCommonActions.InitUserSettingsRootSuccess(item))),
         catchError(error =>  of(new appCommonActions.Fail(error)))
@@ -134,10 +134,10 @@ export class AppCommonEffects {
       withLatestFrom(this.store$.select(appCommonReducers.selectGetItemTypes)),
       switchMap(([action, itemtypes]) => {
         const a = action as appCommonActions.EditItem;
-        let editor =  "property";
+        var editor =  "property";
         if(a.item.itemType) {
           const itemType = itemtypes[a.item.itemType];
-          editor = itemType && itemType.editor ? itemType.editor : editor;  
+          var editor = itemType && itemType.editor ? itemType.editor : editor;  
         }
       this.router$.navigate(['/editor',editor,'item', a.item.code])
       return [];
@@ -179,14 +179,15 @@ export class AppCommonEffects {
  
   fail$ =  createEffect(() => this.actions$.pipe(
     ofType(appCommonActions.FAIL),
-    map(() => {
+    map((action) => {
+      const failAction = action as appCommonActions.Fail;
       //console.debug(failAction.payload)
       return null;
     })),{dispatch:false});
 
     online$ =  createEffect(() => this.actions$.pipe(
       ofType(appCommonActions.ONLINE),
-      switchMap(() => {
+      switchMap((action) => {
           //console.debug("Online: Check token");
           if(!this.oauthService$.hasValidAccessToken()) {
             //console.debug("No valid token, try to refresh");

projects/common/src/fm/reducers/app-common.reducer.ts

@@ -1,14 +1,14 @@
-import { createFeatureSelector, createSelector } from '@ngrx/store';
 import { tassign } from 'tassign';
-import * as appCommonActions from '../actions/app-common.actions';
 import { IItemTypes} from '../models/item.types';
 import { IListItem } from '../models/list.item';
-import { IPackageMap, IPackages } from '../models/package';
 import { IUser } from '../models/user';
+import { IPackage,IPackageMap,IPackages} from '../models/package';
+import * as appCommonActions from '../actions/app-common.actions';
+import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store';
 
-import { IItem } from '../models/item';
 import { MODULE_NAME } from '../module-name';
-import { getValidPackages } from '../services/package.service';
+import { IItem } from '../models/item';
+import {getValidPackages, isValidPackage} from '../services/package.service';
 
 export interface State {
   openedModalName: string,

projects/common/src/fm/services/admin.service.ts

@@ -1,14 +1,15 @@
-import { HttpClient, HttpParams } from "@angular/common/http";
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { IItem } from '../models/item';
+import { HttpClient, HttpParams } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
+import {ItemTypeService} from './itemtype.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AdminService {
-  constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
+  constructor(public httpClient: HttpClient, public appConfig: AppConfig,private itemTypeService:ItemTypeService) {
   }
 
   ApiEndpoint() {

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

@@ -1,14 +1,21 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Route, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
+import { Router, Route, ActivatedRouteSnapshot, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
+
+
+import { Store } from '@ngrx/store';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { Observable } from 'rxjs';
 
+
+import * as appCommonReducer from '../reducers/app-common.reducer';
+
+
 @Injectable({
   providedIn: 'root',
 })
 export class AuthGuard   { 
  
-  constructor(private oauthService: OAuthService) { }
+  constructor(private oauthService: OAuthService, private router: Router, private store: Store<appCommonReducer.State>) { }
   
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
     //console.debug("AuthGuard->canActivate", route, state);
@@ -24,8 +31,7 @@ export class AuthGuard   {
     return this.checkLogin(url, childRoute);
   }
   
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  canLoad(route: Route, segments: UrlSegment[]): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
-  canLoad(route: Route, _segments: UrlSegment[]): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
     //console.debug("AuthGuard->canLoad", route, segments);
     return this.checkLogin(route.path, null);
   }

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

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Component, Injectable } from '@angular/core';
 import { NgbDateAdapter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 
 @Injectable({

projects/common/src/fm/services/download.service.ts

@@ -1,14 +1,15 @@
-import { HttpClient } from "@angular/common/http";
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { IItem } from '../models/item';
+import { HttpClient } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
+import {ItemTypeService} from './itemtype.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class DownloadService {
-  constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
+  constructor(public httpClient: HttpClient, public appConfig: AppConfig,private itemTypeService:ItemTypeService) {
   }
 
   ApiEndpoint() {

projects/common/src/fm/services/event.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { HttpTransportType, HubConnection, HubConnectionBuilder, HubConnectionState, LogLevel } from '@microsoft/signalr';
-import { OAuthService } from 'angular-oauth2-oidc';
-import { Subject } from 'rxjs';
 import { IEventMessage } from '../models/event.message';
+import { Subject, timer } from 'rxjs';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { HubConnection, HubConnectionBuilder, LogLevel ,HttpTransportType,HubConnectionState} from '@microsoft/signalr';
 import { AppConfig } from "../shared/app.config";
 
 
@@ -17,7 +17,7 @@ export class EventService {
   public authenticated = false;
     
   constructor(private oauthService: OAuthService, private appConfig: AppConfig) {
-    this._apiEndPoint = this.appConfig.getConfig("apiEndPoint");
+    this._apiEndPoint = appConfig.getConfig("apiEndPoint");
     this._connection = new HubConnectionBuilder().withUrl(`${ this._apiEndPoint}/eventHub`,
     { transport: HttpTransportType.WebSockets,
       // accessTokenFactory: () => {
@@ -28,7 +28,7 @@ export class EventService {
     this._connection.on('event', eventMessage => {
       this.event.next(eventMessage);
     });
-    this._connection.onreconnected(() => {
+    this._connection.onreconnected( event => {
       this.Authenticate();
     });
     this.Start();
@@ -42,6 +42,7 @@ export class EventService {
   }
 
   private Authenticate() {
+    const accessToken = this.oauthService.getAccessToken();   
     if (this.oauthService.hasValidAccessToken()) {
       this._connection.send('authenticate', this.oauthService.getAccessToken());
       this.authenticated=true;

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 
@@ -13,6 +12,7 @@ import * as appCommonActions from '../actions/app-common.actions';
 })
 export class FullScreenGuard  { 
  
+  private loginDispatched = false;
   constructor(private store: Store<appCommonReducer.State> ) { }
 
   setFullScreen():boolean {
@@ -20,11 +20,11 @@ export class FullScreenGuard  {
     return true;
   }
 
-  canActivate(_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): boolean {
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     return this.setFullScreen();
   } 
 
-  canActivateChild(_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): boolean {
+  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     return this.setFullScreen();
   } 
 }

projects/common/src/fm/services/geolocator.service.ts

@@ -1,6 +1,7 @@
-import { HttpClient } from "@angular/common/http";
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { IUser } from '../models/user';
+import { HttpClient,HttpHeaders } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 
 @Injectable({

projects/common/src/fm/services/gradient.service.ts

@@ -16,7 +16,7 @@ export class GradientService {
         gd += `rgba(${gs.color.red},${gs.color.green},${gs.color.blue},${gs.color.alpha/255})`;          
         gd +=` ${gs.relativestop*100}%`
       }
-      gradient.forEach(() => {
+      gradient.forEach((gs) => {
       });
       gd+=')"}';
       

projects/common/src/fm/services/healthcheck.service.ts

@@ -21,7 +21,7 @@ import { AppConfig } from "../shared/app.config";
     check(interval:number): Observable<boolean> {
       const retval = new BehaviorSubject<boolean>(true);
       setInterval(() => {
-        this.httpClient.get(`${this.ApiEndpoint()}/api/v1/healthcheck`).pipe(map(() => true),catchError(() => of(false))).toPromise().then((status) => {
+        this.httpClient.get(`${this.ApiEndpoint()}/api/v1/healthcheck`).pipe(map(() => true),catchError((error) => of(false))).toPromise().then((status) => {
            retval.next(status);
         });
       },interval);

projects/common/src/fm/services/image.service.ts

@@ -1,5 +1,7 @@
-import { HttpClient } from "@angular/common/http";
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { IUser } from '../models/user';
+import { HttpClient,HttpHeaders } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 
 @Injectable({

projects/common/src/fm/services/item.service.ts

@@ -1,14 +1,16 @@
-import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { IItem } from '../models/item';
+import { map } from 'rxjs/operators';
 import { IItemType } from '../models/item.type';
-import { IItemTask } from '../models/itemTask';
 import { IItemLinkType } from '../models/itemlink.type';
+import { IUrlType } from '../models/url.type';
+import { IItem } from '../models/item';
 import { IJsonline } from '../models/json-line';
-import { IListItem } from '../models/list.item';
+import { IItemTask } from '../models/itemTask';
+import { HttpClient, HttpParams,HttpHeaders } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 import {ItemTypeService} from './itemtype.service';
+import {IListItem} from '../models/list.item';
 
 @Injectable({
   providedIn: 'root',

projects/common/src/fm/services/itemtype.service.ts

@@ -15,37 +15,37 @@ export class ItemTypeService {
 
      getIcon(itemType: string) {
        let icon = "fal fa-file";
-       if (this.itemTypes && this.itemTypes[itemType]) icon = this.itemTypes[itemType].icon;
+       if (this.itemTypes[itemType]) icon = this.itemTypes[itemType].icon;
        return icon;
      }
 
      getColor(itemType: string) {
        let color = "#000000";
-       if (this.itemTypes && this.itemTypes[itemType]) color = this.itemTypes[itemType].iconColor;
+       if (this.itemTypes[itemType]) color = this.itemTypes[itemType].iconColor;
        return color;
      }
 
      getExtraAttributes(itemType: string) {
       let extraAttributes = null;
-      if (this.itemTypes && this.itemTypes[itemType] && this.itemTypes[itemType].extraAttributes) extraAttributes = this.itemTypes[itemType].extraAttributes;
+      if (this.itemTypes[itemType] && this.itemTypes[itemType].extraAttributes) extraAttributes = this.itemTypes[itemType].extraAttributes;
       return extraAttributes;
     }
 
     getSchema(itemType: string): string {
       let schema = null;
-      if (this.itemTypes && this.itemTypes[itemType]) schema = this.itemTypes[itemType].schema;
+      if (this.itemTypes[itemType]) schema = this.itemTypes[itemType].schema;
       return schema;
     }
 
      hasViewer(item: IItem) {
         const itemType: string = item.itemType;
-        if (this.itemTypes && this.itemTypes[itemType]) return this.itemTypes[itemType].viewer !== undefined;
+        if (this.itemTypes[itemType]) return this.itemTypes[itemType].viewer !== undefined;
         return false;
       }
 
       hasEditor(item: IItem) {
         const itemType: string = item.itemType;
-        if (this.itemTypes && this.itemTypes[itemType]) return this.itemTypes[itemType].editor !== undefined;
+        if (this.itemTypes[itemType]) return this.itemTypes[itemType].editor !== undefined;
         return false;
       }
 
@@ -63,10 +63,7 @@ export class ItemTypeService {
               this.itemTypes = itemTypes;
               //return data;
             })
-            .catch((error) => {
+            .catch(error => this.itemTypes = null);  
-              console.log(error);
-              this.itemTypes = null
-            });  
         } else {
           return new Promise<void>((resolve) => {resolve()});
         }

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

@@ -1,11 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Route, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 
 import { Store } from '@ngrx/store';
 
+import * as appCommonReducer from '../reducers/app-common.reducer'
 import * as appCommonActions from '../actions/app-common.actions';
-import * as appCommonReducer from '../reducers/app-common.reducer';
 
 
 @Injectable({
@@ -13,6 +12,7 @@ import * as appCommonReducer from '../reducers/app-common.reducer';
 })
 export class NavBarGuard  {
 
+  private loginDispatched = false;
   constructor(private store: Store<appCommonReducer.State>) { }
 
   setNavBar():boolean {
@@ -20,11 +20,11 @@ export class NavBarGuard  {
     return true;
   }
 
-  canActivate(_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): boolean {
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     return this.setNavBar();
   } 
 
-  canActivateChild(_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): boolean {
+  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     return this.setNavBar();
   } 
 }

projects/common/src/fm/services/package-guard.service.ts

@@ -9,8 +9,7 @@ export class PackageGuard  {
 
   constructor(private packageService: PackageService) { }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
-  canActivate(route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): boolean {
     return route.data && route.data.package && this.hasPackageForRoute(route.data.package);
   }
 

projects/common/src/fm/services/package.service.ts

@@ -1,14 +1,14 @@
 import {Injectable} from '@angular/core';
 import {Store} from '@ngrx/store';
-import { IPackage, IPackages } from '../models/package';
 import * as appCommonReducer from '../reducers/app-common.reducer';
+import {IPackage, IPackages} from '../models/package';
 
-import { HttpClient } from '@angular/common/http';
-import { Observable, iif } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
 import {IItem} from '../models/item';
 import {IItemTask} from '../models/itemTask';
+import {HttpClient} from '@angular/common/http';
 import {AppConfig} from '../shared/app.config';
+import {Observable,iif,of} from 'rxjs';
+import {switchMap} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',

projects/common/src/fm/services/schema.service.ts

@@ -31,8 +31,10 @@ export class SchemaService {
     Observable<{schemaJson: any, schemaLayout: any}> {
     return this.getSchema(schemaUrl).pipe(
       switchMap(
-        () => this.getSchemaLayout(schemaUrl, locale)
+        schemaJson => this.getSchemaLayout(schemaUrl, locale)
-          .pipe(catchError(() => of(undefined))),
+          .pipe(catchError(err => {
+            return of(undefined);
+          })),
         (schemaJson, schemaLayout) => {
           return ({schemaJson, schemaLayout});
         }

projects/common/src/fm/services/state-serializer.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Query } from '@angular/core';
 import { IQueryState } from '../models/query.state';
 
 @Injectable({

projects/common/src/fm/services/timespan.service.ts

@@ -1,5 +1,7 @@
-import { DatePipe } from '@angular/common';
 import { Injectable } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { Observable ,  Observer } from 'rxjs';
+import { ITypeaheadItem } from '../models/typeahead.item';
 
 @Injectable({
   providedIn: 'root',
@@ -12,6 +14,7 @@ export class TimespanService {
   quarters: string[] = ['KW1', 'KW2', 'KW3', 'KW4'];
 
   getStartEndCaption(date: Date, otherDate: Date, unitScale: number, suffix = false, extended = true): string {
+    const showSuffix = false;
     otherDate = new Date(otherDate.getTime() - 1); // fix year edge case
     if (unitScale == 3) {
       let format = "HH:00";

projects/common/src/fm/services/typeahead.service.ts

@@ -1,7 +1,7 @@
-import { HttpClient } from "@angular/common/http";
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable ,  Observer } from 'rxjs';
 import { ITypeaheadItem } from '../models/typeahead.item';
+import { HttpClient, HttpParams  } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 
 @Injectable({

projects/common/src/fm/services/weather.service.ts

@@ -1,14 +1,14 @@
-import { HttpClient } from '@angular/common/http';
 import {Injectable} from '@angular/core';
-import moment from 'moment';
+import {HttpClient} from '@angular/common/http';
-import { getCenter } from 'ol/extent';
-import { GeoJSON } from 'ol/format';
 import {Observable} from 'rxjs';
+import {GeoJSON} from 'ol/format';
 import {map, switchMap} from 'rxjs/operators';
-import { HourlyWeatherData, WeatherData } from '../models/WeatherData';
+import {getCenter} from 'ol/extent';
-import { IItem } from '../models/item';
+import moment from 'moment';
-import { WeatherCurrentObservation } from '../models/weatherCurrentObservation';
 import {AppConfig} from '../shared/app.config';
+import {WeatherCurrentObservation} from '../models/weatherCurrentObservation';
+import {IItem} from '../models/item';
+import {HourlyWeatherData, WeatherData} from '../models/WeatherData';
 
 @Injectable({
   providedIn: 'root',
@@ -49,7 +49,7 @@ export class WeatherService {
     return this.getWeatherRange(centroid, startDateString, endDateString);
   }
 
-  public getDailyHistoricalObservations(centroid: number[], startDate: string): Observable<HourlyWeatherData[]> {
+  public getDailyHistoricalObservations(centroid: number[], startDate: string, endDate: string): Observable<HourlyWeatherData[]> {
     const endpoint = this.appConfig.getConfig('weatherApiEndPoint');
     const apiKey = this.appConfig.getConfig('weatherApiKey');
 

projects/common/src/fm/shared/accesstoken.interceptor.ts

@@ -17,7 +17,7 @@ export class AccessTokenInterceptor implements HttpInterceptor {
   private base: string;
 
   constructor(private injector: Injector, private appConfig: AppConfig, @Inject(DOCUMENT) private document: any) {   
-    this.base = this.document.location.href;
+    this.base = document.location.href;
   }
 
   hasAudience(url: string): boolean {