Merge pull request #136 from runette/update-3

3.1.0.b1
runette · Mar 11, 2024 · f972e48 · f972e48
2 parents 4eca8fd + ec836e6
commit f972e48
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 65 deletions.
diff --git a/bcp/package.json b/bcp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bcp",
-  "version": "3.1.0.a1",
+  "version": "3.1.0.b1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/runette/Big-Cannon-Project.git"

diff --git a/bcp/src/app/bcp-database/bcp-database.component.ts b/bcp/src/app/bcp-database/bcp-database.component.ts
@@ -9,6 +9,7 @@ import { Component,
          ChangeDetectorRef,
          QueryList,
          ViewChildren,
+         NgZone,
         } from '@angular/core';
 import { MapInfoWindow, MapMarker } from '@angular/google-maps';
 import { BcpFilterValuesService,
@@ -85,6 +86,7 @@ export class BcpDatabaseComponent implements OnInit, AfterViewInit, OnDestroy {
               public sites: BcpSiteDataService,
               private breakpointObserver: BreakpointObserver,
               private changeDet: ChangeDetectorRef,
+              private zone: NgZone,
               ) { }
 
   ngOnDestroy(): void {
@@ -217,17 +219,20 @@ export class BcpDatabaseComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   public loadMarkers( ): void {
-    this.changeDet.reattach();
-    if ( this.data.filteredData && this.data.filteredData.length > 0) { 
-      for (let entry of this.data.filteredData) {
-        let icon: google.maps.Icon = {'url':''};
-        if (entry.quality == this.FILTER_TEXT.RECORD_QUALITIES[1]) icon.url = '../assets/cannon_bronze.png';
-        else if (entry.quality == this.FILTER_TEXT.RECORD_QUALITIES[2]) icon.url = '../assets/cannon_silver.png';
-        else if (entry.quality == this.FILTER_TEXT.RECORD_QUALITIES[3]) icon.url = '../assets/cannon_gold.png';
-        let md = {position: new google.maps.LatLng(entry.location), icon:icon}
-        if ( ! this.markerPositions.find( item => item.position.equals(md.position))) this.markerPositions.push(md)
-      }
-    }
+    google.maps.importLibrary('maps').then( (_) => {
+      this.zone.run((_) => {
+        if ( this.data.filteredData && this.data.filteredData.length > 0) { 
+          for (let entry of this.data.filteredData) {
+            let icon: google.maps.Icon = {'url':''};
+            if (entry.quality == this.FILTER_TEXT.RECORD_QUALITIES[1]) icon.url = '../assets/cannon_bronze.png';
+            else if (entry.quality == this.FILTER_TEXT.RECORD_QUALITIES[2]) icon.url = '../assets/cannon_silver.png';
+            else if (entry.quality == this.FILTER_TEXT.RECORD_QUALITIES[3]) icon.url = '../assets/cannon_gold.png';
+            let md = {position: new google.maps.LatLng(entry.location), icon:icon}
+            if ( ! this.markerPositions.find( item => item.position.equals(md.position))) this.markerPositions.push(md)
+          }
+        }
+      });
+    });
   }
 
   public markerClick($event: { latLng: google.maps.LatLng; }) {

diff --git a/bcp/src/app/bcp-new-record/bcp-new-record.component.ts b/bcp/src/app/bcp-new-record/bcp-new-record.component.ts
@@ -10,6 +10,7 @@ import { BcpUser, BcpUserService } from '../bcp-user.service';
 import { Subscription } from 'rxjs';
 import { Site, BcpSiteDataService, Geo } from '../bcp-site-data.service';
 import { STEPPER_GLOBAL_OPTIONS, StepperSelectionEvent } from '@angular/cdk/stepper';
+import { ParamMap } from '@angular/router';
 
 @Component({
   selector: 'app-bcp-new-record',
@@ -67,8 +68,8 @@ get site() {
 
 set site(site: Site) {
   this._site = site;
-  let geo =  new Geo(site.geocode.geometry)
   if (site) {
+    let geo =  new Geo(site.geocode.geometry)
     this.viewport =geo.viewport;
     if (new google.maps.LatLngBounds(this.viewport).contains(this.location)) {
       this.steponeCompleted = true;
@@ -114,9 +115,12 @@ set location (loc){
   }
 
   ngOnInit(): void {
-        this.subscriptions.push(this.request.queryParamMap.subscribe(pmap => {
-      this.site = this.sites.fetch(parseInt(pmap.get("site_id")));
-    }));
+        this.subscriptions.push(this.request.queryParamMap.subscribe((pmap: ParamMap) => {
+          if (pmap.has('site_id'))
+            this.site = this.sites.fetch(parseInt(pmap.get("site_id")));
+        }
+      )
+    );
   }
 
   ngOnDestroy(): void {

diff --git a/bcp/src/app/bcp-site-card/bcp-site-card.component.html b/bcp/src/app/bcp-site-card/bcp-site-card.component.html
@@ -1,15 +1,17 @@
 
 <mat-card>
     <mat-card-content>
-        <mat-grid-list cols="12" rowHeight="64px">
-            <mat-grid-tile colspan="2">
-                <img class="card-img m-1" [src]="site.geocode.icon ? site.geocode.icon : '../assets/32x32.png'" />
-            </mat-grid-tile>
+        <mat-grid-list [cols]="showGuns ? numberOfCols + 2 : numberOfCols" rowHeight="64px">
+            @if(showImage) {
+                <mat-grid-tile colspan="2">
+                    <img class="card-img m-1" [src]="site.geocode.icon ? site.geocode.icon : '../assets/32x32.png'" />
+                </mat-grid-tile>
+            }
             <mat-grid-tile colspan="8">
                 <mat-card class="w-100">
                     <mat-card-header>
                         <mat-card-title>
-                            {{site.display_name | truncate:15}}
+                            {{site.display_name | truncate:17}}
                         </mat-card-title>
                     </mat-card-header>
                     <mat-card-content>
@@ -19,16 +21,18 @@
                     </mat-card-content>
                 </mat-card>
             </mat-grid-tile>
-            <mat-grid-tile colspan="2">
-                <mat-chip-set aria-label="Gun Count" class=" card-body align-middle">
-                    <mat-chip *ngIf="site" 
-                              color="primary" 
-                              highlighted=""
-                              matTooltip="There {{site.guns.length>1?'are':'is'}} {{site.guns.length}} record{{site.guns.length>1?'s':''}} at this Site"
-                        >{{site.guns.length}} Gun{{site.guns.length!=1?"s":""}} 
-                    </mat-chip>
-                </mat-chip-set>
-            </mat-grid-tile>
+            @if (showGuns) {
+                <mat-grid-tile colspan="2">
+                    <mat-chip-set aria-label="Gun Count" class=" card-body align-middle">
+                        <mat-chip *ngIf="site" 
+                                color="primary" 
+                                highlighted=""
+                                matTooltip="There {{site.guns.length>1?'are':'is'}} {{site.guns.length}} record{{site.guns.length>1?'s':''}} at this Site"
+                            >{{site.guns.length}} Gun{{site.guns.length!=1?"s":""}} 
+                        </mat-chip>
+                    </mat-chip-set>
+                </mat-grid-tile>
+            }
         </mat-grid-list>
     </mat-card-content>
 </mat-card>
diff --git a/bcp/src/app/bcp-site-card/bcp-site-card.component.ts b/bcp/src/app/bcp-site-card/bcp-site-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit , Input, ElementRef } from '@angular/core';
 import { Site } from '../bcp-site-data.service';
 
 @Component({
@@ -12,10 +12,21 @@ export class BcpSiteCardComponent implements OnInit {
   @Input()
   site: Site;
 
-  constructor() { }
+  showImage: boolean = true;
+  numberOfCols: number = 10;
+
+  @Input()
+  showGuns: boolean = true;
+
+  constructor( private ref: ElementRef) { }
 
   ngOnInit(): void {
+    if ( this.ref && this.ref.nativeElement) {
+      if (this.ref.nativeElement.offsetWidth < 350) {
+        this.showImage = false;
+        this.numberOfCols = 8;
+      }
+    }
   }
-
 }
 
diff --git a/bcp/src/app/bcp-site-selector/bcp-site-selector.component.html b/bcp/src/app/bcp-site-selector/bcp-site-selector.component.html
@@ -57,6 +57,7 @@
                             <app-bcp-site-card 
                                 (click)="setSite(item[0]); addSite=false"
                                 [site]="item[0]"
+                                [showGuns]="false"
                             ></app-bcp-site-card>
                         </div>
                     </cdk-virtual-scroll-viewport>

diff --git a/bcp/src/app/bcp-site-selector/bcp-site-selector.component.ts b/bcp/src/app/bcp-site-selector/bcp-site-selector.component.ts
@@ -39,19 +39,21 @@ export class BcpSiteSelectorComponent implements OnInit, OnDestroy {
     }
 
   set location(loc: google.maps.LatLngLiteral) {
-    this._location = loc;
-    if (this._location.lat == 0 && this._location.lng == 0) {
-      navigator.geolocation.getCurrentPosition(position => this.location = {lat:position.coords.latitude,lng:position.coords.longitude }, this.showError);
-    } else {
-      this.closestSites = []
-      this.sites.data.forEach( site => {
-        if (new google.maps.LatLngBounds(site.geocode.geometry.viewport).contains(this._location)
-          ) {
-          this.closestSites.push([site, google.maps.geometry.spherical.computeDistanceBetween(loc, site.geocode.geometry.location)])
-        };
-      });
-      this.closestSites.sort( (a,b) => a[1] - b[1])
-    }
+    google.maps.importLibrary('geometry').then( (_) => {
+      this._location = loc;
+      if (this._location.lat == 0 && this._location.lng == 0) {
+        navigator.geolocation.getCurrentPosition(position => this.location = {lat:position.coords.latitude,lng:position.coords.longitude }, this.showError);
+      } else {
+        this.closestSites = []
+        this.sites.data.forEach( site => {
+          if (new google.maps.LatLngBounds(site.geocode.geometry.viewport).contains(this._location)
+            ) {
+            this.closestSites.push([site, google.maps.geometry.spherical.computeDistanceBetween(loc, site.geocode.geometry.location)])
+          };
+        });
+        this.closestSites.sort( (a,b) => a[1] - b[1])
+      }
+    });
   }
 
   SOURCES = SOURCES;
@@ -84,23 +86,25 @@ export class BcpSiteSelectorComponent implements OnInit, OnDestroy {
   }
 
   newGeo(response: any): void{
-    let map = ["geolocation", "places"]
-    for (let key of map) {
-      let data = response[key];
-      for (let geocode of data) {
-        let site = Site.fromGeocode(geocode);
-        if (new google.maps.LatLngBounds(site.geocode.geometry.viewport).contains(this.location)) {
-          this.candidateSites = [...this.candidateSites,
-            [site, 
-            google.maps.geometry.spherical.computeDistanceBetween(
-              this.location, site.geocode.geometry.location
-            )]
-          ];
+    google.maps.importLibrary('geometry').then( (_) => {
+      let map = ["geolocation", "places"]
+      for (let key of map) {
+        let data = response[key];
+        for (let geocode of data) {
+          let site = Site.fromGeocode(geocode);
+          if (new google.maps.LatLngBounds(site.geocode.geometry.viewport).contains(this.location)) {
+            this.candidateSites = [...this.candidateSites,
+              [site, 
+              google.maps.geometry.spherical.computeDistanceBetween(
+                this.location, site.geocode.geometry.location
+              )]
+            ];
+          }
         }
       }
-    }
-    this.candidateSites.sort( (a,b) => a[1] - b[1]);
-    this.fetchSitesWaiting = false;
+      this.candidateSites.sort( (a,b) => a[1] - b[1]);
+      this.fetchSitesWaiting = false;
+    })
   }
 
   private showError(error) {

diff --git a/bcp/src/environments/environment.ts b/bcp/src/environments/environment.ts
@@ -48,6 +48,6 @@ export const environment = {
     storageBucket: STORAGE_BUCKET,
   },
 
-  //apiUrl: 'https://www.bigcannonproject.org/_ah/api'
-  apiUrl: 'http://localhost:8000/_ah/api',
+  apiUrl: 'https://www.bigcannonproject.org/_ah/api'
+  //apiUrl: 'http://localhost:8000/_ah/api',
 }
diff --git a/bcp/src/index.html b/bcp/src/index.html
@@ -19,7 +19,7 @@
     <script>
       (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
         v: "weekly",
-        key: "AIzaSyAjR85QEAekYmsSyDPETXxprFpnEsdgjjU"
+        key: "AIzaSyAjR85QEAekYmsSyDPETXxprFpnEsdgjjU",
       });
     </script>
     <link rel="preconnect" href="https://fonts.gstatic.com">