Fix attachment upload service

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

@@ -272,80 +272,77 @@ export class EventService {
     return this.eventsById[eventId];
   }
 
-  saveObservation(observation) {
+  saveObservation(observation: any) {
     const event = this.eventsById[observation.eventId];
     const isNewObservation = !observation.id;
-    const observable = this.observationService.saveObservationForEvent(event, observation)
 
-    observable.subscribe((observation: any) => {
-      event.observationsById[observation.id] = observation;
+    return this.observationService.saveObservationForEvent(event, observation)
+      .pipe(
+        tap((update: any) => {
+          event.observationsById[update.id] = update;
 
-      // Check if this new observation passes the current filter
-      if (this.filterService.observationInFilter(observation)) {
-        event.filteredObservationsById[observation.id] = observation;
-        isNewObservation ? this.observationsChanged({ added: [observation] }) : this.observationsChanged({ updated: [observation] });
-      }
-    })
-
-    return observable;
+          // Check if this new observation passes the current filter
+          if (this.filterService.observationInFilter(update)) {
+            event.filteredObservationsById[update.id] = update;
+            isNewObservation ? this.observationsChanged({ added: [update] }) : this.observationsChanged({ updated: [update] });
+          }
+        })
+      )
   }
 
   addObservationFavorite(observation) {
     var event = this.eventsById[observation.eventId];
-
-    var observable = this.observationService.addObservationFavorite(event, observation);
-
-    observable.subscribe((updatedObservation: any) => {
-      event.observationsById[updatedObservation.id] = updatedObservation;
-      this.observationsChanged({ updated: [updatedObservation] });
-    });
-
-    return observable;
+    return this.observationService.addObservationFavorite(event, observation)
+      .pipe(
+        tap((update: any) => {
+          event.observationsById[update.id] = update;
+          this.observationsChanged({ updated: [update] });
+        })
+      )
   }
 
   removeObservationFavorite(observation) {
     var event = this.eventsById[observation.eventId];
-
-    var observable = this.observationService.removeObservationFavorite(event, observation);
-    observable.subscribe((updatedObservation: any) => {
-      event.observationsById[updatedObservation.id] = updatedObservation;
-      this.observationsChanged({ updated: [updatedObservation] });
-    });
-
-    return observable;
+    return this.observationService.removeObservationFavorite(event, observation)
+      .pipe(
+        tap((update: any) => {
+          event.observationsById[update.id] = update;
+          this.observationsChanged({ updated: [update] });
+        })
+      )
   }
 
   markObservationAsImportant(observation, important): Observable<any> {
     var event = this.eventsById[observation.eventId];
-    const observable = this.observationService.markObservationAsImportantForEvent(event, observation, important)
-    observable.subscribe((updatedObservation: any) => {
-      event.observationsById[updatedObservation.id] = updatedObservation;
-      this.observationsChanged({ updated: [updatedObservation] });
-    })
-
-    return observable
+    return this.observationService.markObservationAsImportantForEvent(event, observation, important)
+      .pipe(
+        tap((update: any) => {
+          event.observationsById[update.id] = update;
+          this.observationsChanged({ updated: [update] });
+        })
+      )
   }
 
   clearObservationAsImportant(observation): Observable<any> {
     var event = this.eventsById[observation.eventId];
-    const observable = this.observationService.clearObservationAsImportantForEvent(event, observation)
-    observable.subscribe((updatedObservation: any) => {
-      event.observationsById[updatedObservation.id] = updatedObservation;
-      this.observationsChanged({ updated: [updatedObservation] });
-    })
-
-    return observable
+    return this.observationService.clearObservationAsImportantForEvent(event, observation)
+      .pipe(
+        tap((update: any) => {
+          event.observationsById[update.id] = update;
+          this.observationsChanged({ updated: [update] });
+        })
+      )
   }
 
   archiveObservation(observation): Observable<any> {
     var event = this.eventsById[observation.eventId]
-    const observable = this.observationService.archiveObservationForEvent(event, observation)
-    observable.subscribe((archivedObservation: any) => {
-      delete event.observationsById[archivedObservation.id]
-      this.observationsChanged({ removed: [archivedObservation] })
-    })
-
-    return observable
+    return this.observationService.archiveObservationForEvent(event, observation)
+      .pipe(
+        tap((archived: any) => {
+          delete event.observationsById[archived.id]
+          this.observationsChanged({ removed: [archived] })
+        })
+      )
   }
 
   addAttachmentToObservation(observation, attachment) {

web-app/src/app/home/home.module.ts

@@ -16,7 +16,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
-import { MatRippleModule, MatNativeDateModule } from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -178,7 +178,6 @@ const routes: Routes = [{
     MatIconModule,
     MatInputModule,
     MatMomentDatetimeModule,
-    MatNativeDateModule,
     MatPaginatorModule,
     MatProgressBarModule,
     MatProgressSpinnerModule,

web-app/src/app/ingress/authentication/local/local-authentication.component.scss

@@ -35,8 +35,8 @@ mat-form-field {
   align-items: center;
   gap: 16px;
   margin-top: 16px;
-  color: rgb(96 17 10);
-  background-color: rgb(249 220 215);
+  color: mat.get-color-from-palette($app-warn);
+  background-color: rgba(mat.get-color-from-palette($app-warn, 100), .5);
   border-radius: 4px;
   padding: 0 16px;
 }

web-app/src/app/observation/attachment/attachment.component.ts

@@ -31,7 +31,8 @@ export class AttachmentComponent implements OnInit {
 
   constructor(
     private userService: UserService,
-    private localStorageService: LocalStorageService) {
+    localStorageService: LocalStorageService
+  ) {
     this.token = localStorageService.getToken()
   }
 

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

@@ -1,7 +1,7 @@
 import { HttpClient, HttpErrorResponse, HttpEvent, HttpEventType, HttpResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import { share } from 'rxjs/operators';
+import { tap } from 'rxjs/operators';
 import { FileUpload } from './attachment-upload/attachment-upload.component';
 
 export enum AttachmentUploadStatus {
@@ -30,27 +30,29 @@ export class AttachmentService {
     const formData = new FormData();
     formData.append('attachment', upload.file);
 
-    const url = `${observationUrl}/attachments/${upload.attachmentId}`
-    const observable = this.httpClient.put(url, formData, { observe: 'events', reportProgress: true }).pipe(share())
-
-    observable.subscribe((response: HttpEvent<HttpResponse<Object>>) => {
-      if (response.type === HttpEventType.Response) {
-        if (response.status === 200) {
-          this.uploadSource.next({
-            upload: upload,
-            response: response.body,
-            status: AttachmentUploadStatus.COMPLETE
-          })
-        }
-      }
-    }, (error: HttpErrorResponse) => {
-      this.uploadSource.next({
-        upload: upload,
-        response: error,
-        status: AttachmentUploadStatus.ERROR
-      })
-    })
-
-    return observable
+    const url = `${new URL(observationUrl).pathname}/attachments/${upload.attachmentId}`
+    return this.httpClient.put(url, formData, { observe: 'events', reportProgress: true })
+      .pipe(
+        tap({
+          next: (response: HttpEvent<HttpResponse<Object>>) => {
+            if (response.type === HttpEventType.Response) {
+              if (response.status === 200) {
+                this.uploadSource.next({
+                  upload: upload,
+                  response: response.body,
+                  status: AttachmentUploadStatus.COMPLETE
+                })
+              }
+            }
+          },
+          error: (error: HttpErrorResponse) => {
+            this.uploadSource.next({
+              upload: upload,
+              response: error,
+              status: AttachmentUploadStatus.ERROR
+            })
+          }
+        })
+      )
   }
 }

web-app/src/app/observation/observation-edit/observation-edit.component.ts

@@ -241,7 +241,7 @@ export class ObservationEditComponent implements OnInit, OnChanges {
         observation.style = style
         this.geometryStyle = style
 
-        this.mapService.updateFeatureForLayer(observation, 'Observations')
+        this.mapService.updateFeatureForLayer(observation, 'observations')
       }
     }
   }

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

@@ -3,6 +3,7 @@ import { LocalStorageService } from "../http/local-storage.service";
 import { HttpClient, HttpParams } from "@angular/common/http";
 import { Observable, map, mergeMap } from "rxjs";
 import * as _ from 'underscore';
+import { MageEvent } from "core-lib-src/event";
 
 @Injectable({
   providedIn: 'root'
@@ -14,15 +15,15 @@ export class ObservationService {
     private localStorageService: LocalStorageService
   ) { }
 
-  getId(eventId: string): Observable<any> {
+  getId(eventId: number): Observable<any> {
     return this.client.post<any>(`/api/events/${eventId}/observations/id/`, { eventId: eventId });
   }
 
   getObservation(eventId: string, observationId: string): Observable<any> {
     return this.client.get<any>(`/api/events/${eventId}/observations/${observationId}`);
   }
 
-  getObservationsForEvent(event: any, options: any): Observable<any> {
+  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;
@@ -36,19 +37,21 @@ export class ObservationService {
     )
   }
 
-  saveObservationForEvent(event, observation): Observable<any> {
+  saveObservationForEvent(event: MageEvent, observation: any): Observable<any> {
     return this.saveObservation(event, observation).pipe(
-      map((observation) => this.transformObservations(observation, event))
+      map((observation) => {
+        return this.transformObservations(observation, event)[0]
+     })
     )
   }
 
-  private saveObservation(eventId: string, observation: any): Observable<any> {
+  private saveObservation(event: MageEvent, observation: any): Observable<any> {
     if (observation.id) {
-      return this.client.put<any>(`/api/events/${eventId}/observations/${observation.id}`, observation);
+      return this.client.put<any>(`/api/events/${event.id}/observations/${observation.id}`, observation);
     } else {
-      return this.getId(eventId).pipe(
+      return this.getId(event.id).pipe(
         mergeMap(result => {
-          return this.client.put<any>(`/api/events/${eventId}/observations/${result.id}`, observation);
+          return this.client.put<any>(`/api/events/${event.id}/observations/${result.id}`, observation);
         })
       )
     }

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

@@ -1,6 +1,5 @@
 import { HttpClient, HttpContext, HttpEvent } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { Router } from '@angular/router'
 import { Observable, Subject, tap } from 'rxjs'
 import { LocalStorageService } from '../http/local-storage.service'
 import { BYPASS_TOKEN } from '../http/token.interceptor'
@@ -15,7 +14,6 @@ export class UserService {
   amAdmin: boolean
 
   constructor(
-    private router: Router,
     private httpClient: HttpClient,
     private localStorageService: LocalStorageService
   ) { }
@@ -73,7 +71,7 @@ export class UserService {
       username,
       password,
       appVersion: 'Web Client'
-    }, {
+    },{
       context: new HttpContext().set(BYPASS_TOKEN, true)
     })
   }

web-app/src/theme.scss

@@ -10,12 +10,7 @@
 // Be sure that you only ever include this mixin once!
 @include mat.core();
 
-// Create the theme object (a Sass map containing all of the palettes).
-// $app-theme: mat.define-light-theme($app-primary, $app-accent, $app-warn);
-
-// // Define a light theme
-// $light-primary: mat.define-palette(mat.$indigo-palette);
-// $light-accent: mat.define-palette(mat.$pink-palette);
+// Define a light theme
 $app-theme: mat.define-light-theme((
   color: (
     primary: $app-primary,
@@ -24,8 +19,6 @@ $app-theme: mat.define-light-theme((
   )
 ));
 
-@debug $app-warn;
-
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.