Markers and leaflet edit

web-app/admin/src/app/map/leaflet.component.ts

@@ -3,7 +3,6 @@ import { moveItemInArray } from '@angular/cdk/drag-drop';
 import { ReorderEvent } from './layers/layers.component';
 import { LayerService, ToggleEvent, ZoomEvent, OpacityEvent, StyleEvent } from './layers/layer.service';
 import { MapService } from '../upgrade/ajs-upgraded-providers';
-import { I } from '@angular/cdk/keycodes';
 
 @Component({
   selector: 'app-leaflet',

web-app/package.json

@@ -80,7 +80,8 @@
     "@turf/helpers": "4.3.0",
     "@turf/kinks": "4.3.0",
     "@types/geojson": "^7946.0.7",
-    "@types/leaflet.markercluster": "1.5.4",
+    "@types/leaflet-editable": "1.2.6",
+    "@types/leaflet.markercluster": "1.5.3",
     "@uirouter/angular": "10.0.0",
     "@uirouter/angular-hybrid": "^14.0.0",
     "@uirouter/angularjs": "1.0.30",
@@ -107,7 +108,7 @@
     "leaflet": "1.7.1",
     "leaflet-editable": "1.2.0",
     "leaflet-groupedlayercontrol": "git+https://github.com/newmanw/leaflet-groupedlayercontrol.git#master",
-    "leaflet.markercluster": "1.5.4",
+    "leaflet.markercluster": "1.5.3",
     "lodash": "^4.17.21",
     "material-components-web": "3.2.0",
     "mgrs": "1.0.0",

web-app/src/app/authentication/authorize.component.ts

@@ -29,7 +29,6 @@ export class AuthorizeComponent {
         this.router.navigate(['map']);
       },
       error: () => {
-        console.log('Error authentication')
         this.deviceId.setErrors({ invalid: true})
         // TODO show error message
       }

web-app/src/app/authentication/idp/idp.component.ts

@@ -1,12 +1,12 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { AuthenticationStrategy } from 'src/app/api/api.entity';
 import { UserService } from '../../user/user.service';
 @Component({
   selector: 'idp-authentication',
   templateUrl: './idp.component.html',
   styleUrls: ['./idp.component.scss']
 })
-export class IdpAuthenticationComponent implements OnInit {
+export class IdpAuthenticationComponent {
   @Input() strategy: AuthenticationStrategy
   @Output() onSignin = new EventEmitter<any>()
 
@@ -19,10 +19,6 @@ export class IdpAuthenticationComponent implements OnInit {
     private userService: UserService
   ) {}
 
-  ngOnInit(): void {
-    console.log('strat init is ', this.strategy)
-  }
-
   signin() {
     this.userService.idpSignin(this.strategy.name).subscribe({
       next: (response: any) => {

web-app/src/app/event/event.service.ts

@@ -652,7 +652,6 @@ export class EventService {
         return true;
       }
     }) || {};
-    // console.log('get next feed event', event.id) 
     return this.eventsById[event.id].feedsById[nextFeed.id];
   }
 

web-app/src/app/export/export-dialog.component.ts

@@ -127,7 +127,6 @@ export class ExportDialogComponent implements OnInit, OnDestroy {
 		})
 
 		ref.afterDismissed().subscribe(event => {
-			console.log('CODE = snackbar dismissed', event)
 			if (event.dismissedByAction) {
 				exports.splice(index, 0, exp);
 				this.dataSource.data = exports

web-app/src/app/feed-panel/feed-panel.component.html

@@ -5,24 +5,13 @@
 </div>
 
 <div class="feeds-content">
-  <user-view *ngIf="viewUser" @slide class="component__view" [user]="viewUser" [event]="event"
-    (close)="onUserViewClose()">
-  </user-view>
+  <user-view *ngIf="viewUser" @slide class="component__view" [user]="viewUser" [event]="event" (close)="onUserViewClose()"></user-view>
 
-  <observation-view *ngIf="viewObservation" @slide class="component__view" [event]="event"
-    [observation]="viewObservation" (close)="onObservationViewClose()" (delete)="onObservationDelete($event)">
-  </observation-view>
+  <observation-view *ngIf="viewObservation" @slide class="component__view" [event]="event" [observation]="viewObservation" (close)="onObservationViewClose()" (delete)="onObservationDelete($event)"></observation-view>
+  <observation-edit *ngIf="editObservation" @slide class="component__view" [observation]="editObservation" (close)="onObservationEditClose($event)"></observation-edit>
+  <observation-edit *ngIf="newObservation" @slide class="component__view" [observation]="newObservation" (close)="onObservationEditClose($event)"></observation-edit>
 
-  <observation-edit *ngIf="editObservation" @slide class="component__view" [observation]="editObservation"
-    (close)="onObservationEditClose($event)">
-  </observation-edit>
-
-  <observation-edit *ngIf="newObservation" @slide class="component__view" [observation]="newObservation"
-    (close)="onObservationEditClose($event)">
-  </observation-edit>
-
-  <feed-item *ngIf="feedItem" @slide class="component__view" [item]="feedItem.item" [feed]="feedItem.feed">
-  </feed-item>
+  <feed-item *ngIf="feedItem" @slide class="component__view" [item]="feedItem.item" [feed]="feedItem.feed"></feed-item>
 
   <contact *ngIf="contactOpen" [open]="contactOpen" [info]="info" (on-contact-close)="onContactClose()"></contact>
   <observation-list class="feed-container" *ngIf="currentTab.id === 'observations'"></observation-list>

web-app/src/app/feed-panel/feed-panel.component.ts

@@ -1,5 +1,5 @@
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, EventEmitter, Inject, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTabGroup } from '@angular/material/tabs';
 import * as moment from 'moment';

web-app/src/app/mage/mage.component.html

@@ -2,7 +2,7 @@
 
 <mat-sidenav-container class="main-container" hasBackdrop="false">
   <mat-sidenav #feed mode="side" position="start" opened>
-    <feed-panel class="feed" [observationLocation]="newObservation"></feed-panel>
+    <feed-panel class="feed" [event]="event" [observationLocation]="newObservation"></feed-panel>
   </mat-sidenav>
 
   <mat-sidenav #preferences mode="slide" position="end" disableClose="true">

web-app/src/app/mage/mage.component.ts

@@ -16,9 +16,10 @@ export class MageComponent implements OnInit, OnDestroy, OnChanges {
 
   map: any
   mapSize: number
+  event: any
   hideFeed: boolean = false
   newObservation: any
-
+  
   @ViewChild('feed') feed: MatSidenav
 
   constructor(
@@ -30,10 +31,12 @@ export class MageComponent implements OnInit, OnDestroy, OnChanges {
   ) {}
 
   ngOnInit(): void {
+    this.filterService.addListener(this)
     this.mapService.addListener(this)
   }
 
   ngOnDestroy(): void {
+    this.filterService.removeListener(this)
     this.mapService.removeListener(this)
   }
 
@@ -48,6 +51,10 @@ export class MageComponent implements OnInit, OnDestroy, OnChanges {
     this.map = $event.map
   }
 
+  onFilterChanged(filter: any) {
+    this.event = filter.event?.added?.length ? filter.event.added[0] : null
+  }
+
   onFeedToggle(): void {
     this.feed.toggle()
     this.mapSize = Date.now()

web-app/src/app/map/clip/clip.component.ts

@@ -1,8 +1,9 @@
-import { Component, Input, ElementRef, Inject, OnDestroy, OnChanges, SimpleChanges, OnInit, ViewChild } from '@angular/core'
+import { Component, Input, ElementRef, OnDestroy, OnChanges, SimpleChanges, OnInit, ViewChild } from '@angular/core'
 import { Feature } from 'geojson'
-import { Map, GeoJSON, PathOptions, Layer, FixedWidthMarker, control, TileLayer, WMSOptions, Circle, LatLng } from 'leaflet'
+import { Map, GeoJSON, PathOptions, Layer, control, TileLayer, WMSOptions, Circle, LatLng } from 'leaflet'
 import { MapService } from '../map.service'
 import { LocalStorageService } from '../../http/local-storage.service'
+import { fixedWidthMarker } from '../marker/FixedWidthMarker'
 
 interface FeatureWithStyle extends Feature {
   style?: any
@@ -119,7 +120,7 @@ export class MapClipComponent implements OnInit, OnChanges, OnDestroy {
 
     this.layer = new GeoJSON(this.feature, {
       pointToLayer: function (feature: FeatureWithStyle, latlng): Layer {
-        return new FixedWidthMarker(latlng, {
+        return fixedWidthMarker(latlng, {
           iconUrl: feature.style ? feature.style.iconUrl : ''
         })
       },