Dashboard contact map (#368)

* added dashboard contact map

* added dashboard  map component

* fixed lint

* added leaflet.fullscreen

* updaetd angular.json leaflet.fullscreen

* fixes

Co-authored-by: constantincrismaruvitagroup <[email protected]>

Author: adriandumavitagroup

package-lock.json

@@ -29,13 +29,15 @@
     "@angular/platform-browser-dynamic": "~13.1.1",
     "@angular/router": "~13.1.1",
     "@asymmetrik/ngx-leaflet": "^8.1.0",
+    "@bepo65/leaflet.fullscreen": "^2.0.2",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "alertifyjs": "^1.13.1",
     "concurrently": "^5.3.0",
     "date-fns": "^2.27.0",
     "echarts": "^5.2.2",
     "leaflet": "^1.7.1",
+    "leaflet.fullscreen": "^2.2.0",
     "lint-staged": "^10.5.3",
     "ng-table-virtual-scroll": "^1.3.5",
     "ngx-date-fns": "^8.3.0",

package.json

@@ -157,6 +157,11 @@ export const DASHBOARD_EPIDEMIOLOGICAL_CURVE_TYPE = {
   CONTACT: 'CONTACT',
 };
 
+export enum MapType {
+  Surveillance,
+  Contacts,
+}
+
 export const FacilityCategoryGroups = {
   ACCOMMODATION: [
     'CAMPSITE',

src/app/_constants/common.ts

@@ -1,6 +1,6 @@
 <section>
   <header>
-    <h2>{{ 'strings.headingCaseStatusMap' | translate }}</h2>
+    <h2>{{ title }}</h2>
     <app-toggle-view
       iconViewPrimary="fullscreen_exit_black"
       iconViewSecondary="fullscreen"

src/app/dashboard/components/dashboard-case-map/dashboard-case-map.component.ts

@@ -1,21 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 
-import { DashboardCaseMapComponent } from './dashboard-case-map.component';
+import { DashboardMapComponent } from './dashboard-map.component';
 
-describe('DashboardCaseMapComponent', () => {
-  let component: DashboardCaseMapComponent;
-  let fixture: ComponentFixture<DashboardCaseMapComponent>;
+describe('DashboardMapComponent', () => {
+  let component: DashboardMapComponent;
+  let fixture: ComponentFixture<DashboardMapComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DashboardCaseMapComponent],
+      declarations: [DashboardMapComponent],
       imports: [TranslateModule.forRoot()],
     }).compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DashboardCaseMapComponent);
+    fixture = TestBed.createComponent(DashboardMapComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/dashboard/components/dashboard-case-map/dashboard-case-map.component.html renamed to src/app/dashboard/components/dashboard-map/dashboard-map.component.html

@@ -0,0 +1,91 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { latLng, Map, tileLayer } from 'leaflet';
+import '@bepo65/leaflet.fullscreen';
+import { TranslateService } from '@ngx-translate/core';
+import { ViewOptions } from '../../../_models/common';
+import { MapType } from '../../../_constants/common';
+
+@Component({
+  selector: 'app-dashboard-map',
+  templateUrl: './dashboard-map.component.html',
+  styleUrls: ['./dashboard-map.component.scss'],
+})
+export class DashboardMapComponent implements OnInit {
+  @Output() mapViewUpdate: EventEmitter<ViewOptions> = new EventEmitter();
+  @Input() mapType: MapType;
+
+  map: Map;
+  initialLat = 51.1657;
+  initialLong = 10.4515;
+  initialZoom = 5;
+  options: any;
+  title = '';
+
+  constructor(public translateService: TranslateService) {}
+
+  ngOnInit(): void {
+    this.options = {
+      layers: [
+        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '' }),
+      ],
+      zoom: this.initialZoom,
+      center: latLng(this.initialLat, this.initialLong),
+      fullscreenControl: true,
+      fullscreenControlOptions: {
+        position: 'topleft',
+        title: this.translateService.instant('viewFullscreen'),
+        titleCancel: this.translateService.instant('exitFullscreen'),
+        forceSeparateButton: true,
+        content:
+          '<mat-icon id="full-screen-map-btn" class="material-icons-round">fullscreen</mat-icon>',
+      },
+    };
+    this.setMapTitle();
+  }
+
+  onMapReady(map: Map): void {
+    this.map = map;
+
+    this.map.on('enterFullscreen', () => {
+      // @ts-ignore
+      document.getElementById('full-screen-map-btn').innerHTML = 'fullscreen_exit_black';
+      // @ts-ignore
+      document.getElementById('full-screen-map-btn').classList.add('fullscreen');
+    });
+
+    this.map.on('exitFullscreen', () => {
+      // @ts-ignore
+      document.getElementById('full-screen-map-btn').innerHTML = 'fullscreen';
+      // @ts-ignore
+      document.getElementById('full-screen-map-btn').classList.remove('fullscreen');
+    });
+  }
+
+  onLayerUpdate(event: any): void {
+    // update map based on layer selection
+    // eslint-disable-next-line no-console
+    console.log(event);
+  }
+
+  onViewChange(event: ViewOptions): void {
+    this.mapViewUpdate.emit(event);
+
+    setTimeout(() => {
+      this.map.invalidateSize();
+    });
+  }
+
+  setMapTitle() {
+    switch (this.mapType) {
+      case MapType.Surveillance:
+        this.title = this.translateService.instant('strings.headingCaseStatusMap');
+        break;
+      case MapType.Contacts:
+        this.title = this.translateService.instant('strings.headingContactMap');
+        break;
+      default:
+        this.title = '';
+        break;
+    }
+  }
+}

src/app/dashboard/components/dashboard-case-map/dashboard-case-map.component.scss renamed to src/app/dashboard/components/dashboard-map/dashboard-map.component.scss

@@ -1,4 +1,7 @@
-<section class="dashboard-contacts-wrapper" [ngClass]="{'epi-fullscreen': fullscreenEpi}">
+<section
+  class="dashboard-contacts-wrapper"
+  [ngClass]="{ 'epi-fullscreen': fullscreenEpi, 'map-fullscreen': fullScreenMap }"
+>
   <mat-card class="dashboard-contacts-filters">
     <app-dashboard-filters></app-dashboard-filters>
   </mat-card>
@@ -24,7 +27,9 @@
     ></app-dashboard-epidemiological-curve>
   </mat-card>
   <mat-card class="dashboard-contacts-map">
-    <app-dashboard-case-map></app-dashboard-case-map>
+    <app-dashboard-map [mapType]="MapType.Contacts"
+      (mapViewUpdate)="onMapViewChange($event)"
+    ></app-dashboard-map>
   </mat-card>
   <mat-card class="dashboard-transmission-chain">
     <app-dashboard-transmission-chain></app-dashboard-transmission-chain>

src/app/dashboard/components/dashboard-case-map/dashboard-case-map.component.spec.ts renamed to src/app/dashboard/components/dashboard-map/dashboard-map.component.spec.ts

@@ -13,6 +13,19 @@
       'epi_curve epi_curve epi_curve'
   }
 }
+.map-fullscreen {
+  .dashboard-contacts-contacts, .dashboard-contacts-under-follow-up, .dashboard-contacts-stopped-follow-up,
+  .dashboard-contacts-visits, .dashboard-contacts-contact-stats, .dashboard-contacts-epi-curve, .dashboard-transmission-chain {
+    display: none;
+  }
+
+  &.dashboard-contacts-wrapper {
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-areas:
+      'filter filter filter'
+      'map map map'
+  }
+}
 
 .dashboard-contacts-wrapper {
   display: grid;

src/app/dashboard/components/dashboard-map/dashboard-map.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { DASHBOARD_EPIDEMIOLOGICAL_CURVE_TYPE } from '../../_constants/common';
+import { DASHBOARD_EPIDEMIOLOGICAL_CURVE_TYPE, MapType } from '../../_constants/common';
 import { VIEW_OPTIONS, ViewOptions } from '../../_models/common';
 
 @Component({
@@ -10,8 +10,14 @@ import { VIEW_OPTIONS, ViewOptions } from '../../_models/common';
 export class ContactsComponent {
   dashboardEpidemiologicalCurveType = DASHBOARD_EPIDEMIOLOGICAL_CURVE_TYPE;
   fullscreenEpi = false;
+  fullScreenMap = false;
+  MapType = MapType;
 
   onEpiCurveViewChange(event: ViewOptions): void {
     this.fullscreenEpi = event === VIEW_OPTIONS.SECONDARY;
   }
+
+  onMapViewChange(event: ViewOptions): void {
+    this.fullScreenMap = event === VIEW_OPTIONS.SECONDARY;
+  }
 }

src/app/dashboard/contacts/contacts.component.html

@@ -16,7 +16,6 @@ import { DashboardNewCasesComponent } from './components/dashboard-new-cases/das
 import { DashboardNewEventsComponent } from './components/dashboard-new-events/dashboard-new-events.component';
 import { DashboardTestResultsComponent } from './components/dashboard-test-results/dashboard-test-results.component';
 import { DashboardEpidemiologicalCurveComponent } from './components/dashboard-epidemiological-curve/dashboard-epidemiological-curve.component';
-import { DashboardCaseMapComponent } from './components/dashboard-case-map/dashboard-case-map.component';
 import { DashboardContactsComponent } from './components/dashboard-contacts/dashboard-contacts.component';
 import { DashboardUnderFollowUpComponent } from './components/dashboard-under-follow-up/dashboard-under-follow-up.component';
 import { DashboardStoppedFollowUpComponent } from './components/dashboard-stopped-follow-up/dashboard-stopped-follow-up.component';
@@ -28,6 +27,7 @@ import { MapLegendComponent } from './components/map-legend/map-legend.component
 import { MapLayersComponent } from './components/map-layers/map-layers.component';
 import { DynamicFormModule } from '../shared/dynamic-form/dynamic-form.module';
 import { ProgressBarColor } from '../_directives/progress-bar-color.directive';
+import { DashboardMapComponent } from './components/dashboard-map/dashboard-map.component';
 
 @NgModule({
   declarations: [
@@ -43,7 +43,6 @@ import { ProgressBarColor } from '../_directives/progress-bar-color.directive';
     DashboardNewEventsComponent,
     DashboardTestResultsComponent,
     DashboardEpidemiologicalCurveComponent,
-    DashboardCaseMapComponent,
     DashboardContactsComponent,
     DashboardUnderFollowUpComponent,
     DashboardStoppedFollowUpComponent,
@@ -53,6 +52,7 @@ import { ProgressBarColor } from '../_directives/progress-bar-color.directive';
     MapLegendComponent,
     MapLayersComponent,
     ProgressBarColor,
+    DashboardMapComponent,
   ],
   imports: [
     CommonModule,

src/app/dashboard/contacts/contacts.component.scss

@@ -40,7 +40,7 @@
     </mat-card>
 
     <mat-card [hidden]="hideMap" class="map">
-      <app-dashboard-case-map (mapViewUpdate)="onMapViewChange($event)"></app-dashboard-case-map>
+      <app-dashboard-map [mapType]="MapType.Surveillance" (mapViewUpdate)="onMapViewChange($event)"></app-dashboard-map>
     </mat-card>
   </div>
 </div>

src/app/dashboard/contacts/contacts.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { ViewOptions, VIEW_OPTIONS } from '../../_models/common';
-import { DASHBOARD_EPIDEMIOLOGICAL_CURVE_TYPE } from '../../_constants/common';
+import { DASHBOARD_EPIDEMIOLOGICAL_CURVE_TYPE, MapType } from '../../_constants/common';
 
 @Component({
   selector: 'app-surveillance',
@@ -13,6 +13,7 @@ export class SurveillanceComponent {
   hideEpiCurve = false;
   hideMap = false;
   dashboardEpidemiologicalCurveType = DASHBOARD_EPIDEMIOLOGICAL_CURVE_TYPE;
+  MapType = MapType;
 
   onMapViewChange(event: ViewOptions): void {
     this.hideDiseaseBurden = event === VIEW_OPTIONS.SECONDARY;

src/app/dashboard/dashboard.module.ts

@@ -172,5 +172,7 @@
   "NotFound.needHelp": "need help?",
   "NotFound.contactUs": "Contact Us",
   "contactFollowupVisitsView": "Follow-up",
-  "headingLabMessages": "Lab messages"
+  "headingLabMessages": "Lab messages",
+  "viewFullscreen": "View fullscreen",
+  "exitFullscreen": "Exit fullscreen"
 }