sascha
/
bullpen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design refactoring progress

This commit is contained in:
Sascha Kühl 2025-06-03 16:03:49 +02:00
parent 257fe24756
commit 1d96c9c54b
6 changed files with 198 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
app/src/App.vue
View File

@ -1,11 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue'; import {
IonApp,
IonMenu,
IonHeader,
IonToolbar,
IonContent,
IonIcon,
IonList,
IonTitle,
IonButton,
IonButtons,
IonLabel,
IonItem,
IonRouterOutlet,
IonAvatar
} from '@ionic/vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { AppStore } from '@/store'; import { AppStore } from '@/store';
import { onMounted, onBeforeUnmount, ref } from "vue"; import {onMounted, onBeforeUnmount, ref, computed} from "vue";
import EventBus from "./common/EventBus"; import EventBus from "./common/EventBus";
import backendService from '@/services/BackendService' import backendService from '@/services/BackendService'
import {
chevronBack,
personCircleOutline,
logOutOutline
} from 'ionicons/icons';
const router = useRouter(); const router = useRouter();
const store = useStore<AppStore>(); const store = useStore<AppStore>();
@ -16,6 +36,8 @@ const logout = () => {
} }
const isOnline = ref(navigator.onLine); const isOnline = ref(navigator.onLine);
const isAuthenticated = computed(() => store.state.auth.isAuthenticated);
const user = computed(() => store.state.auth.user);
onMounted(() => { onMounted(() => {
EventBus.on("logout", logout); EventBus.on("logout", logout);
@ -25,7 +47,7 @@ onMounted(() => {
window.addEventListener("online", () => isOnline.value = true); window.addEventListener("online", () => isOnline.value = true);
window.addEventListener("offline", () => isOnline.value = false); window.addEventListener("offline", () => isOnline.value = false);
if (isOnline.value) { if (isOnline.value && !isAuthenticated.value) {
router.push({path: '/login'}); router.push({path: '/login'});
} else { } else {
// checkStoredUserData(); // checkStoredUserData();
@ -35,10 +57,96 @@ onMounted(() => {
onBeforeUnmount(() => { onBeforeUnmount(() => {
EventBus.remove("logout", logout); EventBus.remove("logout", logout);
}) })
const closeMenu = async () => {
try {
const elem = document.querySelector('ion-menu');
if (elem && await elem.isOpen()) {
await elem.close();
}
} catch (e) {
console.log(e);
}
}
const showProfile = () => {
router.push({path: '/profile/' + user.value.id});
closeMenu();
}
const logoutUser = () => {
store.dispatch('auth/logout').then(() => {
router.push({ path: '/' });
}, error => {
console.log(error);
});
closeMenu();
}
</script> </script>
<template> <template>
<ion-app> <ion-app>
<ion-menu content-id="user-menu">
<ion-header>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button @click="closeMenu">
<ion-icon slot="icon-only" :icon="chevronBack"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Menu Content</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="user-container">
<ion-avatar class="user-avatar">
<img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
</ion-avatar>
<div v-if="isAuthenticated" class="user-name">{{ user.firstName }} {{ user.lastName }}</div>
</div>
<ion-list lines="full">
<ion-item button @click="showProfile">
<ion-icon slot="start" :icon="personCircleOutline"></ion-icon>
<ion-label>Profile</ion-label>
</ion-item>
</ion-list>
<ion-list lines="full">
<ion-item button @click="logoutUser">
<ion-icon slot="start" :icon="logOutOutline"></ion-icon>
<ion-label>Logout</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet /> <ion-router-outlet />
</ion-app> </ion-app>
</template> </template>
<style scoped>
.user-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
padding: 5px;
}
.user-avatar {
width: 120px;
height: 120px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.user-name {
margin-top: 10px;
font-size: 18px;
font-weight: bold;
color: #333;
}
</style>

13
app/src/store/pitchType.ts
View File

@ -1,4 +1,4 @@
import pitchTypeService from '@/services/PitchTypeService' import PitchTypeService from '@/services/PitchTypeService'
import PitchType from "@/types/PitchType"; import PitchType from "@/types/PitchType";
import { Module } from 'vuex'; import { Module } from 'vuex';
@ -11,9 +11,18 @@ export interface PitchTypeState {
const pitchTypes: Module<PitchTypeState, RootState> = { const pitchTypes: Module<PitchTypeState, RootState> = {
namespaced: true, namespaced: true,
state: {pitchTypes: []}, state: {pitchTypes: []},
actions: {
fetch({commit}: any) {
PitchTypeService.fetchAll().then((pitchTypes: PitchType[]) => {
commit('initialize', pitchTypes);
}, (error) => {
console.log(error);
});
}
},
mutations: { mutations: {
initialize(state, pitchTypeList: PitchType[]) { initialize(state, pitchTypeList: PitchType[]) {
pitchTypeService.updateLocalPitchTypes(pitchTypeList); // pitchTypeService.updateLocalPitchTypes(pitchTypeList);
state.pitchTypes = pitchTypeList; state.pitchTypes = pitchTypeList;
} }
} }

9
app/src/views/BullpenListView.vue
View File

@ -25,7 +25,7 @@ import {
import PitchType from "@/types/PitchType"; import PitchType from "@/types/PitchType";
import {useStore} from 'vuex'; import {useStore} from 'vuex';
import {useRouter} from 'vue-router'; import {useRouter} from 'vue-router';
import {computed} from "vue"; import {computed, onMounted} from "vue";
import dayjs from 'dayjs'; import dayjs from 'dayjs';
const router = useRouter(); const router = useRouter();
@ -36,10 +36,15 @@ const pitcher = computed(() => store.state.auth.user);
const bullpens = computed(() => store.state.bullpen.bullpens); const bullpens = computed(() => store.state.bullpen.bullpens);
const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes); const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes);
onMounted(() => {
store.dispatch('pitchTypes/fetch');
});
const formatDate = (date: Date) => { const formatDate = (date: Date) => {
return dayjs(date).format('YYYY.MM.DD HH:mm'); return dayjs(date).format('YYYY.MM.DD HH:mm');
} }
const determinePitchTypeName = (id: number): string => { const determinePitchTypeName = (id: number): string => {
const pitchType = pitchTypes.value.find((pitchType: PitchType) => pitchType.id === id); const pitchType = pitchTypes.value.find((pitchType: PitchType) => pitchType.id === id);
@ -87,4 +92,4 @@ const gotoHome = () => {
<style scoped> <style scoped>
</style> </style>

120
app/src/views/HomeView.vue
View File

@ -1,13 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, ref} from 'vue'; import {computed, ref} from 'vue';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonIcon } from '@ionic/vue'; import {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonAvatar,
IonButton,
IonButtons,
IonIcon,
IonMenuButton,
IonFab,
IonFabButton
} from '@ionic/vue';
import { import {
playOutline, playOutline,
statsChartOutline, statsChartOutline,
personOutline, personOutline,
logOutOutline, add,
personAddOutline, personAddOutline
ellipsisHorizontal, ellipsisVertical
} from 'ionicons/icons'; } from 'ionicons/icons';
import {useStore} from "vuex"; import {useStore} from "vuex";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
@ -44,18 +56,6 @@ const showStats = () => {
}) })
}; };
const showProfile = () => {
router.push({ path: `/profile/${user.value.id}`});
};
const logout = () => {
store.dispatch('auth/logout').then(() => {
router.push({ path: '/' });
}, error => {
console.log(error);
});
}
const addPlayer = () => { const addPlayer = () => {
router.push({ path: '/player/create' }); router.push({ path: '/player/create' });
} }
@ -63,62 +63,50 @@ const addPlayer = () => {
</script> </script>
<template> <template>
<ion-page> <ion-page id="user-menu">
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title v-if="isAuthenticated">Home of {{ user.firstName }} {{ user.lastName }}</ion-title> <ion-buttons slot="start">
<ion-title v-else>Home</ion-title> <ion-menu-button></ion-menu-button>
<!-- <ion-buttons slot="primary">--> </ion-buttons>
<!-- <ion-button id="user-menu-trigger">--> <ion-title>Bullpens</ion-title>
<!-- <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>--> <!-- <ion-title v-if="isAuthenticated">Home of {{ user.firstName }} {{ user.lastName }}</ion-title>-->
<!-- </ion-button>--> <!-- <ion-title v-else>Home</ion-title>-->
<!-- <ion-popover trigger="user-menu-trigger" trigger-action="click">-->
<!-- <ion-content class="ion-padding">-->
<!-- <ion-list>-->
<!-- <ion-item button @click="showProfile">Profile</ion-item>-->
<!-- <ion-item button @click="logout">Logout</ion-item>-->
<!-- </ion-list>-->
<!-- </ion-content>-->
<!-- </ion-popover>-->
<!-- </ion-buttons>-->
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="ion-padding"> <ion-content class="ion-padding">
<div class="user-container"> <!-- <div class="user-container">-->
<ion-avatar class="user-avatar"> <!-- <ion-avatar class="user-avatar">-->
<template v-if="userImage"> <!-- <template v-if="userImage">-->
<img :src="userImage" alt="User Profile" class="avatar-frame" /> <!-- <img :src="userImage" alt="User Profile" class="avatar-frame" />-->
</template> <!-- </template>-->
<template v-else> <!-- <template v-else>-->
<ion-icon :icon="personOutline" class="avatar-placeholder" /> <!-- <ion-icon :icon="personOutline" class="avatar-placeholder" />-->
</template> <!-- </template>-->
</ion-avatar> <!-- </ion-avatar>-->
<div v-if="isAuthenticated" class="user-name">{{ user.firstName }} {{ user.lastName }}</div> <!-- <div v-if="isAuthenticated" class="user-name">{{ user.firstName }} {{ user.lastName }}</div>-->
</div> <!-- </div>-->
<div class="button-grid"> <!-- <div class="button-grid">-->
<ion-button @click="startBullpen" class="grid-button"> <!-- <ion-button @click="startBullpen" class="grid-button">-->
<ion-icon :icon="playOutline" slot="start" /> <!-- <ion-icon :icon="playOutline" slot="start" />-->
Start Bullpen Session <!-- Start Bullpen Session-->
</ion-button> <!-- </ion-button>-->
<ion-button v-if="TokenService.isPlayer()" @click="showStats" class="grid-button"> <!-- <ion-button v-if="TokenService.isPlayer()" @click="showStats" class="grid-button">-->
<ion-icon :icon="statsChartOutline" slot="start" /> <!-- <ion-icon :icon="statsChartOutline" slot="start" />-->
Show Bullpen Stats <!-- Show Bullpen Stats-->
</ion-button> <!-- </ion-button>-->
<ion-button @click="showProfile" class="grid-button"> <!-- <ion-button v-if="TokenService.isCoach()" @click="addPlayer" class="grid-button">-->
<ion-icon :icon="personOutline" slot="start" /> <!-- <ion-icon :icon="personAddOutline" slot="start" />-->
Show Profile <!-- Add Player-->
</ion-button> <!-- </ion-button>-->
<ion-button @click="logout" class="grid-button"> <!-- </div>-->
<ion-icon :icon="logOutOutline" slot="start" /> <ion-fab slot="fixed" vertical="bottom" horizontal="end">
Logout <ion-fab-button>
</ion-button> <ion-icon :icon="add"></ion-icon>
<ion-button v-if="TokenService.isCoach()" @click="addPlayer" class="grid-button"> </ion-fab-button>
<ion-icon :icon="personAddOutline" slot="start" /> </ion-fab>
Add Player
</ion-button>
</div>
</ion-content> </ion-content>
</ion-page> </ion-page>
</template> </template>
@ -137,8 +125,6 @@ const addPlayer = () => {
.user-avatar { .user-avatar {
width: 120px; width: 120px;
height: 120px; height: 120px;
border-radius: 50%;
border: 4px solid #ccc;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;

25
app/src/views/LoginView.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, onMounted } from "vue"; import { onMounted, ref, computed } from "vue";
import { import {
IonPage, IonPage,
IonButton, IonButton,
@ -16,8 +16,6 @@ import {Field, useForm} from 'vee-validate';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useStore } from 'vuex' import { useStore } from 'vuex'
import * as yup from 'yup'; import * as yup from 'yup';
import PitchTypeService from "@/services/PitchTypeService";
import PitchType from "@/types/PitchType";
import User from "@/types/User"; import User from "@/types/User";
const loading = ref(false); const loading = ref(false);
@ -44,11 +42,11 @@ const router = useRouter();
const store = useStore(); const store = useStore();
const loginError = ref(''); const loginError = ref('');
const loggedIn = computed(() => store.state.auth.isAuthenticated); const isAuthenticated = computed(() => store.state.auth.isAuthenticated);
onMounted(() => { onMounted(() => {
if (loggedIn.value) { if (isAuthenticated.value) {
onLogin(); router.push({path: '/home'});
} }
}); });
@ -61,7 +59,8 @@ const submit = handleSubmit((values, { resetForm }) => {
return store.dispatch('player/selectPlayer', user); return store.dispatch('player/selectPlayer', user);
}).then(() => { }).then(() => {
resetForm(); resetForm();
onLogin(); router.push({path: '/home'});
// onLogin();
}).catch(error => { }).catch(error => {
loading.value = false; loading.value = false;
console.log(error); console.log(error);
@ -72,18 +71,6 @@ const submit = handleSubmit((values, { resetForm }) => {
loading.value = false; loading.value = false;
}); });
const onLogin = () => {
console.log('check if pitch types are available.');
PitchTypeService.fetchAll().then((pitchTypes: PitchType[]) => {
store.commit('pitchTypes/initialize', pitchTypes);
router.push({path: '/home'});
}, (error) => {
console.log(error);
});
}
// const changeServer = () => { // const changeServer = () => {
// router.push({ path: '/setup'}); // router.push({ path: '/setup'});
// } // }

25
app/src/views/ProfileView.vue
View File

@ -9,18 +9,19 @@ import {
IonIcon, IonIcon,
IonPage, IonPage,
IonTitle, IonTitle,
IonToolbar IonToolbar,
IonButtons,
IonBackButton,
} from "@ionic/vue"; } from "@ionic/vue";
import {computed, onMounted, ref} from "vue"; import {computed, onMounted, ref} from "vue";
import {useStore} from "vuex"; import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router"; import {useRoute} from "vue-router";
import PlayerService from "@/services/PlayerService"; import PlayerService from "@/services/PlayerService";
// import dayjs from "dayjs"; // import dayjs from "dayjs";
const userImage = ref(null); const userImage = ref(null);
const router = useRouter();
const route = useRoute(); const route = useRoute();
const store = useStore(); const store = useStore();
@ -43,22 +44,20 @@ onMounted(() => {
}); });
}); });
const gotoHome = () => {
router.push({path: '/home'});
}
</script> </script>
<template> <template>
<ion-page> <ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title v-if="isAuthenticated">Home of {{ pitcher.firstName }} {{ pitcher.lastName }}</ion-title> <ion-buttons slot="start">
<ion-title v-else>Home</ion-title> <ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Profile</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="ion-padding"> <ion-content>
<div class="user-container"> <div class="user-container">
<ion-avatar class="user-avatar"> <ion-avatar class="user-avatar">
<template v-if="userImage"> <template v-if="userImage">
@ -71,10 +70,6 @@ const gotoHome = () => {
<div v-if="isAuthenticated" class="user-name">{{ pitcher.firstName }} {{ pitcher.lastName }}</div> <div v-if="isAuthenticated" class="user-name">{{ pitcher.firstName }} {{ pitcher.lastName }}</div>
</div> </div>
</ion-content> </ion-content>
<ion-footer>
<ion-button expand="full" color="success" @click="gotoHome">Home</ion-button>
</ion-footer>
</ion-page> </ion-page>
</template> </template>
@ -118,4 +113,4 @@ const gotoHome = () => {
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
</style> </style>