Combined metreport

frontend/package.json

@@ -20,7 +20,9 @@
         "metar-taf-parser": "^9.0.1",
         "moment": "^2.30.1",
         "ol": "^9.2.2",
+        "papaparse": "^5.4.1",
         "pinia": "^2.1.7",
+        "suncalc": "^1.9.0",
         "uuid": "^9.0.1",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",
@@ -33,6 +35,8 @@
         "@tsconfig/node20": "^20.1.4",
         "@types/diff": "^5.2.1",
         "@types/node": "^20.12.5",
+        "@types/papaparse": "^5.3.15",
+        "@types/suncalc": "^1.9.2",
         "@types/uuid": "^9.0.8",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/eslint-config-prettier": "^9.0.0",

frontend/src/components/Notam.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="height: 30px; background: #666">
+    <div style="height: 25px; margin-top: -5px; background: #777">
         <v-btn
             variant="text"
             rounded="0"

frontend/src/components/Notepad.vue

@@ -1,6 +1,6 @@
 <template>
     <div style="width: 100%; height: 100%; background: #666; overflow-y: hidden">
-        <div style="height: 30px; background: #666">
+        <div style="height: 25px; margin-top: -5px; background: #777">
             <v-btn
                 variant="text"
                 rounded="0"

frontend/src/components/menu/MainMenu.vue

@@ -26,6 +26,9 @@ const dct = useDctStore()
 
 const menuItems = reactive({
     MET: {
+        AIRPORT: {
+            // This will be filled in with ICAO codes
+        } as { [key: string]: string },
         METREPORT: {
             // filled in code
         } as { [key: string]: string },
@@ -36,6 +39,9 @@ const menuItems = reactive({
         SMHI: "smhi",
         "SWC NORDEN": "swc",
         VFR: "vfr",
+        SUN: {
+            // This will be filled in with ICAO codes
+        } as { [key: string]: string },
     },
     NOTAM: "notam",
     eCharts: "echarts",
@@ -143,16 +149,25 @@ const menuItems = reactive({
         "AIRCRAFT TYPES": "aircraft",
         NOTEPAD: "notepad",
     },
-    DCT: {},  // We'll populate this dynamically
+    DCT: {}, // We'll populate this dynamically
 } as any)
 
-import { wxAirports } from "@/stores/wx"
+import { metarAirports, wxAirports } from "@/metcommon"
 
 for (const icao of wxAirports) {
-    menuItems.MET.METREPORT[icao] = `metrep${icao}`
+    menuItems.MET.AIRPORT[icao] = `airport${icao}`
     menuItems.MET.METSENSOR[icao] = `metsen${icao}`
 }
 
+for (const icao of metarAirports) {
+    menuItems.MET.METREPORT[icao] = `metrep${icao}`
+    if (icao == "ESSA") {
+        menuItems.MET.METREPORT[`${icao} ARR`] = `metrep${icao}arr`
+        menuItems.MET.METREPORT[`${icao} DEP`] = `metrep${icao}dep`
+    }
+    menuItems.MET.SUN[icao] = `sun${icao}`
+}
+
 import { useDctStore } from "@/stores/dct"
 
 for (const [id, groups] of Object.entries(dct.menuItems)) {

frontend/src/components/met/Airport.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="full-component">
+        <Sun :id="props.id" />
+        <hr class="component-divider">
+        <Metreport :id="props.id" />
+        <hr v-if="tafAvailable" class="component-divider">
+        <Taf v-if="tafAvailable" :id="props.id" />
+        <hr class="component-divider">
+        <Metsensor :id="props.id" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import Sun from "@/components/met/Sun.vue"
+import Metreport from "@/components/met/Metreport.vue"
+import Taf from "@/components/met/Taf.vue"
+import Metsensor from "@/components/met/MetsensorWX.vue"
+import { tafAirports } from "@/metcommon"
+import { computed } from "vue"
+
+const props = defineProps<{ id: string }>()
+
+const tafAvailable = computed(() => tafAirports.includes(props.id))
+
+</script>
+
+<style scoped>
+.component-divider {
+    width: 100%;
+    border: none;
+    border-top: 2px solid #808080;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+</style>

frontend/src/components/MetarTaf.vue → frontend/src/components/met/MetarTaf.vue

@@ -77,8 +77,9 @@ TAF {{ icao }} N/A</pre
 </template>
 
 <script setup lang="ts">
-import { useMetarStore, metarAirports } from "@/stores/metar"
+import { useMetarStore } from "@/stores/metar"
 import { useTafStore } from "@/stores/taf"
+import { metarAirports } from "@/metcommon";
 import { computed, onMounted, onUnmounted, reactive, ref, watch } from "vue"
 
 const metarStore = useMetarStore()

frontend/src/components/met/Metreport.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="float-right text-caption">
+        <a
+            title="Source: METAR"
+            class="mx-1 font-weight-bold"
+            @click="source = 'metar'"
+            :style="{ color: source == 'metar' ? '#444' : '#999' }"
+            >M</a
+        >
+        <a
+            v-if="awosAvailable"
+            title="Source: WX.AWOS.SE"
+            class="mx-1 font-weight-bold"
+            @click="source = 'awos'"
+            :style="{ color: source == 'awos' ? '#444' : '#999' }"
+            >W</a
+        >
+        <a
+            v-if="atisAvailable"
+            title="Source: ATIS"
+            class="mx-1 font-weight-bold"
+            @click="source = 'atis'"
+            :style="{ color: source == 'atis' ? '#444' : '#999' }"
+            >A</a
+        >
+    </div>
+    <MetreportMETAR v-if="source == 'metar'" :id="id" />
+    <MetreportWX v-else-if="awosAvailable && source == 'awos'" :id="id" :type="type" />
+    <MetreportATIS v-else-if="atisAvailable && source == 'atis'" :id="id" :type="type" />
+    <div class="pa-1" v-else>Source is what now??</div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from "vue"
+import MetreportMETAR from "./MetreportMETAR.vue"
+import MetreportWX from "./MetreportWX.vue"
+import MetreportATIS from "./MetreportATIS.vue"
+import { useWxStore } from "@/stores/wx"
+import { useMetarStore } from "@/stores/metar"
+import { useVatsimStore } from "@/stores/vatsim"
+import { wxAirports, atisAirports } from "@/metcommon" 
+
+const props = defineProps<{ id: string; type?: "ARR" | "DEP" }>()
+
+const wx = useWxStore()
+const metar = useMetarStore()
+const vatsim = useVatsimStore()
+
+const source = ref("metar")
+
+const awosAvailable = computed(() =>
+    wxAirports.includes(props.id) &&
+    (wx.metreport(props.id) || wx.info(props.id) || wx.metar(props.id))
+        ? true
+        : false,
+)
+const atisAvailable = computed(() =>
+    atisAirports.includes(props.id) &&
+    vatsim.data &&
+    vatsim.data.atis &&
+    vatsim.data.atis.find(
+        (a) =>
+            a.callsign.startsWith(
+                props.id +
+                    (props.type == "ARR" ? "_A_ATIS" : props.type == "DEP" ? "_D_ATIS" : "_ATIS"),
+            ) &&
+            a.text_atis &&
+            a.text_atis.length > 0,
+    )
+        ? true
+        : false,
+)
+
+let wxSubscription = ""
+let metarSubscription = ""
+
+onMounted(() => {
+    wxSubscription = wx.subscribe(props.id)
+    metarSubscription = metar.subscribe(props.id)
+    source.value = atisAvailable.value ? "atis" : awosAvailable.value ? "awos" : "metar"
+})
+
+onUnmounted(() => {
+    if (wxSubscription) wx.unsubscribe(wxSubscription)
+    if (metarSubscription) metar.unsubscribe(metarSubscription)
+})
+
+watch([awosAvailable, atisAvailable], (newValues, oldValues) => {
+    let changed = false
+    for (let i = 0; i < newValues.length; i++) {
+        if (newValues[i] != oldValues[i]) changed = true
+    }
+    if (changed) {
+        if (atisAvailable.value) source.value = "atis"
+        else if (awosAvailable.value) source.value = "awos"
+        else source.value = "metar"
+    }
+})
+</script>