feat(efb): flyPadOS v2 🚀

.github/CHANGELOG.md

@@ -123,6 +123,7 @@
 1. [TEXTURE] Added a white dot to the test button and corrected DISCH alignment on the fire panel - @ImenesFBW (Imenes)
 1. [ECAM] Added ISA DEV to ECAM - @BlueberryKing (BlueberryKing#6641)
 1. [AOC] Reworked airport handling on AOC Weather Request Page - @MisterChocker (Leon)
+1. [EFB] Add flypad themed simbrief maps to EFB/OFP - @bouveng (Johan Bouveng)
 1. [SOUND] Added blue and yellow electric hydraulic pump sounds - @hotshotp (Boris)
 1. [SOUND] Further improved ambience and engine sounds - @hotshotp (Boris)
 1. [ELEC] Improve electrical system implementation to allow for implementing advanced scenarios - @davidwalschots (David Walschots)
@@ -239,6 +240,7 @@
 1. [MISC] Added registration decal - @tyler58546(tyler58546), @DarkOfNova (DarkOfNova)
 1. [OVHD] Implement even more additional overhead button/switch functionality (MASK MAN ON, EMER ELEC PWR MAN ON, Cargo smoke DISCH, etc.) - @ErickSharp (Erick Torres)
 1. [CDU] Fix ILS frequencies not autofilling - @pareil6 (pareil6)
+1. [EFB] Landing performance calculations page - @matt-winfield (TheMightyMat#0585)
 1. [LIGHTS] Improved Exterior Lights - @Snapmatics (Harry)
 1. [SOUND] Added custom sounds to multiple buttons and Throttle Lever Reverse Locks - @ImenesFBW (Imenes)
 1. [MCDU] Added custom MCDU font - @tyler58546 (tyler58546)

.github/workflows/autopilot-custom-fpm.yml

@@ -18,6 +18,12 @@ jobs:
         uses: actions/checkout@v2
       - name: Set BUILT_DATE_TIME
         run: echo "BUILT_DATE_TIME=$(date -u -Iseconds)" >> $GITHUB_ENV
+      - name: Create .env file
+        run: |
+          echo A32NX_PRODUCTION_BUILD=1 >> .env
+          echo CLIENT_ID=${{ secrets.NAVIGRAPH_CLIENT_ID }} >> .env
+          echo CLIENT_SECRET=${{ secrets.NAVIGRAPH_CLIENT_SECRET }} >> .env
+          echo CHARTFOX_SECRET=${{ secrets.CHARTFOX_SECRET }} >> .env
       - name: Build A32NX
         run: |
           ./scripts/dev-env/run.sh ./scripts/setup.sh

.github/workflows/experimental.yml

@@ -18,6 +18,12 @@ jobs:
         uses: actions/checkout@v2
       - name: Set BUILT_DATE_TIME
         run: echo "BUILT_DATE_TIME=$(date -u -Iseconds)" >> $GITHUB_ENV
+      - name: Create .env file
+        run: |
+          echo A32NX_PRODUCTION_BUILD=1 >> .env
+          echo CLIENT_ID=${{ secrets.NAVIGRAPH_CLIENT_ID }} >> .env
+          echo CLIENT_SECRET=${{ secrets.NAVIGRAPH_CLIENT_SECRET }} >> .env
+          echo CHARTFOX_SECRET=${{ secrets.CHARTFOX_SECRET }} >> .env
       - name: Build A32NX
         run: |
           ./scripts/dev-env/run.sh ./scripts/setup.sh

.github/workflows/master.yml

@@ -20,6 +20,12 @@ jobs:
         uses: actions/checkout@v2
       - name: Set BUILT_DATE_TIME
         run: echo "BUILT_DATE_TIME=$(date -u -Iseconds)" >> $GITHUB_ENV
+      - name: Create .env file
+        run: |
+          echo A32NX_PRODUCTION_BUILD=1 >> .env
+          echo CLIENT_ID=${{ secrets.NAVIGRAPH_CLIENT_ID }} >> .env
+          echo CLIENT_SECRET=${{ secrets.NAVIGRAPH_CLIENT_SECRET }} >> .env
+          echo CHARTFOX_SECRET=${{ secrets.CHARTFOX_SECRET }} >> .env
       - name: Build A32NX
         run: |
           ./scripts/dev-env/run.sh ./scripts/setup.sh

.github/workflows/pr.yml

@@ -40,6 +40,12 @@ jobs:
     steps:
       - name: Checkout source
         uses: actions/checkout@v2
+      - name: Create .env file
+        run: |
+          echo A32NX_PRODUCTION_BUILD=1 >> .env
+          echo CLIENT_ID=${{ secrets.NAVIGRAPH_CLIENT_ID }} >> .env
+          echo CLIENT_SECRET=${{ secrets.NAVIGRAPH_CLIENT_SECRET }} >> .env
+          echo CHARTFOX_SECRET=${{ secrets.CHARTFOX_SECRET }} >> .env
       - name: Build A32NX
         run: |
           ./scripts/dev-env/run.sh ./scripts/setup.sh

.github/workflows/pre-release.yml

@@ -14,6 +14,12 @@ jobs:
     steps:
       - name: Checkout source
         uses: actions/checkout@v2
+      - name: Create .env file
+        run: |
+          echo A32NX_PRODUCTION_BUILD=1 >> .env
+          echo CLIENT_ID=${{ secrets.NAVIGRAPH_CLIENT_ID }} >> .env
+          echo CLIENT_SECRET=${{ secrets.NAVIGRAPH_CLIENT_SECRET }} >> .env
+          echo CHARTFOX_SECRET=${{ secrets.CHARTFOX_SECRET }} >> .env
       - name: Build A32NX
         run: |
           ./scripts/dev-env/run.sh ./scripts/setup.sh

.github/workflows/release.yml

@@ -15,6 +15,12 @@ jobs:
     steps:
       - name: Checkout source
         uses: actions/checkout@v2
+      - name: Create .env file
+        run: |
+          echo A32NX_PRODUCTION_BUILD=1 >> .env
+          echo CLIENT_ID=${{ secrets.NAVIGRAPH_CLIENT_ID }} >> .env
+          echo CLIENT_SECRET=${{ secrets.NAVIGRAPH_CLIENT_SECRET }} >> .env
+          echo CHARTFOX_SECRET=${{ secrets.CHARTFOX_SECRET }} >> .env
       - name: Build A32NX
         run: |
           ./scripts/dev-env/run.sh ./scripts/setup.sh

.gitignore

@@ -46,3 +46,4 @@ node_modules
 /src/fdr2csv/*.exe
 /src/fbw/obj/
 /src/fdr2csv/build/
+.env

package.json

@@ -26,6 +26,7 @@
     "@flybywiresim/igniter": "^1.1.4",
     "@flybywiresim/rnp": "^2.1.0",
     "@flybywiresim/rollup-plugin-msfs": "~0.3.0",
+    "@navigraph/pkce": "^1.0.0",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-image": "~2.0.6",
@@ -38,37 +39,40 @@
     "@types/react-router-dom": "~5.1.6",
     "@typescript-eslint/eslint-plugin": "~4.14.2",
     "@typescript-eslint/parser": "~4.14.2",
-    "ts-loader": "^9.2.2",
-    "css-loader": "^5.0.1",
+    "dotenv": "^8.2.0",
     "eslint": "7.21.0",
     "file-loader": "^6.2.0",
     "jsdom": "^16.4.0",
     "lint-staged": "10.4.0",
     "prettier": "2.1.2",
+    "postcss": "^8.3.5",
     "redux-devtools-extension": "^2.13.8",
     "rollup": "^2.32.0",
     "rollup-plugin-copy": "~3.3.0",
     "rollup-plugin-css-only": "^2.1.0",
     "rollup-plugin-livereload": "~2.0.0",
-    "rollup-plugin-postcss": "~4.0.0",
+    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-serve": "~1.1.0",
     "rollup-plugin-typescript-paths": "^1.3.0",
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.0",
+    "ts-loader": "^9.2.2",
     "typescript": "^4.3.2",
     "webpack": "^5.12.2",
     "webpack-cli": "^4.3.1",
     "webpack-dev-server": "^3.11.1"
   },
   "dependencies": {
-    "@flybywiresim/api-client": "~0.7.0",
+    "@flybywiresim/api-client": "^0.13.0",
     "@flybywiresim/react-components": "^0.3.0",
+    "@flybywiresim/tailwind-config": "^0.5.0",
     "@tabler/icons": "^1.41.2",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
     "aewx-metar-parser": "~0.10.1",
     "byte-data": "^19.0.1",
     "classnames": "^2.2.6",
+    "immer": "^9.0.3",
     "lodash": "^4.17.20",
+    "qrcode.react": "^1.0.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-leaflet": "~3.0.5",
@@ -79,7 +83,7 @@
     "redux-thunk": "^2.3.0",
     "rollup-plugin-scss": "^2.6.1",
     "sass": "~1.30.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
+    "tailwindcss": "^2.2.2",
     "type-to-reducer": "^1.2.0"
   }
 }

src/.eslintrc.js

@@ -97,5 +97,7 @@ module.exports = {
         Simplane: 'readonly',
         SimVar: 'readonly',
         Utils: 'readonly',
+        JSX: 'readonly',
+        Coherent: 'readonly',
     },
 };

src/instruments/buildSrc/plugins.mjs

@@ -8,10 +8,13 @@ import { typescriptPaths } from 'rollup-plugin-typescript-paths';
 import replace from '@rollup/plugin-replace';
 import postcss from 'rollup-plugin-postcss';
 import tailwindcss from 'tailwindcss';
+import dotenv from 'dotenv';
 import { Directories } from './directories.mjs';
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs'];
 
+dotenv.config();
+
 function babel() {
     return babelPlugin({
         presets: [
@@ -61,7 +64,14 @@ export function baseCompile(instrumentName, instrumentFolder) {
             tsConfigPath: join(Directories.src, 'tsconfig.json'),
             preserveExtensions: true,
         }),
-        replace({ 'process.env.NODE_ENV': '"production"' }),
+        replace({
+            'preventAssignment': true,
+            'process.env.NODE_ENV': JSON.stringify('production'),
+            'process.env.CLIENT_ID': JSON.stringify(process.env.CLIENT_ID),
+            'process.env.CLIENT_SECRET': JSON.stringify(process.env.CLIENT_SECRET),
+            'process.env.CHARTFOX_SECRET': JSON.stringify(process.env.CHARTFOX_SECRET),
+            'process.env.SIMVAR_DISABLE': 'false',
+        }),
         postCss(instrumentName, instrumentFolder),
     ];
 }

src/instruments/src/Common/metarTypes.ts

@@ -0,0 +1,65 @@
+/* eslint-disable camelcase */
+// Disable eslint camelcase as these are types for external library
+export type MetarParserType = {
+    raw_text: string,
+    raw_parts: [string],
+    icao: string,
+    observed: Date,
+    wind: Wind,
+    visibility: Visibility,
+    conditions: [ConditionCode],
+    clouds: [Cloud],
+    ceiling: Ceiling,
+    temperature: Temperature,
+    dewpoint: Dewpoint,
+    humidity_percent: number,
+    barometer: Barometer,
+    flight_category: string,
+}
+
+export type Wind = {
+    degrees: number,
+    speed_kts: number,
+    speed_mps: number,
+    gust_kts: number,
+    gust_mps: number,
+};
+
+export type Visibility = {
+    miles: string,
+    miles_float: number,
+    meters: string,
+    meters_float: number,
+};
+
+export type ConditionCode = {
+    code: string,
+};
+
+export type Cloud = {
+    code: string,
+    base_feet_agl: number,
+    base_meters_agl: number,
+};
+
+export type Ceiling = {
+    code: string,
+    feet_agl: number,
+    meters_agl: number,
+};
+
+export type Temperature = {
+    celsius: number,
+    fahrenheit: number,
+};
+
+export type Dewpoint = {
+    celsius: number,
+    fahrenheit: number,
+};
+
+export type Barometer = {
+    hg: number,
+    kpa: number,
+    mb: number,
+};

src/instruments/src/Common/persistence.tsx

@@ -15,6 +15,14 @@ export class NXDataStore {
      * @param defaultVal The default value if the property is not set
      */
     static get(key: string, defaultVal?: string) {
+        if (process.env.SIMVAR_DISABLE) {
+            const val = window.localStorage.getItem(`A32NX_${key}`);
+            if (!val) {
+                return defaultVal;
+            }
+            return val;
+        }
+
         const val = GetStoredData(`A32NX_${key}`);
         if (!val) {
             return defaultVal;
@@ -29,6 +37,11 @@ export class NXDataStore {
      * @param val The value to assign to the property
      */
     static set(key: string, val: string) {
+        if (process.env.SIMVAR_DISABLE) {
+            window.localStorage.setItem(`A32NX_${key}`, val);
+            return;
+        }
+
         SetStoredData(`A32NX_${key}`, val);
     }
 }
@@ -38,8 +51,12 @@ export class NXDataStore {
  *
  * Note: The value of the persistent property does not automatically refresh for now
  */
-export const usePersistentProperty = (propertyName: string): [string, (string) => void] => {
-    const [propertyValue, rawPropertySetter] = useState(() => NXDataStore.get(propertyName));
+export const usePersistentProperty = (propertyName: string, defaultValue?: string): [string, (string) => void] => {
+    const [propertyValue, rawPropertySetter] = useState(() => NXDataStore.get(propertyName, defaultValue));
+
+    if (defaultValue !== undefined && propertyValue === undefined) {
+        rawPropertySetter(defaultValue);
+    }
 
     const propertySetter = (value: string) => {
         NXDataStore.set(propertyName, value);

src/instruments/src/Common/simVars.tsx

@@ -269,6 +269,10 @@ export const useSimVar = (
     maxStaleness = 0,
 ): [SimVarValue, (newValueOrSetter: SimVarValue | SimVarSetter
 ) => void] => {
+    if (process.env.SIMVAR_DISABLE) {
+        return [0, () => {}];
+    }
+
     const value = useSimVarValue(name, unit, maxStaleness);
     const setter = useSimVarSetter(name, unit);
     return [value, setter];
@@ -406,6 +410,10 @@ export const useSplitSimVar = (
     maxStaleness = 0,
 ): [SimVarValue, (newValueOrSetter: SimVarValue | SimVarSetter
 ) => void] => {
+    if (process.env.SIMVAR_DISABLE) {
+        return [0, () => {}];
+    }
+
     const value = useSimVarValue(readName, readUnit, maxStaleness);
     const setter = useSimVarSetter(readName, writeUnit || readUnit, writeName);
     return [value, setter];

src/instruments/src/Common/useInterval.tsx

@@ -0,0 +1,40 @@
+import { useRef, useEffect } from 'react';
+
+type UseIntervalOptions = Partial<{
+    runOnStart: boolean,
+    additionalDeps: any[],
+}>
+
+function useInterval(callback: () => void, delay: number | null, options?: UseIntervalOptions): void {
+    const savedCallback = useRef<() => void | null>();
+
+    const deps = [delay];
+    if (options?.additionalDeps) {
+        deps.push(...options.additionalDeps);
+    }
+
+    // Remember the latest callback.
+    useEffect(() => {
+        savedCallback.current = callback;
+    });
+
+    // Set up the interval.
+    // eslint-disable-next-line consistent-return
+    useEffect(() => {
+        function tick() {
+            if (savedCallback && typeof savedCallback.current !== 'undefined') {
+                savedCallback.current();
+            }
+        }
+
+        if (options?.runOnStart) {
+            tick();
+        }
+
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+    }, deps);
+}
+export default useInterval;