Skip to content

Commit

Permalink
feature: create table logic moved to Classes
Browse files Browse the repository at this point in the history
  • Loading branch information
fm-anderson committed Aug 11, 2023
1 parent b71afda commit ca448c1
Show file tree
Hide file tree
Showing 10 changed files with 233 additions and 187 deletions.
55 changes: 42 additions & 13 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,31 +14,51 @@
<header id="navbar" class="navbar bg-base-200">
<div class="flex-1 gap-1">
<img class="w-7" src="./src/assets/images/logo.svg" />
<p class="text-xl font-semibold">Flight Checker</p>
</div>
<div class="flex-none gap-2">
<button id="clear-button" class="btn btn-outline">Clear</button>
<a href="/" class="no-underline">
<p class="text-xl font-semibold text-base-content">
Flight Checker
</p>
</a>
</div>
<button data-toggle-theme="dark,dracula" data-act-class="ACTIVECLASS">
<label class="swap-rotate swap">
<input type="checkbox" />
<svg
class="swap-on pointer-events-none h-10 w-10 fill-current"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
/>
</svg>
<svg
class="swap-off pointer-events-none h-10 w-10 fill-current"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
/>
</svg>
</label>
</button>
</header>

<main id="content" class="w-full max-w-[100vw] px-8 py-8 lg:max-w-[80%]">
<div class="grid grid-cols-2 gap-8 md:grid-cols-1">
<div id="dep-container"></div>
<div id="arr-container"></div>
</div>
<div id="hero" class="grid grid-cols-2">
<div>
<h1
class="text-center text-3xl font-bold md:text-start lg:text-6xl"
>
Check Flight Status
<span class="text-accent-focus">From Home!</span>
<span class="text-accent">From Home!</span>
</h1>
<p class="py-6 text-start">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Consectetur illum quibusdam dolor consequuntur ipsam officia
reiciendis assumenda molestias fugiat, fugit optio natus
doloremque non hic magnam cumque suscipit eum tempora!
Instantly access real-time flight updates for global airports.
Whether you're planning a trip, picking up a loved one, or just
staying informed, get accurate, up-to-the-minute details all from
the comfort of your home.
</p>
</div>
<div class="flex justify-end">
Expand Down Expand Up @@ -72,10 +92,19 @@
See flights
</button>
</form>
<div class="ml-2 flex-none gap-2">
<button id="clear-button" class="btn btn-accent hidden">
Clear
</button>
</div>
</div>
<div class="ml-1 mt-3 flex gap-1 align-middle text-secondary">
<p id="invalid-data" class="justify-start font-semibold"></p>
</div>
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
<div id="dep-container"></div>
<div id="arr-container"></div>
</div>
</main>

<footer id="footer" class="footer items-center bg-base-200 p-4">
Expand Down
13 changes: 12 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"vite": "^2.4.4"
},
"dependencies": {
"autocompleter": "^9.0.1"
"autocompleter": "^9.0.1",
"theme-change": "^2.5.0"
}
}
35 changes: 35 additions & 0 deletions src/components/ArrivalsFlightsList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { fetchArrFlights } from "../js/api";
import { heroDiv, template } from "../js/const";
import FlightsList from "./FlightsList";

export default class ArrivalFlightsList extends FlightsList {
async createList(airportCode) {
this.showClearButton();
heroDiv.classList.add("hidden");

const flights = await fetchArrFlights(airportCode);
const validFlights = await this.getValidFlights(flights);
const sortedFlights = this.sortFlights(validFlights);

await this.fetchAirlines();

const table = document.importNode(template.content, true);
const tableDiv = table.querySelector("div");
tableDiv.id = "arr-table";
const title = table.querySelector("#table-title");
title.textContent = "arrivals";
const tableBody = table.querySelector("#table-content");

for (let flight of sortedFlights) {
if (this.flightCounter >= 50) {
break;
}
const row = this.createFlightRow(flight);
tableBody.appendChild(row);
this.flightCounter++;
}

const tableContainer = document.querySelector("#arr-container");
tableContainer.appendChild(table);
}
}
34 changes: 34 additions & 0 deletions src/components/DepartureFlightsList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { fetchDepFlights } from "../js/api";
import { heroDiv, template } from "../js/const";
import FlightsList from "./FlightsList";

export default class DepartureFlightsList extends FlightsList {
async createList(airportCode) {
heroDiv.classList.add("hidden");

const flights = await fetchDepFlights(airportCode);
const validFlights = await this.getValidFlights(flights);
const sortedFlights = this.sortFlights(validFlights);

await this.fetchAirlines();

const table = document.importNode(template.content, true);
const tableDiv = table.querySelector("div");
tableDiv.id = "dep-table";
const title = table.querySelector("#table-title");
title.textContent = "departure";
const tableBody = table.querySelector("#table-content");

for (let flight of sortedFlights) {
if (this.flightCounter >= 50) {
break;
}
const row = this.createFlightRow(flight);
tableBody.appendChild(row);
this.flightCounter++;
}

const tableContainer = document.querySelector("#dep-container");
tableContainer.appendChild(table);
}
}
79 changes: 79 additions & 0 deletions src/components/FlightsList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { fetchAirlines } from "../js/api";
import { resFields } from "../js/const";
import { parseTime } from "../js/helpers";

export default class FlightsList {
constructor() {
this.flightCounter = 0;
this.airlinesMap = {};
}

async fetchAirlines() {
const allAirlines = await fetchAirlines();
allAirlines.forEach((airline) => {
this.airlinesMap[airline.iata_code] = airline.name;
});
}

async getValidFlights(flights) {
return flights.filter((flight) => {
return resFields.every(
(field) => flight[field] !== null && flight[field] !== undefined
);
});
}

showClearButton() {
const clearButton = document.querySelector("#clear-button");
if (clearButton) {
clearButton.classList.remove("hidden");
}
}

sortFlights(flights) {
return flights.sort((a, b) => {
const arrivalTimeA = new Date(a.arr_time).getTime();
const arrivalTimeB = new Date(b.arr_time).getTime();
return arrivalTimeA - arrivalTimeB;
});
}

createFlightRow(flight) {
const row = document.createElement("tr");
const timeData = document.createElement("td");

if (flight.arr_delayed) {
const delayedTimeSpan = document.createElement("span");
delayedTimeSpan.className = "text-red-600 line-through";
delayedTimeSpan.textContent = parseTime(new Date(flight.arr_time));
timeData.appendChild(delayedTimeSpan);

const estimatedTimeText = document.createTextNode(
` ${parseTime(new Date(flight.arr_estimated))}`
);
timeData.appendChild(estimatedTimeText);
} else {
timeData.textContent = parseTime(new Date(flight.arr_time));
}
row.appendChild(timeData);

const airlineData = document.createElement("td");
const airlineName = this.airlinesMap[flight.airline_iata];
airlineData.textContent = airlineName;
row.appendChild(airlineData);

const flightDataElem = document.createElement("td");
flightDataElem.textContent = flight.flight_iata;
row.appendChild(flightDataElem);

const originData = document.createElement("td");
originData.textContent = flight.dep_iata;
row.appendChild(originData);

const statusData = document.createElement("td");
statusData.textContent = flight.status;
row.appendChild(statusData);

return row;
}
}
11 changes: 7 additions & 4 deletions src/js/api.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const baseUrl = "https://airlabs.co/api/v9";
const apiKey = import.meta.env.VITE_API_KEY;
// jevimir167@royalka.com
// vhwNXU!kdwE1

export async function fetchLocation() {
Expand Down Expand Up @@ -71,14 +72,16 @@ export async function fetchArrFlights(airport) {
}
}

export async function fetchAirlineName(airline) {
export async function fetchAirlines(country) {
try {
const response = await fetch(
`${baseUrl}/airlines?iata_code=${airline}&api_key=${apiKey}`
`${baseUrl}/airlines?api_key=${apiKey}&country_code=${country}`
);
let data = await response.json();
const airlineName = data.response[0].name;
return airlineName;
const validAirlines = data.response.filter(
(airline) => airline.iata_code !== null && airline.name !== null
);
return validAirlines;
} catch (err) {
console.error("Error fetching flights: ", err);
}
Expand Down
1 change: 1 addition & 0 deletions src/js/const.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export const heroDiv = document.querySelector("#hero");
export const template = document.querySelector("#flights-table");
export const clearButton = document.querySelector("#clear-button");
export const mainContent = document.querySelector("#content");
export const themeSelector = document.querySelector("#theme-selector");
export const resFields = [
"arr_time",
"airline_iata",
Expand Down
Loading

0 comments on commit ca448c1

Please sign in to comment.