Vatglasses

package.json

@@ -23,7 +23,13 @@
     "@influxdata/influxdb-client-apis": "^1.35.0",
     "@pinia/nuxt": "^0.8.0",
     "@prisma/client": "^6.0.0",
+    "@turf/difference": "^7.1.0",
     "@turf/great-circle": "^7.1.0",
+    "@turf/helpers": "^7.1.0",
+    "@turf/intersect": "^7.1.0",
+    "@turf/meta": "^7.1.0",
+    "@turf/truncate": "^7.1.0",
+    "@turf/union": "^7.1.0",
     "@vite-pwa/nuxt": "^0.10.6",
     "adm-zip": "^0.5.16",
     "aws-sdk": "^2.1692.0",
@@ -37,6 +43,7 @@
     "jwks-rsa": "^3.1.0",
     "kafkajs": "^2.2.4",
     "marked": "^15.0.3",
+    "merge-ranges": "^1.0.2",
     "metar-taf-parser": "^9.0.1",
     "nuxt": "^3.14.1592",
     "ol": "^10.2.1",
@@ -62,6 +69,7 @@
     "@types/adm-zip": "^0.5.7",
     "@types/geojson": "^7946.0.14",
     "@types/jsonwebtoken": "^9.0.7",
+    "@types/merge-ranges": "^1",
     "@types/node": "^22.10.1",
     "@types/ws": "^8.5.13",
     "eslint": "^9.16.0",

src/components/common/basic/CommonInputText.vue

@@ -15,7 +15,7 @@
                     v-bind="inputAttrs"
                     v-model="model"
                     :placeholder
-                    type="text"
+                    :type="inputType"
                     @blur="focused = false"
                     @change="$emit('change', $event)"
                     @focus="focused = true"
@@ -35,6 +35,10 @@ defineProps({
         type: Object as PropType<Record<string, any>>,
         default: () => {},
     },
+    inputType: {
+        type: String,
+        default: 'text',
+    },
     placeholder: {
         type: String,
     },

src/components/map/airports/MapAirport.vue

@@ -541,7 +541,9 @@ onMounted(async () => {
         }
     }
 
-    watch(dataStore.vatsim.updateTimestamp, () => initAndUpdateData(), {
+    const isVatglassesActive = computed(() => store.mapSettings.vatglasses?.active);
+    const vatglassesFallbacks = computed(() => dataStore.vatglassesActivePositions.value['fallback']);
+    watch([dataStore.vatsim.updateTimestamp, isVatglassesActive, vatglassesFallbacks], () => initAndUpdateData(), {
         immediate: true,
     });
 

src/components/map/airports/MapAirportsList.vue

@@ -384,6 +384,10 @@ const getAirportsList = computed(() => {
         if (!airport) continue;
 
         if (isArr) {
+            if (store.mapSettings.vatglasses?.active && dataStore.vatglassesActivePositions.value['fallback']) {
+                const fallbackPositions = Object.keys(dataStore.vatglassesActivePositions.value['fallback']);
+                if (!fallbackPositions.includes(atc.atc.callsign)) continue; // We don't add the current station if it is not in the fallback array, because it is shown with vatglasses sector. We need the tracon sectors as fallback for positions which are not defined in vatglasses.
+            }
             airport.arrAtc.push(atc.atc);
             airport.arrAtcInfo.push(atc);
             continue;

src/components/map/filters/MapFilters.vue

@@ -236,6 +236,7 @@ import { isFetchError, MAX_MAP_PRESETS } from '~/utils/shared';
 import CommonTooltip from '~/components/common/basic/CommonTooltip.vue';
 import MapFiltersTraffic from '~/components/map/filters/MapFiltersTraffic.vue';
 
+
 const store = useStore();
 
 const isOpened = computed(() => store.localSettings.filters?.opened !== false);

src/components/map/filters/settings/MapSettingsLayers.vue

@@ -40,6 +40,59 @@
                 @update:modelValue="setUserMapSettings({ aircraftScale: $event as number })"
             />
         </div>
+
+        <common-block-title>
+            VATGlasses
+        </common-block-title>
+
+        <div class="__section-group __section-group--even">
+            <common-toggle
+                :model-value="!!store.mapSettings.vatglasses?.active"
+                @update:modelValue="setUserMapSettings({ vatglasses: { active: $event } })"
+            >
+                Enable VATGlasses
+            </common-toggle>
+            <common-toggle
+                :disabled="!store.mapSettings.vatglasses?.active"
+                :model-value="store.mapSettings.vatglasses?.combined"
+                @update:modelValue="setUserMapSettings({ vatglasses: { combined: $event } })"
+            >
+                Combined Mode
+
+                <template #description>
+                    All sectors at once. Eats performance.
+                </template>
+            </common-toggle>
+        </div>
+
+        <div
+            v-if="store.mapSettings.vatglasses?.active && !store.mapSettings.vatglasses?.combined"
+            class="__grid-info-sections __grid-info-sections--large-title"
+        >
+            <div class="__grid-info-sections_title">
+                VATGlasses Level
+            </div>
+            <div class="__section-group">
+                <input
+                    v-model="vatglassesLevel"
+                    max="430"
+                    min="0"
+                    step="10"
+                    type="range"
+                >
+                <common-input-text
+                    v-model="vatglassesLevel"
+                    class="vatglassesLevel-input"
+                    :input-attrs="{
+                        max: 430,
+                        min: 0,
+                        step: 10,
+                    }"
+                    input-type="number"
+                />
+            </div>
+        </div>
+
         <common-block-title>
             Airports Counters
         </common-block-title>
@@ -136,13 +189,25 @@ import CommonSelect from '~/components/common/basic/CommonSelect.vue';
 import type { SelectItem } from '~/types/components/select';
 import CommonBlockTitle from '~/components/common/blocks/CommonBlockTitle.vue';
 import CommonButton from '~/components/common/basic/CommonButton.vue';
+import CommonInputText from '~/components/common/basic/CommonInputText.vue';
 import { backupMapSettings } from '~/composables/settings';
 import { resetUserMapSettings } from '~/composables';
 
 const store = useStore();
 
 const resetActive = ref(false);
 
+const vatglassesLevel = computed({
+    get() {
+        return store.localSettings.vatglassesLevel?.toString();
+    },
+    set(value) {
+        if (value !== undefined) {
+            setUserLocalSettings({ vatglassesLevel: Number(value) });
+        }
+    },
+});
+
 // For type safety
 const countersOptions: Record<Required<IUserMapSettings['airportsCounters']>['departuresMode'], string> = {
     total: 'Total departures',

src/components/map/sectors/MapSector.vue

@@ -90,6 +90,7 @@ const hasScroll = useScrollExists(computed(() => {
 }));
 
 const mapStore = useMapStore();
+const dataStore = useDataStore();
 const vectorSource = inject<ShallowRef<VectorSource | null>>('vector-source')!;
 const isHovered = ref(false);
 let localFeature: Feature | undefined;
@@ -98,15 +99,23 @@ let rootFeature: Feature | undefined;
 const store = useStore();
 
 const locals = computed(() => {
-    const filtered = props.atc.filter(x => !x.icao && x.controller && x.firs.filter(x => x.boundaryId === props.fir.feature.id));
+    if (!dataStore.vatglassesActivePositions.value) return [];
 
-    return filtered.filter((x, index) => index <= filtered.findIndex(y => y.controller?.cid === x.controller!.cid));
+    let filtered = props.atc.filter(x => !x.icao && x.controller && x.firs.filter(x => x.boundaryId === props.fir.feature.id));
+    filtered = filtered.filter((x, index) => index <= filtered.findIndex(y => y.controller?.cid === x.controller!.cid));
+    if (!store.mapSettings.vatglasses?.active || !dataStore.vatglassesActivePositions.value['fallback']) return filtered;
+
+    const fallbackPositions = Object.keys(dataStore.vatglassesActivePositions.value['fallback']);
+    return filtered.filter(x => fallbackPositions.includes(x.controller?.callsign)); // We filter out all stations which are not in the fallback list, because they are shown with vatglasses sector. We need the vatspy sectors as fallback for positions which are not defined in vatglasses.
 });
 
 const globals = computed(() => {
-    const filtered = props.atc.filter(x => x.icao && x.controller);
+    let filtered = props.atc.filter(x => x.icao && x.controller);
+    filtered = filtered.filter((x, index) => index <= filtered.findIndex(y => y.controller?.cid === x.controller!.cid));
+    if (!store.mapSettings.vatglasses?.active || !dataStore.vatglassesActivePositions.value['fallback']) return filtered;
 
-    return filtered.filter((x, index) => index <= filtered.findIndex(y => y.controller?.cid === x.controller!.cid));
+    const fallbackPositions = Object.keys(dataStore.vatglassesActivePositions.value['fallback']);
+    return filtered.filter(x => fallbackPositions.includes(x.controller?.callsign)); // We filter out all stations which are not in the fallback list, because they are shown with vatglasses sector. We need the vatspy sectors as fallback for positions which are not defined in vatglasses.
 });
 
 const controllers = computed(() => {
@@ -178,7 +187,7 @@ const init = () => {
 
 onMounted(init);
 
-watch([() => props.atc, isHovered], init);
+watch([() => props.atc, isHovered, locals], init);
 
 onBeforeUnmount(() => {
     if (localFeature) {

src/components/map/sectors/MapSectorsList.vue

@@ -7,32 +7,132 @@
             :fir="sector.fir"
         />
     </template>
+
+    <template v-if="!isHideAtcType('firs') && store.mapSettings.vatglasses?.active">
+        <template
+            v-for="(countryEntries, countryId) in dataStore.vatglassesActivePositions.value"
+            :key="countryId"
+        >
+            <map-vatglasses-position
+                v-for="(position, positionId) in countryEntries"
+                :key="countryId + '-' + positionId"
+                :position="position"
+            />
+        </template>
+
+
+        <map-overlay
+            class="vatglasses-overlay"
+            :model-value="vatglassesPopupIsShown"
+            :settings="{
+                position: getCoordinates,
+                offset: [15, -15],
+            }"
+            :z-index="20"
+        >
+            <common-popup-block
+                class="aircraft-hover"
+            >
+                <template #title>
+                    Positions
+                </template>
+
+                <ul>
+                    <li
+                        v-for="(sector, index) in sectorsAtClick"
+                        :key="index"
+                    >
+                        {{ sector.vatglassesPositionId }} ({{ sector.atc.callsign }}) {{ formatNumber(sector.min) }} - {{ formatNumber(sector.max) }}
+                    </li>
+                </ul>
+
+            </common-popup-block>
+        </map-overlay>
+    </template>
 </template>
 
 <script setup lang="ts">
 import VectorSource from 'ol/source/Vector';
 import type { ShallowRef } from 'vue';
-import type { Map } from 'ol';
+import type { Map, MapBrowserEvent } from 'ol';
 import { Fill, Stroke, Style } from 'ol/style';
-import MapSector from '~/components/map/sectors/MapSector.vue';
+import MapVatglassesPosition from '~/components/map/sectors/MapVatglassesPosition.vue';
 import VectorImageLayer from 'ol/layer/VectorImage';
+import { useStore } from '~/store';
+import MapSector from '~/components/map/sectors/MapSector.vue';
+import { attachMoveEnd } from '~/composables';
+
+import { initVatglasses } from '~/utils/data/vatglasses';
+import type { VatglassesSectorProperties } from '~/utils/data/vatglasses';
+
+import type { Pixel } from 'ol/pixel';
+
 
 let vectorLayer: VectorImageLayer<any>;
 const vectorSource = shallowRef<VectorSource | null>(null);
 provide('vector-source', vectorSource);
 const map = inject<ShallowRef<Map | null>>('map')!;
 const dataStore = useDataStore();
+const store = useStore();
+
 
 const firs = computed(() => {
     const list = dataStore.vatspy.value!.data.firs;
     const firs = list.map(fir => ({
         fir,
         atc: dataStore.vatsim.data.firs.value.filter(x => x.firs.some(x => x.boundaryId === fir.feature.id && (fir.icao === x.icao || (fir.callsign && fir.callsign === x.callsign)))) ?? [],
     }));
-
     return firs.filter((x, xIndex) => !firs.some((y, yIndex) => y.fir.icao === x.fir.icao && x.fir.feature.id === y.fir.feature.id && yIndex < xIndex));
 });
 
+
+const sectorsAtClick = shallowRef<VatglassesSectorProperties[]>([]);
+const getCoordinates = ref([0, 0]);
+const vatglassesPopupIsShown = ref(false);
+
+let lastEventPixel: Pixel | null = null;
+async function handleClick(e: MapBrowserEvent<any>) {
+    // TODO: don't show popup when clicked target has an aircraft
+    const eventPixel = map.value!.getPixelFromCoordinate(e.coordinate);
+
+    if (lastEventPixel && lastEventPixel[0] === eventPixel[0] && lastEventPixel[1] === eventPixel[1]) {
+        // same location, close popup
+        sectorsAtClick.value = [];
+        vatglassesPopupIsShown.value = false;
+        lastEventPixel = null;
+        return;
+    }
+    lastEventPixel = eventPixel;
+    const featureSectors = map.value!.getFeaturesAtPixel(eventPixel, {
+        hitTolerance: 0, // we use 6 instead of 5 because of the aircraft icons size, it is just for cosmetic reasons
+        layerFilter: layer => layer.getProperties().type === 'sectors',
+    });
+
+    const sectors: VatglassesSectorProperties[] = [];
+    featureSectors.map(feature => {
+        const properties = feature.getProperties() as VatglassesSectorProperties;
+        sectors.push(properties);
+    });
+
+    sectorsAtClick.value = sectors.filter(x => x.atc);
+
+    getCoordinates.value = e.coordinate;
+    vatglassesPopupIsShown.value = !!sectorsAtClick.value.length;
+}
+
+
+attachMoveEnd(() => {
+    // Change of map position
+    sectorsAtClick.value = [];
+    vatglassesPopupIsShown.value = false;
+    lastEventPixel = null;
+});
+
+function formatNumber(number: number) {
+    if (number === 0) return 'GND';
+    return 'FL' + number.toString().padStart(3, '0');
+}
+
 watch(map, val => {
     if (!val) return;
 
@@ -107,15 +207,28 @@ watch(map, val => {
             zIndex: 5,
         });
 
+        const vatglassesStyle = (color: string, altMax: number = 1): Style => {
+            // console.log('color',color)
+            return new Style({
+
+                fill: new Fill({
+                    color: `rgb(${ hexToRgb(color) }, 0.2)`,
+                }),
+                stroke: new Stroke({
+                    color: `rgb(${ hexToRgb(color) }, 0.6)`,
+                    width: 1,
+                }),
+                zIndex: altMax,
+            });
+        };
+
         vectorLayer = new VectorImageLayer<any>({
             source: vectorSource.value,
             zIndex: 2,
             properties: {
                 type: 'sectors',
             },
             style: function(feature) {
-                if (feature.getGeometry()?.getType() !== 'MultiPolygon') return;
-
                 const type = feature.getProperties().type;
 
                 switch (type) {
@@ -129,12 +242,19 @@ watch(map, val => {
                         return hoveredStyle;
                     case 'hovered-root':
                         return hoveredRootStyle;
+                    case 'vatglasses':
+                        // console.log(feature.getProperties());
+                        return vatglassesStyle(feature.getProperties().colour, feature.getProperties().max);
+                    default:
+                        return localStyle;
                 }
             },
         });
     }
 
     val.addLayer(vectorLayer);
+    initVatglasses();
+    val.on('click', handleClick);
 }, {
     immediate: true,
 });