Merge pull request #93 from paulmojicatech/updated-charts

Updated charts
paulmojicatech · Dec 19, 2022 · 65776cc · 65776cc
2 parents e7886e8 + 651bea9
commit 65776cc
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 16 deletions.
diff --git a/apps/fantalytic-mobile/src/app/fantasy-football/fantasy-football.component.html b/apps/fantalytic-mobile/src/app/fantasy-football/fantasy-football.component.html
@@ -27,7 +27,10 @@
                             <div class="stats-container">
                                 <span class="player-container">
                                     <ion-avatar>
-                                        <img [src]="stat.imgUrl" />
+                                        <img *ngIf="stat.imgUrl && stat.imgUrl !== 'undefined'; else noImage" [src]="stat.imgUrl" />
+                                        <ng-template #noImage>
+                                            <img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+                                        </ng-template>
                                     </ion-avatar>
                                     <span>{{stat.player}}</span>
                                 </span>

diff --git a/apps/fantalytic-mobile/src/app/fantasy-football/fantasy-football.component.ts b/apps/fantalytic-mobile/src/app/fantasy-football/fantasy-football.component.ts
@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { Store } from '@ngrx/store';
 import { BehaviorSubject, combineLatest, filter, map, Observable, Subject, take, takeUntil } from 'rxjs';
 import { PositionTypes } from '../../../../../libs/fantalytic-shared/src';
+import { setHasBackButton } from '../ngrx/actions/shared.actions';
 import { loadDefenses, loadQbs, loadRbs, loadReceivers, setPositionType, updateYearFilter } from './ngrx/actions/fantasy-football.actions';
 import { getDefenses, getPosition, getQbs, getRbs, getReceivers, getSelectedYear } from './ngrx/selectors/fantasy-football.selectors';
 
@@ -193,6 +194,7 @@ export class FantasyFootballComponent implements OnInit, OnDestroy {
   }
 
   handlePlayerSelected(playerId: string): void {
+    this._store.dispatch(setHasBackButton(true));
     this._router.navigate(['tabs', 'fantasy-football', `player-details`, playerId]);
   }
 
@@ -206,7 +208,7 @@ export class FantasyFootballComponent implements OnInit, OnDestroy {
             {
               id: pos.id,
               player: pos.player,
-              imgUrl: pos.imageUrl,
+              imgUrl: pos.imageUrl ?? 'https://ionicframework.com/docs/img/demos/avatar.svg',
               stat: +pos[currentPositionMapState[index].availableStats[currentStatHeader]]
             }
           )).sort((prev, next) => {

diff --git a/apps/fantalytic-mobile/src/app/fantasy-football/player-detail/player-detail.component.html b/apps/fantalytic-mobile/src/app/fantasy-football/player-detail/player-detail.component.html
@@ -1,14 +1,10 @@
-<ion-header>
-    <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-        </ion-buttons>
-    </ion-toolbar>
-</ion-header>
 <ion-content *ngIf="player$ | async as player">
 
     <ion-card>
-        <img [src]="player.imageUrl" />
+        <img *ngIf="player.imageUrl && player.imageUrl !== 'undefined'; else noImage" [src]="player.imageUrl" />
+        <ng-template #noImage>
+            <img src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </ng-template>
         <ion-card-header>{{player.player}}</ion-card-header>
     </ion-card>
 

diff --git a/apps/fantalytic-mobile/src/app/fantasy-football/player-detail/player-detail.component.ts b/apps/fantalytic-mobile/src/app/fantasy-football/player-detail/player-detail.component.ts
@@ -1,5 +1,5 @@
 /* eslint-disable arrow-body-style */
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { combineLatest, EMPTY, map, shareReplay, switchMap } from 'rxjs';
@@ -8,6 +8,7 @@ import { getDefenses, getPosition, getQbs, getRbs, getReceivers } from '../ngrx/
 import { PositionTypes } from '../../../../../../libs/fantalytic-shared/src';
 import { IonicModule } from '@ionic/angular';
 import { FANTASY_FOOTBALL_STAT_HEADER_MAP } from '../const/fantasy-football.const';
+import { setHasBackButton } from 'src/app/ngrx/actions/shared.actions';
 
 @Component({
   selector: 'pmt-player-detail',
@@ -16,7 +17,7 @@ import { FANTASY_FOOTBALL_STAT_HEADER_MAP } from '../const/fantasy-football.cons
   templateUrl: './player-detail.component.html',
   styleUrls: ['./player-detail.component.scss'],
 })
-export class PlayerDetailComponent {
+export class PlayerDetailComponent implements OnDestroy {
 
   private _route = inject(ActivatedRoute);
   private _store = inject(Store);
@@ -62,4 +63,8 @@ export class PlayerDetailComponent {
     })
   );
 
+  ngOnDestroy(): void {
+    this._store.dispatch(setHasBackButton(false));
+  }
+
 }
diff --git a/apps/fantalytic-mobile/src/app/header/header.component.html b/apps/fantalytic-mobile/src/app/header/header.component.html
@@ -1,6 +1,11 @@
 <ion-header>
     <ion-toolbar>
-        <ion-title>Fantalytic.io</ion-title>
+        <ion-buttons *ngIf="hasBackButton$ | async" slot="start">
+            <ion-button (click)="goBack()">
+                <ion-icon slot="start" name="chevron-back-outline"></ion-icon>
+            </ion-button>
+        </ion-buttons>
+        <ion-title>Fantalytic.io</ion-title>        
         <ion-buttons slot="end">
             <ion-button id="click-trigger">
                 <ion-icon slot="icon-only" name="american-football-outline"></ion-icon>

diff --git a/apps/fantalytic-mobile/src/app/header/header.component.scss b/apps/fantalytic-mobile/src/app/header/header.component.scss
@@ -4,4 +4,4 @@
 
 .active {
     color: rgb(66,140,255);
-}
+}
diff --git a/apps/fantalytic-mobile/src/app/header/header.component.ts b/apps/fantalytic-mobile/src/app/header/header.component.ts
@@ -1,7 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
+import { Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { IonicModule, NavController } from '@ionic/angular';
+import { Store } from '@ngrx/store';
 import { BehaviorSubject } from 'rxjs';
+import { setHasBackButton } from '../ngrx/actions/shared.actions';
+import { selectHasBackButton } from '../ngrx/selectors/shared.selectors';
 
 @Component({
   selector: 'pmt-header',
@@ -12,9 +16,19 @@ import { BehaviorSubject } from 'rxjs';
   exportAs: 'pmt-header'
 })
 export class HeaderComponent {
+
+  _store = inject(Store);
+  _controller = inject(NavController);
+
   activeModule$ = new BehaviorSubject<string>('Football');
+  hasBackButton$ = this._store.select(selectHasBackButton);
 
   switchActiveModule(module: string): void {
     this.activeModule$.next(module);
   }
+
+  goBack(): void {
+    this._controller.back();
+    this._store.dispatch(setHasBackButton(false));
+  }
 }
diff --git a/apps/fantalytic-mobile/src/app/ngrx/actions/shared.actions.ts b/apps/fantalytic-mobile/src/app/ngrx/actions/shared.actions.ts
@@ -0,0 +1,6 @@
+import { createAction } from '@ngrx/store';
+
+export const setHasBackButton = createAction(
+    '[Shared] Set Has Back Button',
+    (hasBackButton: boolean) => ({hasBackButton})
+);
diff --git a/apps/fantalytic-mobile/src/app/ngrx/reducers/shared.reducer.ts b/apps/fantalytic-mobile/src/app/ngrx/reducers/shared.reducer.ts
@@ -0,0 +1,18 @@
+import { createReducer, on } from '@ngrx/store';
+import { setHasBackButton } from '../actions/shared.actions';
+
+export interface SharedState {
+    hasBackButton: boolean;
+}
+
+export const initialState: SharedState = {
+    hasBackButton: false
+};
+
+export const sharedReducer = createReducer(
+    initialState,
+    on(
+        setHasBackButton,
+        (state, {hasBackButton}) => ({...state, hasBackButton})
+    )
+);
diff --git a/apps/fantalytic-mobile/src/app/ngrx/selectors/shared.selectors.ts b/apps/fantalytic-mobile/src/app/ngrx/selectors/shared.selectors.ts
@@ -0,0 +1,9 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { SharedState } from '../reducers/shared.reducer';
+
+const selectSharedState = createFeatureSelector<SharedState>('shared');
+
+export const selectHasBackButton = createSelector(
+    selectSharedState,
+    state => state.hasBackButton
+);
diff --git a/apps/fantalytic-mobile/src/main.ts b/apps/fantalytic-mobile/src/main.ts
@@ -12,6 +12,7 @@ import { TopicEffects } from './app/topics/ngrx/effects/topics.effects';
 import { topicsReducer } from './app/topics/ngrx/reducer/topics.reducer';
 import { environment } from './environments/environment';
 import { IonicModule } from '@ionic/angular';
+import { sharedReducer } from './app/ngrx/reducers/shared.reducer';
 
 if (environment.production) {
   enableProdMode();
@@ -53,6 +54,7 @@ bootstrapApplication(
         RouterModule.forRoot(routes),
         IonicModule.forRoot(),
         StoreModule.forRoot({}),
+        StoreModule.forFeature('shared', sharedReducer),
         EffectsModule.forRoot([]),
         StoreDevtoolsModule.instrument({}),
         HttpClientModule,

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "docker-deploy-fantalytic-api": "docker build -t paulmojicatech/fantalytic-api -f fantalytic-api-dockerfile . && docker push paulmojicatech/fantalytic-api",
     "fantalytic-web-scraper-cron": "nx build --project fantalytic-web-scraper-cron && cd dist/apps/fantalytic-web-scraper-cron && node ./main.js",
     "fantalytic-mobile-build-sync-open-ios": "rm -rf apps/fantalytic-mobile/www/* && nx build --project=fantalytic-mobile --configuration prod && cp -a dist/apps/fantalytic-mobile/* apps/fantalytic-mobile/www && cd apps/fantalytic-mobile && cap sync ios && cap open ios && cd ../..",
+    "fantalytic-mobile-build-sync-open-android": "rm -rf apps/fantalytic-mobile/www/* && nx build --project=fantalytic-mobile --configuration prod && cp -a dist/apps/fantalytic-mobile/* apps/fantalytic-mobile/www && cd apps/fantalytic-mobile && cap sync android && cap open android && cd ../..",
     "docker-deploy-fantalytic-web-scraper-cron": "nx build --project fantalytic-web-scraper-cron && docker build -t paulmojicatech/fantalytic-web-scraper-cron-image -f fantalytic-web-scraper-cron-image-dockerfile . && docker push paulmojicatech/fantalytic-web-scraper-cron-image"
   },
   "private": true,