From 1d96c9c54b067abb87f5a5d08e1b7e2b242fc697 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sascha=20K=C3=BChl?= <s.kuehl@tms-bonn.de>
Date: Tue, 3 Jun 2025 16:03:49 +0200
Subject: [PATCH] design refactoring progress

---
 app/src/App.vue                   | 114 +++++++++++++++++++++++++++-
 app/src/store/pitchType.ts        |  13 +++-
 app/src/views/BullpenListView.vue |   9 ++-
 app/src/views/HomeView.vue        | 120 +++++++++++++-----------------
 app/src/views/LoginView.vue       |  25 ++-----
 app/src/views/ProfileView.vue     |  25 +++----
 6 files changed, 198 insertions(+), 108 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 4efcc13..d55f1c9 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -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>
diff --git a/app/src/store/pitchType.ts b/app/src/store/pitchType.ts
index be9913c..659b2e8 100644
--- a/app/src/store/pitchType.ts
+++ b/app/src/store/pitchType.ts
@@ -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;
         }
     }
diff --git a/app/src/views/BullpenListView.vue b/app/src/views/BullpenListView.vue
index 079ea74..d89ec26 100644
--- a/app/src/views/BullpenListView.vue
+++ b/app/src/views/BullpenListView.vue
@@ -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);
 
@@ -87,4 +92,4 @@ const gotoHome = () => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index f116b78..880970e 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -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;
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 99f73ff..09ac706 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -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'});
 // }
diff --git a/app/src/views/ProfileView.vue b/app/src/views/ProfileView.vue
index 5449941..d0c4572 100644
--- a/app/src/views/ProfileView.vue
+++ b/app/src/views/ProfileView.vue
@@ -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>
 
@@ -118,4 +113,4 @@ const gotoHome = () => {
   font-weight: bold;
   color: #333;
 }
-</style>
\ No newline at end of file
+</style>