ecfmp: show on AtisAfw page

fixes #17

atciss-frontend/src/app/store.ts

@@ -12,6 +12,7 @@ import { controllerApi } from "../services/controllerApi"
 import { mapReducer } from "../services/mapSlice"
 import { loaApi } from "../services/loaApi"
 import { tafApi } from "../services/tafApi"
+import { ecfmpApi } from "../services/ecfmpApi"
 
 export const store = configureStore({
   reducer: {
@@ -23,6 +24,7 @@ export const store = configureStore({
     [controllerApi.reducerPath]: controllerApi.reducer,
     [loaApi.reducerPath]: loaApi.reducer,
     [tafApi.reducerPath]: tafApi.reducer,
+    [ecfmpApi.reducerPath]: ecfmpApi.reducer,
     auth: authReducer,
     activePositions: activePositionReducer,
     config: configReducer,
@@ -37,7 +39,8 @@ export const store = configureStore({
       .concat(sectorApi.middleware)
       .concat(loaApi.middleware)
       .concat(tafApi.middleware)
-      .concat(controllerApi.middleware),
+      .concat(controllerApi.middleware)
+      .concat(ecfmpApi.middleware),
 })
 
 setupListeners(store.dispatch)

atciss-frontend/src/components/ADInfo.tsx

@@ -33,6 +33,7 @@ export const ADinfo = ({ sx }: { sx?: ThemeUIStyleObject }) => {
               borderWidth: 1,
               borderColor: "primary",
               borderStyle: "solid",
+              gap: 0,
             }}
           >
             <Box>

atciss-frontend/src/components/ECFMP.tsx

@@ -0,0 +1,53 @@
+import { Box, Text } from "theme-ui"
+import { EBG_SETTINGS } from "../app/config"
+import { useAppSelector } from "../app/hooks"
+import { selectActiveEbg } from "../services/configSlice"
+import { usePollEcfmpByFir } from "../services/ecfmpApi"
+import { DateTime } from "luxon"
+
+export const ECFMP = () => {
+  const activeEbg = useAppSelector(selectActiveEbg)
+  const { data: flowMeasures } = usePollEcfmpByFir(EBG_SETTINGS[activeEbg].fir)
+
+  return flowMeasures?.map((fm) => {
+    const start = DateTime.fromISO(fm.starttime).toUTC()
+    const end = DateTime.fromISO(fm.endtime).toUTC()
+    const active = DateTime.utc() >= start
+
+    return (
+      <Box mb={3} key={fm.ident}>
+        <Box>
+          <Text variant="label">{fm.ident}</Text>:{" "}
+          <Text variant="label" sx={{ color: active ? "green" : "blue" }}>
+            {active
+              ? `Active, expires ${end.toRelative()}`
+              : `Will be active ${start.toRelative()}`}
+          </Text>{" "}
+          (
+          {`${start.toFormat("y-MM-dd HH:mm")}-${end.toFormat(
+            "y-MM-dd HH:mm",
+          )}`}
+          )
+        </Box>
+        <pre style={{ whiteSpace: "pre-wrap" }}>{fm.reason}</pre>
+        <Box>
+          <Text variant="label">
+            {fm.measure.type.replace("_", " ").toUpperCase()}
+          </Text>
+          {fm.measure.value && `: ${fm.measure.value}`}
+        </Box>
+        <Box>
+          {fm.filters
+            .map(
+              (f) =>
+                `${f.type.replace("_", " ").toUpperCase()}${
+                  f.value &&
+                  `: ${f.value instanceof Array ? f.value.join(", ") : f.value}`
+                }`,
+            )
+            .join("; ")}
+        </Box>
+      </Box>
+    )
+  })
+}

atciss-frontend/src/services/ecfmpApi.ts

@@ -0,0 +1,65 @@
+import { createApi } from "@reduxjs/toolkit/query/react"
+import { fetchWithAuth } from "../app/auth"
+
+export type FilterEvent = {
+  event_id: number
+  event_vatcan: string | null
+}
+
+export type Filter = {
+  type:
+    | "ADEP"
+    | "ADES"
+    | "level_above"
+    | "level_below"
+    | "level"
+    | "member_event"
+    | "member_non_event"
+    | "waypoint"
+  value: (string | number | FilterEvent)[] | number
+}
+
+export type Measure = {
+  type:
+    | "prohibit"
+    | "minimum_departure_interval"
+    | "average_departure_interval"
+    | "per_hour"
+    | "miles_in_trail"
+    | "max_ias"
+    | "max_mach"
+    | "ias_reduction"
+    | "mach_reduction"
+    | "ground_stop"
+    | "mandatory_route"
+  value: number | string[] | null
+}
+
+export type FlowMeasure = {
+  ident: string
+  event_id: number | null
+  reason: string
+  starttime: string
+  endtime: string
+  measure: Measure
+  filters: Filter[]
+  notified_firs: string[]
+  withdrawn_at: string | null
+}
+
+export const ecfmpApi = createApi({
+  reducerPath: "ecfmp",
+  baseQuery: fetchWithAuth,
+  endpoints: (builder) => ({
+    getByFir: builder.query<FlowMeasure[], string>({
+      query: (fir) => ({
+        url: `ecfmp/${fir}`,
+      }),
+    }),
+  }),
+})
+
+export const usePollEcfmpByFir: typeof ecfmpApi.useGetByFirQuery = (
+  fir,
+  options,
+) => ecfmpApi.useGetByFirQuery(fir, { pollingInterval: 60000, ...options })

atciss-frontend/src/views/AtisAfw.tsx

@@ -1,7 +1,8 @@
-import { Box, Grid, ThemeUIStyleObject } from "theme-ui"
+import { Box, Flex, Grid, ThemeUIStyleObject } from "theme-ui"
 import { Atis } from "../components/Atis"
 import { ADinfo } from "../components/ADInfo"
 import { SectorStatus } from "../components/SectorStatus"
+import { ECFMP } from "../components/ECFMP"
 
 const AtisAfw = ({ sx }: { sx?: ThemeUIStyleObject }) => {
   return (
@@ -12,7 +13,9 @@ const AtisAfw = ({ sx }: { sx?: ThemeUIStyleObject }) => {
       }}
     >
       <Atis sx={{ gridColumnEnd: "span 2" }} />
-      <Box>notes</Box>
+      <Flex sx={{ flexDirection: "column", overflow: "auto" }}>
+        <ECFMP />
+      </Flex>
       <Box>areas</Box>
       <SectorStatus />
       <ADinfo />