fix: wheels and chocks element clash (#8226)

* fix: wheels and chocks element clash * fix: lint
flybywiresim · Oct 3, 2023 · bc03273 · bc03273
1 parent ad7d65e
commit bc03273
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git a/fbw-a32nx/src/systems/instruments/src/EFB/Ground/Pages/Services/A320_251N/A320Services.tsx b/fbw-a32nx/src/systems/instruments/src/EFB/Ground/Pages/Services/A320_251N/A320Services.tsx
@@ -560,6 +560,30 @@ export const A320Services: React.FC = () => {
                 >
                     <DoorClosedFill size={36} />
                 </GroundServiceButton>
+
+                {/* Wheel Chocks and Security Cones are only visual information. To reuse styling */}
+                {/* the ServiceButtonWrapper has been re-used. */}
+                {!!wheelChocksEnabled && (
+                    <div className={`flex flex-row items-center space-x-6 py-6 px-6 cursor-pointer ${(wheelChocksVisible) ? 'text-green-500' : 'text-gray-500'}`}>
+                        <div className={`flex justify-center items-end -ml-2 -mr-[2px] ${(wheelChocksVisible) ? 'text-green-500' : 'text-gray-500'}`}>
+                            <Chock size="12" stroke="4" />
+                            <Wheel size="36" stroke="5" className="-mx-0.5" />
+                            <Chock size="12" stroke="4" />
+                        </div>
+                        <h1 className="flex-shrink-0 text-2xl font-medium text-current">
+                            {t('Ground.Services.WheelChocks')}
+                        </h1>
+                    </div>
+                )}
+
+                {!!conesEnabled && (
+                    <div className={`flex flex-row items-center space-x-6 py-6 px-6 cursor-pointer ${(conesVisible) ? 'text-green-500' : 'text-gray-500'}`}>
+                        <ConeStriped size="38" stroke="1.5" className="mr-2" />
+                        <h1 className="flex-shrink-0 text-2xl font-medium text-current">
+                            {t('Ground.Services.Cones')}
+                        </h1>
+                    </div>
+                )}
             </ServiceButtonWrapper>
 
             <ServiceButtonWrapper xl={900} y={24} className="">
@@ -624,32 +648,6 @@ export const A320Services: React.FC = () => {
 
             </ServiceButtonWrapper>
 
-            {/* Wheel Chocks and Security Cones are only visual information. To reuse styling */}
-            {/* the ServiceButtonWrapper has been re-used. */}
-            <ServiceButtonWrapper xr={800} y={600} className="border-0 divide-y-0">
-                {!!wheelChocksEnabled && (
-                    <div className={`flex flex-row items-center space-x-6 py-6 px-6 cursor-pointer ${(wheelChocksVisible) ? 'text-green-500' : 'text-gray-500'}`}>
-                        <div className={`flex justify-center items-end -ml-2 -mr-[2px] ${(wheelChocksVisible) ? 'text-green-500' : 'text-gray-500'}`}>
-                            <Chock size="12" stroke="4" />
-                            <Wheel size="36" stroke="5" className="-mx-0.5" />
-                            <Chock size="12" stroke="4" />
-                        </div>
-                        <h1 className="flex-shrink-0 text-2xl font-medium text-current">
-                            {t('Ground.Services.WheelChocks')}
-                        </h1>
-                    </div>
-                )}
-
-                {!!conesEnabled && (
-                    <div className={`flex flex-row items-center space-x-6 py-6 px-6 cursor-pointer ${(conesVisible) ? 'text-green-500' : 'text-gray-500'}`}>
-                        <ConeStriped size="38" stroke="1.5" className="mr-2" />
-                        <h1 className="flex-shrink-0 text-2xl font-medium text-current">
-                            {t('Ground.Services.Cones')}
-                        </h1>
-                    </div>
-                )}
-            </ServiceButtonWrapper>
-
             {/* Visual indications for tug and doors */}
             {!!pushBackAttached && (
                 <div

diff --git a/fbw-a32nx/src/systems/instruments/src/EFB/Ground/Pages/Services/A380_842/A380Services.tsx b/fbw-a32nx/src/systems/instruments/src/EFB/Ground/Pages/Services/A380_842/A380Services.tsx
@@ -6,14 +6,14 @@ import React, { FC, useEffect, useRef } from 'react';
 import { useSimVar } from '@flybywiresim/fbw-sdk';
 import {
     ArchiveFill,
-    ConeStriped,
+    // ConeStriped,
     DoorClosedFill,
     HandbagFill,
     PersonPlusFill,
     PlugFill,
-    TriangleFill as Chock,
+    // TriangleFill as Chock,
     Truck,
-    VinylFill as Wheel,
+    // VinylFill as Wheel,
 } from 'react-bootstrap-icons';
 import { ActionCreatorWithOptionalPayload } from '@reduxjs/toolkit';
 import { t } from '../../../../translation';
@@ -126,11 +126,14 @@ export const A380Services: React.FC = () => {
     const [gpuActive] = useSimVar('A:INTERACTIVE POINT OPEN:19', 'Percent over 100', 200);
 
     // Wheel Chocks and Cones
+    // TODO FIXME: Reenable
+    /*
     const [isGroundEquipmentVisible] = useSimVar('L:A32NX_GND_EQP_IS_VISIBLE', 'bool', 500);
     const [wheelChocksEnabled] = useSimVar('L:A32NX_MODEL_WHEELCHOCKS_ENABLED', 'bool', 500);
     const [conesEnabled] = useSimVar('L:A32NX_MODEL_CONES_ENABLED', 'bool', 500);
     const wheelChocksVisible = wheelChocksEnabled && isGroundEquipmentVisible;
     const conesVisible = conesEnabled && isGroundEquipmentVisible;
+    */
 
     // Service events
     const toggleMain1LeftDoor = () => SimVar.SetSimVarValue('K:TOGGLE_AIRCRAFT_EXIT', 'enum', 1);
@@ -626,8 +629,10 @@ export const A380Services: React.FC = () => {
 
             </ServiceButtonWrapper>
 
+            {/* TODO FIXME: Redesign chocks and security cones UI */}
             {/* Wheel Chocks and Security Cones are only visual information. To reuse styling */}
             {/* the ServiceButtonWrapper has been re-used. */}
+            {/*
             <ServiceButtonWrapper xr={800} y={600} className="border-0 divide-y-0">
                 {!!wheelChocksEnabled && (
                     <div className={`flex flex-row items-center space-x-6 py-6 px-6 cursor-pointer ${(wheelChocksVisible) ? 'text-green-500' : 'text-gray-500'}`}>
@@ -651,6 +656,7 @@ export const A380Services: React.FC = () => {
                     </div>
                 )}
             </ServiceButtonWrapper>
+            */}
 
             {/* Visual indications for tug and doors */}
             {!!pushBackAttached && (