bullpen view progress

app/src/App.vue

@@ -50,6 +50,7 @@ onMounted(() => {
     router.push({path: '/login'});
   } else {
     store.dispatch('pitchTypes/fetch');
+    console.log('App', user.value);
     store.dispatch("player/selectPlayer", user.value);
   }
 });

app/src/components/PlayerComponent.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
-import {computed, reactive, ref} from "vue";
+import {computed, onMounted, reactive, ref} from "vue";
 import {
   InfiniteScrollCustomEvent,
+  IonFab,
+  IonFabButton,
   IonIcon,
   IonInfiniteScroll,
   IonInfiniteScrollContent,
   IonItem,
   IonLabel,
-  IonList
+  IonList,
+  IonNote,
+  IonProgressBar
 } from '@ionic/vue';
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
-import {baseballOutline} from 'ionicons/icons';
+import {add, baseballOutline, chevronForward} from 'ionicons/icons';
 import Bullpen from '@/types/Bullpen';
 import BullpenSessionService from "@/services/BullpenSessionService";
 import dayjs from 'dayjs';
@@ -26,6 +30,12 @@ const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes);
 const items = reactive<Bullpen[]>([]);
 const page = ref(0);
 
+const emit = defineEmits(['updateTitle']);
+
+onMounted(() => {
+  emit('updateTitle', 'Bullpens');
+});
+
 const startBullpenSession = () => {
   router.push({ path: "/bullpen" });
 };
@@ -63,30 +73,40 @@ generateItems();
 </script>
 
 <template>
-  <ion-list>
-    <ion-item v-for="(bullpen, index) in items" :key="index" lines="none" class="custom-item" :button="true" detail="false">
+  <ion-list inset="false">
+    <ion-item v-for="(bullpen, index) in items" :key="index" class="custom-item" :button="true" detail="false">
       <!-- Top-left icon -->
       <ion-icon :icon="baseballOutline" slot="start" class="item-icon"></ion-icon>
-
+      <ion-label>
+        <strong>{{formatDate(bullpen.startedAt)}}</strong>
         <ion-label class="item-labels">
-        <!-- First Progress Bar -->
           <div class="progress-section">
             <div class="top-row">
-            <span class="left-label">Task 1</span>
+              <span class="left-label">Strike</span>
               <span class="right-label">{{ (0.57 * 100).toFixed(0) }}%</span>
             </div>
-          <ion-progress-bar :value="0.57"></ion-progress-bar>
+            <ion-progress-bar :value="0.57" color="success"></ion-progress-bar>
           </div>
-
-        <!-- Second Progress Bar -->
           <div class="progress-section">
             <div class="top-row">
-            <span class="left-label">Task 2</span>
+              <span class="left-label">Balls</span>
               <span class="right-label">{{ (0.33 * 100).toFixed(0) }}%</span>
             </div>
-          <ion-progress-bar :value="0.33" color="secondary"></ion-progress-bar>
+            <ion-progress-bar :value="0.33" color="warning"></ion-progress-bar>
+          </div>
+          <div class="progress-section">
+            <div class="top-row">
+              <span class="left-label">Precision</span>
+              <span class="right-label">{{ (0.77 * 100).toFixed(0) }}%</span>
+            </div>
+            <ion-progress-bar :value="0.77" color="danger"></ion-progress-bar>
           </div>
         </ion-label>
+      </ion-label>
+      <div class="metadata-end-wrapper" slot="end">
+        <ion-note color="medium">{{bullpen.pitches.length}} Pitches</ion-note>
+        <ion-icon color="medium" :icon="chevronForward"></ion-icon>
+      </div>
     </ion-item>
 
 <!--    <ion-item v-for="(bullpen, index) in items" :key="index">-->
@@ -105,9 +125,31 @@ generateItems();
   <ion-infinite-scroll @ionInfinite="ionInfinite">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
   </ion-infinite-scroll>
+  <ion-fab slot="fixed" vertical="bottom" horizontal="end">
+    <ion-fab-button @click="startBullpenSession">
+      <ion-icon :icon="add"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 </template>
 
 <style scoped>
+.metadata-end-wrapper{
+  position:absolute;
+  top:10px;
+  inset-inline-end:10px;
+  font-size:0.8rem;
+  display:flex;
+  align-items:center;
+}
+
+ion-label strong{
+  display: block;
+  max-width: calc(100% - 60px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+}
+
 .custom-item {
   align-items: flex-start !important; /* important override */
   --padding-start: 16px;
@@ -119,7 +161,7 @@ generateItems();
   font-size: 28px;
   color: var(--ion-color-danger);
   margin-right: 12px;
-  margin-top: 18px;
+  margin-top: 8px;
 }
 
 .item-labels {
@@ -131,6 +173,7 @@ generateItems();
 }
 
 .top-row {
+  padding: 2px 0 0 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -138,7 +181,7 @@ generateItems();
 }
 
 .left-label {
-  font-weight: bold;
+  font-weight: normal;
   font-size: 16px;
 }
 

app/src/store/auth.ts

@@ -69,6 +69,7 @@ const auth: Module<AuthState, RootState> = {
     mutations: {
         loginSuccess(state, user) {
             state.isAuthenticated = true;
+            console.log('auth', user);
             state.user = user;
         },
         loginFailure(state) {

app/src/views/HomeView.vue

@@ -25,6 +25,7 @@ const store = useStore();
 
 const user = computed(() => store.state.auth.user);
 
+console.log('home', user.value);
 import PlayerContent from "@/components/PlayerComponent.vue"
 import CoachContent from "@/components/CoachComponent.vue";
 
@@ -100,11 +101,7 @@ const addPlayer = () => {
 <!--          Add Player-->
 <!--        </ion-button>-->
 <!--      </div>-->
-      <ion-fab slot="fixed" vertical="bottom" horizontal="end">
-        <ion-fab-button>
-          <ion-icon :icon="add"></ion-icon>
-        </ion-fab-button>
-      </ion-fab>
+
     </ion-content>
   </ion-page>
 </template>