Merge pull request #304 from e-picsa/feat/dashboard-climate-updates

chore(dashboard): climate ui updates
e-picsa · Jul 27, 2024 · 8ac49da · 8ac49da
2 parents 9a3c1a0 + 5480d49
commit 8ac49da
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 16 deletions.
diff --git a/apps/picsa-apps/dashboard/project.json b/apps/picsa-apps/dashboard/project.json
@@ -18,6 +18,7 @@
         "inlineStyleLanguage": "scss",
         "assets": [
           "apps/picsa-apps/dashboard/src/favicon.ico",
+          "apps/picsa-apps/dashboard/src/favicon.svg",
           "apps/picsa-apps/dashboard/src/assets",
           {
             "glob": "*.svg",

diff --git a/...apps/dashboard/src/app/modules/climate/pages/station-details/station-details.component.ts b/...apps/dashboard/src/app/modules/climate/pages/station-details/station-details.component.ts
@@ -18,9 +18,10 @@ export class StationDetailsPageComponent implements OnInit {
   }
 
   public get stationSummary() {
+    const entries = Object.entries(this.station || {}).filter(([key]) => !['id', 'country_code'].includes(key));
     return {
-      keys: Object.keys(this.station || {}),
-      values: Object.values(this.station || {}),
+      keys: entries.map(([key]) => key),
+      values: entries.map(([, value]) => value),
     };
   }
 

diff --git a/apps/picsa-apps/dashboard/src/app/modules/climate/pages/station/station.component.html b/apps/picsa-apps/dashboard/src/app/modules/climate/pages/station/station.component.html
@@ -7,10 +7,12 @@ <h3>Stations ({{ service.apiCountryCode }})</h3>
   <div style="display: flex; gap: 1rem">
     <div style="flex: 1">
       <table mat-table class="stations-table" [dataSource]="service.stations()" style="width: 200px">
+        <!-- index -->
         <ng-container matColumnDef="station_id">
-          <th mat-header-cell *matHeaderCellDef>station_id</th>
-          <td mat-cell *matCellDef="let station">{{ station.station_id }}</td>
+          <th mat-header-cell *matHeaderCellDef></th>
+          <td mat-cell *matCellDef="let station; let i = index">{{ i + 1 }}</td>
         </ng-container>
+        <!-- station name -->
         <ng-container matColumnDef="station_name">
           <th mat-header-cell *matHeaderCellDef>station_name</th>
           <td mat-cell *matCellDef="let station">{{ station.station_name }}</td>
@@ -24,6 +26,10 @@ <h3>Stations ({{ service.apiCountryCode }})</h3>
         ></tr>
       </table>
     </div>
-    <picsa-map style="height: 500px; width: 500px" [markers]="mapMarkers()"></picsa-map>
+    <picsa-map
+      style="height: 500px; width: 500px"
+      [markers]="mapMarkers()"
+      (onMarkerClick)="handleMarkerClick($event)"
+    ></picsa-map>
   </div>
 </div>
diff --git a/apps/picsa-apps/dashboard/src/app/modules/climate/pages/station/station.component.ts b/apps/picsa-apps/dashboard/src/app/modules/climate/pages/station/station.component.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, computed, OnInit } from '@angular/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
-import { RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { IMapMarker, PicsaMapComponent } from '@picsa/shared/features/map/map';
 
 import { ClimateService } from '../../climate.service';
@@ -36,17 +36,23 @@ export class ClimateStationPageComponent implements OnInit {
     showStatusCode: false,
   };
 
-  constructor(public service: ClimateService) {}
+  constructor(public service: ClimateService, private router: Router, private route: ActivatedRoute) {}
 
   async ngOnInit() {
     await this.service.ready();
   }
 
+  public handleMarkerClick(marker: IMapMarker) {
+    const { _index } = marker;
+    const station = this.service.stations()[_index];
+    this.router.navigate(['./', station.station_id], { relativeTo: this.route });
+  }
+
   private calcMapMarkers(stations: IStationRow[]): IMapMarker[] {
     return stations.map((s, _index) => ({
       _index,
       latlng: [s.latitude as number, s.longitude as number],
-      number: parseInt(s.station_id),
+      number: _index + 1,
     }));
   }
 }
diff --git a/apps/picsa-apps/dashboard/src/favicon.ico b/apps/picsa-apps/dashboard/src/favicon.ico
diff --git a/apps/picsa-apps/dashboard/src/favicon.svg b/apps/picsa-apps/dashboard/src/favicon.svg
diff --git a/apps/picsa-apps/dashboard/src/index.html b/apps/picsa-apps/dashboard/src/index.html
@@ -6,6 +6,7 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   </head>
   <body data-theme="picsa-dashboard">
     <dashboard-root></dashboard-root>

diff --git a/apps/picsa-server/supabase/data/climate_products_rows.csv b/apps/picsa-server/supabase/data/climate_products_rows.csv
diff --git a/apps/picsa-server/supabase/data/climate_stations_rows.csv b/apps/picsa-server/supabase/data/climate_stations_rows.csv
@@ -1,5 +1,6 @@
 station_id,country_code,station_name,latitude,longitude,elevation,district
-zambia_eastern,zm_workshops,Zambia_Eastern,-21.8,20.2,557,Test
-chipata,zm_workshops,Chipata,-13.6,32.6,1025,Chipata
-Nkhotakota,mw_workshops,Nkhotakota,-12.9,34.28,500,Nhkotakota
-Kasungu,mw_workshops,Kasungu,-13.02,33.47,1300,Kasungu
+Chipata Met,zm_workshops,Chipata Met,-13.6,32.6,1025,Chipata
+Lundazi Met,zm_workshops,Lundazi Met,-12.28,33.2,1143,Lundazi
+Mfuwe Met,zm_workshops,Mfuwe Met,-13.26,31.93,570,Mambwe
+Msekera Agromet,zm_workshops,Msekera Agromet,-13.65,32.56,1025,Chipata
+Petauke Met,zm_workshops,Petauke Met,-14.25,31.28,1036,Petauke