Update frequencies to communications, fixed control icons

ui/src/components/AirportDrawer/index.tsx

@@ -17,10 +17,12 @@ import { CSSProperties, forwardRef, ReactNode, useEffect, useState } from 'react
 import { getMetars } from '@lib/metar.ts';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconViewfinder } from '@tabler/icons-react';
-import RunwayTable from '@components/AirportDrawer/RunwayTable.tsx';
-import FrequencyTable from '@components/AirportDrawer/FrequencyTable.tsx';
+import { RunwayTable } from '@components/AirportDrawer/RunwayTable.tsx';
+import { CommunicationTable } from '@components/AirportDrawer/CommunicationTable.tsx';
+import { useMap } from 'react-leaflet';
+import type { Map as LeafletMap } from 'leaflet';
 
-export default function Index({
+export function AirportDrawer({
   airport,
   setAirport
 }: {
@@ -29,12 +31,12 @@ export default function Index({
 }) {
   const [metar, setMetar] = useState<Metar | undefined>(undefined);
   const isMobile = useMediaQuery('(max-width: 768px)');
+  const map = useMap();
 
   useEffect(() => {
     if (!airport) return;
     function updateMetar() {
       if (!airport) return;
-      console.log(airport.icao);
       getMetars({ icaos: [airport.icao] }).then((m) => {
         if (m.length > 0) {
           setMetar(m[0]);
@@ -104,7 +106,7 @@ export default function Index({
                 <Tabs.Tab value={'weather'}>Weather</Tabs.Tab>
               </TabsList>
               <Tabs.Panel value={'info'}>
-                <AirportInfo airport={airport} />
+                <AirportInfo map={map} airport={airport} />
               </Tabs.Panel>
               <Tabs.Panel value={'weather'}>
                 <WeatherInfo metar={airport.latest_metar} />
@@ -149,7 +151,12 @@ function AirportInfoRow({ style, children }: { style?: CSSProperties; children:
   );
 }
 
-function AirportInfo({ airport }: { airport: Airport }) {
+function AirportInfo({ map, airport }: { map: LeafletMap, airport: Airport }) {
+  function goToLocation(map: LeafletMap, latitude: number, longitude: number) {
+    if (!map) return
+    map.setView([latitude, longitude], map.getZoom())
+  }
+
   return (
     <div>
       <AirportInfoRow>
@@ -164,7 +171,9 @@ function AirportInfo({ airport }: { airport: Airport }) {
         </AirportInfoSlot>
         <AirportInfoSlot title={'Elevation'} style={{ paddingLeft: '1rem' }} children={`${airport.elevation_ft} ft`} />
         <AirportInfoSlot style={{ marginLeft: 'auto', paddingLeft: '1rem', paddingTop: '0.5rem' }}>
-          <UnstyledButton>
+          <UnstyledButton onClick={() => {
+            goToLocation(map, airport.latitude, airport.longitude)
+          }}>
             <IconViewfinder />
           </UnstyledButton>
         </AirportInfoSlot>
@@ -180,13 +189,13 @@ function AirportInfo({ airport }: { airport: Airport }) {
             </Accordion.Panel>
           </Accordion.Item>
         )}
-        {airport.frequencies != null && airport.frequencies.length > 0 && (
-          <Accordion.Item value={'frequencies'}>
+        {airport.communications != null && airport.communications.length > 0 && (
+          <Accordion.Item value={'communication'}>
             <Accordion.Control>
-              Frequencies
+              Communication
             </Accordion.Control>
             <Accordion.Panel>
-              <FrequencyTable frequencies={airport.frequencies} />
+              <CommunicationTable communications={airport.communications} />
             </Accordion.Panel>
           </Accordion.Item>
         )}