feat update nav

myclubapp · Dec 8, 2023 · 458ec09 · 458ec09
1 parent c4ccdaf
commit 458ec09
Show file tree

Hide file tree

Showing 23 changed files with 751 additions and 89 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -158,6 +158,11 @@ const routes: Routes = [
         (m) => m.NotFoundPageModule
       ),
   },
+  {
+    path: "member",
+    loadChildren: () =>
+      import("./pages/member/member.module").then((m) => m.MemberPageModule),
+  },
 ];
 
 @NgModule({

diff --git a/src/app/pages/championship/championship-detail/championship-detail.page.html b/src/app/pages/championship/championship-detail/championship-detail.page.html
@@ -90,6 +90,10 @@ <h2>{{game.spectators}}</h2>
       </ion-item>
     </ion-list>
 
+    <ion-list [inset]="true" lines="none">
+      <ion-item (click)="openLineup(game)" detail="true"> Lineup </ion-item>
+    </ion-list>
+
     <ion-list [inset]="true" lines="none" *ngIf="isFuture">
       <ion-list-header>
         {{"common.attendances__absences" | translate}}
@@ -151,7 +155,9 @@ <h2>{{game.spectators}}</h2>
                 <ion-icon color="success" slot="start" name="checkmark-circle">
                 </ion-icon>
 
-                <ion-label>{{member.firstName}} {{member.lastName}}</ion-label>
+                <ion-label (click)="openMember(member)"
+                  >{{member.firstName}} {{member.lastName}}</ion-label
+                >
               </ion-item>
             </ion-list>
           </div>
@@ -173,7 +179,9 @@ <h2>{{game.spectators}}</h2>
                 <ion-icon color="danger" slot="start" name="close-circle">
                 </ion-icon>
 
-                <ion-label>{{member.firstName}} {{member.lastName}}</ion-label>
+                <ion-label (click)="openMember(member)"
+                  >{{member.firstName}} {{member.lastName}}</ion-label
+                >
               </ion-item>
             </ion-list>
           </div>

diff --git a/src/app/pages/championship/championship-detail/championship-detail.page.ts b/src/app/pages/championship/championship-detail/championship-detail.page.ts
@@ -29,6 +29,9 @@ import { UserProfileService } from "src/app/services/firebase/user-profile.servi
 import { environment } from "src/environments/environment";
 import { ActivatedRoute } from "@angular/router";
 import { TranslateService } from "@ngx-translate/core";
+import { LineupPage } from "../lineup/lineup.page";
+import { Profile } from "src/app/models/user";
+import { MemberPage } from "../../member/member.page";
 
 @Component({
   selector: "app-championship-detail",
@@ -280,6 +283,43 @@ export class ChampionshipDetailPage implements OnInit {
       console.log("no coordinates on map");
     }
   }
+  async openMember(member: Profile) {
+    console.log("openMember");
+    const modal = await this.modalCtrl.create({
+      component: MemberPage,
+      presentingElement: await this.modalCtrl.getTop(),
+      canDismiss: true,
+      showBackdrop: true,
+      componentProps: {
+        data: member,
+      },
+    });
+    modal.present();
+
+    const { data, role } = await modal.onWillDismiss();
+
+    if (role === "confirm") {
+    }
+  }
+
+  async openLineup(game: Game) {
+    // const presentingElement = await this.modalCtrl.getTop();
+    const modal = await this.modalCtrl.create({
+      component: LineupPage,
+      presentingElement: await this.modalCtrl.getTop(),
+      canDismiss: true,
+      showBackdrop: true,
+      componentProps: {
+        data: game,
+      },
+    });
+    modal.present();
+
+    const { data, role } = await modal.onWillDismiss();
+
+    if (role === "confirm") {
+    }
+  }
 
   openMaps(game: Game) {
     if (this.coordinates.coords.longitude && this.coordinates.coords.latitude) {

diff --git a/src/app/pages/championship/lineup/lineup.module.ts b/src/app/pages/championship/lineup/lineup.module.ts
@@ -7,9 +7,16 @@ import { IonicModule } from "@ionic/angular";
 import { LineupPageRoutingModule } from "./lineup-routing.module";
 
 import { LineupPage } from "./lineup.page";
+import { TranslateModule } from "@ngx-translate/core";
 
 @NgModule({
-  imports: [CommonModule, FormsModule, IonicModule, LineupPageRoutingModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    LineupPageRoutingModule,
+    TranslateModule,
+  ],
   declarations: [LineupPage],
 })
 export class LineupPageModule {}
diff --git a/src/app/pages/championship/lineup/lineup.page.html b/src/app/pages/championship/lineup/lineup.page.html
@@ -1,13 +1,112 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>lineup</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ng-container *ngIf="game$ | async as game">
+  <ion-header [translucent]="true">
     <ion-toolbar>
-      <ion-title size="large">lineup</ion-title>
+      <ion-title>Lineup</ion-title>
+      <ion-buttons slot="primary">
+        <ion-button (click)="close()"
+          >{{"common.close" | translate}}</ion-button
+        >
+      </ion-buttons>
     </ion-toolbar>
   </ion-header>
-</ion-content>
+
+  <ion-content [fullscreen]="true">
+    <ion-header collapse="condense">
+      <ion-toolbar>
+        <ion-title size="large">Lineup</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-list lines="full" [inset]="true" *ngFor="let block of blocks, index">
+      <ion-list-header>
+        <ion-item> {{"common.present" | translate}} </ion-item>
+      </ion-list-header>
+
+      <ion-item *ngFor="let member of block['members']" detail="true">
+        <ion-icon
+          color="primary"
+          name="add-circle-outline"
+          (click)="addMember(member)"
+          slot="start"
+        ></ion-icon>
+        <ion-label (click)="openMember(member)"
+          >{{member.firstName}} {{member.lastName}}</ion-label
+        >
+      </ion-item>
+    </ion-list>
+
+    <ion-list lines="full" [inset]="true">
+      <ion-list-header>
+        <ion-item> {{"common.present" | translate}} </ion-item>
+      </ion-list-header>
+
+      <ion-item *ngFor="let member of game['attendeeListTrue']" detail="true">
+        <ion-icon
+          color="primary"
+          name="add-circle-outline"
+          (click)="addMember(member)"
+          slot="start"
+        ></ion-icon>
+        <ion-label (click)="openMember(member)"
+          >{{member.firstName}} {{member.lastName}}</ion-label
+        >
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</ng-container>
+
+<ng-template #loading>
+  <ion-list *ngIf="loading">
+    <ion-grid>
+      <ion-row>
+        <ion-col
+          size-lg="4"
+          size-md="6"
+          size-sm="6"
+          size="12"
+          *ngFor="let item of skeleton"
+        >
+          <ion-card>
+            <ion-card-header>
+              <ion-card-subtitle>
+                <ion-skeleton-text
+                  animated
+                  style="width: 60%"
+                ></ion-skeleton-text>
+              </ion-card-subtitle>
+              <ion-card-title>
+                <ion-skeleton-text
+                  animated
+                  style="width: 80%"
+                ></ion-skeleton-text>
+              </ion-card-title>
+            </ion-card-header>
+
+            <ion-card-content>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 60%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 60%"
+              ></ion-skeleton-text>
+              <ion-skeleton-text
+                animated
+                style="width: 80%"
+              ></ion-skeleton-text>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-list>
+</ng-template>