fix(efb): unresponsive buttons and deactivated doors (#4295)

* fix: onmousedown instead of onclick + fixed deactivated doors * fix: tug direction with deactivated tug * fix: tug unable to activate * fix: automatic deactivation properly resets doors Co-authored-by: pepperoni505 <[email protected]> Co-authored-by: Will Pine <[email protected]> (cherry picked from commit 8896845)
flybywiresim · Apr 9, 2021 · 5b6e173 · 5b6e173
1 parent aee4456
commit 5b6e173
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 30 deletions.
diff --git a/src/instruments/src/EFB/Components/Button/Button.tsx b/src/instruments/src/EFB/Components/Button/Button.tsx
@@ -16,7 +16,7 @@ type props = {
 const Button = ({ text, type = BUTTON_TYPE.BLUE, onClick, className, ...props }: props) => (
     <button
         type="button"
-        onClick={onClick}
+        onMouseDown={onClick}
         className={classNames([
             {
                 'bg-blue-500 border-blue-500': type === BUTTON_TYPE.BLUE,

diff --git a/src/instruments/src/EFB/Ground/DoorToggle.tsx b/src/instruments/src/EFB/Ground/DoorToggle.tsx
@@ -1,5 +1,5 @@
 import { IconLayoutSidebar } from '@tabler/icons';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSplitSimVar } from '../../Common/simVars';
 import Button, { BUTTON_TYPE } from '../Components/Button/Button';
 
@@ -8,15 +8,31 @@ interface Props {
     clickCallback,
     selectionCallback,
     id: string,
+    tugActive: boolean,
     disabled?
 }
 export const DoorToggle = (props: Props) => {
-    const [doorState, setDoorState] = useSplitSimVar(`A:INTERACTIVE POINT OPEN:${props.index}`, 'Percent over 100', 'K:TOGGLE_AIRCRAFT_EXIT', 'Enum', 100);
+    const [doorState, setDoorState] = useSplitSimVar(`A:INTERACTIVE POINT OPEN:${props.index}`, 'Percent over 100', 'K:TOGGLE_AIRCRAFT_EXIT', 'Enum', 500);
+    const [previousDoorState, setPreviousDoorState] = useState(doorState);
+
+    useEffect(() => {
+        if (props.tugActive && previousDoorState) {
+            setDoorState(props.index + 1);
+            setPreviousDoorState(!previousDoorState);
+        } else if (props.tugActive) {
+            setPreviousDoorState(false);
+        } else {
+            setPreviousDoorState(doorState);
+        }
+    });
 
     return (
         <Button
-            onClick={(e) => props.clickCallback(() => setDoorState(props.index + 1), e)}
-            className={props.selectionCallback('w-32', props.id, doorState)}
+            onClick={(e) => props.clickCallback(() => {
+                setDoorState(props.index + 1);
+                setPreviousDoorState(true);
+            }, e)}
+            className={props.selectionCallback('w-32', props.id, doorState, props.id)}
             type={BUTTON_TYPE.NONE}
             id={props.id}
             disabled={props.disabled}

diff --git a/src/instruments/src/EFB/Ground/Ground.tsx b/src/instruments/src/EFB/Ground/Ground.tsx
@@ -83,22 +83,24 @@ export const Ground = ({
     };
 
     const handleClick = (callBack: () => void, event: React.MouseEvent, disabledButton?: string) => {
-        if (!activeButtons.map((b: StatefulButton) => b.id).includes(event.currentTarget.id)) {
-            addActiveButton({ id: event.currentTarget.id, state: STATE_WAITING });
-            if (disabledButton) {
-                addDisabledButton(disabledButton);
+        if (!tugActive) {
+            if (!activeButtons.map((b: StatefulButton) => b.id).includes(event.currentTarget.id)) {
+                addActiveButton({ id: event.currentTarget.id, state: STATE_WAITING });
+                if (disabledButton) {
+                    addDisabledButton(disabledButton);
+                }
+                callBack();
+            } else {
+                const index = activeButtons.map((b: StatefulButton) => b.id).indexOf(event.currentTarget.id);
+                if (index > -1) {
+                    removeActiveButton(index);
+                }
+                if (disabledButton) {
+                    const disabledIndex = disabledButtons.indexOf(disabledButton);
+                    removeDisabledButton(disabledIndex);
+                }
+                callBack();
             }
-            callBack();
-        } else if (!tugActive) {
-            const index = activeButtons.map((b: StatefulButton) => b.id).indexOf(event.currentTarget.id);
-            if (index > -1) {
-                removeActiveButton(index);
-            }
-            if (disabledButton) {
-                const disabledIndex = disabledButtons.indexOf(disabledButton);
-                removeDisabledButton(disabledIndex);
-            }
-            callBack();
         }
     };
 
@@ -108,12 +110,21 @@ export const Ground = ({
      */
     const handlePushBackClick = (callBack: () => void, event: React.MouseEvent) => {
         const tugRequest = 'tug-request';
-        if (activeButtons.map((b: StatefulButton) => b.id).includes(tugRequest) && event.currentTarget.id === tugRequest) {
-            setActiveButtons([]);
-        } else {
+        if (activeButtons.map((b: StatefulButton) => b.id).includes(tugRequest)) {
+            if (event.currentTarget.id === tugRequest) {
+                setActiveButtons([]);
+                callBack();
+            } else {
+                setActiveButtons([{ id: event.currentTarget.id, state: STATE_ACTIVE }, { id: tugRequest, state: STATE_WAITING }]);
+                callBack();
+            }
+        } else if (event.currentTarget.id === tugRequest) {
             setActiveButtons([{ id: event.currentTarget.id, state: STATE_ACTIVE }, { id: tugRequest, state: STATE_WAITING }]);
+            disabledButtons.forEach((b, index) => {
+                removeDisabledButton(index);
+            });
+            callBack();
         }
-        callBack();
     };
 
     const applySelected = (className: string, id?: string) => {
@@ -128,9 +139,10 @@ export const Ground = ({
      * Applies highlighting of an activated service based on SimVars
      * This ensures the displayed state is in sync with the active services
      */
-    const applySelectedWithSync = (className: string, id: string, gameSync) => {
+    const applySelectedWithSync = (className: string, id: string, gameSync, disabledId?: string) => {
         const index = activeButtons.map((b: StatefulButton) => b.id).indexOf(id);
-        const disabledIndex = disabledButtons.indexOf(id);
+        const disabledIndex = disabledButtons.indexOf(disabledId);
+
         if (gameSync > 0.5 && (index !== -1 || disabledIndex !== -1)) {
             const button: StatefulButton = activeButtons[index];
             if (button && button.state === STATE_WAITING) {
@@ -162,7 +174,7 @@ export const Ground = ({
                             setJetWayActive(1);
                             setRampActive(1);
                         }, e, 'door-fwd-left')}
-                        className={applySelectedWithSync('w-32 ', 'jetway', jetWayActive)}
+                        className={applySelectedWithSync('w-32 ', 'jetway', jetWayActive, 'door-fwd-left')}
                         type={BUTTON_TYPE.NONE}
                         id="jetway"
                     >
@@ -171,7 +183,14 @@ export const Ground = ({
                 </div>
                 <div>
                     <h1 className="text-white font-medium text-xl text-center pb-1">Door Fwd</h1>
-                    <DoorToggle index={0} clickCallback={handleClick} selectionCallback={applySelectedWithSync} id="door-fwd-left" disabled={disabledButtons.includes('door-fwd-left')} />
+                    <DoorToggle
+                        index={0}
+                        tugActive={tugActive}
+                        clickCallback={handleClick}
+                        selectionCallback={applySelectedWithSync}
+                        id="door-fwd-left"
+                        disabled={disabledButtons.includes('door-fwd-left')}
+                    />
                 </div>
             </div>
 
@@ -216,13 +235,20 @@ export const Ground = ({
             <div className="right-1/4 grid grid-cols-2 control-grid absolute bottom-36">
                 <div>
                     <h1 className="text-white font-medium text-xl text-center pb-1">Door Aft</h1>
-                    <DoorToggle index={3} clickCallback={handleClick} selectionCallback={applySelectedWithSync} id="door-aft-right" disabled={disabledButtons.includes('door-aft-right')} />
+                    <DoorToggle
+                        tugActive={tugActive}
+                        index={3}
+                        clickCallback={handleClick}
+                        selectionCallback={applySelectedWithSync}
+                        id="door-aft-right"
+                        disabled={disabledButtons.includes('door-aft-right')}
+                    />
                 </div>
                 <div>
                     <h1 className="text-white font-medium text-xl text-center pb-1">Catering</h1>
                     <Button
                         onClick={(e) => handleClick(() => setCateringActive(1), e, 'door-aft-right')}
-                        className={applySelectedWithSync('w-32', 'catering', cateringActive)}
+                        className={applySelectedWithSync('w-32', 'catering', cateringActive, 'door-aft-right')}
                         type={BUTTON_TYPE.NONE}
                         id="catering"
                     >