skyline/FlightTracking.js at main · viser9/skyline · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React, { useState } from "react";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import Particle from "./Particle";
import { blue } from "@mui/material/colors";

const api_key = "9dc82e7a-00ab-4dc0-bc61-6f077199620d";
const api_base = "https://airlabs.co/api/v9/";

const FlightTracking = () => {
  const [depIata, setDepIata] = useState("");
  const [arrIata, setArrIata] = useState("");
  const [flights, setFlights] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleSearch = async () => {
    setLoading(true);

    try {
      const queryString = `flights?_view=array&_fields=hex,flag,lat,lng,dir,alt&dep_iata=${depIata}&arr_iata=${arrIata}&api_key=${api_key}`;
      const response = await axios.get(`${api_base}${queryString}`);

      console.log("Flight details:", response.data);

      setFlights(response.data);
    } catch (error) {
      console.error("Error fetching flight data:", error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="container mt-4 text-white">
      <h1 className="text-center" style={{
        marginTop:'10rem',
        fontSize:'3rem',
        color:'rgb(9, 171, 171)',
        fontWeight:'700'
      }}>Flight Tracking</h1>
      <div className="row">
        <div className="col-md-4">
          <label className="form-label" style={{

          }}>

            <input
              type="text"
              className="form-control"
              value={depIata}
            placeholder="Departure IATA code"
              onChange={(e) => setDepIata(e.target.value)}
            />
          </label>
        </div>
        <div className="col-md-4">
          <label className="form-label">

            <input
              type="text"
              className="form-control"
              placeholder="Arrival IATA"
              value={arrIata}
              onChange={(e) => setArrIata(e.target.value)}
            />
          </label>
        </div>
        <div className="col-md-4 d-flex align-items-end">
          <button
            className="btn btn-primary w-100"
            onClick={handleSearch}
            disabled={loading}
          >
            {loading ? "Searching..." : "Search Flights"}
          </button>
        </div>
      </div>

      <table className="table mt-4 text-white">
        <thead>
          <tr>
            <th>Hex</th>
            <th>Flag</th>
            <th>Latitude</th>
            <th>Longitude</th>
            <th>Direction</th>
            <th>Altitude</th>
          </tr>
        </thead>
        <tbody>
          {flights.map((flight, index) => (
            <tr key={index}>
              <td>{flight[0]}</td>
              <td>{flight[1]}</td>
              <td>{flight[2]}</td>
              <td>{flight[3]}</td>
              <td>{flight[4]}</td>
              <td>{flight[5]}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <Particle></Particle>
    </div>
  );
};

export default FlightTracking;