initial fixes

Author: ryanslatten

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

@@ -6,15 +6,16 @@ <h2 mat-dialog-title>Filter</h2>
         <mat-form-field appearance="fill">
           <mat-label>Event</mat-label>
           <input type="text" matInput [formControl]="eventControl" [matAutocomplete]="autoEvent">
-          <mat-autocomplete #autoEvent="matAutocomplete" [displayWith]="onDisplayEvent" (optionSelected)="onSelectEvent()">
+          <mat-autocomplete #autoEvent="matAutocomplete" [displayWith]="onDisplayEvent"
+            (optionSelected)="onSelectEvent()">
             <mat-option *ngFor="let event of filteredEvents | async" [value]="event">
               <div class="option-text">{{event.name}}</div>
               <div class="option-description">{{event.description}}</div>
             </mat-option>
           </mat-autocomplete>
         </mat-form-field>
       </div>
-    
+
       <div>
         <mat-form-field appearance="fill">
           <mat-label>Teams</mat-label>
@@ -34,7 +35,7 @@ <h2 mat-dialog-title>Filter</h2>
           </mat-autocomplete>
         </mat-form-field>
       </div>
-    
+
       <div>
         <mat-form-field appearance="fill">
           <mat-label>Time</mat-label>
@@ -47,8 +48,10 @@ <h2 mat-dialog-title>Filter</h2>
 
         <div class="datetime" *ngIf="intervalChoice.filter === 'custom'">
           <div>
-            <datetime-picker title="Start" [datetime]="defaultStartDate" [timezone]="timeZone" (dateTimeChange)="onStartDate($event)"></datetime-picker>
-            <datetime-picker title="Start" [datetime]="defaultStartDate" [timezone]="timeZone" (dateTimeChange)="onStartDate($event)"></datetime-picker>
+            <datetime-picker title="Start" [datetime]="defaultStartDate" [timezone]="timeZone"
+              (dateTimeChange)="onStartDate($event)"></datetime-picker>
+            <datetime-picker title="End" [datetime]="defaultEndDate" [timezone]="timeZone"
+              (dateTimeChange)="onEndDate($event)"></datetime-picker>
           </div>
           <div class="timezone">
             <button mat-stroked-button class="timezone__button" (click)="onTimezone()">

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

@@ -131,6 +131,10 @@ export class FilterComponent implements OnInit {
     this.startDate = date;
   }
 
+  onEndDate(date: Date): void {
+    this.endDate = date;
+  }
+
   onTimezone(): void {
     this.timeZone = this.timeZone === 'gmt' ? 'local' : 'gmt';
   }

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

@@ -14,7 +14,7 @@ export class LayerService {
   ) { }
 
   getLayersForEvent(event, includeUnavailable?: any): Observable<any> {
-    return this.httpClient.get(`/api/events/${event.id}/layers`, { params: { includeUnavailable } } )
+    return this.httpClient.get(`/api/events/${event.id}/layers`, includeUnavailable && { params: { includeUnavailable } })
   }
 
   getClosestFeaturesForLayers(layerIds, latlng, tile): Observable<any> {

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

@@ -24,11 +24,13 @@ export class ObservationService {
   }
 
   getObservationsForEvent(event: MageEvent, options: any): Observable<any> {
-    const parameters: any = { eventId: event.id, states: 'active', populate: 'true' };
-    if (options.interval) {
-      parameters.observationStartDate = options.interval.start;
-      parameters.observationEndDate = options.interval.end;
-    }
+    const parameters: any = {
+      eventId: event.id,
+      states: 'active',
+      populate: 'true',
+      ...options.interval?.start && { observationStartDate: options.interval.start },
+      ...options.interval?.end && { observationEndDate: options.interval.end }
+    };
 
     return this.client.get<any>(`/api/events/${event.id}/observations`, { params: parameters }).pipe(
       map((observations: any) => {
@@ -41,7 +43,7 @@ export class ObservationService {
     return this.saveObservation(event, observation).pipe(
       map((observation) => {
         return this.transformObservations(observation, event)[0]
-     })
+      })
     )
   }
 
@@ -65,11 +67,11 @@ export class ObservationService {
     return this.client.delete<any>(`/api/events/${event.id}/observations/${observation.id}/favorite`, { body: observation })
   }
 
-  markObservationAsImportantForEvent(event, observation, important): Observable<any>  {
+  markObservationAsImportantForEvent(event, observation, important): Observable<any> {
     return this.client.put<any>(`/api/events/${event.id}/observations/${observation.id}/important`, important)
   }
 
-  clearObservationAsImportantForEvent(event, observation): Observable<any>  {
+  clearObservationAsImportantForEvent(event, observation): Observable<any> {
     return this.client.delete<any>(`/api/events/${event.id}/observations/${observation.id}/important`, { body: observation })
   }
 
@@ -200,7 +202,7 @@ export class ObservationService {
 
     var params = new HttpParams();
     params = params.append('access_token', this.localStorageService.getToken())
-    
+
 
     return url + '?' + params.toString()
   }

web-app/src/app/user/location/location.service.ts

@@ -25,7 +25,7 @@ export class LocationService {
 
   constructor(
     private httpClient: HttpClient
-  ) {}
+  ) { }
 
   create(eventId: number, location: any): Observable<any> {
     return this.httpClient.post<any>(`/api/events/${eventId}/locations/`, location)
@@ -35,11 +35,11 @@ export class LocationService {
     const parameters = {
       groupBy: 'users',
       populate: true,
-      ...(options?.interval?.start) && { startDate: options.interval.start },
-      ...(options?.interval?.end) && { endDate: options.interval.end }
+      ...(options.interval?.start) && { startDate: options.interval.start },
+      ...(options.interval?.end) && { endDate: options.interval.end }
     }
 
-    return this.httpClient.get<any>(`/api/events/${event.id}/locations/users`, { params: parameters } )
+    return this.httpClient.get<any>(`/api/events/${event.id}/locations/users`, { params: parameters })
   }
 
 }