1.0.0-alpha.2

VATSIM-Radar · Dec 23, 2024 · 62b92c9 · 62b92c9
1 parent 560b4cf
commit 62b92c9
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+# [1.0.0-alpha.2]
+
+- Updated taxiways colors
+- You can now disable Navigraph Layers, as well as disable new gates system, taxiways, runway exits, gate guidance, deicing pads
+
 # [1.0.0-alpha.1.1]
 
 - Fixed some gates missing

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vatsim-radar",
-  "version": "1.0.0-alpha.1.1",
+  "version": "1.0.0-alpha.2",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/src/components/map/airports/MapAirport.vue b/src/components/map/airports/MapAirport.vue
@@ -634,46 +634,54 @@ onMounted(async () => {
         immediate: true,
     });
 
-    const supportedLayouts: NavigraphLayoutType[] = [
-        'parkingstandarea',
-        'apronelement',
-        'arrestinggearlocation',
-        'blastpad',
-        'constructionarea',
-        'deicingarea',
-        'finalapproachandtakeoffarea',
-        'taxiwayintersectionmarking',
-        'runwaythreshold',
-        'runwaydisplacedarea',
-        'runwayelement',
-        'runwayexitline',
-        'runwayintersection',
-        'runwaymarking',
-        'runwayshoulder',
-        'frequencyarea',
-        'serviceroad',
-        'standguidanceline',
-        'taxiwayelement',
-        'taxiwayholdingposition',
-        'taxiwayshoulder',
-        'verticallinestructure',
-        'verticalpolygonalstructure',
-        'taxiwayguidanceline',
-    ];
+    const supportedLayouts = computed(() => {
+        const supported: NavigraphLayoutType[] = [
+            'parkingstandarea',
+            'apronelement',
+            'arrestinggearlocation',
+            'blastpad',
+            'constructionarea',
+            'finalapproachandtakeoffarea',
+            'runwaythreshold',
+            'runwaydisplacedarea',
+            'runwayelement',
+            'runwayintersection',
+            'runwaymarking',
+            'runwayshoulder',
+            'frequencyarea',
+            'serviceroad',
+            'taxiwayshoulder',
+            'verticallinestructure',
+            'verticalpolygonalstructure',
+        ];
+
+        const disabledTaxiways = store.mapSettings.navigraphLayers?.hideTaxiways;
+        const disabledGates = store.mapSettings.navigraphLayers?.hideGateGuidance;
+        const disabledRunways = store.mapSettings.navigraphLayers?.hideRunwayExit;
+        const disabledDeicing = store.mapSettings.navigraphLayers?.hideDeicing;
+
+        if (!disabledTaxiways) supported.push('taxiwayelement', 'taxiwayholdingposition', 'taxiwayguidanceline', 'taxiwayintersectionmarking');
+        if (!disabledGates) supported.push('standguidanceline');
+        if (!disabledRunways) supported.push('runwayexitline');
+        if (!disabledDeicing) supported.push('deicingarea');
+
+        return supported;
+    });
+
+    watch([layout, supportedLayouts], ([val]) => {
+        layoutFeatures.forEach(feature => {
+            layerSource.value?.removeFeature(feature);
+            feature.dispose();
+        });
+        layoutFeatures = [];
 
-    watch(layout, val => {
         if (!val) {
-            layoutFeatures.forEach(feature => {
-                layerSource.value?.removeFeature(feature);
-                feature.dispose();
-            });
-            layoutFeatures = [];
             return;
         }
 
         for (const [_key, value] of Object.entries(val)) {
             const key = _key as NavigraphLayoutType;
-            if (!supportedLayouts.includes(key)) continue;
+            if (!supportedLayouts.value.includes(key)) continue;
 
             const features = geojson.readFeatures(value, {
                 dataProjection: 'EPSG:4326',

diff --git a/src/components/map/airports/MapAirportsList.vue b/src/components/map/airports/MapAirportsList.vue
@@ -194,6 +194,13 @@ function handleMapClick(e: MapBrowserEvent<any>) {
     if (isMobileOrTablet.value) handlePointerMove(e);
 }
 
+watch(() => String(store.mapSettings.navigraphLayers?.disable) + String(store.mapSettings.navigraphLayers?.gatesFallback), () => {
+    originalAirportsData.value = [];
+    airportsData.value = [];
+
+    setVisibleAirports();
+});
+
 watch(map, val => {
     if (!val || vectorLayer) return;
 
@@ -646,7 +653,12 @@ async function setVisibleAirports() {
             if (!navigraphAirports.every(x => originalAirportsData.value.some(y => y.airport === x.vatsimAirport.icao))) {
                 originalAirportsData.value = [
                     ...originalAirportsData.value,
-                    ...(await Promise.all(navigraphAirports.filter(x => !originalAirportsData.value.some(y => y.airport === x.vatsimAirport.icao)).map(x => $fetch<NavigraphAirportData>(`/api/data/navigraph/airport/${ x.vatsimAirport.icao }?v=${ store.version }&isLayout=${ (store.user?.hasCharts && store.user?.hasFms) ? '1' : '0' }`)))).flatMap(x => x ?? []),
+                    ...(await Promise.all(
+                        navigraphAirports.filter(x => !originalAirportsData
+                            .value
+                            .some(y => y.airport === x.vatsimAirport.icao))
+                            .map(x => $fetch<NavigraphAirportData>(`/api/data/navigraph/airport/${ x.vatsimAirport.icao }?v=${ store.version }&layout=${ (store.user?.hasCharts && store.user?.hasFms && !store.mapSettings.navigraphLayers?.disable) ? '1' : '0' }&originalData=${ store.mapSettings.navigraphLayers?.gatesFallback ? '1' : '0' }`)),
+                    )).flatMap(x => x ?? []),
                 ];
             }
 

diff --git a/src/components/map/filters/settings/MapSettingsVisibility.vue b/src/components/map/filters/settings/MapSettingsVisibility.vue
@@ -202,6 +202,63 @@
                 </common-toggle>
             </div>
 
+            <template v-if="store.user?.hasCharts && store.user.hasFms">
+                <common-block-title>
+                    Navigraph Layers
+                </common-block-title>
+
+                <div class="__section-group __section-group--even">
+                    <common-toggle
+                        :model-value="!store.mapSettings.navigraphLayers?.disable"
+                        @update:modelValue="setUserMapSettings({ navigraphLayers: { disable: !$event } })"
+                    >
+                        Enabled
+                    </common-toggle>
+
+                    <common-toggle
+                        :disabled="!!store.mapSettings.navigraphLayers?.disable"
+                        :model-value="!store.mapSettings.navigraphLayers?.gatesFallback"
+                        @update:modelValue="setUserMapSettings({ navigraphLayers: { gatesFallback: !$event } })"
+                    >
+                        New gates system
+                    </common-toggle>
+                </div>
+
+                <div class="__section-group __section-group--even">
+                    <common-toggle
+                        :disabled="!!store.mapSettings.navigraphLayers?.disable"
+                        :model-value="!store.mapSettings.navigraphLayers?.hideTaxiways"
+                        @update:modelValue="setUserMapSettings({ navigraphLayers: { hideTaxiways: !$event } })"
+                    >
+                        Taxiways
+                    </common-toggle>
+
+                    <common-toggle
+                        :disabled="!!store.mapSettings.navigraphLayers?.disable"
+                        :model-value="!store.mapSettings.navigraphLayers?.hideRunwayExit"
+                        @update:modelValue="setUserMapSettings({ navigraphLayers: { hideRunwayExit: !$event } })"
+                    >
+                        Runway Exits
+                    </common-toggle>
+
+                    <common-toggle
+                        :disabled="!!store.mapSettings.navigraphLayers?.disable"
+                        :model-value="!store.mapSettings.navigraphLayers?.hideGateGuidance"
+                        @update:modelValue="setUserMapSettings({ navigraphLayers: { hideGateGuidance: !$event } })"
+                    >
+                        Gate Guidance
+                    </common-toggle>
+
+                    <common-toggle
+                        :disabled="!!store.mapSettings.navigraphLayers?.disable"
+                        :model-value="!store.mapSettings.navigraphLayers?.hideDeicing"
+                        @update:modelValue="setUserMapSettings({ navigraphLayers: { hideDeicing: !$event } })"
+                    >
+                        Deicing Pads
+                    </common-toggle>
+                </div>
+            </template>
+
             <common-block-title>
                 Personal Info
             </common-block-title>

diff --git a/src/composables/airport-layout.ts b/src/composables/airport-layout.ts
@@ -8,7 +8,7 @@ import type { Options as StyleOptions } from 'ol/style/Style';
 
 const taxiwayNameRegex = new RegExp('^((Main TWY)|Main|Route) ', 'i');
 
-export const airportLayoutStyles = (): PartialRecord<NavigraphLayoutType, Style | ((feature: FeatureLike) => Style | undefined)> => {
+export const airportLayoutStyles = (): PartialRecord<NavigraphLayoutType, Style | Style[] | ((feature: FeatureLike) => Style | Style[] | undefined)> => {
     const theme = useStore().getCurrentTheme;
 
     const themeStyles = {
@@ -17,12 +17,12 @@ export const airportLayoutStyles = (): PartialRecord<NavigraphLayoutType, Style
             light: getCurrentThemeRgbColor('primary300').join(','),
         },
         taxiway: {
-            default: getCurrentThemeRgbColor('warning300').join(','),
-            light: getCurrentThemeRgbColor('warning600').join(','),
+            default: hexToRgb('#494952'),
+            light: hexToRgb('#C3C3C9'),
         },
         taxiwayText: {
-            default: getCurrentThemeRgbColor('warning500').join(','),
-            light: getCurrentThemeRgbColor('warning700').join(','),
+            default: getCurrentThemeRgbColor('lightgray200').join(','),
+            light: getCurrentThemeRgbColor('lightgray200').join(','),
         },
         taxiwayBlue: {
             default: getCurrentThemeRgbColor('primary500').join(','),
@@ -41,12 +41,12 @@ export const airportLayoutStyles = (): PartialRecord<NavigraphLayoutType, Style
             light: getCurrentThemeRgbColor('error500').join(','),
         },
         taxiwayWhite: {
-            default: getCurrentThemeRgbColor('lightgray0').join(','),
-            light: getCurrentThemeRgbColor('lightgray0').join(','),
+            default: getCurrentThemeRgbColor('lightgray200').join(','),
+            light: getCurrentThemeRgbColor('lightgray200').join(','),
         },
         taxiwayWhiteText: {
-            default: getCurrentThemeRgbColor('lightgray0').join(','),
-            light: getCurrentThemeRgbColor('lightgray0').join(','),
+            default: getCurrentThemeRgbColor('lightgray200').join(','),
+            light: getCurrentThemeRgbColor('lightgray200').join(','),
         },
         taxiwayElement: {
             default: getCurrentThemeRgbColor('darkgray900').join(','),
@@ -221,35 +221,39 @@ export const airportLayoutStyles = (): PartialRecord<NavigraphLayoutType, Style
                 textColor = themeStyles.taxiwayWhiteText[theme];
             }
 
-            const options: StyleOptions = {
+            const styles: Style[] = [new Style({
                 stroke: new Stroke({
-                    color: `rgba(${ strokeColor }, 0.3)`,
+                    color: `rgba(${ strokeColor }, ${ strokeColor === themeStyles.taxiway[theme] ? 1 : 0.3 })`,
                     width: style === 1 ? 1 : 2,
                     lineDash: style === 1 ? [4, 4] : undefined,
                 }),
                 zIndex: 2,
-            };
+            })];
 
             if (feature.getProperties().idlin) {
-                options.text = new Text({
-                    text: feature.getProperties().idlin.replace(taxiwayNameRegex, ''),
-                    font: 'bold 12px Montserrat',
-                    // placement: 'line',
-                    fill: new Fill({
-                        color: `rgba(${ textColor }, 0.6)`,
+                styles.push(new Style({
+                    text: new Text({
+                        text: feature.getProperties().idlin.replace(taxiwayNameRegex, ''),
+                        font: 'bold 12px Montserrat',
+                        // placement: 'line',
+                        fill: new Fill({
+                            color: `rgba(${ textColor }, 0.6)`,
+                        }),
+                        textBaseline: 'middle',
+                        padding: [25, 25, 25, 25],
                     }),
-                    textBaseline: 'middle',
-                    padding: [25, 25, 25, 25],
-                });
+                    zIndex: 3,
+                }));
             }
 
-            return new Style(options);
+            return styles;
         },
         taxiwayholdingposition: feature => {
             const options: StyleOptions = {
                 stroke: new Stroke({
-                    color: `rgba(${ getCurrentThemeRgbColor('warning700').join(',') }, 1)`,
+                    color: `rgba(${ getCurrentThemeRgbColor('warning700').join(',') }, 0.8)`,
                 }),
+                zIndex: 4,
             };
 
             if (feature.getProperties().idlin) {
@@ -258,16 +262,16 @@ export const airportLayoutStyles = (): PartialRecord<NavigraphLayoutType, Style
                     font: 'bold 12px Montserrat',
                     placement: 'line',
                     fill: new Fill({
-                        color: `rgba(${ getCurrentThemeRgbColor('warning700').join(',') }, 1)`,
+                        color: `rgba(${ getCurrentThemeRgbColor('warning700').join(',') }, 0.8)`,
                     }),
                     textBaseline: 'bottom',
                     textAlign: 'left',
                 });
             }
 
             if (feature.getProperties().catstop === 2) {
-                options.stroke?.setColor(`rgba(${ getCurrentThemeRgbColor('error500').join(',') }, 1)`);
-                options.text?.getFill()!.setColor(`rgba(${ getCurrentThemeRgbColor('error500').join(',') }, 1)`);
+                options.stroke?.setColor(`rgba(${ getCurrentThemeRgbColor('error500').join(',') }, 0.8)`);
+                options.text?.getFill()!.setColor(`rgba(${ getCurrentThemeRgbColor('error500').join(',') }, 0.8)`);
             }
 
             return new Style(options);

diff --git a/src/utils/backend/map-settings.ts b/src/utils/backend/map-settings.ts
@@ -16,6 +16,7 @@ const counterModeKeys: Array<IUserMapSettings['airportsCounters']['arrivalsMode'
 const prefilesModeKeys: Array<IUserMapSettings['airportsCounters']['horizontalCounter']> = ['total', 'prefiles', 'ground', 'groundMoving', 'hide'];
 const turnsKeys: Array<IUserMapSettings['colors']['turns']> = ['magma', 'inferno', 'rainbow', 'viridis'];
 const tracksKeys: Array<IUserMapSettings['tracks']['mode']> = ['arrivalsOnly', 'arrivalsAndLanded', 'departures', 'ground', 'allAirborne', 'all'];
+const navigraphKeys: Array<keyof IUserMapSettings['navigraphLayers']> = ['disable', 'gatesFallback', 'hideTaxiways', 'hideGateGuidance', 'hideRunwayExit', 'hideDeicing'];
 
 const colors = Object.keys(colorsList);
 
@@ -135,6 +136,15 @@ const validators: Record<keyof IUserMapSettings, (val: unknown) => boolean> = {
 
         return true;
     },
+    navigraphLayers: val => {
+        if (!isObject(val)) return false;
+
+        if (!validateRandomObjectKeys(val, navigraphKeys)) return false;
+
+        if (!Object.values(val).every(x => typeof x === 'boolean')) return false;
+
+        return true;
+    },
     aircraftScale: val => {
         return typeof val === 'number' && val > 0 && val < 5;
     },
@@ -234,6 +244,14 @@ export interface IUserMapSettings {
         excludeMyArrival?: boolean;
         excludeMyLocation?: boolean;
     };
+    navigraphLayers: Partial<{
+        disable: boolean;
+        gatesFallback?: boolean;
+        hideTaxiways?: boolean;
+        hideGateGuidance?: boolean;
+        hideRunwayExit?: boolean;
+        hideDeicing?: boolean;
+    }>;
     aircraftScale: number;
     airportsMode: 'staffedOnly' | 'staffedAndGroundTraffic' | 'all';
     tracks: {