Getting station data

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 }>;
-    }
-  }
-}