Merge pull request #19 from BigSpaceships/master

Removed /event route and fixed phone UI bugs

Author: jabbate19

src/frontend/src/App.vue

@@ -7,7 +7,7 @@ import PopupGroup from './components/PopupGroup.vue';
 <template>
   <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
     <div class="container">
-      <a class="navbar-brand abs" href="/">Rideboard</a>
+      <RouterLink class="navbar-brand abs" to="/">Rideboard</RouterLink>
       <button
         class="navbar-toggler navbar-toggler-right"
         type="button"

src/frontend/src/components/ShareEventButton.vue

@@ -14,9 +14,8 @@ export default defineComponent({
   methods: {
     copyLink() {
       const popupStore = usePopupStore();
-      const baseUrl = window.location.host;
 
-      const urlToCopy = baseUrl + '/event/' + this.eventId;
+      const urlToCopy = window.location.href;
 
       try {
         navigator.clipboard.writeText(urlToCopy);

src/frontend/src/router/index.ts

@@ -31,7 +31,7 @@ async function handleEventIdRedirects(
 
   const jsonData: Event = await response.json();
 
-  const isInPast = new Date(jsonData.startTime).getTime() < Date.now();
+  const isInPast = new Date(jsonData.endTime).getTime() < Date.now();
 
   const isGoingToPast = to.path.includes('history');
 
@@ -42,7 +42,7 @@ async function handleEventIdRedirects(
   if (isInPast) {
     return { path: `/history/${to.params.id}` };
   } else {
-    return { path: `${to.params.id}` };
+    return { path: `/${to.params.id}` };
   }
 }
 
@@ -89,11 +89,6 @@ const router = createRouter({
           props: (route) => ({ id: Number(route.params.id) })
         }
       ]
-    },
-    {
-      path: '/event/:id',
-      beforeEnter: handleEventIdRedirects,
-      component: NoEventDetails // This never gets used but has to be here for the beforeEnter to be called
     }
   ]
 });

src/frontend/src/stores/events.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
-import { type Car, type Event } from '@/models';
+import { PopupType, type Car, type Event } from '@/models';
+import { usePopupStore } from './popup';
 
 function sortByStartDate(a: Event, b: Event) {
   return new Date(a.startTime).getTime() - new Date(b.startTime).getTime();
@@ -8,7 +9,9 @@ function sortByStartDate(a: Event, b: Event) {
 export const useEventStore = defineStore('events', {
   state: () => ({
     events: [] as Event[],
-    id: null as number | null
+    id: null as number | null,
+    isLoaded: false,
+    isHistory: false
   }),
   getters: {
     selectedEvent(state) {
@@ -21,11 +24,40 @@ export const useEventStore = defineStore('events', {
     }
   },
   actions: {
+    async loadEvents(showPast: boolean) {
+      const popupStore = usePopupStore();
+      try {
+        const response = await fetch(
+          '/api/v1/event/?' +
+            new URLSearchParams({
+              past: showPast.toString()
+            }).toString()
+        );
+        if (!response.ok) {
+          popupStore.addPopup(PopupType.Danger, `Failed to Get Events (${response.status})`);
+          return;
+        }
+        const data = await response.json();
+        const eventStore = useEventStore();
+        eventStore.setEvents(data, showPast);
+        eventStore.sortEvents(showPast);
+
+        return true;
+      } catch (error) {
+        console.error(error);
+        popupStore.addPopup(PopupType.Danger, 'Failed to Get Events. An unknown error occured.');
+
+        return false;
+      }
+    },
     addEvent(event: Event) {
       this.events.push(event);
     },
-    setEvents(events: Event[]) {
+    setEvents(events: Event[], isHistory: boolean) {
       this.events = events;
+
+      this.isHistory = isHistory;
+      this.isLoaded = true;
     },
     setEventId(id: number) {
       this.id = id;

src/frontend/src/views/HomeView.vue

@@ -9,19 +9,19 @@ const eventStore = useEventStore();
 
 <template>
   <div class="container">
-    <Loading v-if="loading" />
+    <Loading v-if="loadingEvents" />
     <div v-else>
-      <button
+      <RouterLink
         v-if="screenStore.mobile"
         class="btn btn-primary mb-2"
         type="button"
-        @click="returnHome()"
+        :to="showPast ? '/history' : '/'"
       >
         All Events
-      </button>
+      </RouterLink>
       <div class="row">
         <!-- Left column: List of cards -->
-        <Transition @after-leave="showDetail = true" name="mobile">
+        <Transition @after-leave="showDetail = true" name="mobile" appear>
           <div v-if="!screenStore.mobile || showList" class="noOverflow col-md-4 pb-1">
             <EventCard
               v-for="(event, index) in eventStore.events"
@@ -33,7 +33,7 @@ const eventStore = useEventStore();
           </div>
         </Transition>
         <!-- Right column: Display selected card details -->
-        <Transition @after-leave="showList = true" name="mobile">
+        <Transition @after-leave="showList = true" name="mobile" appear>
           <div class="noOverflow col-md-8 pb-1" v-if="!screenStore.mobile || showDetail">
             <RouterView />
           </div>
@@ -44,49 +44,24 @@ const eventStore = useEventStore();
 </template>
 
 <script lang="ts">
-import { PopupType } from '@/models';
 import { defineComponent } from 'vue';
-import { usePopupStore } from '@/stores/popup';
 import { useScreenStore } from '@/stores/screen';
 
 export default defineComponent({
   props: {
-    showPast: Boolean,
-    id: Number
+    showPast: Boolean
   },
   data() {
     let screenStore = useScreenStore();
     return {
       showList: true,
       showDetail: false,
       screenStore,
-      loading: true
+      loadingEvents: false,
+      firstLoad: true
     };
   },
   methods: {
-    async fetchCardData() {
-      const popupStore = usePopupStore();
-      try {
-        const response = await fetch(
-          '/api/v1/event/?' +
-            new URLSearchParams({
-              past: this.showPast.toString()
-            }).toString()
-        );
-        if (!response.ok) {
-          popupStore.addPopup(PopupType.Danger, `Failed to Get Events (${response.status})`);
-          return;
-        }
-        const data = await response.json();
-        const eventStore = useEventStore();
-        eventStore.setEvents(data);
-        eventStore.sortEvents(this.showPast);
-        this.loading = false;
-      } catch (error) {
-        console.error(error);
-        popupStore.addPopup(PopupType.Danger, 'Failed to Get Events. An unknown error occured.');
-      }
-    },
     selectEvent() {
       if (this.screenStore.width < 768) {
         this.showList = false;
@@ -96,8 +71,29 @@ export default defineComponent({
       this.showDetail = false;
     }
   },
-  created() {
-    this.fetchCardData(); // Fetch card data when the component is created
+  mounted() {
+    if (this.$route.params.id != undefined && this.screenStore.width < 768) {
+      this.showList = false;
+
+      // this feels so cursed but i don't know how to make it work otherwise
+      // it work being when you first visit a page the transition doesn't run
+      // I thought this would help but it doesn't https://vuejs.org/guide/built-ins/transition#transition-on-appear
+      if (this.firstLoad) {
+        this.showDetail = true;
+      }
+    }
+
+    this.firstLoad = false;
+  },
+  async created() {
+    const eventStore = useEventStore();
+    if (!eventStore.isLoaded) {
+      this.loadingEvents = true;
+    }
+
+    if (await eventStore.loadEvents(this.showPast)) {
+      this.loadingEvents = false;
+    }
   },
   provide() {
     return {