├── .nvmrc
├── .nowignore
├── public
├── logo.png
├── social.png
├── favicon.ico
├── apple-icon.png
├── logo-small.png
├── robots.txt
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-96x96.png
├── ms-icon-70x70.png
├── apple-icon-57x57.png
├── apple-icon-60x60.png
├── apple-icon-72x72.png
├── apple-icon-76x76.png
├── ms-icon-144x144.png
├── ms-icon-150x150.png
├── ms-icon-310x310.png
├── android-icon-36x36.png
├── android-icon-48x48.png
├── android-icon-72x72.png
├── android-icon-96x96.png
├── apple-icon-114x114.png
├── apple-icon-120x120.png
├── apple-icon-144x144.png
├── apple-icon-152x152.png
├── apple-icon-180x180.png
├── android-icon-144x144.png
├── android-icon-192x192.png
├── apple-icon-precomposed.png
├── browserconfig.xml
├── sitemap.xml
└── manifest.json
├── .npmrc
├── .vscode
└── settings.json
├── tailwind.config.cjs
├── src
├── consts.js
├── pages
│ ├── AirportPage
│ │ ├── windDirectionAnimation.css
│ │ ├── WindDirectionSvg.svg
│ │ ├── Compass.js
│ │ ├── AirportRunwaysMap.js
│ │ ├── WindDirectionBackground.js
│ │ ├── AirportHeader.js
│ │ ├── AirportPage.js
│ │ ├── AirportRunways.js
│ │ └── AirportRunwayCard.js
│ ├── TermsPage.js
│ ├── SelectAirportPage
│ │ └── SelectAirportPage.js
│ ├── ContactsPage.js
│ └── CookiesPolicyPage.js
├── index.js
├── setupTests.js
├── components
│ ├── ScrollToTop.js
│ ├── DebugDot.js
│ ├── PageLayout.js
│ ├── ScrollManagement.js
│ ├── Loading
│ │ ├── Loading.css
│ │ └── Loading.js
│ ├── CookiesConsent
│ │ ├── useCookiesConsent.js
│ │ └── CookiesConsent.js
│ ├── Footer.js
│ ├── RunwaysBackground.js
│ ├── RunwaysMap
│ │ ├── RunwayIdent.js
│ │ ├── Runway.js
│ │ ├── RunwaysMap.js
│ │ └── RunwayBlock.js
│ ├── NavBar.js
│ └── AirportSelectInput.js
├── hooks
│ ├── useStickyState.js
│ ├── useAirportFetch.js
│ └── useCalculateActiveRunways.js
├── AirportContext.js
├── index.css
├── helpers.js
├── App.js
└── serviceWorker.js
├── postcss.config.cjs
├── server
├── Dockerfile
├── helpers
│ └── downloadData.cjs
├── main.cjs
└── api
│ └── runway.cjs
├── nginx.conf
├── .gitignore
├── Dockerfile
├── vite.config.js
├── package.json
├── index.html
└── README.md
/.nvmrc:
--------------------------------------------------------------------------------
1 | 20.13.1
--------------------------------------------------------------------------------
/.nowignore:
--------------------------------------------------------------------------------
1 | data
--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/logo.png
--------------------------------------------------------------------------------
/public/social.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/social.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon.png
--------------------------------------------------------------------------------
/public/logo-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/logo-small.png
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | audit=false
2 | legacy-peer-deps=true
3 | force=true
4 | registry=https://registry.npmjs.org/
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "git.ignoreLimitWarning": true,
3 | "prettier.printWidth": 80
4 | }
5 |
--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/favicon-16x16.png
--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/favicon-32x32.png
--------------------------------------------------------------------------------
/public/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/favicon-96x96.png
--------------------------------------------------------------------------------
/public/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/ms-icon-70x70.png
--------------------------------------------------------------------------------
/public/apple-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon-57x57.png
--------------------------------------------------------------------------------
/public/apple-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon-60x60.png
--------------------------------------------------------------------------------
/public/apple-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon-72x72.png
--------------------------------------------------------------------------------
/public/apple-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon-76x76.png
--------------------------------------------------------------------------------
/public/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/ms-icon-144x144.png
--------------------------------------------------------------------------------
/public/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/ms-icon-150x150.png
--------------------------------------------------------------------------------
/public/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/ms-icon-310x310.png
--------------------------------------------------------------------------------
/public/android-icon-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/android-icon-36x36.png
--------------------------------------------------------------------------------
/public/android-icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/android-icon-48x48.png
--------------------------------------------------------------------------------
/public/android-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/android-icon-72x72.png
--------------------------------------------------------------------------------
/public/android-icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/android-icon-96x96.png
--------------------------------------------------------------------------------
/public/apple-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon-114x114.png
--------------------------------------------------------------------------------
/public/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon-120x120.png
--------------------------------------------------------------------------------
/public/apple-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon-144x144.png
--------------------------------------------------------------------------------
/public/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon-152x152.png
--------------------------------------------------------------------------------
/public/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon-180x180.png
--------------------------------------------------------------------------------
/public/android-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/android-icon-144x144.png
--------------------------------------------------------------------------------
/public/android-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/android-icon-192x192.png
--------------------------------------------------------------------------------
/public/apple-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/epranka/runway-app/HEAD/public/apple-icon-precomposed.png
--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
3 | };
4 |
--------------------------------------------------------------------------------
/src/consts.js:
--------------------------------------------------------------------------------
1 | export const DEFAULT_METAR_PROVIDER = "aviationweather";
2 | export const METAR_PROVIDER_STORAGE_KEY = "metarProvider";
3 |
--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
6 | },
7 | };
8 |
--------------------------------------------------------------------------------
/src/pages/AirportPage/windDirectionAnimation.css:
--------------------------------------------------------------------------------
1 | @keyframes animateBackground {
2 | from {
3 | background-position-y: 0;
4 | }
5 | to {
6 | background-position-y: 160px;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 | import "./index.css";
5 |
6 | ReactDOM.render(
7 |
8 | ,
10 | document.getElementById("root")
11 | );
12 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 | #ffffff
2 |
--------------------------------------------------------------------------------
/src/components/ScrollToTop.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useLocation } from "react-router-dom";
3 |
4 | const ScrollToTop = () => {
5 | const { pathname } = useLocation();
6 |
7 | useEffect(() => {
8 | window.scrollTo(0, 0);
9 | }, [pathname]);
10 |
11 | return null;
12 | };
13 |
14 | export default ScrollToTop;
15 |
--------------------------------------------------------------------------------
/nginx.conf:
--------------------------------------------------------------------------------
1 | server {
2 | listen 80;
3 |
4 | location / {
5 | root /usr/share/nginx/html;
6 | index index.html index.htm;
7 | try_files $uri $uri/ /index.html;
8 | }
9 |
10 | error_page 500 502 503 504 /50x.html;
11 |
12 | location = /50x.html {
13 | root /usr/share/nginx/html;
14 | }
15 |
16 | }
17 |
--------------------------------------------------------------------------------
/server/helpers/downloadData.cjs:
--------------------------------------------------------------------------------
1 | const request = require('request');
2 |
3 | const downloadFile = (url) => {
4 | return new Promise((resolve, reject) => {
5 | request.get(url, (error, _response, body) => {
6 | if (error) return reject(error);
7 | return resolve(body);
8 | });
9 | });
10 | };
11 |
12 | module.exports = downloadFile;
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /dist
13 |
14 | # misc
15 | .DS_Store
16 | .env
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 |
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
26 | .now
--------------------------------------------------------------------------------
/src/components/DebugDot.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function DebugDot(props) {
4 | const { x, y, ident } = props;
5 |
6 | return (
7 |
8 | {ident}
9 |
10 | )
11 | }
12 |
--------------------------------------------------------------------------------
/public/sitemap.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | https://runway.airportdb.io/
4 |
5 |
6 | https://runway.airportdb.io/contacts
7 |
8 |
9 | https://runway.airportdb.io/policy/cookies
10 |
11 |
12 | https://runway.airportdb.io/policy/terms-of-usage
13 |
14 |
--------------------------------------------------------------------------------
/src/components/PageLayout.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import CookiesConsent from "./CookiesConsent/CookiesConsent";
3 | import Footer from "./Footer";
4 | import NavBar from "./NavBar";
5 | import ScrollToTop from "./ScrollToTop";
6 |
7 | export default function PageLayout(props) {
8 | return (
9 | <>
10 |
14 | {children}
15 |
16 | );
17 | };
18 |
19 | export default AirportContextProvider;
20 |
21 | export const useAirport = () => {
22 | return useContext(AirportContext);
23 | };
24 |
--------------------------------------------------------------------------------
/src/components/Loading/Loading.css:
--------------------------------------------------------------------------------
1 | .svg-calLoader {
2 | width: 230px;
3 | height: 230px;
4 | transform-origin: 115px 115px;
5 | animation: 2s linear infinite loader-spin;
6 | }
7 |
8 | .cal-loader__plane {
9 | fill: black;
10 | }
11 | .cal-loader__path {
12 | stroke: #666666;
13 | animation: 2s ease-in-out infinite loader-path;
14 | }
15 |
16 | @keyframes loader-spin {
17 | to {
18 | transform: rotate(360deg);
19 | }
20 | }
21 | @keyframes loader-path {
22 | 0% {
23 | stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;
24 | }
25 | 50% {
26 | stroke-dasharray: 0, 450, 10, 30, 10, 30, 10, 30, 10;
27 | }
28 | 100% {
29 | stroke-dasharray: 0, 580, 0, 0, 0, 0, 0, 0, 0;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/CookiesConsent/useCookiesConsent.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | const getPersistentCookiesConsent = () => {
4 | return window.localStorage.getItem('cookiesConsent') === 'true';
5 | }
6 |
7 | const setPersistentCookiesConsent = () => {
8 | window.localStorage.setItem('cookiesConsent', true);
9 | }
10 |
11 | const useCookiesConsent = () => {
12 | const [cookiesConsent, setCookiesConsent] = useState(getPersistentCookiesConsent());
13 |
14 | const handleSetCookiesConsent = () => {
15 | setPersistentCookiesConsent();
16 | setCookiesConsent(true);
17 | }
18 |
19 | return [cookiesConsent, handleSetCookiesConsent];
20 | }
21 |
22 | export default useCookiesConsent;
--------------------------------------------------------------------------------
/src/pages/AirportPage/Compass.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function Compass() {
4 | return (
5 |
6 |
13 |
21 | N
22 |
23 |
24 |
9 |
10 | {airport.icao} Runways Map
11 |
12 |
13 | *Runways dimensions and positions are not strictly accurate
14 |
15 |
16 |
21 |
15 |
16 |
20 |
21 |
22 |
23 |
29 |
30 |
31 | );
32 | }
33 |
34 | export default App;
35 |
--------------------------------------------------------------------------------
/src/pages/AirportPage/WindDirectionBackground.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./windDirectionAnimation.css";
3 | import windDirectionSvg from "./WindDirectionSvg.svg";
4 |
5 | function toRad(degrees) {
6 | var pi = Math.PI;
7 | return degrees * (pi / 180);
8 | }
9 |
10 | export default function WindDirectionBackground(props) {
11 | const { windDirection } = props;
12 |
13 | if (windDirection === 0) return null;
14 |
15 | const deg = windDirection;
16 |
17 | const width =
18 | window.innerHeight * Math.abs(Math.sin(toRad(deg))) +
19 | window.innerWidth * Math.abs(Math.cos(toRad(deg)));
20 | const height =
21 | window.innerWidth * Math.abs(Math.sin(toRad(deg))) +
22 | window.innerHeight * Math.abs(Math.cos(toRad(deg)));
23 |
24 | const deltaX = (window.innerWidth - width) / 2;
25 | const deltaY = (window.innerHeight - height) / 2;
26 |
27 | return (
28 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "runway-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "type": "module",
6 | "scripts": {
7 | "start:api": "node ./server/main.cjs",
8 | "start": "vite",
9 | "build": "vite build",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@octokit/rest": "^17.3.0",
14 | "@testing-library/jest-dom": "^4.2.4",
15 | "@testing-library/react": "^9.3.2",
16 | "@testing-library/user-event": "^7.1.2",
17 | "@vitejs/plugin-react": "^4.3.3",
18 | "aewx-metar-parser": "^1.0.0",
19 | "axios": "^0.21.1",
20 | "clsx": "^1.1.1",
21 | "cors": "^2.8.5",
22 | "dotenv": "^10.0.0",
23 | "express": "^4.17.1",
24 | "lucide-react": "^0.456.0",
25 | "react": "^16.13.1",
26 | "react-dom": "^16.13.1",
27 | "react-helmet": "^6.1.0",
28 | "react-hotjar": "^5.0.0",
29 | "react-router-dom": "^5.2.0",
30 | "request": "^2.88.2",
31 | "spacetime": "^6.16.2",
32 | "vite": "^5.4.10",
33 | "xml2js": "^0.4.23"
34 | },
35 | "browserslist": {
36 | "production": [
37 | ">0.2%",
38 | "not dead",
39 | "not op_mini all"
40 | ],
41 | "development": [
42 | "last 1 chrome version",
43 | "last 1 firefox version",
44 | "last 1 safari version"
45 | ]
46 | },
47 | "devDependencies": {
48 | "autoprefixer": "^10.4.20",
49 | "cssnano": "^7.0.6",
50 | "postcss": "^8.4.49",
51 | "tailwindcss": "^3.4.14"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/CookiesConsent/CookiesConsent.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useEffect } from "react";
2 | import { Link } from "react-router-dom";
3 | import useCookiesConsent from "./useCookiesConsent";
4 |
5 | const CookiesConsent = () => {
6 | const [cookiesConsent, setCookiesConsent] = useCookiesConsent();
7 |
8 | const handleConsent = useCallback(() => {
9 | setCookiesConsent();
10 | }, [setCookiesConsent]);
11 |
12 | useEffect(() => {
13 | if (cookiesConsent && import.meta.env.PROD) {
14 | // Start using Google Analytics
15 | window.dataLayer = window.dataLayer || [];
16 | function gtag() {
17 | window.dataLayer.push(arguments);
18 | }
19 | gtag("js", new Date());
20 | gtag("config", import.meta.env.VITE_APP_GA_ID);
21 | }
22 | }, [cookiesConsent]);
23 |
24 | if (cookiesConsent) return null;
25 |
26 | return (
27 |
31 |
32 | This website use cookies to analyze traffic. Also cookies are used for
33 | authentication state. If you don't agree with that you should stop using
34 | this website.
35 |
36 |
37 |
39 |
40 | Ok, I got it
41 |
42 |
8 |
9 | Terms of usage | Which runway to choose?
10 |
11 |
12 |
13 | Terms of usage Which runway to choose?
14 |
15 |
16 |
17 | This is the Terms of usage for Which runway to choose?, accessible from{" "}
18 |
19 | https://runway.airportdb.io
20 |
21 |
22 |
23 |
24 | Responsibility
25 |
26 |
27 |
28 | This application only calculates runway suggestion by wind. You must
29 | always listen to ATC for active runways, check that runways data is
30 | really valid or/and read NOTAM's.{" "}
31 | Use data at your own risk . Application calculates
32 | runway suggestion with no warranty of any kind. By using the provided
33 | data and suggestions, you agree that website/application creators,
34 | maintainers, and anyone involved with the website/application hold{" "}
35 | no liability for anything that happens when you use
36 | the data and suggestions
37 |
38 |
40 | );
41 | };
42 |
43 | export default TermsPage;
44 |
--------------------------------------------------------------------------------
/src/pages/AirportPage/AirportHeader.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import spacetime from "spacetime";
3 |
4 | export default function AirportHeader(props) {
5 | const { airport } = props;
6 |
7 | return (
8 |
9 |
10 | {airport.icao}
11 |
12 |
13 | {airport.name}
14 |
15 |
16 | Last updated:{" "}
17 |
18 | {spacetime(airport.time).format(
19 | "{year}-{iso-month}-{date-pad} {hour-24-pad}:{minute-pad}"
20 | )}{" "}
21 | UTC
22 |
23 |
24 |
25 | METAR
26 | {airport.metar}
27 |
28 |
29 |
30 | Wind direction
31 |
32 |
33 |
34 | {airport.wind_direction === 'VRB' ? (
35 | "Variable"
36 | ) : (
37 | {airport.wind_direction}°
38 | )}
39 | {" "}
40 | {airport.wind_speed === 0 ? (
41 | calm winds
42 | ) : (
43 |
44 | at {" "}
45 | {airport.wind_speed} kts
46 |
47 | )}
48 |
49 |
50 |
47 | {runways.map((runway, key) => {
48 | return (
49 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/src/components/Loading/Loading.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Loading.css";
3 |
4 | export default function Loading() {
5 | return (
6 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/pages/SelectAirportPage/SelectAirportPage.js:
--------------------------------------------------------------------------------
1 | import { default as React, useCallback } from "react";
2 | import { Helmet } from "react-helmet";
3 | import { useHistory, useLocation } from "react-router-dom";
4 | import { useAirport } from "../../AirportContext";
5 | import AirportSelectInput from "../../components/AirportSelectInput";
6 | import PageLayout from "../../components/PageLayout";
7 | import RunwaysBackground from "../../components/RunwaysBackground";
8 | import Compass from "../AirportPage/Compass";
9 |
10 | export default function SelectAirportPage() {
11 | const [, setAirport] = useAirport();
12 | const history = useHistory();
13 | const location = useLocation();
14 |
15 | const handleAirportLoaded = useCallback(
16 | (data) => {
17 | setAirport(data);
18 | history.push("/airport/" + data.icao);
19 | },
20 | [history, setAirport]
21 | );
22 |
23 | return (
24 |
25 |
26 | Which runway to choose?
27 |
28 |
29 |
30 |
31 |
32 |
37 |
38 |
39 | Which runway to choose?
40 |
41 |
48 |
49 | ★ Check the descent path calculator:{" "}
50 |
56 | descent.now.sh
57 |
58 |
59 |
60 |
61 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/src/pages/AirportPage/AirportPage.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useEffect } from "react";
2 | import Loading from "../../components/Loading/Loading";
3 | import { Helmet } from "react-helmet";
4 | import { useHistory, useRouteMatch } from "react-router-dom";
5 | import { useAirport } from "../../AirportContext";
6 | import PageLayout from "../../components/PageLayout";
7 | import useAirportFetch from "../../hooks/useAirportFetch";
8 | import useCalculateActiveRunways from "../../hooks/useCalculateActiveRunways";
9 | import AirportHeader from "./AirportHeader";
10 | import AirportRunways from "./AirportRunways";
11 | import AirportRunwaysMap from "./AirportRunwaysMap";
12 | import Compass from "./Compass";
13 | import WindDirectionBackground from "./WindDirectionBackground";
14 | import useStickyState from "../../hooks/useStickyState";
15 | import {DEFAULT_METAR_PROVIDER, METAR_PROVIDER_STORAGE_KEY} from "../../consts";
16 |
17 | export default function AirportPage() {
18 | const [metarProvider] = useStickyState(DEFAULT_METAR_PROVIDER, METAR_PROVIDER_STORAGE_KEY);
19 | const [airport, setAirport] = useAirport();
20 | const { params } = useRouteMatch();
21 | const history = useHistory();
22 |
23 | const airportIsValid =
24 | airport && airport.icao.toLowerCase() === params?.icao.toLowerCase();
25 |
26 | const handleError = useCallback(
27 | (error) => {
28 | if (error !== null) {
29 | history.replace("/", { error, icao: params?.icao });
30 | }
31 | },
32 | [history, params]
33 | );
34 |
35 | const fetchAirport = useAirportFetch({
36 | onLoaded: setAirport,
37 | onError: handleError,
38 | });
39 |
40 | useEffect(() => {
41 | if (!airportIsValid) {
42 | fetchAirport(metarProvider, params?.icao);
43 | }
44 | // eslint-disable-next-line react-hooks/exhaustive-deps
45 | }, [metarProvider]);
46 |
47 | const activeRunwaysData = useCalculateActiveRunways(airport, airportIsValid);
48 |
49 | if (!airportIsValid) return
53 |
54 |
55 | {airport.name} | {airport.icao} | Which runway to choose?
56 |
57 |
58 |
73 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/src/components/RunwaysMap/RunwayIdent.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function RunwayIdent(props) {
4 | const {
5 | activeSide,
6 | isCrosswind,
7 | scaleX,
8 | scaleY,
9 | originY,
10 | svgWidth,
11 | svgHeight,
12 | he_heading,
13 | leIdentRectX,
14 | leIdentRectY,
15 | identRectWidth,
16 | identRectHeight,
17 | identRectStroke,
18 | leIdentRotation,
19 | identX,
20 | leIdentY,
21 | le_ident,
22 | heIdentRectX,
23 | heIdentRectY,
24 | heIdentY,
25 | heIdentRotation,
26 | he_ident,
27 | originAtCenter,
28 | } = props;
29 |
30 | return (
31 |
49 |
50 |
74 | {le_ident}
75 |
76 |
77 |
78 |
102 | {he_ident}
103 |
104 |
105 |
106 | );
107 | }
108 |
--------------------------------------------------------------------------------
/src/pages/ContactsPage.js:
--------------------------------------------------------------------------------
1 | import { Helmet } from "react-helmet";
2 | import PageLayout from "../components/PageLayout";
3 | import RunwaysBackground from "../components/RunwaysBackground";
4 | import React from 'react';
5 |
6 | const ContactsPage = () => {
7 | return (
8 |
9 |
10 | Contacts | Which runway to choose?
11 |
12 |
13 |
14 | Contacts
15 |
16 |
17 |
18 | Feel free to ask any questions or suggestions
19 |
20 |
21 |
22 |
28 |
29 |
35 |
36 |
47 |
48 |
58 |
59 |
69 |
70 |
80 |
81 |
84 | );
85 | };
86 |
87 | export default ContactsPage;
88 |
--------------------------------------------------------------------------------
/src/pages/AirportPage/AirportRunways.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react";
2 | import { Link } from "react-router-dom";
3 | import AirportRunwayCard from "./AirportRunwayCard";
4 |
5 | export default function AirportRunways(props) {
6 | const { airport, activeRunwaysData } = props;
7 |
8 | const sortedRunways = useMemo(() => {
9 | const runways = [];
10 | for (const runway of airport.runways) {
11 | runways.push({
12 | heading: (runway.he_heading_degT + 180) % 360,
13 | length: runway.length_ft,
14 | width: runway.width_ft,
15 | ident: runway.le_ident,
16 | invertIdent: runway.he_ident,
17 | active: activeRunwaysData[runway.le_ident],
18 | ils: runway.le_ils,
19 | });
20 |
21 | runways.push({
22 | heading: runway.he_heading_degT,
23 | length: runway.length_ft,
24 | width: runway.width_ft,
25 | ident: runway.he_ident,
26 | invertIdent: runway.le_ident,
27 | active: activeRunwaysData[runway.he_ident],
28 | ils: runway.he_ils,
29 | });
30 | }
31 |
32 | const sortIndexes = {
33 | tailwind: 0,
34 | crosswind: 1,
35 | headwind: 2,
36 | };
37 |
38 | const sortedRunways = runways.sort((a, b) => {
39 | return (
40 | sortIndexes[b.active?.status] - sortIndexes[a.active?.status] ||
41 | (!!b.ils ? 1 : 0) - (!!a.ils ? 1 : 0) ||
42 | a.active?.crosswind - b.active?.crosswind
43 | );
44 | });
45 |
46 | return sortedRunways;
47 | }, [airport, activeRunwaysData]);
48 |
49 | return (
50 |
51 |
52 | Runways
53 |
54 |
55 | *You must always listen to ATC for the active runway. The following
56 | runway suggestions are just approximations by wind direction. By using
57 | the following data you agree with{" "}
58 |
66 | {airport.wind_direction === 0 ? (
67 |
68 |
69 | Winds are variable
70 |
71 | . Listen to ATC for the active runway, or choose by yourself
72 |
73 | ) : null}
74 |
75 |
76 | {sortedRunways.map((runway) => {
77 | return (
78 |
88 | );
89 | })}
90 |
91 |
29 |
30 |
31 | {location.pathname !== "/" ? (
32 |
37 |
42 |
Which runway to choose?
43 |
44 | ) : (
45 |
46 | )}
47 | {location.pathname !== "/" ? (
48 |
52 |
57 |
63 |
64 | ) : null}
65 |
74 | <>
75 | {location.pathname !== "/contacts" &&
76 | location.pathname !== "/" ? (
77 |
87 |
88 |
89 |
44 |
45 |
METAR provider
46 |
48 | Aviation Weather
49 | VATSIM
50 |
51 |
Enter ICAO
52 |
53 |
62 | {isLoading || error ? (
63 |
68 | {isLoading ?
70 | ) : null}
71 | {error ? (
72 |
73 | {error}
74 |
75 | ) : null}
76 |
77 |
78 |
12 | Which runway to choose? The best runway suggestion based on wind
13 |
14 |
15 | You need to enable JavaScript to run this app.
103 |
104 |
105 |
115 |
116 |
117 |
--------------------------------------------------------------------------------
/src/pages/AirportPage/AirportRunwayCard.js:
--------------------------------------------------------------------------------
1 | import clsx from "clsx";
2 | import React from "react";
3 | import { ucfirst } from "../../helpers";
4 |
5 | const round = (value) => Math.round(value).toFixed(0);
6 |
7 | const colorMap = {
8 | headwind: "#1fa71f",
9 | crosswind: "#dea109",
10 | tailwind: "black",
11 | };
12 |
13 | const backgroundMap = {
14 | headwind: "#74da74",
15 | crosswind: "#f5ca5f",
16 | tailwind: "transparent",
17 | };
18 |
19 | const AirportRunwayCard = (props) => {
20 | const { active } = props;
21 | return (
22 |
23 |
24 |
25 |
29 | {props.ident}
30 |
31 |
39 | {ucfirst(active?.status ?? "Variable")}
40 |
41 |
42 |
43 | {active?.headtailwindType ? (
44 |
45 |
46 | {ucfirst(active.headtailwindType)}: {" "}
47 |
48 |
49 | {round(active.headtailwind)}
50 | {" "}
51 | kts
52 |
53 |
54 |
55 | Crosswind: {" "}
56 |
57 |
58 | {round(active.crosswind)}
59 | {" "}
60 | kts
61 |
62 |
63 |
64 |
65 | Crosswind from {active.crosswindSide}
66 |
67 |
68 |
69 | ) : null}
70 |
71 | Heading: {" "}
72 |
73 |
74 | {round(props.heading)}
75 | {" "}
76 | degT
77 |
78 |
79 |
80 | Length: {" "}
81 |
82 |
83 | {round(props.length)}
84 | {" "}
85 | ft
86 |
87 |
88 |
89 | Width: {" "}
90 |
91 |
92 | {round(props.width)}
93 | {" "}
94 | ft
95 |
96 |
97 |
98 | Inverted mark: {" "}
99 |
100 |
101 | {props.invertMark}
102 | {" "}
103 |
104 |
105 |
106 | ILS: {" "}
107 |
108 |
109 | {props.ils ? (
110 | {props.ils.freq + "/" + props.ils.course}°
111 | ) : (
112 | "No"
113 | )}
114 |
115 |
116 |
117 |
118 |
119 |
119 |
125 |
134 | {runways.map((runway, index) => {
135 | return (
136 |
151 |
152 |
8 |
9 | Cookies policy | Which runway to choose?
10 |
11 |
12 |
13 | Cookie Policy for Which runway to choose?
14 |
15 |
16 |
17 | This is the Cookie Policy for Which runway to choose?, accessible from{" "}
18 |
19 | https://runway.airportdb.io
20 |
21 |
22 |
23 |
24 | What Are Cookies
25 |
26 |
27 |
28 | As is common practice with almost all professional websites this site
29 | uses cookies, which are tiny files that are downloaded to your
30 | computer, to improve your experience. This page describes what
31 | information they gather, how we use it and why we sometimes need to
32 | store these cookies. We will also share how you can prevent these
33 | cookies from being stored however this may downgrade or 'break'
34 | certain elements of the sites functionality.
35 |
36 |
37 |
38 | How We Use Cookies
39 |
40 |
41 |
42 | We use cookies for a variety of reasons detailed below. Unfortunately
43 | in most cases there are no industry standard options for disabling
44 | cookies without completely disabling the functionality and features
45 | they add to this site. It is recommended that you leave on all cookies
46 | if you are not sure whether you need them or not in case they are used
47 | to provide a service that you use.
48 |
49 |
50 |
51 | Disabling Cookies
52 |
53 |
54 |
55 | You can prevent the setting of cookies by adjusting the settings on
56 | your browser (see your browser Help for how to do this). Be aware that
57 | disabling cookies will affect the functionality of this and many other
58 | websites that you visit. Disabling cookies will usually result in also
59 | disabling certain functionality and features of the this site.
60 | Therefore it is recommended that you do not disable cookies. .
61 |
62 |
63 | The Cookies We Set
64 |
65 |
66 |
67 |
68 |
69 | Account related cookies
70 |
71 |
72 | If you create an account with us then we will use cookies for the
73 | management of the signup process and general administration. These
74 | cookies will usually be deleted when you log out however in some
75 | cases they may remain afterwards to remember your site preferences
76 | when logged out.
77 |
78 |
79 |
80 | Login related cookies
81 |
82 | We use cookies when you are logged in so that we can remember this
83 | fact. This prevents you from having to log in every single time
84 | you visit a new page. These cookies are typically removed or
85 | cleared when you log out to ensure that you can only access
86 | restricted features and areas when logged in.
87 |
88 |
89 |
90 |
91 |
92 | Third Party Cookies
93 |
94 |
95 |
96 | In some special cases we also use cookies provided by trusted third
97 | parties. The following section details which third party cookies you
98 | might encounter through this site.
99 |
100 |
101 |
102 |
103 |
104 | This site uses Google Analytics which is one of the most
105 | widespread and trusted analytics solution on the web for helping
106 | us to understand how you use the site and ways that we can improve
107 | your experience. These cookies may track things such as how long
108 | you spend on the site and the pages that you visit so we can
109 | continue to produce engaging content.
110 |
111 |
112 | For more information on Google Analytics cookies, see the official
113 | Google Analytics page.
114 |
115 |
116 |
117 |
118 |
119 | More Information
120 |
121 |
122 |
123 | Hopefully that has clarified things for you and as was previously
124 | mentioned if there is something that you aren't sure whether you need
125 | or not it's usually safer to leave cookies enabled in case it does
126 | interact with one of the features you use on our site.
127 |
128 |
129 |
130 | For more general information on cookies, please read{" "}
131 |
135 | "What Are Cookies"
136 |
137 | .
138 |
139 |
140 |
141 | However if you are still looking for more information then you can
142 | contact us through one of our preferred contact methods:
143 |
144 |
145 |
150 |
152 | );
153 | };
154 |
155 | export default CookiesPolicyPage;
156 |
--------------------------------------------------------------------------------
/src/components/RunwaysMap/RunwayBlock.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function RunwayBlock(props) {
4 | const {
5 | activeSide,
6 | isCrosswind,
7 | le_ident,
8 | he_ident,
9 | scaleX,
10 | scaleY,
11 | he_heading,
12 | originY,
13 | svgWidth,
14 | svgHeight,
15 | rwyX,
16 | rwyY,
17 | scaleWidth,
18 | scaleLength,
19 | rwyLineBottomX,
20 | rwyLineBottomY,
21 | rwyLineTopX,
22 | rwyLineTopY,
23 | originAtCenter,
24 | } = props;
25 |
26 | const mark1Width = (scaleWidth / 2) * 0.5;
27 | const mark2Width = scaleWidth / 2;
28 |
29 | return (
30 |
48 | {activeSide === "le" ? (
49 |
58 |
75 | ) : activeSide === "he" ? (
76 |
85 |
102 | ) : null}
103 |
111 |
120 |
121 |
122 |
147 |
148 |
165 |
166 |
167 |
253 |
254 | );
255 | }
256 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | Which runway to choose?
6 |
7 | Runway calculator based on wind
8 |
9 |
10 |
11 |
13 |
14 |
15 |
16 |
18 |
19 |
21 |
22 |
23 | runway.airportdb.io
26 |
27 |
30 | This project was created just after I released the Airport database API service. Check it out too: airportdb.io . I am flying a lot in flight simulators like X-Plane or MS Flight Simulator and often come with problem to fastly determine the best active runway for the airport (in case if ATC is not available) based on wind. There rule of thumb, that wind direction should be as much as possible closer to runway heading. But what if the airport has multiple runways and the wind direction doesn't match exactly any of these runways, and I want to choose the landing with the least cross-wind?. Of course, I can calculate it, but it takes some time and effort.
31 |
32 | So I decide to create this tool, that lets to enter the airport ICAO code and get all best runway suggestions based on wind data.
33 |
34 |
35 |
36 | Instruction
37 |
38 |
39 | On the main page of the application, enter the airport ICAO code from that you want to take off or land.
40 |
41 |
42 |
43 |
45 |
46 |
47 | After entering the airport ICAO you will be redirected to the result page.
48 |
49 |
50 |
51 | In the first part of the result page, you will see the airport name, last METAR update date, METAR data itself, and wind direction.
52 |
53 |
54 |
55 |
57 |
58 |
59 | A little below is the main information: runway suggestions. All runways are sorted by two properties. In the first place, you will get all runways that have headwind, in the second crosswind, and the last tailwinds. Every group of runways is also sorted by cross-wind in ascending order. So the first runway in the list should be the best option because it should be with a headwind (if exist) and with a minimal crosswind.
60 |
61 |
62 |
63 |
65 |
66 |
67 | And the last part of the page shows the minimal airport runways map. Green arrows show the headwind runways and the yellow arrows - crosswind runways. Also in the background, you will see light blue arrows which represent wind direction.
68 |
69 |
70 |
71 |
73 |
74 | 
37 | 
42 | 
3 | 
44 | 
56 | 
64 | 
72 |