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">
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 { useStore } from 'vuex'
import { AppStore } from '@/store';
import { onMounted, onBeforeUnmount, ref } from "vue";
import {onMounted, onBeforeUnmount, ref, computed} from "vue";
import EventBus from "./common/EventBus";
import backendService from '@/services/BackendService'
import {
chevronBack,
personCircleOutline,
logOutOutline
} from 'ionicons/icons';
const router = useRouter();
const store = useStore<AppStore>();
@ -16,6 +36,8 @@ const logout = () => {
}
const isOnline = ref(navigator.onLine);
const isAuthenticated = computed(() => store.state.auth.isAuthenticated);
const user = computed(() => store.state.auth.user);
onMounted(() => {
EventBus.on("logout", logout);
@ -25,7 +47,7 @@ onMounted(() => {
window.addEventListener("online", () => isOnline.value = true);
window.addEventListener("offline", () => isOnline.value = false);
if (isOnline.value) {
if (isOnline.value && !isAuthenticated.value) {
router.push({path: '/login'});
} else {
// checkStoredUserData();
@ -35,10 +57,96 @@ onMounted(() => {
onBeforeUnmount(() => {
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>
<template>
<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-app>
</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 { Module } from 'vuex';
@ -11,9 +11,18 @@ export interface PitchTypeState {
const pitchTypes: Module<PitchTypeState, RootState> = {
namespaced: true,
state: {pitchTypes: []},
actions: {
fetch({commit}: any) {
PitchTypeService.fetchAll().then((pitchTypes: PitchType[]) => {
commit('initialize', pitchTypes);
}, (error) => {
console.log(error);
});
}
},
mutations: {
initialize(state, pitchTypeList: PitchType[]) {
pitchTypeService.updateLocalPitchTypes(pitchTypeList);
// pitchTypeService.updateLocalPitchTypes(pitchTypeList);
state.pitchTypes = pitchTypeList;
}
}

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

@ -25,7 +25,7 @@ import {
import PitchType from "@/types/PitchType";
import {useStore} from 'vuex';
import {useRouter} from 'vue-router';
import {computed} from "vue";
import {computed, onMounted} from "vue";
import dayjs from 'dayjs';
const router = useRouter();
@ -36,10 +36,15 @@ const pitcher = computed(() => store.state.auth.user);
const bullpens = computed(() => store.state.bullpen.bullpens);
const pitchTypes = computed(() => store.state.pitchTypes.pitchTypes);
onMounted(() => {
store.dispatch('pitchTypes/fetch');
});
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);

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

@ -1,13 +1,25 @@
<script setup lang="ts">
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 {
playOutline,
statsChartOutline,
personOutline,
logOutOutline,
personAddOutline,
ellipsisHorizontal, ellipsisVertical
add,
personAddOutline
} from 'ionicons/icons';
import {useStore} from "vuex";
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 = () => {
router.push({ path: '/player/create' });
}
@ -63,62 +63,50 @@ const addPlayer = () => {
</script>
<template>
<ion-page>
<ion-page id="user-menu">
<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-buttons slot="primary">-->
<!-- <ion-button id="user-menu-trigger">-->
<!-- <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>-->
<!-- </ion-button>-->
<!-- <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-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Bullpens</ion-title>
<!-- <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="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 v-if="TokenService.isPlayer()" @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>
<!-- <div class="button-grid">-->
<!-- <ion-button @click="startBullpen" class="grid-button">-->
<!-- <ion-icon :icon="playOutline" slot="start" />-->
<!-- Start Bullpen Session-->
<!-- </ion-button>-->
<!-- <ion-button v-if="TokenService.isPlayer()" @click="showStats" class="grid-button">-->
<!-- <ion-icon :icon="statsChartOutline" slot="start" />-->
<!-- Show Bullpen Stats-->
<!-- </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-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>
@ -137,8 +125,6 @@ const addPlayer = () => {
.user-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid #ccc;
overflow: hidden;
display: flex;
justify-content: center;

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

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

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

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