Refactor navbar and map buttons

web-app/admin/src/ng1/app.js

@@ -1,5 +1,6 @@
 import _ from 'underscore';
 import angular from 'angular';
+import mage from './mage/mage.component';
 import fileUpload from './file-upload/file.upload.component';
 import fileBrowser from './file-upload/file.browser.component';
 import uiRouter from "@uirouter/angularjs";
@@ -77,6 +78,7 @@ app
   .directive('adminEventFormPreview', downgradeComponent({ component: AdminEventFormPreviewComponent }));
 
 app
+  .component('mage', mage)
   .component('navbar', require('./navbar/navbar.component'))
   .component('filterPanel', require('./filter/filter'))
   .component('eventFilter', require('./filter/event.filter.component'))
@@ -99,6 +101,7 @@ app
   .config(config)
   .run(run);
 
+require('./mage');
 require('./authentication') // for modal in admin pages if token expires
 require('./factories');
 require('./filters');

web-app/admin/src/ng1/mage/index.js

@@ -3,10 +3,7 @@ import banner from './banner.component';
 import leaflet from './leaflet.component';
 
 angular.module('mage')
-  .component('mageInfo', require('./mage-info.component.js'))
   .directive('colorPicker', require('./color.picker.directive'))
   .directive('equals', require('./equals.directive'))
   .component('banner', banner)
-  .component('leaflet', leaflet);
-
-require('./navbar');
+  .component('leaflet', leaflet);

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

@@ -97,10 +97,10 @@ export class EventService {
     })
 
     removed.forEach((removed: any) => {
-      this.observationsChanged({ removed: Object.values(this.eventsById[removed.id].filteredObservationsById) });
-      this.usersChanged({ removed: Object.values(this.eventsById[removed.id].filteredUsersById) });
-      this.layersChanged({ removed: Object.values(this.eventsById[removed.id].layersById) }, removed);
-      this.feedItemsChanged({ removed: Object.values(this.eventsById[removed.id].feedsById).map((feed: any) => ({ feed })) }, removed);
+      this.observationsChanged({ removed: Object.values(this.eventsById[removed.id]?.filteredObservationsById || {}) });
+      this.usersChanged({ removed: Object.values(this.eventsById[removed.id]?.filteredUsersById || {}) });
+      this.layersChanged({ removed: Object.values(this.eventsById[removed.id]?.layersById || {}) }, removed);
+      this.feedItemsChanged({ removed: Object.values(this.eventsById[removed.id]?.feedsById || {}).map((feed: any) => ({ feed })) }, removed);
       delete this.eventsById[removed.id];
     })
   }

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

@@ -1,16 +1,18 @@
 <div *ngIf="user" class="home">
   <navigation (onFeedToggle)="feed.toggle()" (onPreferencesToggle)="preferences.toggle()"></navigation>
 
-  <mat-sidenav-container class="main-container" hasBackdrop="false">
-    <mat-sidenav #feed mode="side" position="start" opened>
-      <feed-panel class="feed" [event]="event" [observationLocation]="newObservation"></feed-panel>
-    </mat-sidenav>
-
-    <mat-sidenav #preferences mode="slide" position="end" disableClose="true">
-      <preferences></preferences>
-    </mat-sidenav>
-
-    <map (addObservation)="onAddObservation($event)"></map>
-
-  </mat-sidenav-container>
+  <div class="home-content">
+    <mat-sidenav-container hasBackdrop="false">
+      <mat-sidenav #feed mode="side" position="start" opened>
+        <feed-panel class="feed" [event]="event" [observationLocation]="newObservation"></feed-panel>
+      </mat-sidenav>
+
+      <mat-sidenav #preferences mode="slide" position="end" disableClose="true">
+        <preferences></preferences>
+      </mat-sidenav>
+
+      <map (addObservation)="onAddObservation($event)"></map>
+
+    </mat-sidenav-container>
+  </div>
 </div>

web-app/src/app/home/home.component.scss

@@ -3,20 +3,25 @@
 }
 
 .home {
+  height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
+.home-content {
+  flex: 1;
+}
+
+mat-sidenav-container {
+  height: 100%;
+}
+
 .preferences-toolbar {
   display: flex;
   align-items: end;
 }
 
-.main-container {
-  height: 100vh;
-}
-
 .feed {
   background: #e1e2e1;
   order: 1;

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

@@ -139,6 +139,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { UserResolver } from '../ingress/user.resolver';
 import { UserAvatarModule } from '../user/user-avatar/user-avatar.module';
 import { IngressModule } from '../ingress/ingress.module';
+import { FilterControlComponent } from '../map/controls/filter.component';
+import { ExportControlComponent } from '../map/controls/export.component';
 
 const routes: Routes = [{
   path: '',
@@ -156,6 +158,8 @@ const routes: Routes = [{
     AddObservationComponent,
     LocationComponent,
     SearchComponent,
+    FilterControlComponent,
+    ExportControlComponent,
     MapComponent,
     PasswordResetSuccessDialog,
     PreferencesComponent,

web-app/src/app/map/controls/add-observation.component.html

@@ -1,3 +1,3 @@
-<button mat-mini-fab color="accent" matTooltip="Create New Observation" matTooltipPosition="after" (click)="addObservation($event)">
+<button mat-fab color="accent" matTooltip="Create New Observation" matTooltipPosition="after" (click)="addObservation($event)">
   <mat-icon>add_location</mat-icon>
 </button>

web-app/src/app/map/controls/add-observation.component.scss

@@ -1,7 +1,3 @@
-button {
-  margin-top: 32px;
-}
-
 mat-icon {
   color: white;
 }

web-app/src/app/map/controls/export.component.html

@@ -0,0 +1,3 @@
+<button mat-mini-fab color="default" matTooltip="Filter" matTooltipPosition="after" (click)="onClick($event)">
+  <mat-icon color="primary">file_download</mat-icon>
+</button>

web-app/src/app/map/controls/export.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AddObservationComponent } from './add-observation.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ExportControlComponent } from './export.component';
+
+describe('Export Control Component', () => {
+  let component: ExportControlComponent;
+  let fixture: ComponentFixture<ExportControlComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ MatIconModule, MatButtonModule ],
+      declarations: [ AddObservationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExportControlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web-app/src/app/map/controls/export.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Output, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { DomEvent } from 'leaflet';
+
+@Component({
+  selector: 'map-control-export',
+  templateUrl: './export.component.html',
+  styleUrls: ['./export.component.scss']
+})
+export class ExportControlComponent implements AfterViewInit {
+  @ViewChild(MatButton, { read: ElementRef }) button: ElementRef;
+
+  @Output() click = new EventEmitter<void>();
+
+  ngAfterViewInit(): void {
+    DomEvent.disableClickPropagation(this.button.nativeElement);
+  }
+
+  onClick($event: MouseEvent): void {
+    $event.stopPropagation();
+    this.click.emit();
+  }
+}

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

@@ -0,0 +1,3 @@
+<button mat-mini-fab color="default" matTooltip="Filter" matTooltipPosition="after" (click)="onClick($event)">
+  <mat-icon color="primary">filter_alt</mat-icon>
+</button>

web-app/src/app/map/controls/filter.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { AddObservationComponent } from './add-observation.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { FilterControlComponent } from './filter.component';
+
+describe('Filter Control Component', () => {
+  let component: FilterControlComponent;
+  let fixture: ComponentFixture<FilterControlComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ MatIconModule, MatButtonModule ],
+      declarations: [ AddObservationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterControlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Output, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { DomEvent } from 'leaflet';
+
+@Component({
+  selector: 'map-control-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+export class FilterControlComponent implements AfterViewInit {
+  @ViewChild(MatButton, { read: ElementRef }) button: ElementRef;
+
+  @Output() click = new EventEmitter<void>();
+
+  ngAfterViewInit(): void {
+    DomEvent.disableClickPropagation(this.button.nativeElement);
+  }
+
+  onClick($event: MouseEvent): void {
+    $event.stopPropagation();
+    this.click.emit();
+  }
+}

web-app/src/app/map/controls/search.component.scss

@@ -3,7 +3,6 @@
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  margin-top: 32px;
   font-family: Roboto, "Helvetica Neue", sans-serif;
   font-size: 16px;
 }

web-app/src/app/map/controls/zoom.component.html

@@ -1,8 +1,9 @@
 <div class="zoom">
-  <button mat-mini-fab color="basic" (click)="onZoomIn($event)">
-    <mat-icon color="primary">add</mat-icon>
-  </button>
   <button mat-mini-fab color="basic" (click)="onZoomOut($event)">
     <mat-icon color="primary">remove</mat-icon>
   </button>
+
+  <button mat-mini-fab color="basic" (click)="onZoomIn($event)">
+    <mat-icon color="primary">add</mat-icon>
+  </button>
 </div>

web-app/src/app/map/controls/zoom.component.scss

@@ -1,6 +1,7 @@
 .zoom {
   display: inline-flex;
-  flex-direction: column;
+  flex-direction: row;
+  gap: 8px;
 }
 
 button:not(:last-child) {

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

@@ -1,4 +1,4 @@
-<div class="map-controls-right">
+<div class="map-controls-layers">
   <map-control-layers (onLayerPanelToggle)="drawer.toggle()"></map-control-layers>
 </div>
 
@@ -20,11 +20,17 @@
   <mat-sidenav-content>
     <div id="map" #map>
       <div class="map-controls-left">
-        <map-control-zoom (onZoom)="onZoom($event)"></map-control-zoom>
-        <map-control-search (onSearch)="onSearch($event)" (onSearchClear)="onSearchClear()"></map-control-search>
-        <map-control-location (onLocate)="onLocate($event)" (onBroadcast)="onBroadcast($event)"></map-control-location>
+        <div class="map-controls-left__top">
+          <map-control-search (onSearch)="onSearch($event)" (onSearchClear)="onSearchClear()"></map-control-search>
+          <map-control-filter (click)="onFilter()"></map-control-filter>
+          <map-control-export (click)="onExport()"></map-control-export>
+        </div>
         <map-control-add-observation (onAddObservation)="onAddObservation()"></map-control-add-observation>
       </div>
+      <div class="map-controls-right">
+        <map-control-location (onLocate)="onLocate($event)" (onBroadcast)="onBroadcast($event)"></map-control-location>
+        <map-control-zoom (onZoom)="onZoom($event)"></map-control-zoom>
+      </div>
     </div>
   </mat-sidenav-content>
 

web-app/src/app/map/map.component.scss

@@ -8,30 +8,50 @@
 }
 
 .map-container {
-  height: 100vh;
+  height: 100%;
 }
 
 .map-content {
   height: 100%;
 }
 
+.map-controls-layers {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  justify-content: space-between;
+  z-index: 1000;
+}
+
 .map-controls-left {
   position: absolute;
   z-index: 1000;
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
-  margin-top: 16px;
-  margin-left: 16px;
+  justify-content: space-between;
+  top: 16px;
+  left: 16px;
+  bottom: 16px;
+}
+
+.map-controls-left__top {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .map-controls-right {
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  gap: 16px;
   position: absolute;
-  right: 0;
+  right: 16px;
+  bottom: 16px;
   z-index: 1000;
-  display: inline-flex;
-  flex-direction: column;
-  margin-top: 16px;
-  margin-right: 16px;
 }
 
 mat-sidenav {