feat(new tool): Airport and Airline lookup

Author: sharevb

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     '404.page': typeof import('./src/pages/404.page.vue')['default']
     About: typeof import('./src/pages/About.vue')['default']
+    AirCodes: typeof import('./src/tools/air-codes/air-codes.vue')['default']
     App: typeof import('./src/App.vue')['default']
     AsciiTextDrawer: typeof import('./src/tools/ascii-text-drawer/ascii-text-drawer.vue')['default']
     'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
@@ -138,12 +139,14 @@ declare module '@vue/runtime-core' {
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
@@ -159,6 +162,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
+    SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']

package.json

@@ -47,6 +47,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/head": "^1.0.0",
     "@vueuse/router": "^10.0.0",
+    "aircodes": "^1.3.16",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",

pnpm-lock.yaml

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { findAirline, findAirport } from 'aircodes';
+import SpanCopyable from '@/components/SpanCopyable.vue';
+
+const airlineQuery = ref('');
+const airportQuery = ref('');
+const resultAirline = computed(() => airlineQuery.value === '' ? [] : findAirline(airlineQuery.value));
+const resultAirport = computed(() => airportQuery.value === '' ? [] : findAirport(airportQuery.value));
+</script>
+
+<template>
+  <div>
+    <c-card title="Airline search" mb-1>
+      <n-space>
+        <n-form-item label="Airline query">
+          <n-input v-model:value="airlineQuery" />
+        </n-form-item>
+      </n-space>
+
+      <n-divider />
+
+      <div v-for="airline in resultAirline" :key="airline.iata">
+        <n-form-item label="IATA">
+          <SpanCopyable :value="airline.iata" />
+        </n-form-item>
+        <n-form-item label="ICAO">
+          <SpanCopyable :value="airline.icao" />
+        </n-form-item>
+        <n-form-item label="Name">
+          <SpanCopyable :value="airline.name" />
+        </n-form-item>
+        <n-form-item label="Logo">
+          <img width="100" :alt="airline.name" :src="airline.logo">
+        </n-form-item>
+      </div>
+    </c-card>
+
+    <c-card title="Airport search">
+      <n-space>
+        <n-form-item label="Airport query">
+          <n-input v-model:value="airportQuery" />
+        </n-form-item>
+      </n-space>
+
+      <n-divider />
+
+      <div v-for="airport in resultAirport" :key="airport.iata">
+        <n-form-item label="IATA">
+          <SpanCopyable :value="airport.iata" />
+        </n-form-item>
+        <n-form-item label="ICAO">
+          <SpanCopyable :value="airport.icao" />
+        </n-form-item>
+        <n-form-item label="Name">
+          <SpanCopyable :value="airport.name" />
+        </n-form-item>
+        <n-form-item label="City">
+          <SpanCopyable :value="airport.city" />
+        </n-form-item>
+        <n-form-item label="State">
+          <SpanCopyable :value="airport.state" />
+        </n-form-item>
+        <n-form-item label="Country">
+          <SpanCopyable :value="airport.country" />
+        </n-form-item>
+      </div>
+    </c-card>
+  </div>
+</template>

src/tools/air-codes/air-codes.vue

@@ -0,0 +1,12 @@
+import { Plane } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Air Codes',
+  path: '/air-codes',
+  description: 'Get Airport and Airline info from name, ICAO code or IATA code',
+  keywords: ['airport', 'airline', 'air', 'plane', 'icao', 'iata'],
+  component: () => import('./air-codes.vue'),
+  icon: Plane,
+  createdAt: new Date('2024-04-20'),
+});

src/tools/air-codes/index.ts

@@ -14,6 +14,7 @@ import { tool as ulidGenerator } from './ulid-generator';
 import { tool as ibanValidatorAndParser } from './iban-validator-and-parser';
 import { tool as stringObfuscator } from './string-obfuscator';
 import { tool as textDiff } from './text-diff';
+import { tool as airCodes } from './air-codes';
 import { tool as emojiPicker } from './emoji-picker';
 import { tool as passwordStrengthAnalyser } from './password-strength-analyser';
 import { tool as yamlToToml } from './yaml-to-toml';
@@ -176,7 +177,11 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Data',
-    components: [phoneParserAndFormatter, ibanValidatorAndParser],
+    components: [
+      phoneParserAndFormatter,
+      ibanValidatorAndParser,
+      airCodes,
+    ],
   },
 ];