Proxy

angular.json

@@ -73,7 +73,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "app:build"
+            "browserTarget": "app:build",
+            "proxyConfig": "src/proxy.conf.json"
           },
           "configurations": {
             "production": {

src/app/components/google-map/google-map.component.html

@@ -1,6 +1,10 @@
 <div *ngIf="apiLoaded | async">
   <p>
     google-map works!
-    <google-map #map></google-map>
+    <google-map #map [options]='options'>
+      <map-marker #mapMarkerDirectiveRef="mapMarker"
+        [position]="{lat: 40, lng: -105}">
+      </map-marker>      
+    </google-map>
   </p>
 </div>

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

@@ -1,16 +1,36 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
+import { GoogleMap } from '@angular/google-maps';
+import { Coords } from 'dto/';
+import { Observable } from 'rxjs';
 import { GoogleMapsService } from 'src/app/services/google-map.service';
 
 @Component({
   selector: 'app-google-map',
   templateUrl: './google-map.component.html',
   styleUrls: ['./google-map.component.scss'],
 })
-export class GoogleMapComponent implements OnInit {
+export class GoogleMapComponent implements OnInit, AfterViewInit {
   apiLoaded: Observable<boolean>;
-  @ViewChild('map') mapElement;
-  map: google.maps.Map;
+  // @ViewChild(GoogleMap) map: GoogleMap;
+  map: GoogleMap;
+  @ViewChild(GoogleMap, { static: false }) set Map(map: GoogleMap) {
+    if (!map) { 
+      return;
+    } else if (!this.map) {
+      this.map = map;
+      // this.initMapSearch(map);
+    }
+  };  
+  options: google.maps.MapOptions = {
+    center: {
+      lat: 0,
+      lng: 0
+    },
+    zoom: 9,
+    minZoom: 2,
+    maxZoom: 15,
+    // styles: darkStyle,
+  };  
 
   constructor(
     private googleMaps: GoogleMapsService,
@@ -19,19 +39,17 @@ export class GoogleMapComponent implements OnInit {
   ngOnInit() {
     this.apiLoaded = this.googleMaps.buildMap();
     console.log('test');
-    // const additionalOptions = {}; 
-    // const loader = new Loader({
-    //   apiKey: "AIzaSyDTzmqmTc7vy3WsjFiwcbNGl81hXxpZZyU",
-    //   version: "weekly",
-    //   ...additionalOptions,
-    // });
-
-    // loader.load().then(() => {
-    //   this.map = new google.maps.Map(this.mapElement, {
-    //     center: { lat: -34.397, lng: 150.644 },
-    //     zoom: 8,
-    //   });
-    // });
+    navigator.geolocation.getCurrentPosition((pos: GeolocationPosition) => this.setCenter(pos.coords));
   }
 
+  ngAfterViewInit(): void {
+    // this.map.center = this.center;
+  }
+
+  setCenter(coords: GeolocationCoordinates) {
+    console.log('center coords: ', coords);
+    this.options.center.lat = coords.latitude;
+    this.options.center.lng = coords.longitude;
+  }  
+
 }

src/app/dto/activities.dto.ts

@@ -0,0 +1,68 @@
+// Generated by https://quicktype.io
+
+export interface ActivitiesResponse {
+    activities: Activity[];
+}
+
+export interface Activity {
+    resource_state:                number;
+    athlete:                       Athlete;
+    name:                          string;
+    distance:                      number;
+    moving_time:                   number;
+    elapsed_time:                  number;
+    total_elevation_gain:          number;
+    type:                          string;
+    workout_type?:                 number;
+    id:                            number;
+    external_id:                   string;
+    upload_id:                     number;
+    start_date:                    string;
+    start_date_local:              string;
+    timezone:                      string;
+    utc_offset:                    number;
+    start_latlng:                  number[];
+    end_latlng:                    number[];
+    location_city:                 null;
+    location_state:                null;
+    location_country:              null;
+    start_latitude:                number | null;
+    start_longitude:               number | null;
+    achievement_count:             number;
+    kudos_count:                   number;
+    comment_count:                 number;
+    athlete_count:                 number;
+    photo_count:                   number;
+    photo_url:                     string;
+    map:                           Map;
+    trainer:                       boolean;
+    commute:                       boolean;
+    manual:                        boolean;
+    private:                       boolean;
+    visibility:                    string;
+    flagged:                       boolean;
+    gear_id:                       null;
+    from_accepted_tag:             boolean;
+    upload_id_str:                 string;
+    average_speed:                 number;
+    max_speed:                     number;
+    has_heartrate:                 boolean;
+    heartrate_opt_out:             boolean;
+    display_hide_heartrate_option: boolean;
+    elev_high?:                    number;
+    elev_low?:                     number;
+    pr_count:                      number;
+    total_photo_count:             number;
+    has_kudoed:                    boolean;
+}
+
+export interface Athlete {
+    id:             number;
+    resource_state: number;
+}
+
+export interface Map {
+    id:               string;
+    summary_polyline: null | string;
+    resource_state:   number;
+}

src/app/dto/geolocation.dto.ts

@@ -0,0 +1,4 @@
+export interface Coords {
+    lat: number,
+    lng: number,
+}

src/app/dto/index.ts

@@ -0,0 +1,2 @@
+export {ActivitiesResponse, Activity} from './activities.dto';
+export {Coords} from './geolocation.dto';

src/app/home/home.page.html

@@ -6,6 +6,7 @@
   </ion-toolbar>
 </ion-header>
 
+
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
@@ -15,7 +16,38 @@
 
   <div id="container">
     <strong>Ready to create an app?</strong>
-    <app-google-map></app-google-map>
+    <!-- <pre>{{activities$ | async | json}}</pre> -->
+    <ion-grid>
+      <ion-row>
+        <ion-col>
+          <ng-container *ngIf="activities$ | async; let actz">  
+            <ng-container *ngFor="let activity of actz">
+              <!-- <pre>{{activity | json}}</pre> -->
+              <ion-card>
+                <ion-card-header>
+                  <ion-card-title>{{activity.name}}</ion-card-title>
+                  <ion-card-subtitle>{{activity.type}}</ion-card-subtitle>
+                </ion-card-header>
+                <ion-card-content>
+                  Photos: {{activity.total_photo_count}}
+                  <ion-item *ngIf="activity.photo_url">
+                    <ion-avatar slot="start">
+                      <img [src]="activity.photo_url" />
+                    </ion-avatar>
+                  </ion-item>
+                </ion-card-content>
+              </ion-card>
+            </ng-container>
+          </ng-container>
+        </ion-col>
+
+        <ion-col>
+          <ion-item>
+            <app-google-map></app-google-map>
+          </ion-item>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
     <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
   </div>
 </ion-content>

src/app/home/home.page.ts

@@ -1,13 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivitiesService } from './../services/activities.service';
+import { Observable } from 'rxjs';
+import { Activity } from 'dto/';
+import { share } from 'rxjs/operators';
 
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
 })
-export class HomePage {
+export class HomePage implements OnInit {
+  activities$: Observable<Activity[]>;
 
-  constructor() {
+  constructor(
+    private activities: ActivitiesService,
+  ) {
   }
 
+  ngOnInit(): void {
+    this.activities$ = this.activities.get().pipe(
+      share()
+    );
+  }
 }

src/app/services/activities.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ActivitiesService } from './activities.service';
+
+describe('ActivitiesService', () => {
+  let service: ActivitiesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ActivitiesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/activities.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { ActivitiesResponse, Activity } from '../dto/activities.dto';
+import { map, tap } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ActivitiesService {
+
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  get(): Observable<Activity[]> {
+    return this.http.get<ActivitiesResponse>(`/api/activities`).pipe(
+      tap((resp) => {console.log(`resp: `, resp)}),
+      map((response: ActivitiesResponse) => response.activities ?? [])
+    );
+  }
+}

src/proxy.conf.json

@@ -0,0 +1,9 @@
+{
+    "/api": {
+        "target": "http://localhost:5000",
+        "secure": false,
+        "pathRewrite": {
+            "^/api": ""
+        }
+    }
+}

tsconfig.json

@@ -13,6 +13,12 @@
     "target": "es2015",
     "module": "es2020",
     "lib": ["es2018", "dom"],
+    "paths": {
+      "dto/*": [
+        "src/app/dto/*",
+        "src/app/dto/index.ts"
+      ]
+    },    
     "types": ["googlemaps"]
   },
   "angularCompilerOptions": {