Fix lonely arrow problem and add grouping of events

src/components/common/vatsim/CommonEventCard.vue

@@ -8,11 +8,6 @@
             <div class="event-card_start">
                 {{ formattedStart }}Z - {{ formattedEnd }}Z
             </div>
-            <div class="event-card_start">
-                <template v-if="props.event.organisers?.length">
-                    {{ props.event.organisers[0]?.region }} -> {{ props.event.organisers[0]?.division }}
-                </template>
-            </div>
             <div class="event-card_name">
                 {{ props.event.name }} <span
                     v-if="active"
@@ -66,6 +61,18 @@
                 </div>
             </div>
 
+            <div
+                v-if="organisers"
+                class="detail-item"
+            >
+                <div class="detail-item_header">
+                    Organisers:
+                </div>
+                <div class="detail-item_content">
+                    {{ organisers }}
+                </div>
+            </div>
+
             <p>More details:                 <a
                 :href="props.event.link"
                 target="_blank"
@@ -87,7 +94,7 @@ const props = defineProps({
 
 const details = ref(false);
 
-const formatter = new Intl.DateTimeFormat('en-GB', {
+const formatter = new Intl.DateTimeFormat(undefined, {
     timeZone: 'UTC',
     month: 'numeric',
     day: 'numeric',
@@ -98,14 +105,26 @@ const formatter = new Intl.DateTimeFormat('en-GB', {
 const formattedStart = computed(() => formatter.format(new Date(props.event.start_time)));
 const formattedEnd = computed(() => formatter.format(new Date(props.event.end_time)));
 const active = computed(() => new Date(props.event.start_time) < new Date());
+const organisers = computed(() => {
+    if (props.event.organisers?.length) {
+        const o = props.event.organisers[0];
+        if (o.organised_by_vatsim) {
+            return 'VATSIM';
+        }
+        else {
+            return `${ o.region } / ${ o.division }`;
+        }
+    }
+    return null;
+});
 </script>
 
 <style scoped lang="scss">
 .event-card {
     cursor: pointer;
 
     display: grid;
-    grid-template-columns: 200px 120px 600px auto 50px;
+    grid-template-columns: 200px 600px auto 50px;
     gap: 8px;
     align-items: center;
     justify-content: flex-start;

src/pages/events.vue

@@ -2,12 +2,19 @@
     <common-page-block>
         <template #title>VATSIM Events (Alpha)</template>
 
-        <common-event-card
-            v-for="event in data?.events"
-            :key="event.id"
-            class="common-event"
-            :event
-        />
+        <template
+            v-for="(events, day) in groupedEventData"
+            :key="day"
+        >
+            <h2 class="common-event__title">{{ new Date(day).toLocaleDateString() }}</h2>
+
+            <common-event-card
+                v-for="event in events"
+                :key="event.id"
+                class="common-event"
+                :event
+            />
+        </template>
     </common-page-block>
 </template>
 
@@ -19,10 +26,23 @@ import type { VatsimEventData } from '~/server/api/data/vatsim/events';
 const { data } = await useAsyncData('events', async () => {
     return $fetch<VatsimEventData>('/api/data/vatsim/events');
 });
+
+const groupedEventData = computed(() => {
+    return Object.groupBy(data.value?.events || [], event => event.start_time.substring(0, 10));
+});
 </script>
 
 <style scoped lang="scss">
 .common-event {
     margin-bottom: 5px;
+
+    &__title {
+        margin-bottom: 16px;
+        padding-top: 8px;
+
+        font-size: 20px;
+        font-weight: 500;
+        color: $primary500;
+    }
 }
 </style>

src/server/plugins/vatsim.ts

@@ -45,7 +45,9 @@ export default defineNitroPlugin(app => {
             const myData = await $fetch<{
                 data: VatsimEvent[];
             }>('https://my.vatsim.net/api/v2/events/latest');
-            radarStorage.vatsimStatic.events = myData.data;
+            const inFourWeeks = new Date();
+            inFourWeeks.setDate(inFourWeeks.getDate() + 28);
+            radarStorage.vatsimStatic.events = myData.data.filter(e => new Date(e.start_time) < inFourWeeks);
         },
     });
 

src/types/data/vatsim.ts

@@ -201,7 +201,7 @@ export interface VatsimEvent {
         region: string | null;
         division: string | null;
         subdivision: string | null;
-        organized_by_vatsim: boolean;
+        organised_by_vatsim: boolean;
     }[];
     airports: {
         icao: string;