From 8d829975a6be803b2303c6d0b95edff9c2c3a33e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20K=C3=BChl?= Date: Tue, 27 May 2025 16:24:44 +0200 Subject: [PATCH] progress on player view --- app/index.html | 2 +- app/src/router/index.ts | 4 +- app/src/store/player.ts | 7 +- app/src/views/BullpenView.vue | 4 +- app/src/views/HomeView.vue | 17 +- app/src/views/LoginView.vue | 13 +- app/src/views/PlayerView.vue | 297 ++++++++++++++++++++++++++++++++++ 7 files changed, 326 insertions(+), 18 deletions(-) create mode 100644 app/src/views/PlayerView.vue diff --git a/app/index.html b/app/index.html index ef63ddb..65824d4 100644 --- a/app/index.html +++ b/app/index.html @@ -2,7 +2,7 @@ - Ionic App + Bullpen App diff --git a/app/src/router/index.ts b/app/src/router/index.ts index a98b5f2..6232f89 100644 --- a/app/src/router/index.ts +++ b/app/src/router/index.ts @@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from '@ionic/vue-router'; import { useStore } from 'vuex' import { RouteRecordRaw } from 'vue-router'; import PlayerList from '../views/PlayerList.vue' +import PlayerView from '../views/PlayerView.vue' import LoginView from '../views/LoginView.vue' import HomeView from '../views/HomeView.vue' import BullpenView from "@/views/BullpenView.vue"; @@ -17,7 +18,8 @@ const routes: Array = [ { path: '/setup', component: SetupView }, { path: '/home', component: HomeView }, { path: '/profile', component: ProfileView }, - { path: '/player', component: PlayerList }, + { path: '/players', component: PlayerList }, + { path: '/player', component: PlayerView }, { path: '/bullpen', component: BullpenView }, { path: '/stats', component: BullpenListView }, { path: '/summary', component: BullpenSummaryView } diff --git a/app/src/store/player.ts b/app/src/store/player.ts index 57d6efc..a2a4d9f 100644 --- a/app/src/store/player.ts +++ b/app/src/store/player.ts @@ -15,12 +15,15 @@ const pitchTypes: Module = { namespaced: true, state: {player: null}, actions: { - determinePlayer({commit}: PlayerActionContext, user: User) { + selectPlayer({commit}: PlayerActionContext, user: User) { if (user.roles.includes('ROLE_PLAYER')) { - playerService.fetchByUserId(user.id).then(player => { + return playerService.fetchByUserId(user.id).then(player => { commit('select', player); + + return Promise.resolve(player); }); } + return null; } }, mutations: { diff --git a/app/src/views/BullpenView.vue b/app/src/views/BullpenView.vue index 8b8ef42..e65af34 100644 --- a/app/src/views/BullpenView.vue +++ b/app/src/views/BullpenView.vue @@ -27,7 +27,7 @@ const store = useStore(); const pitch = ref(BullpenSessionService.createPitch()); const currentStep = ref(BullpenStep.Prepare); -const pitcher = computed(() => store.state.auth.user); +const player = computed(() => store.state.player.player); const isAuthenticated = computed(() => store.state.auth.isAuthenticated); const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes); const bullpen = computed(() => store.state.bullpen); @@ -82,7 +82,7 @@ const pitchAreaCssClasses = (area: number, name: string) => { - Pitching {{ pitcher.firstName }} {{ pitcher.lastName }} + Pitching {{ player.user.firstName }} {{ player.user.lastName }} Pitching diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue index 60e3668..8ecbb07 100644 --- a/app/src/views/HomeView.vue +++ b/app/src/views/HomeView.vue @@ -13,7 +13,6 @@ const store = useStore(); const userImage = ref(null); const user = computed(() => store.state.auth.user); -const player = computed(() => store.state.player.player); const isAuthenticated = computed(() => store.state.auth.isAuthenticated); if (user.value === undefined || user.value === null || user.value === '') { @@ -21,11 +20,13 @@ if (user.value === undefined || user.value === null || user.value === '') { } const startBullpen = () => { - if (player.value === undefined || player.value === null || player.value === '') { - router.push({ path: '/player' }); - } else { - store.dispatch("bullpen/start", user.value); - router.push({ path: '/bullpen' }); + 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' }); } }; @@ -48,7 +49,9 @@ const logout = () => { }); } -const addPlayer = () => {} +const addPlayer = () => { + router.push({ path: '/player' }); +} diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue index e1e4b61..892e1d3 100644 --- a/app/src/views/LoginView.vue +++ b/app/src/views/LoginView.vue @@ -41,6 +41,7 @@ const [password, passwordAttrs] = defineField('password'); const router = useRouter(); const store = useStore(); +const loginError = ref(''); const loggedIn = computed(() => store.state.auth.isAuthenticated); @@ -50,18 +51,19 @@ onMounted(() => { } }); -const submit = handleSubmit((values, { /*resetForm*/ }) => { +const submit = handleSubmit((values, { resetForm }) => { store.dispatch('auth/login', { email: values.email, password: values.password, }).then((user: User) => { return store.dispatch('player/determinePlayer', user); - }, error => { + }).then(() => { + resetForm(); + onLogin(); + }).catch(error => { loading.value = false; console.log(error); - }).then(() => { - // resetForm(); - onLogin(); + loginError.value = 'Invalid login data. Please try again.'; }); }, ({errors}) => { console.log(errors); @@ -135,6 +137,7 @@ const changeServer = () => { Login +

{{ loginError }}

diff --git a/app/src/views/PlayerView.vue b/app/src/views/PlayerView.vue new file mode 100644 index 0000000..ff478f1 --- /dev/null +++ b/app/src/views/PlayerView.vue @@ -0,0 +1,297 @@ + + + + +