0.4.5-rc.2

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [0.4.5-rc.2]
+
+- Users who left all tabs are no longer counted in users counter in map footer
+- Requests will no longer fire for unactive tabs
+- Added sort by select to NOTAMs list
+- ATC and Aircraft tabs in Airport overlay are now separated
+
 # [0.4.5-rc.1]
 
 - You can no longer close update popup without updating

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vatsim-radar",
-  "version": "0.4.5-rc.1",
+  "version": "0.4.5-rc.2",
   "private": true,
   "type": "module",
   "scripts": {

src/components/common/blocks/CommonCopyInfoBlock.vue

@@ -49,6 +49,7 @@
                 readonly
                 :value="text"
             />
+            <slot name="append"/>
         </div>
     </div>
 </template>
@@ -65,7 +66,7 @@ defineProps({
     },
 });
 
-defineSlots<{ default(): any; prepend(): any; actions(): any }>();
+defineSlots<{ default(): any; prepend(): any; append(): any; actions(): any }>();
 
 const copy = useCopyText();
 const expanded = ref(false);

src/components/common/popup/CommonInfoPopup.vue

@@ -169,7 +169,7 @@ const collapsedOnceSections = new Set<string>([]);
 const activeTab = defineModel('tab', { type: String });
 
 // eslint-disable-next-line vue/no-setup-props-reactivity-loss,vue/no-ref-object-reactivity-loss
-activeTab.value = activeTab.value || props.tabs ? Object.keys(props.tabs ?? {})[0] : '';
+activeTab.value = activeTab.value || props.tabs ? (Object.entries(props.tabs ?? {}).filter(([_, value]) => !value.disabled)[0]?.[0] || Object.keys(props.tabs ?? {})[0]) : '';
 
 const getSections = computed(() => {
     if (!props.tabs) return props.sections ?? [];

src/components/map/popups/MapPopupAirport.vue

@@ -22,8 +22,6 @@
             <map-popup-pin-icon :overlay="overlay"/>
         </template>
         <template #action-counts>
-
-
             <div
                 class="airport__counts"
                 :class="{ 'airport__counts--ground_departures': listGroundDepartures }"
@@ -295,12 +293,18 @@ const aircraftCount = computed(() => Object.values(vatAirport.value?.aircraft ??
 
 const tabs = computed<InfoPopupContent>(() => {
     const list: InfoPopupContent = {
+        aircraft: {
+            title: 'Aircraft',
+            disabled: !aircraftCount.value,
+            sections: [],
+        },
         atc: {
-            title: 'ATC & Aircraft',
+            title: 'ATC',
+            disabled: !atc.value.length,
             sections: [],
         },
         info: {
-            title: 'Info & Weather',
+            title: 'Info',
             sections: [],
         },
     };
@@ -359,7 +363,7 @@ const tabs = computed<InfoPopupContent>(() => {
     }
 
     if (aircraftCount.value) {
-        list.atc.sections.push({
+        list.aircraft.sections.push({
             title: 'Aircraft',
             collapsible: true,
             key: 'aircraft',
@@ -397,6 +401,7 @@ watch(dataStore.vatsim.updateTimestamp, async () => {
 
 onMounted(() => {
     const interval = setInterval(async () => {
+        if (!store.isTabVisible) return;
         props.overlay.data.airport = {
             ...props.overlay.data.airport,
             ...await $fetch<VatsimAirportData>(`/api/data/vatsim/airport/${ props.overlay.key }?requestedDataType=1`),

src/components/views/airport/AirportNotams.vue

@@ -3,17 +3,13 @@
         v-if="notams?.length"
         class="__info-sections notams"
     >
-        <div class="notams_info">
-            <div class="notams_info_image">
-                <img
-                    alt="FAA"
-                    src="~/assets/images/FAA-logo.svg"
-                >
-            </div>
-            <span>
-                Data provided by <strong>FAA</strong>
-            </span>
-        </div>
+        <common-select
+            :items="sortOptions"
+            :model-value="store.localSettings.filters?.notamsSortBy ?? null"
+            placeholder="Sort By"
+            width="100%"
+            @update:modelValue="setUserLocalSettings({ filters: { notamsSortBy: $event as any } })"
+        />
         <common-copy-info-block :text="notams.map(x => x.formattedText ?? x.text).join('\n\n')"/>
         <div
             v-for="(notam, index) in notams"
@@ -41,6 +37,17 @@
                 </template>
             </common-copy-info-block>
         </div>
+        <div class="notams_info">
+            <div class="notams_info_image">
+                <img
+                    alt="FAA"
+                    src="~/assets/images/FAA-logo.svg"
+                >
+            </div>
+            <span>
+                Data provided by <strong>FAA</strong>
+            </span>
+        </div>
     </div>
 </template>
 
@@ -49,9 +56,38 @@ import { injectAirport } from '~/composables/airport';
 import CommonCopyInfoBlock from '~/components/common/blocks/CommonCopyInfoBlock.vue';
 import CommonInfoBlock from '~/components/common/blocks/CommonInfoBlock.vue';
 import type { VatsimAirportDataNotam } from '~/server/api/data/vatsim/airport/[icao]/notams';
+import type { NotamsSortBy } from '~/types/map';
+import type { SelectItem } from '~/types/components/select';
+import CommonSelect from '~/components/common/basic/CommonSelect.vue';
+import { useStore } from '~/store';
 
 const data = injectAirport();
-const notams = computed(() => data.value.notams);
+const notams = computed(() => {
+    const list = data.value.notams ?? [];
+
+    const sortBy = store.localSettings.filters?.notamsSortBy ?? null;
+
+    if (sortBy) {
+        return list.slice(0).sort((a, b) => {
+            let aDate: number, bDate: number;
+
+            if (sortBy.startsWith('start')) {
+                aDate = a.effectiveFrom.startsWith('20') ? new Date(a.effectiveFrom).getTime() : Infinity;
+                bDate = b.effectiveFrom.startsWith('20') ? new Date(b.effectiveFrom).getTime() : Infinity;
+            }
+            else {
+                aDate = a.effectiveTo.startsWith('20') ? new Date(a.effectiveTo).getTime() : Infinity;
+                bDate = b.effectiveTo.startsWith('20') ? new Date(b.effectiveTo).getTime() : Infinity;
+            }
+
+            if (sortBy.endsWith('Asc')) return aDate - bDate;
+            else return bDate - aDate;
+        });
+    }
+
+    return list;
+});
+const store = useStore();
 
 const getNotamType = (type: VatsimAirportDataNotam['type']) => {
     switch (type) {
@@ -66,6 +102,25 @@ const getNotamType = (type: VatsimAirportDataNotam['type']) => {
     return '';
 };
 
+const sortOptions: SelectItem[] = Object.values({
+    startAsc: {
+        value: 'startAsc',
+        text: 'Effective From (oldest)',
+    },
+    startDesc: {
+        value: 'startDesc',
+        text: 'Effective From (newest, default)',
+    },
+    endAsc: {
+        value: 'endAsc',
+        text: 'Effective To (oldest)',
+    },
+    endDesc: {
+        value: 'endDesc',
+        text: 'Effective To (newest)',
+    },
+} satisfies Record<NotamsSortBy, SelectItem>);
+
 const formatDateDime = new Intl.DateTimeFormat('en-GB', {
     timeZone: 'UTC',
     year: '2-digit',
@@ -78,13 +133,17 @@ const formatDateDime = new Intl.DateTimeFormat('en-GB', {
 
 <style lang="scss" scoped>
 .notams {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
     &_info {
         display: flex;
         gap: 8px;
         align-items: center;
         justify-content: center;
 
-        margin-bottom: 16px;
+        margin-top: 16px;
 
         font-size: 14px;
 
@@ -101,7 +160,6 @@ const formatDateDime = new Intl.DateTimeFormat('en-GB', {
     }
 
     &_notam {
-        margin-top: 8px;
         padding-top: 16px;
         border-top: 1px solid $darkgray875;
     }

src/composables/data.ts

@@ -129,7 +129,7 @@ export async function setupDataFetch({ onFetch, onSuccessCallback }: {
 
     function startIntervalChecks() {
         interval = setInterval(async () => {
-            if (mandatoryInProgess) return;
+            if (mandatoryInProgess || !store.isTabVisible) return;
             if (socketsEnabled()) {
                 mandatoryInProgess = true;
 
@@ -152,17 +152,29 @@ export async function setupDataFetch({ onFetch, onSuccessCallback }: {
         }, 2000);
 
         interval = setInterval(async () => {
+            store.isTabVisible = document.visibilityState === 'visible';
+            if (!store.isTabVisible) return;
             await store.getVATSIMData(socketsEnabled());
             onFetch?.();
+            localStorage.setItem('radar-visibility-check', Date.now().toString());
         }, 10000);
     }
 
+    function setVisibilityState() {
+        document.addEventListener('visibilitychange', event => {
+            store.isTabVisible = document.visibilityState === 'visible';
+        });
+    }
+
     onMounted(async () => {
+        store.isTabVisible = document.visibilityState === 'visible';
         isMounted.value = true;
         let watcher: WatchStopHandle | undefined;
         const config = useRuntimeConfig();
         startIntervalChecks();
 
+        document.addEventListener('visibilitychange', setVisibilityState);
+
         watch(() => store.localSettings.traffic?.disableFastUpdate, val => {
             if (String(config.public.DISABLE_WEBSOCKETS) === 'true') val = true;
             watcher?.();
@@ -238,6 +250,7 @@ export async function setupDataFetch({ onFetch, onSuccessCallback }: {
     });
 
     onBeforeUnmount(() => {
+        document.removeEventListener('visibilitychange', setVisibilityState);
         isMounted.value = false;
         ws?.();
         if (interval) {

src/composables/index.ts

@@ -184,10 +184,14 @@ export function getFeatureStyle<T extends Style | Style[] = Style>(feature: Feat
 
 export function useUpdateInterval(callback: () => any, interval = 15 * 1000) {
     if (!getCurrentInstance()) throw new Error('Vue instance is unavailable in useUpdateInterval');
+    const store = useStore();
 
     onMounted(() => {
         callback();
-        const intervalCode = setInterval(callback, interval);
+        const intervalCode = setInterval(() => {
+            if (!store.isTabVisible) return;
+            callback();
+        }, interval);
         onBeforeUnmount(() => clearInterval(intervalCode));
     });
 }

src/composables/ws.ts

@@ -8,6 +8,13 @@ async function decompressBlob(blob: Blob) {
 
 let interval: NodeJS.Timeout | undefined;
 
+export function isTabVisible() {
+    const item = localStorage.getItem('radar-visibility-check');
+    if (!item) return false;
+
+    return (Date.now() - +item) < 1000 * 30;
+}
+
 export function initDataWebsocket(): () => void {
     // const dataStore = useDataStore();
     clearInterval(interval);
@@ -50,6 +57,11 @@ export function initDataWebsocket(): () => void {
             return;
         }
 
+        if (!isTabVisible()) {
+            websocket.close();
+            return;
+        }
+
         if (event.data === 'check') {
             websocket.send('alive');
             localStorage.setItem('radar-socket-date', Date.now().toString());
@@ -97,6 +109,7 @@ export function checkForWSData(isMounted: Ref<boolean>): () => void {
         if (!socketDate || +socketDate + (1000 * 20) < date) {
             localStorage.setItem('radar-socket-date', Date.now().toString());
             closeSocket?.();
+            if (!isTabVisible()) return;
             closeSocket = initDataWebsocket();
         }
     }

src/store/index.ts

@@ -48,6 +48,7 @@ export const useStore = defineStore('index', {
         featuredVisibleOnly: false,
 
         updateRequired: false,
+        isTabVisible: false,
 
         viewport: {
             width: 0,

src/types/map.ts

@@ -39,6 +39,8 @@ export interface UserLayersTransparencySettings {
     weatherLight?: number;
 }
 
+export type NotamsSortBy = 'startDesc' | 'startAsc' | 'endAsc' | 'endDesc';
+
 interface IUserLocalSettings {
     location: Coordinate;
     zoom: number;
@@ -52,6 +54,7 @@ interface IUserLocalSettings {
             layerVector?: boolean;
             transparencySettings?: UserLayersTransparencySettings;
         };
+        notamsSortBy?: NotamsSortBy;
     };
 
     traffic: {