feat(a380x/oans): OANS integration for A380X

fbw-a32nx/.env

@@ -1,7 +1,7 @@
 VITE_BUILD=false
 NODE_ENV=production
-CLIENT_SECRET=""
 CLIENT_ID=""
+CLIENT_SECRET=""
 SENTRY_DSN=""
 AIRCRAFT_PROJECT_PREFIX="a32nx"
 AIRCRAFT_VARIANT="a320-251n"

fbw-a32nx/mach.config.js

@@ -34,6 +34,7 @@ module.exports = {
     msfsAvionicsInstrument('ND'),
     msfsAvionicsInstrument('EWD'),
     msfsAvionicsInstrument('Clock'),
+    msfsAvionicsInstrument('OANC'),
 
     reactInstrument('SD'),
     reactInstrument('DCDU'),

fbw-a32nx/src/systems/instruments/src/ND/config.json

@@ -2,6 +2,7 @@
   "index": "./instrument.tsx",
   "isInteractive": false,
   "extraDeps": [
-    "fbw-common/src/systems/instruments/src/ND"
+    "fbw-common/src/systems/instruments/src/ND",
+    "fbw-common/src/systems/instruments/src/OANC"
   ]
 }

fbw-a32nx/src/systems/instruments/src/ND/tsconfig.json

@@ -28,7 +28,9 @@
       "@tcas/*": ["./tcas/src/*"],
       "@typings/*": ["../../../fbw-common/src/typings/*"],
       "@flybywiresim/fbw-sdk": ["../../../fbw-common/src/systems/index-no-react.ts"],
-      "@flybywiresim/navigation-display": ["../../../fbw-common/src/systems/instruments/src/ND/index.ts"]
+      "@flybywiresim/navigation-display": ["../../../fbw-common/src/systems/instruments/src/ND/index.ts"],
+      "@flybywiresim/oanc": ["../../../fbw-common/src/systems/instruments/src/OANC/index.ts"],
+      "@flybywiresim/msfs-avionics-common": ["../../../fbw-common/src/systems/instruments/src/MsfsAvionicsCommon/index.ts"]
     }
   }
 }

fbw-a32nx/src/systems/instruments/src/OANC/.eslintrc.js

@@ -0,0 +1,11 @@
+// Copyright (c) 2023-2024 FlyByWire Simulations
+// SPDX-License-Identifier: GPL-3.0
+
+'use strict';
+
+module.exports = {
+  extends: '../../../../../../.eslintrc.js',
+
+  // overrides airbnb, use sparingly
+  rules: { 'react/react-in-jsx-scope': 'off', 'react/no-unknown-property': 'off', 'react/style-prop-object': 'off' },
+};

fbw-a32nx/src/systems/instruments/src/OANC/Components/ContextMenu.scss

@@ -0,0 +1,42 @@
+// Copyright (c) 2023-2024 FlyByWire Simulations
+// SPDX-License-Identifier: GPL-3.0
+
+@import "../../Common/definitions";
+
+.oanc-context-menu {
+    width: 180px;
+
+    display: flex;
+    flex-direction: column;
+
+    position: absolute;
+
+    margin: 7px 0 7px 0;
+
+    background-color: rgb(128, 128, 128);
+    border: solid 2px white;
+}
+
+.oanc-context-menu-item {
+    width: 100%;
+    height: 28px;
+
+    color: rgb(255, 255, 255);
+    font-size: 15px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    padding-left: 3px;
+
+    border: solid 3px transparent;
+}
+
+.oanc-context-menu-item-disabled {
+    color: rgb(255, 255, 255, 0.7);
+}
+
+.oanc-context-menu-item:not(.oanc-context-menu-item-disabled):hover {
+    border: solid 3px $display-cyan;
+}

fbw-a32nx/src/systems/instruments/src/OANC/Components/ContextMenu.tsx

@@ -0,0 +1,90 @@
+// Copyright (c) 2023-2024 FlyByWire Simulations
+// SPDX-License-Identifier: GPL-3.0
+
+import {
+  FSComponent,
+  DisplayComponent,
+  VNode,
+  MapSubject,
+  Subscribable,
+  Subscription,
+  SubscribableUtils,
+} from '@microsoft/msfs-sdk';
+
+import './ContextMenu.scss';
+import { ContextMenuItemData } from '@flybywiresim/oanc';
+
+export interface ContextMenuProps {
+  isVisible: Subscribable<boolean>;
+
+  x: Subscribable<number>;
+
+  y: Subscribable<number>;
+
+  items: ContextMenuItemData[];
+
+  closeMenu: () => void;
+}
+
+export class ContextMenu extends DisplayComponent<ContextMenuProps> {
+  private readonly subscriptions: Subscription[] = [];
+
+  private readonly style = MapSubject.create<string, string>();
+
+  onAfterRender() {
+    this.subscriptions.push(
+      this.props.isVisible.sub((it) => this.style.setValue('visibility', it ? 'visible' : 'hidden'), true),
+      this.props.x.sub((it) => this.style.setValue('left', `${it.toFixed(0)}px`), true),
+      this.props.y.sub((it) => this.style.setValue('top', `${it.toFixed(0)}px`), true),
+    );
+  }
+
+  private readonly handleItemPressed = (item: ContextMenuItemData) => {
+    item.onPressed?.();
+
+    this.props.closeMenu();
+  };
+
+  render(): VNode | null {
+    return (
+      <div class="oanc-context-menu" style={this.style}>
+        {this.props.items.map((it) => (
+          <ContextMenuItem
+            name={it.name}
+            disabled={SubscribableUtils.toSubscribable(it.disabled, true)}
+            onPressed={() => this.handleItemPressed(it)}
+          />
+        ))}
+      </div>
+    );
+  }
+}
+
+export interface ContextMenuItemProps {
+  name: string;
+
+  disabled: Subscribable<boolean>;
+
+  onPressed: () => void;
+}
+
+export class ContextMenuItem extends DisplayComponent<ContextMenuItemProps> {
+  private readonly root = FSComponent.createRef<HTMLSpanElement>();
+
+  onAfterRender() {
+    this.root.instance.addEventListener('click', this.handlePressed);
+  }
+
+  private handlePressed = () => this.props.onPressed();
+
+  render(): VNode | null {
+    return (
+      <span
+        ref={this.root}
+        class={{ 'oanc-context-menu-item': true, 'oanc-context-menu-item-disabled': this.props.disabled }}
+      >
+        {this.props.name}
+      </span>
+    );
+  }
+}