Getting station data

PackageSources/js-bundle/index.d.ts

@@ -1 +1,6 @@
 /// <reference types="@microsoft/msfs-types/js/common.d.ts" />
+/// <reference types="@microsoft/msfs-types/pages/vcockpit/instruments/shared/baseinstrument.d.ts" />
+/// <reference types="@microsoft/msfs-types/js/datastorage.d.ts" />
+/// <reference types="@microsoft/msfs-types/js/buttons.d.ts" />
+/// <reference types="@microsoft/msfs-types/js/services/toolbarpanels.d.ts" />
+/// <reference types="@microsoft/msfs-types/js/simvar.d.ts" />

PackageSources/js-bundle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tfdidesign-md11-load-manager",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -23,15 +23,15 @@
   "license": "ISC",
   "devDependencies": {
     "@microsoft/msfs-types": "^1.14.6",
-    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.1",
-    "@types/react": "^18.2.8",
-    "@types/react-dom": "^18.2.4",
-    "@types/uuid": "^9.0.7",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "autoprefixer": "^10.4.14",
@@ -42,9 +42,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "license-report": "^6.5.0",
     "postcss": "^8.4.24",
+    "postcss-import": "^16.1.0",
     "prettier": "^3.0.3",
-    "prettier-plugin-organize-imports": "^3.2.4",
-    "rimraf": "^5.0.1",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "rimraf": "^6.0.1",
     "rollup": "^4.3.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-postcss": "^4.0.2",
@@ -53,18 +54,13 @@
     "sass": "^1.89.1",
     "svg-slim": "^2.0.5",
     "tslib": "^2.5.3",
-    "typed-scss-modules": "^7.1.0",
-    "typescript": "5.2.2"
+    "typed-scss-modules": "^8.1.1",
+    "typescript": "5.8.3"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/material": "^5.14.17",
-    "postcss-import": "^15.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "uuid": "^9.0.1"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "uuid": "^11.1.0"
   },
   "packageManager": "pnpm@10.11.1+sha512.e519b9f7639869dc8d5c3c5dfef73b3f091094b0a006d7317353c72b124e80e1afd429732e28705ad6bfa1ee879c1fce46c128ccebd3192101f43dd67c667912"
 }

PackageSources/js-bundle/src/App.tsx

@@ -1,17 +1,145 @@
-import ThemeProvider from '@mui/material/styles/ThemeProvider';
-import { FC, StrictMode } from 'react';
+import { FC, StrictMode, useEffect, useRef, useState } from 'react';
 import styles from './App.module.scss';
 
 interface IAppProps {
   dataListener: ViewListener.ViewListener;
 }
 
-const App: FC<IAppProps> = ({ dataListener }) => {
+interface PayloadFreight {
+  pilot: number;
+  firstOfficer: number;
+  engineer: number;
+  upper1Left: number;
+  upper1Right: number;
+  upper2Left: number;
+  upper2Right: number;
+  upper3Left: number;
+  upper3Right: number;
+  upper4Left: number;
+  upper4Right: number;
+  lowerForward: number;
+  lowerRear: number;
+  leftAuxF: number;
+  rightAuxF: number;
+}
+
+interface PayloadPax {
+  pilot: number;
+  firstOfficer: number;
+  engineer: number;
+  cabinCrewFront: number;
+  business1Left: number;
+  business1Center: number;
+  business1Right: number;
+  business2Left: number;
+  business2Center: number;
+  business2Right: number;
+  economy1Left: number;
+  economy1Center: number;
+  economy1Right: number;
+  economy2Left: number;
+  economy2Center: number;
+  economy2Right: number;
+  cabinCrewRear: number;
+  forwardCargo: number;
+  rearCargo: number;
+  leftAuxPax: number;
+  rightAuxPax: number;
+}
+
+interface Fuel {
+  main1: number;
+  main3: number;
+  main2: number;
+  upperAux: number;
+  lowerAux: number;
+  main1Tip: number;
+  main3Tip: number;
+  tail: number;
+  forwardAux1: number;
+  forwardAux2: number;
+}
+
+const App: FC<IAppProps> = () => {
+  const [unit, setUnit] = useState<'lbs' | 'kg'>('lbs');
+  const [payload, setPayload] = useState<PayloadPax | PayloadFreight>();
+  const [fuel, setFuel] = useState<Fuel>();
+
+  const requestRef = useRef<number | undefined>(undefined);
+
+  const mainLoop = () => {
+    try {
+      if (SimVar.IsReady()) {
+        const conversion = SimVar.GetSimVarValue('FUEL WEIGHT PER GALLON', unit);
+
+        setPayload({
+          pilot: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:1', unit),
+          firstOfficer: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:2', unit),
+          engineer: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:3', unit),
+          upper1Left: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:4', unit),
+          cabinCrewFront: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:4', unit),
+          upper1Right: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:5', unit),
+          business1Left: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:5', unit),
+          upper2Left: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:6', unit),
+          business1Center: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:6', unit),
+          upper2Right: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:7', unit),
+          business1Right: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:7', unit),
+          upper3Left: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:8', unit),
+          business2Left: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:8', unit),
+          upper3Right: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:9', unit),
+          business2Center: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:9', unit),
+          upper4Left: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:10', unit),
+          business2Right: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:10', unit),
+          upper4Right: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:11', unit),
+          economy1Left: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:11', unit),
+          lowerForward: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:12', unit),
+          economy1Center: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:12', unit),
+          lowerRear: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:13', unit),
+          economy1Right: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:13', unit),
+          leftAuxF: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:14', unit),
+          economy2Left: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:14', unit),
+          rightAuxF: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:15', unit),
+          economy2Center: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:15', unit),
+          economy2Right: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:16', unit),
+          cabinCrewRear: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:17', unit),
+          forwardCargo: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:18', unit),
+          rearCargo: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:19', unit),
+          leftAuxPax: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:20', unit),
+          rightAuxPax: SimVar.GetSimVarValue('PAYLOAD STATION WEIGHT:21', unit),
+        });
+
+        setFuel({
+          main1: SimVar.GetSimVarValue('FUEL TANK LEFT MAIN QUANTITY', 'gal') * conversion,
+          main3: SimVar.GetSimVarValue('FUEL TANK RIGHT MAIN QUANTITY', 'gal') * conversion,
+          main2: SimVar.GetSimVarValue('FUEL TANK CENTER QUANTITY', 'gal') * conversion,
+          upperAux: SimVar.GetSimVarValue('FUEL TANK CENTER2 QUANTITY', 'gal') * conversion,
+          lowerAux: SimVar.GetSimVarValue('FUEL TANK CENTER3 QUANTITY', 'gal') * conversion,
+          main1Tip: SimVar.GetSimVarValue('FUEL TANK LEFT TIP QUANTITY', 'gal') * conversion,
+          main3Tip: SimVar.GetSimVarValue('FUEL TANK RIGHT TIP QUANTITY', 'gal') * conversion,
+          tail: SimVar.GetSimVarValue('FUEL TANK EXTERNAL1 QUANTITY', 'gal') * conversion,
+          forwardAux1: SimVar.GetSimVarValue('FUEL TANK LEFT AUX QUANTITY', 'gal') * conversion,
+          forwardAux2: SimVar.GetSimVarValue('FUEL TANK RIGHT AUX QUANTITY', 'gal') * conversion,
+        });
+      }
+    } catch {}
+
+    requestRef.current = requestAnimationFrame(mainLoop);
+  };
+
+  useEffect(() => {
+    requestRef.current = requestAnimationFrame(mainLoop);
+
+    if (requestRef.current !== undefined) return () => cancelAnimationFrame(requestRef.current as number);
+  }, [unit]);
+
   return (
     <StrictMode>
       <div className={styles.app}>
-        <ThemeProvider>
-        </ThemeProvider>
+        <button onClick={() => (unit === 'lbs' ? setUnit('kg') : setUnit('lbs'))}>Change unit from {unit}</button>
+        <div style={{ display: 'flex' }}>
+          <pre>{JSON.stringify(payload, null, 2)}</pre>
+          <pre>{JSON.stringify(fuel, null, 2)}</pre>
+        </div>
       </div>
     </StrictMode>
   );

PackageSources/js-bundle/src/index.html

@@ -31,9 +31,7 @@
         class="ingameUiFrame panelInvisible"
         content-fit="true"
       >
-        <virtual-scroll direction="y">
-          <div id="react" style="display: flex"></div>
-        </virtual-scroll>
+        <div id="react" style="display: flex"></div>
       </ingame-ui>
     </tfdidesign-md11-load-manager-panel>
     <script src="index.js" type="text/javascript"></script>

PackageSources/js-bundle/src/index.ts

@@ -3,8 +3,6 @@ import { createRoot } from 'react-dom/client';
 import App from './App';
 
 class TFDiDesignMD11LoadManagerPanel extends TemplateElement {
-  dataListener?: ViewListener.ViewListener;
-
   constructor() {
     super();
   }
@@ -12,12 +10,11 @@ class TFDiDesignMD11LoadManagerPanel extends TemplateElement {
   connectedCallback() {
     super.connectedCallback();
 
-    this.dataListener = RegisterViewListener('JS_LISTENER_COMM_BUS');
-
     const container = document.getElementById('react');
     if (container) {
+      console.log('Starting React');
       const root = createRoot(container);
-      root.render(createElement(App, { dataListener: this.dataListener }));
+      root.render(createElement(App));
     }
   }
 

PackageSources/js-bundle/src/types/theme.d.ts

@@ -1,10 +0,0 @@
-import '@mui/material';
-
-declare module '@mui/material/styles' {
-  interface Theme {
-    screenHeight: number;
-  }
-  interface ThemeOptions {
-    screenHeight: number;
-  }
-}

PackageSources/js-bundle/src/types/virtual-scroll.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties, DOMAttributes, ReactNode } from 'react';
-
-type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: ReactNode }>;
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      ['virtual-scroll']: CustomElement<{ class?: string; direction: 'x' | 'y'; style?: CSSProperties }>;
-    }
-  }
-}