bullpen/app/src/views/HomeView.vue

<script setup lang="ts">
import {computed, ref} from 'vue';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonIcon } from '@ionic/vue';
import { playOutline, statsChartOutline, personOutline, logOutOutline, personAddOutline } from 'ionicons/icons';
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import BullpenSessionService from "@/services/BullpenSessionService";
import TokenService from "@/services/TokenService";

const router = useRouter();
const store = useStore();

const userImage = ref(null);

const user = computed(() => store.state.auth.user);
const isAuthenticated = computed(() => store.state.auth.isAuthenticated);

if (user.value === undefined || user.value === null || user.value === '') {
  router.push({ path: '/login' });
}

const startBullpen = () => {
  if (TokenService.isPlayer()) {
    store.dispatch('player/selectPlayer', user).then(() => {
      store.dispatch("bullpen/start", user.value);
      router.push({ path: '/bullpen' });
    });
  } else if (TokenService.isCoach()) {
    router.push({ path: '/players' });
  }
};

const showStats = () => {
  BullpenSessionService.fetchAll().then((bullpens) => {
    store.commit("bullpen/fetch", bullpens);
    router.push({ path: '/stats' });
  })
};

const showProfile = () => {
  router.push({ path: '/player', query: { id: user.value.id }});
};

const logout = () => {
  store.dispatch('auth/logout').then(() => {
    router.push({ path: '/' });
  }, error => {
    console.log(error);
  });
}

const addPlayer = () => {
  router.push({ path: '/player' });
}

</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title v-if="isAuthenticated">Home of {{ user.firstName }} {{ user.lastName }}</ion-title>
        <ion-title v-else>Home</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <div class="user-container">
        <ion-avatar class="user-avatar">
          <template v-if="userImage">
            <img :src="userImage" alt="User Profile" class="avatar-frame" />
          </template>
          <template v-else>
            <ion-icon :icon="personOutline" class="avatar-placeholder" />
          </template>
        </ion-avatar>
        <div v-if="isAuthenticated" class="user-name">{{ user.firstName }} {{ user.lastName }}</div>
      </div>

      <div class="button-grid">
        <ion-button @click="startBullpen" class="grid-button">
          <ion-icon :icon="playOutline" slot="start" />
          Start Bullpen Session
        </ion-button>
        <ion-button @click="showStats" class="grid-button">
          <ion-icon :icon="statsChartOutline" slot="start" />
          Show Bullpen Stats
        </ion-button>
        <ion-button @click="showProfile" class="grid-button">
          <ion-icon :icon="personOutline" slot="start" />
          Show Profile
        </ion-button>
        <ion-button @click="logout" class="grid-button">
          <ion-icon :icon="logOutOutline" slot="start" />
          Logout
        </ion-button>
        <ion-button v-if="TokenService.isCoach()" @click="addPlayer" class="grid-button">
          <ion-icon :icon="personAddOutline" slot="start" />
          Add Player
        </ion-button>
      </div>
    </ion-content>
  </ion-page>
</template>

<style scoped>
.user-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30vh;
  background-color: #f0f0f0;
  padding: 5px;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #ccc;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-placeholder {
  font-size: 60px;
  color: #888;
}

.user-name {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
  width: 100%;
}

.grid-button {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-inline: 0 !important;
}
</style>