split home view in player and coach component

2025-06-12 16:12:44 +02:00 · 2025-06-12 16:12:44 +02:00 · acfaffad2c
parent 66b41022b4
commit acfaffad2c
5 changed files with 186 additions and 68 deletions
--- a/app/src/App.vue
+++ b/app/src/App.vue
@ -49,7 +49,8 @@ onMounted(() => {
  if (isOnline.value && !isAuthenticated.value) {
    router.push({path: '/login'});
  } else {
-    // checkStoredUserData();
+    store.dispatch('pitchTypes/fetch');
+    store.dispatch("player/selectPlayer", user.value);
  }
 });

@ -86,7 +87,7 @@ const logoutUser = () => {

 <template>
  <ion-app>
-    <ion-menu content-id="user-menu">
+    <ion-menu v-if="isAuthenticated" content-id="user-menu">
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="secondary">
@ -118,7 +119,7 @@ const logoutUser = () => {
        </ion-list>
      </ion-content>
    </ion-menu>
-    <ion-router-outlet />
+    <ion-router-outlet id="user-menu"/>
  </ion-app>
 </template>

--- a/app/src/components/CoachComponent.vue
+++ b/app/src/components/CoachComponent.vue
@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
+
+const store = useStore();
+const router = useRouter();
+
+const user = computed(() => store.state.auth.user);
+
+const managePlayers = () => {
+  router.push({ path: "/players" });
+};
+
+</script>
+
+<template>
+  <div>
+    <p>Willkommen, Coach {{ user.firstName }}!</p>
+    <ion-button @click="managePlayers">Spieler verwalten</ion-button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
--- a/app/src/components/PlayerComponent.vue
+++ b/app/src/components/PlayerComponent.vue
@ -0,0 +1,149 @@
+<script setup lang="ts">
+import {computed, reactive, ref} from "vue";
+import {
+  InfiniteScrollCustomEvent,
+  IonIcon,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList
+} from '@ionic/vue';
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
+import {baseballOutline} from 'ionicons/icons';
+import Bullpen from '@/types/Bullpen';
+import BullpenSessionService from "@/services/BullpenSessionService";
+import dayjs from 'dayjs';
+import PitchType from '@/types/PitchType';
+
+const store = useStore();
+const router = useRouter();
+
+const user = computed(() => store.state.auth.user);
+const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes);
+
+const items = reactive<Bullpen[]>([]);
+const page = ref(0);
+
+const startBullpenSession = () => {
+  router.push({ path: "/bullpen" });
+};
+
+const generateItems = () => {
+  BullpenSessionService
+      .fetchAllByUser(user.value.id, page.value, 10)
+      .then((bullpens) => {
+        ++page.value;
+        bullpens.data.forEach((bullpen: Bullpen) => {
+          items.push(bullpen);
+        })
+      }, error => {
+        console.log(error);
+      });
+};
+
+const formatDate = (date: Date) => {
+  return dayjs(date).format('YYYY.MM.DD HH:mm');
+}
+
+const determinePitchTypeName = (id: number): string => {
+  const pitchType = pitchTypes.value.find((pitchType: PitchType) => pitchType.id === id);
+
+  return pitchType?.name ?? 'Unknown';
+}
+
+const ionInfinite = (event: InfiniteScrollCustomEvent) => {
+  generateItems();
+  setTimeout(() => event.target.complete(), 500);
+};
+
+generateItems();
+
+</script>
+
+<template>
+  <ion-list>
+    <ion-item v-for="(bullpen, index) in items" :key="index" lines="none" class="custom-item" :button="true" detail="false">
+      <!-- Top-left icon -->
+      <ion-icon :icon="baseballOutline" slot="start" class="item-icon"></ion-icon>
+
+      <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="right-label">{{ (0.57 * 100).toFixed(0) }}%</span>
+          </div>
+          <ion-progress-bar :value="0.57"></ion-progress-bar>
+        </div>
+
+        <!-- Second Progress Bar -->
+        <div class="progress-section">
+          <div class="top-row">
+            <span class="left-label">Task 2</span>
+            <span class="right-label">{{ (0.33 * 100).toFixed(0) }}%</span>
+          </div>
+          <ion-progress-bar :value="0.33" color="secondary"></ion-progress-bar>
+        </div>
+      </ion-label>
+    </ion-item>
+
+<!--    <ion-item v-for="(bullpen, index) in items" :key="index">-->
+<!--      <ion-icon aria-hidden="true" :icon="baseball" slot="start"></ion-icon>-->
+<!--      <ion-label>Bullpen from ({{formatDate(bullpen.startedAt)}})</ion-label>-->
+<!--      <ion-list v-for="(pitch, index) in bullpen.pitches" :key="index">-->
+<!--        <ion-item>-->
+<!--          <ion-icon slot="start" :icon="baseballOutline" class="icon-login"></ion-icon>-->
+<!--          <ion-label>{{determinePitchTypeName(pitch.pitchTypeId)}}</ion-label>-->
+<!--          <ion-badge>{{pitch.aimedArea}}</ion-badge>-->
+<!--          <ion-badge>{{pitch.hitArea}}</ion-badge>-->
+<!--        </ion-item>-->
+<!--      </ion-list>-->
+<!--    </ion-item>-->
+  </ion-list>
+  <ion-infinite-scroll @ionInfinite="ionInfinite">
+    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+</template>
+
+<style scoped>
+.custom-item {
+  align-items: flex-start !important; /* important override */
+  --padding-start: 16px;
+  --inner-padding-end: 16px;
+  --min-height: 100px;
+}
+
+.item-icon {
+  font-size: 28px;
+  color: var(--ion-color-danger);
+  margin-right: 12px;
+  margin-top: 18px;
+}
+
+.item-labels {
+  width: 100%;
+}
+
+.progress-section {
+  margin-bottom: 12px;
+}
+
+.top-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.left-label {
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.right-label {
+  font-weight: normal;
+  font-size: 14px;
+}
+</style>
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@ -1,44 +1,32 @@
 <script setup lang="ts">
-import {computed, ref, reactive} from 'vue';
+import {computed} from 'vue';
 import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
-  IonAvatar,
  IonButtons,
  IonIcon,
  IonMenuButton,
  IonFab,
  IonFabButton,
-  IonInfiniteScroll,
-  IonInfiniteScrollContent,
-  InfiniteScrollCustomEvent,
-  IonList,
-  IonItem,
-  IonLabel, IonBadge,
 } from '@ionic/vue';
 import {
-  baseball,
  add,
-  baseballOutline
 } from 'ionicons/icons';
 import {useStore} from "vuex";
 import {useRouter} from "vue-router";
 import BullpenSessionService from "@/services/BullpenSessionService";
 import TokenService from "@/services/TokenService";
-import dayjs from "dayjs";
-import Bullpen from "@/types/Bullpen";
-import PitchType from "@/types/PitchType";

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

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

-const isAuthenticated = computed(() => store.state.auth.isAuthenticated);
+import PlayerContent from "@/components/PlayerComponent.vue"
+import CoachContent from "@/components/CoachComponent.vue";

 if (user.value === undefined || user.value === null || user.value === '') {
  router.push({ path: '/login' });
@ -66,43 +54,12 @@ const addPlayer = () => {
  router.push({ path: '/player/create' });
 }

-const items = reactive<Bullpen[]>([]);
-const page = ref(0);

-const generateItems = () => {
-  BullpenSessionService
-      .fetchAllByUser(user.value.id, page.value, 10)
-      .then((bullpens) => {
-        ++page.value;
-        bullpens.data.forEach((bullpen: Bullpen) => {
-          items.push(bullpen);
-        })
-      }, error => {
-        console.log(error);
-      });
-};
-
-const formatDate = (date: Date) => {
-  return dayjs(date).format('YYYY.MM.DD HH:mm');
-}
-
-const determinePitchTypeName = (id: number): string => {
-  const pitchType = pitchTypes.value.find((pitchType: PitchType) => pitchType.id === id);
-
-  return pitchType?.name ?? 'Unknown';
-}
-
-const ionInfinite = (event: InfiniteScrollCustomEvent) => {
-  generateItems();
-  setTimeout(() => event.target.complete(), 500);
-};
-
-generateItems();

 </script>

 <template>
-  <ion-page id="user-menu">
+  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
@ -115,23 +72,8 @@ generateItems();
    </ion-header>

    <ion-content>
-      <ion-list>
-        <ion-item v-for="(bullpen, index) in items" :key="index">
-          <ion-icon aria-hidden="true" :icon="baseball" slot="start"></ion-icon>
-          <ion-label>Bullpen from ({{formatDate(bullpen.startedAt)}})</ion-label>
-          <ion-list v-for="(pitch, index) in bullpen.pitches" :key="index">
-            <ion-item>
-              <ion-icon slot="start" :icon="baseballOutline" class="icon-login"></ion-icon>
-              <ion-label>{{determinePitchTypeName(pitch.pitchTypeId)}}</ion-label>
-              <ion-badge>{{pitch.aimedArea}}</ion-badge>
-              <ion-badge>{{pitch.hitArea}}</ion-badge>
-            </ion-item>
-          </ion-list>
-        </ion-item>
-      </ion-list>
-      <ion-infinite-scroll @ionInfinite="ionInfinite">
-        <ion-infinite-scroll-content></ion-infinite-scroll-content>
-      </ion-infinite-scroll>
+      <PlayerContent v-if="TokenService.isPlayer()" />
+      <CoachContent v-else-if="TokenService.isCoach()" />
 <!--      <div class="user-container">-->
 <!--        <ion-avatar class="user-avatar">-->
 <!--          <template v-if="userImage">-->
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@ -68,7 +68,7 @@ const submit = handleSubmit((values, { resetForm }) => {
    return store.dispatch('pitchTypes/fetch');
  }).then(() => {
    resetForm();
-    router.push({path: '/home'});
+    return router.push({path: '/home'});
  }).catch(error => {
    loading.value = false;
    console.log(error);