Fixed metar visibility and sky condition bugs

ui/src/components/AirportDrawer/index.tsx

@@ -204,11 +204,89 @@ function AirportInfo({ map, airport }: { map: LeafletMap; airport: Airport }) {
 }
 
 function WeatherInfo({ metar }: { metar?: Metar }) {
-  if (metar) {
-    return <>{metar.raw_text}</>;
-  } else {
-    return <>No METAR observation available</>;
+  if (!metar) {
+    return <>No METAR observation available/</>
   }
+  return (
+    <Box>
+      <Text size={'xs'} color={'dimmed'} mt={'xs'}>
+        Raw METAR
+      </Text>
+      <Text size={'sm'} mb={'md'}>
+        {metar.raw_text}
+      </Text>
+
+      <Group mb={'xs'}>
+        {metar.report_modifier && <Badge>{metar.report_modifier}</Badge>}
+        {metar.becoming_change && <Badge>TEMPO/BCMG</Badge>}
+        {metar.temporary_change && <Badge>TEMPO</Badge>}
+        {metar.no_significant_change && <Badge>No Change</Badge>}
+      </Group>
+
+      <Text size={'xs'} color={'dimmed'}>
+        Observation Time
+      </Text>
+      <Text size={'sm'} mb={'md'}>
+        {new Date(metar.observation_time).toLocaleString()}
+      </Text>
+
+      {metar.wind_dir_degrees && metar.wind_speed_kt != null && (
+        <Text mb="sm">
+          <strong>Wind:</strong> {metar.wind_dir_degrees}° at {metar.wind_speed_kt} kt
+          {metar.wind_gust_kt && `, gusts ${metar.wind_gust_kt} kt`}
+          {metar.variable_wind_dir_degrees && ` (variable ${metar.variable_wind_dir_degrees})`}
+        </Text>
+      )}
+
+      {metar.visibility_statute_mi && (
+        <Text mb="sm">
+          <strong>Visibility:</strong> {metar.visibility_statute_mi} statute miles
+        </Text>
+      )}
+
+      {(metar.temp_c != null || metar.dew_point_c != null) && (
+        <Text mb="sm">
+          <strong>Temp / Dew Point:</strong> {metar.temp_c}°C / {metar.dew_point_c}°C
+          {metar.estimated_humidity != null && ` (${metar.estimated_humidity}% RH)`}
+        </Text>
+      )}
+
+      {(metar.altimeter_in_hg != null || metar.sea_level_pressure_mb != null) && (
+        <Text mb="sm">
+          <strong>Pressure:</strong>
+          {metar.altimeter_in_hg != null && ` Alt ${metar.altimeter_in_hg} inHg`}
+          {metar.sea_level_pressure_mb != null && `, SLP ${metar.sea_level_pressure_mb} mb`}
+        </Text>
+      )}
+
+      {metar.weather_phenomena.length > 0 && (
+        <Text mb="sm">
+          <strong>Weather:</strong> {metar.weather_phenomena.join(', ')}
+        </Text>
+      )}
+
+      {metar.sky_condition.length > 0 && (
+        <Text mb="sm">
+          <strong>Sky:</strong>{' '}
+          {metar.sky_condition
+            .map((s) => `${s.sky_cover}${s.cloud_base_ft_agl ? ` at ${s.cloud_base_ft_agl} ft` : ''}`)
+            .join(', ')}
+        </Text>
+      )}
+
+      {(metar.max_temp_c != null && metar.min_temp_c != null) && (
+        <Text mb="sm">
+          <strong>Max / Min:</strong> {metar.max_temp_c}°C / {metar.min_temp_c}°C
+        </Text>
+      )}
+
+      {metar.density_altutude != null && (
+        <Text mb="sm">
+          <strong>Density Altitude:</strong> {metar.density_altutude} ft
+        </Text>
+      )}
+    </Box>
+  )
 }
 
 function airportCategoryToText(category: AirportCategory): string {