Updated api endpoint structure, fixed issues, worked on admin page

2023-11-21 11:00:01 -05:00
parent cb9db1f3ba
commit 2e048fb1a0
12 changed files with 326 additions and 137 deletions
--- a/service/src/airports/model.rs
+++ b/service/src/airports/model.rs
@@ -27,8 +27,7 @@ pub struct InsertAirport {

 #[derive(Debug)]
 pub struct QueryFilters {
-  pub name: Option<String>,
-  pub icao: Option<String>,
+  pub search: Option<String>,
  pub bounds: Option<Polygon<Point>>,
  pub category: Option<String>,
  pub order_field: Option<QueryOrderField>,
@@ -38,8 +37,7 @@ pub struct QueryFilters {
 impl Default for QueryFilters {
  fn default() -> Self {
    QueryFilters {
-      name: None,
-      icao: None,
+      search: None,
      bounds: None,
      category: None,
      order_field: None,
@@ -131,16 +129,17 @@ impl QueryAirport {
    if let Some(category) = &filters.category {
      query = query.filter(airports::category.eq(category));
    }
-    if let Some(icao) = &filters.icao {
-      if let Some(name) = &filters.name {
-        query = query.filter(
-          airports::icao.ilike(format!("%{}%", icao)).or(
-            airports::full_name.ilike(format!("%{}%", name))
-          )
-        )
-      } else {
-        query = query.filter(airports::icao.ilike(format!("%{}%", icao)))
-      }
+    if let Some(search) = &filters.search {
+      query = query.filter(
+        airports::icao.ilike(format!("%{}%", search))
+          .or(airports::full_name.ilike(format!("%{}%", search)))
+          .or(airports::iso_country.ilike(format!("%{}%", search)))
+          .or(airports::iso_region.ilike(format!("%{}%", search)))
+          .or(airports::municipality.ilike(format!("%{}%", search)))
+          .or(airports::gps_code.ilike(format!("%{}%", search)))
+          .or(airports::iata_code.ilike(format!("%{}%", search)))
+          .or(airports::local_code.ilike(format!("%{}%", search)))
+      )
    }

    if let Some(order_by) = &filters.order_by {
@@ -193,16 +192,17 @@ impl QueryAirport {
    if let Some(category) = &filters.category {
      query = query.filter(airports::category.eq(category));
    }
-    if let Some(icao) = &filters.icao {
-      if let Some(name) = &filters.name {
-        query = query.filter(
-          airports::icao.ilike(format!("%{}%", icao)).or(
-            airports::full_name.ilike(format!("%{}%", name))
-          )
-        )
-      } else {
-        query = query.filter(airports::icao.ilike(format!("%{}%", icao)))
-      }
+    if let Some(search) = &filters.search {
+      query = query.filter(
+        airports::icao.ilike(format!("%{}%", search))
+          .or(airports::full_name.ilike(format!("%{}%", search)))
+          .or(airports::iso_country.ilike(format!("%{}%", search)))
+          .or(airports::iso_region.ilike(format!("%{}%", search)))
+          .or(airports::municipality.ilike(format!("%{}%", search)))
+          .or(airports::gps_code.ilike(format!("%{}%", search)))
+          .or(airports::iata_code.ilike(format!("%{}%", search)))
+          .or(airports::local_code.ilike(format!("%{}%", search)))
+      )
    }

    let count: i64 = query.get_result(&mut conn)?;
@@ -224,19 +224,19 @@ impl QueryAirport {
    Ok(airport)
  }

-  pub fn update(id: i32, airport: InsertAirport) -> Result<Self, ServiceError> {
+  pub fn update(icao: String, airport: InsertAirport) -> Result<Self, ServiceError> {
    let mut conn = db::connection()?;
    let airport = diesel::update(airports::table)
-        .filter(airports::id.eq(id))
+        .filter(airports::icao.eq(icao))
        .set(airport)
        .get_result(&mut conn)?;
    Ok(airport)
  }

-  pub fn delete(id: Option<i32>) -> Result<usize, ServiceError> {
+  pub fn delete(icao: Option<String>) -> Result<usize, ServiceError> {
    let mut conn = db::connection()?;
-    let res = match id {
-      Some(id) => diesel::delete(airports::table.filter(airports::id.eq(id))).execute(&mut conn)?,
+    let res = match icao {
+      Some(icao) => diesel::delete(airports::table.filter(airports::icao.eq(icao))).execute(&mut conn)?,
      None => diesel::delete(airports::table).execute(&mut conn)?
    };
    Ok(res)
--- a/service/src/airports/routes.rs
+++ b/service/src/airports/routes.rs
@@ -8,8 +8,7 @@ use serde::{Serialize, Deserialize};

 #[derive(Debug, Serialize, Deserialize)]
 struct GetAllParameters {
-  name: Option<String>,
-  icao: Option<String>,
+  search: Option<String>,
  bounds: Option<String>,
  category: Option<String>,
  order_field: Option<String>,
@@ -18,7 +17,7 @@ struct GetAllParameters {
  page: Option<i32>
 }

-#[get("/import")]
+#[post("/import")]
 async fn import(auth: JwtAuth) -> HttpResponse {
  let _ = match verify_role(&auth, "admin") {
    Ok(_) => {},
@@ -31,12 +30,11 @@ async fn import(auth: JwtAuth) -> HttpResponse {
  })
 }

-#[get("/search")]
+#[get("")]
 async fn get_all(req: HttpRequest) -> HttpResponse {
  let params = web::Query::<GetAllParameters>::from_query(req.query_string()).unwrap();
  let mut filters = QueryFilters::default();
-  filters.name = params.name.clone();
-  filters.icao = params.icao.clone();
+  filters.search = params.search.clone();
  filters.category = params.category.clone();
  filters.bounds = match &params.bounds {
    Some(b) => {
@@ -119,7 +117,7 @@ async fn get_all(req: HttpRequest) -> HttpResponse {
  }
 }

-#[get("/search/{icao}")]
+#[get("/{icao}")]
 async fn get(icao: web::Path<String>) -> HttpResponse {
  match QueryAirport::find(icao.into_inner()) {
    Ok(a) => HttpResponse::Ok().json(Response {
@@ -133,7 +131,7 @@ async fn get(icao: web::Path<String>) -> HttpResponse {
  }
 }

-#[post("/create")]
+#[post("")]
 async fn create(airport: web::Json<InsertAirport>, auth: JwtAuth) -> HttpResponse {
  let _ = match verify_role(&auth, "admin") {
    Ok(_) => {},
@@ -148,8 +146,8 @@ async fn create(airport: web::Json<InsertAirport>, auth: JwtAuth) -> HttpRespons
  }
 }

-#[put("/update/{icao}")]
-async fn update(icao: web::Path<i32>, airport: web::Json<InsertAirport>, auth: JwtAuth) -> HttpResponse {
+#[put("/{icao}")]
+async fn update(icao: web::Path<String>, airport: web::Json<InsertAirport>, auth: JwtAuth) -> HttpResponse {
  let _ = match verify_role(&auth, "admin") {
    Ok(_) => {},
    Err(err) => return ResponseError::error_response(&err)
@@ -163,8 +161,8 @@ async fn update(icao: web::Path<i32>, airport: web::Json<InsertAirport>, auth: J
  }
 }

-#[delete("/remove")]
-async fn remove_all(auth: JwtAuth) -> HttpResponse {
+#[delete("")]
+async fn delete_all(auth: JwtAuth) -> HttpResponse {
  let _ = match verify_role(&auth, "admin") {
    Ok(_) => {},
    Err(err) => return ResponseError::error_response(&err)
@@ -178,8 +176,8 @@ async fn remove_all(auth: JwtAuth) -> HttpResponse {
  }
 }

-#[delete("/remove/{icao}")]
-async fn remove(icao: web::Path<i32>, auth: JwtAuth) -> HttpResponse {
+#[delete("/{icao}")]
+async fn delete(icao: web::Path<String>, auth: JwtAuth) -> HttpResponse {
  let _ = match verify_role(&auth, "admin") {
    Ok(_) => {},
    Err(err) => return ResponseError::error_response(&err)
@@ -199,8 +197,8 @@ pub fn init_routes(config: &mut web::ServiceConfig) {
    .service(get)
    .service(create)
    .service(update)
-    .service(remove)
-    .service(remove_all)
+    .service(delete)
+    .service(delete_all)
    .service(import)
  );
 }
--- a/service/src/metars/model.rs
+++ b/service/src/metars/model.rs
@@ -275,18 +275,19 @@ impl Metar {
        return insert_metars;
    }

-    pub async fn get_all(icaos: String) -> Result<Vec<Self>, ServiceError> {
-        if icaos.is_empty() {
+    pub async fn get_all(icao_string: String) -> Result<Vec<Self>, ServiceError> {
+        if icao_string.is_empty() {
            return Ok(vec![]);
        }

-        let station_icaos: Vec<&str> = icaos.split(',').collect();
-        let mut db_metars = match QueryMetar::get_all(&station_icaos) {
+        let icaos: Vec<&str> = icao_string.split(",").collect();
+
+        let mut db_metars = match QueryMetar::get_all(&icaos) {
            Ok(m) => Self::from_query(m),
            Err(err) => return Err(err)
        };

-        let missing_icaos = Self::get_missing_metar_icaos(&db_metars, &station_icaos);
+        let missing_icaos = Self::get_missing_metar_icaos(&db_metars, &icaos);
        if missing_icaos.is_empty() {
            return Ok(db_metars);
        }
--- a/service/src/metars/routes.rs
+++ b/service/src/metars/routes.rs
@@ -1,6 +1,6 @@
 use crate::{error_handler::ServiceError, db::Metadata};
 use crate::metars::Metar;
-use actix_web::{get, web, HttpResponse};
+use actix_web::{get, web, HttpResponse, HttpRequest};
 use log::error;
 use serde::{Deserialize, Serialize};

@@ -10,23 +10,35 @@ pub struct MetarsResponse {
    pub meta: Metadata
 }

-#[get("metars/{ids}")]
-async fn get_all(ids: web::Path<String>) -> HttpResponse {
-    let airports = match web::block(|| Ok::<_, ServiceError>(async {Metar::get_all(ids.into_inner()).await}))
-        .await
-        .unwrap()
-        .unwrap()
-        .await {
-            Ok(a) => a,
-            Err(err) => {
-                error!("{}", err);
-                return err.to_http_response();
-            }
-        };
-    HttpResponse::Ok().json(MetarsResponse {
-        data: airports,
-        meta: Metadata { page: 0, limit: 0, pages: 0, total: 0 }
-    })
+#[derive(Debug, Serialize, Deserialize)]
+struct GetAllParameters {
+  icaos: Option<String>
+}
+
+#[get("metars")]
+async fn get_all(req: HttpRequest) -> HttpResponse {
+  let params = web::Query::<GetAllParameters>::from_query(req.query_string()).unwrap();
+  let icao_option = params.icaos.clone();
+  let icao_string = match icao_option {
+    Some(i) => i,
+    None => return HttpResponse::UnprocessableEntity().body("Missing icaos parameter")
+  };
+
+  let airports = match web::block(|| Ok::<_, ServiceError>(async {Metar::get_all(icao_string).await}))
+    .await
+    .unwrap()
+    .unwrap()
+    .await {
+      Ok(a) => a,
+      Err(err) => {
+        error!("{}", err);
+        return err.to_http_response();
+      }
+  };
+  HttpResponse::Ok().json(MetarsResponse {
+    data: airports,
+    meta: Metadata { page: 0, limit: 0, pages: 0, total: 0 }
+  })
 }

 pub fn init_routes(config: &mut web::ServiceConfig) {
--- a/ui/src/api/airport.ts
+++ b/ui/src/api/airport.ts
@@ -1,22 +1,21 @@
-import { AirportOrderField, Bounds, GetAirportResponse, GetAirportsResponse } from './airport.types';
-import { getRequest, deleteRequest } from '.';
+import { Airport, AirportOrderField, Bounds, GetAirportResponse, GetAirportsResponse } from './airport.types';
+import { getRequest, deleteRequest, postRequest, putRequest } from '.';

 interface GetAirportProps {
  icao: string;
 }

 export async function getAirport({ icao }: GetAirportProps): Promise<GetAirportResponse> {
-  const response = await getRequest(`airports/search/${icao}`);
+  const response = await getRequest(`airports/${icao}`);
  return response?.json() || { data: undefined };
 }

 interface GetAirportsProps {
  bounds?: Bounds;
  category?: string;
-  name?: string;
+  search?: string;
  order_field?: AirportOrderField;
  order_by?: 'asc' | 'desc';
-  icao?: string;
  page?: number;
  limit?: number;
 }
@@ -24,20 +23,18 @@ interface GetAirportsProps {
 export async function getAirports({
  bounds,
  category,
-  name,
-  icao,
+  search,
  order_field,
  order_by,
  limit = 10,
  page = 1
 }: GetAirportsProps): Promise<GetAirportsResponse> {
-  const response = await getRequest('airports/search', {
+  const response = await getRequest('airports', {
    bounds: bounds
      ? `${bounds?.northEast.lat},${bounds?.northEast.lon},${bounds?.southWest.lat},${bounds?.southWest.lon}`
      : undefined,
    category: category ?? undefined,
-    name: name ?? undefined,
-    icao: icao ?? undefined,
+    search: search ?? undefined,
    order_field: order_field ?? undefined,
    order_by: order_by ?? undefined,
    limit,
@@ -49,14 +46,24 @@ export async function getAirports({
 export async function removeAirport({ icao }: { icao?: string }): Promise<any> {
  let response
  if (icao) {
-    response = await deleteRequest(`airports/remove/${icao}`);
+    response = await deleteRequest(`airports/${icao}`);
  } else {
-    response = await deleteRequest('airports/remove');
+    response = await deleteRequest('airports');
  }
  return response.status == 204;
 }

-export async function importAirports(): Promise<any> {
-  const response = await getRequest('airports/import');
+export async function createAirport({ airport }: { airport: Airport }): Promise<any> {
+  const response = await postRequest(`airports`, airport);
+  return response?.json() || { data: undefined };
+}
+
+export async function updateAirport({ airport }: { airport: Airport }): Promise<any> {
+  const response = await putRequest(`airports`, airport);
+  return response?.json() || { data: undefined };
+}
+
+export async function importAirports(): Promise<any> {
+  const response = await postRequest('airports/import');
  return response?.json() || { data: undefined };
 }
--- a/ui/src/api/index.ts
+++ b/ui/src/api/index.ts
@@ -41,6 +41,28 @@ export async function postRequest(endpoint: string, body?: any, options?: PostOp
  return response;
 }

+export async function putRequest(endpoint: string, body?: any, options?: PostOptions): Promise<Response> {
+  const url = `${baseURL}/${endpoint}`;
+  let response;
+  if (body && (!options?.type || options.type === 'json')) {
+    response = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      credentials: 'include',
+      body: JSON.stringify(body)
+    });
+  } else {
+    response = await fetch(url, {
+      method: 'PUT',
+      credentials: 'include',
+      body
+    });
+  }
+  return response;
+}
+
 export async function deleteRequest(endpoint: string): Promise<Response> {
  const url = `${baseURL}/${endpoint}`;
  const response = await fetch(url, {
--- a/ui/src/api/metar.ts
+++ b/ui/src/api/metar.ts
@@ -10,6 +10,6 @@ export async function getMetars(icaos: string[]): Promise<GetMetarsResponse> {
    return { data: [] };
  }
  const stationICAOs: string = icaos.map((icao) => icao).join(',');
-  const response = await getRequest(`metars/${stationICAOs}`, {});
+  const response = await getRequest(`metars`, { icaos: stationICAOs });
  return response?.json() || { data: [] };
 }
--- a/ui/src/app/admin/page.tsx
+++ b/ui/src/app/admin/page.tsx
@@ -3,26 +3,31 @@
 import { Airport } from "@/api/airport.types";
 import AirportTablePanel from "@/components/Admin/AirportTablePanel";
 import CreateAirportPanel from "@/components/Admin/CreateAirportPanel";
-import { Container, Grid } from "@mantine/core";
+import UpdateAirportModal from "@/components/Admin/UpdateAirportModal";
+import { Container, Grid, SimpleGrid } from "@mantine/core";
 import { useEffect, useState } from "react";

 export default function Page() {
  const [airport, setAirport] = useState<Airport | undefined>(undefined);

  useEffect(() => {
-    console.log(airport);
  }, [airport]);

-  return <Container fluid>
-    <Grid p={'lg'}>
-    <Grid.Col span={12}>
-        <AirportTablePanel setAirport={setAirport} />
-      </Grid.Col>
-    <Grid.Col span={12}>
-      <CreateAirportPanel airport={airport} setAirport={setAirport} />
-    </Grid.Col>
-    </Grid>
-  </Container>;
+  return (
+    <Container fluid>
+      <SimpleGrid cols={{ base: 1, xs: 1 }} spacing={'md'}>
+        <Grid p={'lg'}>
+          <Grid.Col span={12}>
+              <AirportTablePanel setAirport={setAirport} />
+            </Grid.Col>
+          <Grid.Col span={12}>
+            <CreateAirportPanel />
+          </Grid.Col>
+        </Grid>
+      </SimpleGrid>
+      <UpdateAirportModal airport={airport} setAirport={setAirport} />
+    </Container>
+  );
 }


--- a/ui/src/components/Admin/AirportTablePanel.tsx
+++ b/ui/src/components/Admin/AirportTablePanel.tsx
@@ -1,6 +1,6 @@
 import { getAirports, importAirports, removeAirport } from "@/api/airport";
-import { Airport, AirportCategory, AirportOrderField, airportCategoryToText } from "@/api/airport.types";
-import { Text, Button, Card, Group, Pagination, ScrollArea, Table, TextInput, rem, UnstyledButton, Center } from "@mantine/core";
+import { Airport, airportCategoryToText } from "@/api/airport.types";
+import { Text, Button, Card, Group, Pagination, Table, TextInput, rem, UnstyledButton, Center, Flex, Container, Grid, Space } from "@mantine/core";
 import { HiChevronUp, HiChevronDown, HiSelector } from "react-icons/hi";
 import { useEffect, useState } from "react";
 import { CiSearch } from "react-icons/ci";
@@ -14,6 +14,7 @@ export default function AirportTablePanel({ setAirport }: { setAirport: (airport

  async function getAirportData() {
    const response = await getAirports({
+      search,
      page,
      limit: 100
    });
@@ -45,14 +46,12 @@ export default function AirportTablePanel({ setAirport }: { setAirport: (airport
      <Table.Td>{airport.gps_code}</Table.Td>
      <Table.Td>{airport.iata_code}</Table.Td>
      <Table.Td>{airport.local_code}</Table.Td>
-      <Table.Td>{airport.point.x}</Table.Td>
-      <Table.Td>{airport.point.y}</Table.Td>
    </Table.Tr>
  ))

  return <Card shadow={'sm'} padding={'lg'} radius={'md'} withBorder>
    <TextInput
-      placeholder="Search by ICAO"
+      placeholder="Search..."
      mb="md"
      leftSection={<CiSearch style={{ width: rem(16), height: rem(16) }} />}
      value={search}
@@ -72,28 +71,36 @@ export default function AirportTablePanel({ setAirport }: { setAirport: (airport
            <Table.Th>GPS Code</Table.Th>
            <Table.Th>IATA Code</Table.Th>
            <Table.Th>Local Code</Table.Th>
-            <Table.Th>Latitude</Table.Th>
-            <Table.Th>Longitude</Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>{rows}</Table.Tbody>
      </Table>
    </Table.ScrollContainer>
-    <Group>
-      <Pagination value={page} total={totalPages} onChange={setPage} />
-      <PanelButton onClick={async () => {
-        await importAirports();
-        await getAirportData();
-      }}>
-        Import
-      </PanelButton>
-      <PanelButton color={'red'} onClick={async () => {
-        await removeAirport({});
-        await getAirportData();
-      }}>
-        Remove All
-      </PanelButton>
-    </Group>
+    <Grid mt={'md'} justify={'space-between'}>
+      <Grid.Col span={10}>
+        <Pagination value={page} total={totalPages} onChange={setPage} />
+      </Grid.Col>
+      <Grid.Col span={2}>
+        <Flex justify={'end'}>
+          <Space mr={'sm'}>
+            <PanelButton onClick={async () => {
+              await importAirports();
+              await getAirportData();
+            }}>
+              Import
+            </PanelButton>
+          </Space>
+          <Space>
+            <PanelButton color={'red'} onClick={async () => {
+              await removeAirport({});
+              await getAirportData();
+            }}>
+              Remove All
+            </PanelButton>
+          </Space>
+        </Flex>
+      </Grid.Col>
+    </Grid>
  </Card>
 }

@@ -103,7 +110,6 @@ function PanelButton({ children, color = 'blue', onClick }: {children: any, colo
    loading={loading}
    variant='light'
    color={color}
-    mt={'md'}
    radius={'md'}
    onClick={() => {
      setLoading(true);
--- a/ui/src/components/Admin/CreateAirportPanel.tsx
+++ b/ui/src/components/Admin/CreateAirportPanel.tsx
@@ -1,9 +1,10 @@
+import { createAirport } from "@/api/airport";
 import { Airport, AirportCategory } from "@/api/airport.types";
 import { Card, TextInput, Select, Group, Flex, Space, Button } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useEffect } from "react";

-export default function CreateAirportPanel({ airport, setAirport } : { airport?: Airport, setAirport: (airport: Airport | undefined) => void }) {
+export default function CreateAirportPanel() {
  const form = useForm<Airport>({
    initialValues: {
      icao: '',
@@ -25,20 +26,12 @@ export default function CreateAirportPanel({ airport, setAirport } : { airport?:
    }
  });

-  useEffect(() => {
-    console.log(airport);
-    if (airport) {
-      form.setValues(airport);
-    }
-  }, [airport]);
-
  return <Card shadow={'sm'} padding={'lg'} radius={'md'} withBorder>
    Create Airport
-    <form onSubmit={form.onSubmit((values) => {
-      if (airport) {
-        console.log('update');
-      } else {
-        console.log('create');
+    <form onSubmit={form.onSubmit(async (values) => {
+      const response = await createAirport({ airport: values });
+      if (response.success) {
+        form.reset();
      }
    })}>
      <TextInput
@@ -136,7 +129,7 @@ export default function CreateAirportPanel({ airport, setAirport } : { airport?:
            color='blue'
            radius={'md'}
          >
-            {airport ? 'Update' : 'Create'}
+            Create
          </Button>
        </Space>
        <Space>
@@ -145,10 +138,7 @@ export default function CreateAirportPanel({ airport, setAirport } : { airport?:
            variant='light'
            color='red'
            radius={'md'}
-            onClick={() => {
-              form.reset();
-              setAirport(undefined);
-            }}
+            onClick={() => form.reset()}
          >
            Reset
          </Button>
--- a/ui/src/components/Admin/UpdateAirportModal.tsx
+++ b/ui/src/components/Admin/UpdateAirportModal.tsx
@@ -0,0 +1,148 @@
+import { removeAirport, updateAirport } from "@/api/airport";
+import { Airport, AirportCategory } from "@/api/airport.types";
+import { Button, Container, Flex, Group, Modal, Paper, Select, TextInput, Title } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { useEffect } from "react";
+
+export default function UpdateAirportModal({ airport, setAirport }: { airport: Airport | undefined, setAirport: (airport: Airport | undefined) => void}) {
+  const form = useForm<Airport>({
+    initialValues: {
+      icao: airport?.icao || '',
+      category: airport?.category || AirportCategory.SMALL,
+      full_name: airport?.full_name || '',
+      elevation_ft: airport?.elevation_ft || 0,
+      continent: airport?.continent || '',
+      iso_country: airport?.iso_country || '',
+      iso_region: airport?.iso_region || '',
+      municipality:  airport?.municipality || '',
+      gps_code: airport?.gps_code || '',
+      iata_code: airport?.iata_code || '',
+      local_code: airport?.local_code || '',
+      point: {
+        x: airport?.point.x || 0,
+        y: airport?.point.y || 0,
+        srid: airport?.point.srid || 4326
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (airport) {
+      form.setValues(airport);
+    }
+  }, [airport]);
+
+  return (
+    <Modal opened={airport !== undefined} onClose={() => setAirport(undefined)} withCloseButton={false} size={'50%'}>
+      <Container>
+        <Title ta='center'>Update Airport</Title>
+        <Paper withBorder p={30} mt={30} radius={'md'} shadow={'sm'}>
+          <form onSubmit={form.onSubmit(async (values) => {
+            const response = await updateAirport({ airport: values });
+            if (response.success) {
+              setAirport(undefined);
+            }
+          })}>
+            <TextInput
+              required
+              label='ICAO'
+              placeholder='KHEF'
+              {...form.getInputProps('icao')}
+            />
+            <Select
+              required
+              label='Category'
+              placeholder='Select category'
+              data={[
+                { value: AirportCategory.SMALL, label: 'Small' },
+                { value: AirportCategory.MEDIUM, label: 'Medium' },
+                { value: AirportCategory.LARGE, label: 'Large' },
+              ]}
+              {...form.getInputProps('category')}
+            />
+            <TextInput
+              required
+              label='Full Name'
+              placeholder='Manassas Regional Airport/Harry P. Davis Field'
+              {...form.getInputProps('full_name')}
+            />
+            <TextInput
+              required
+              label='Elevation (ft)'
+              placeholder='192'
+              {...form.getInputProps('elevation_ft')}
+            />
+            <Group>
+              <TextInput
+                required
+                label='Continent'
+                placeholder='NA'
+                {...form.getInputProps('continent')}
+              />
+              <TextInput
+                required
+                label='ISO Country'
+                placeholder='US'
+                {...form.getInputProps('iso_country')}
+              />
+              <TextInput
+                required
+                label='ISO Region'
+                placeholder='US-VA'
+                {...form.getInputProps('iso_region')}
+              />
+              <TextInput
+                required
+                label='Municipality'
+                placeholder='Manassas'
+                {...form.getInputProps('municipality')}
+              />
+            </Group>
+            <Group>
+              <TextInput
+                required
+                label='GPS Code'
+                placeholder='KHEF'
+                {...form.getInputProps('gps_code')}
+              />
+              <TextInput
+                required
+                label='IATA Code'
+                placeholder='HEF'
+                {...form.getInputProps('iata_code')}
+              />
+              <TextInput
+                required
+                label='Local Code'
+                placeholder='HEF'
+                {...form.getInputProps('local_code')}
+              />
+            </Group>
+            <Group>
+              <TextInput
+                required
+                label='Latitude'
+                placeholder='38.72140121'
+                {...form.getInputProps('point.x')}
+              />
+              <TextInput
+                required
+                label='Longitude'
+                placeholder='-77.51540375'
+                {...form.getInputProps('point.y')}
+              />
+            </Group>
+            <Flex justify={'end'} mt={'sm'}>
+              <Button type='submit' variant='light'>Update Airport</Button>
+              {airport && <Button variant='light' color='red' ml={10} onClick={async () => {
+                if (await removeAirport({icao: airport.icao})) {
+                  setAirport(undefined);
+                }
+              }}>Delete</Button>}
+            </Flex>
+          </form>
+        </Paper>
+      </Container>
+    </Modal>
+  );
+}
--- a/ui/src/components/Header/index.tsx
+++ b/ui/src/components/Header/index.tsx
@@ -53,7 +53,7 @@ export default function Header() {

  async function onChange(value: string) {
    setSearchValue(value);
-    const airportData = await getAirports({ name: value, icao: value });
+    const airportData = await getAirports({ search: value });
    setAirports(
      airportData.data.map((airport) => ({
        key: airport.icao,