Skip to content

Commit

Permalink
feat(GSX): Automatically start Refuel Process & allow Instant Refuel …
Browse files Browse the repository at this point in the history 
…with GSX Fuel Sync enabled (#8407)

* GSX-Integration-AutoRefuel
  • Loading branch information
@markszutor
markszutor committed Jan 20, 2024
1 parent 23dca98 commit 48ce2e2
Showing 1 changed file with 44 additions and 30 deletions.
74 changes: 44 additions & 30 deletions hsim-common/src/systems/instruments/src/EFB/Ground/Pages/FuelPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const TankReadoutWidget = ({ title, current, target, capacity, currentUnit, tank
const getFuelBarPercent = (curr: number, max: number) => (Math.max(curr, 0) / max) * 100;

return (
<div className={`overflow-hidden w-min p-4 space-y-3 bg-theme-body ${className}`} style={{ width: `${width}px` }}>
<div className={`bg-theme-body w-min space-y-3 overflow-hidden p-4 ${className}`} style={{ width: `${width}px` }}>
<div className={inlinedTitle ? 'flex flex-row items-center justify-between' : undefined}>
<h2>{title}</h2>
<p>{`${convertedFuelValue}/${round(tankValue)} ${currentUnit}`}</p>
Expand All @@ -54,7 +54,6 @@ const TankReadoutWidget = ({ title, current, target, capacity, currentUnit, tank
);
};


export const FuelPage = () => {
const [airframe] = useState(getAirframeType());
const TOTAL_FUEL_GALLONS = Fuel[(airframe !== null ? airframe : 'A320_214')].total;
Expand Down Expand Up @@ -100,11 +99,14 @@ export const FuelPage = () => {
// GSX
const [gsxFuelSyncEnabled] = usePersistentNumberProperty('GSX_FUEL_SYNC', 0);
const [gsxFuelHoseConnected] = useSimVar('L:FSDT_GSX_FUELHOSE_CONNECTED', 'Number');
const [gsxRefuelState] = useSimVar('L:FSDT_GSX_REFUELING_STATE', 'Number');

const { units } = useAppSelector((state) => state.simbrief.data);
const { planRamp } = useAppSelector((state) => state.simbrief.data.fuels);
const simbriefDataLoaded = isSimbriefDataLoaded();

const gsxRefuelActive = () => (gsxRefuelState === 4 || gsxRefuelState === 5);

const isAirplaneCnD = () => !(simGroundSpeed > 0.1 || eng1Running || eng2Running || !isOnGround || (!busDC2 && !busDCHot1));

const airplaneCanRefuel = () => {
Expand All @@ -115,7 +117,7 @@ export const FuelPage = () => {
}

if (gsxFuelSyncEnabled === 1) {
if (gsxFuelHoseConnected === 1) {
if (gsxFuelHoseConnected === 1 || refuelRate === '2') {
return true;
}

Expand Down Expand Up @@ -154,7 +156,14 @@ export const FuelPage = () => {
if (refuelStartedByUser) {
setRefuelStartedByUser(false);
}
return gsxFuelSyncEnabled === 1 ? `(${t('Ground.Fuel.GSXFuelSyncEnabled')})` : `(${t('Ground.Fuel.Unavailable')})`;
if (gsxFuelSyncEnabled === 1) {
if (!gsxRefuelActive()) {
return `(${t('Ground.Fuel.GSXFuelSyncEnabled')})`;
}

return '';
}
return `(${t('Ground.Fuel.Unavailable')})`;
};

const formatRefuelStatusClass = () => {
Expand All @@ -167,6 +176,9 @@ export const FuelPage = () => {
}
return ((totalTarget) > (totalCurrentGallon())) ? 'text-green-500' : 'text-yellow-500';
}
if (gsxFuelSyncEnabled && !gsxRefuelActive()) {
return 'text-theme-highlight';
}
return 'text-theme-accent';
};

Expand Down Expand Up @@ -285,9 +297,9 @@ export const FuelPage = () => {
const roundUpNearest100 = (plannedFuel: number) => Math.ceil(plannedFuel / 100) * 100;

return (
<div className="flex relative flex-col justify-between mt-6 h-content-section-reduced">
<div className="h-content-section-reduced relative mt-6 flex flex-col justify-between">
<div className="z-30">
<div className="flex absolute inset-x-0 top-0 flex-col items-center mx-auto space-y-3">
<div className="absolute inset-x-0 top-0 mx-auto flex flex-col items-center space-y-3">
<TankReadoutWidget
title={t('Ground.Fuel.TotalFuel')}
current={totalCurrent()}
Expand All @@ -296,7 +308,7 @@ export const FuelPage = () => {
currentUnit={currentUnit}
tankValue={totalFuel()}
convertedFuelValue={totalCurrent()}
className="overflow-hidden rounded-2xl border-2 border-theme-accent"
className="border-theme-accent overflow-hidden rounded-2xl border-2"
inlinedTitle
width={420}
/>
Expand All @@ -308,13 +320,13 @@ export const FuelPage = () => {
currentUnit={currentUnit}
tankValue={centerTank()}
convertedFuelValue={convertFuelValueCenter(centerCurrent)}
className="overflow-hidden rounded-2xl border-2 border-theme-accent"
className="border-theme-accent overflow-hidden rounded-2xl border-2"
inlinedTitle
width={420}
/>
</div>
<div className="flex absolute inset-x-0 top-40 flex-row justify-between">
<div className="overflow-hidden w-min rounded-2xl border-2 divide-y border-theme-accent divide-theme-accent">
<div className="absolute inset-x-0 top-40 flex flex-row justify-between">
<div className="border-theme-accent divide-theme-accent w-min divide-y overflow-hidden rounded-2xl border-2">
<TankReadoutWidget
title={t('Ground.Fuel.LeftInnerTank')}
current={LInnCurrent}
Expand All @@ -334,7 +346,7 @@ export const FuelPage = () => {
convertedFuelValue={convertFuelValueCenter(LOutCurrent)}
/>
</div>
<div className="overflow-hidden w-min rounded-2xl border-2 divide-y border-theme-accent divide-theme-accent">
<div className="border-theme-accent divide-theme-accent w-min divide-y overflow-hidden rounded-2xl border-2">
<TankReadoutWidget
title={t('Ground.Fuel.RightInnerTank')}
current={RInnCurrent}
Expand All @@ -356,7 +368,7 @@ export const FuelPage = () => {
</div>
</div>
</div>
<div className="flex flex-col justify-end items-center">
<div className="flex flex-col items-center justify-end">
{/* FIXME TODO: Replace with Tailwind JIT values later */}
<div className="absolute inset-x-0 bottom-0" style={{ transform: 'translate(0px, -150px)' }}>
<OverWingOutline className="absolute bottom-0 left-0 z-20" />
Expand All @@ -383,29 +395,29 @@ export const FuelPage = () => {
/>
{/* tl overlay */}
<div
className="absolute z-10 bottom-overlay-t-y left-overlay-tl bg-theme-body -rotate-26.5"
className="bottom-overlay-t-y left-overlay-tl bg-theme-body -rotate-26.5 absolute z-10"
style={{ transform: 'rotate(-26.5deg)', width: '490px', height: '140px', bottom: '240px', left: '82px' }}
/>
{/* tr overlay */}
<div
className="absolute z-10 right-overlay-tr bottom-overlay-t-y bg-theme-body rotate-26.5"
className="right-overlay-tr bottom-overlay-t-y bg-theme-body rotate-26.5 absolute z-10"
style={{ transform: 'rotate(26.5deg)', width: '490px', height: '140px', bottom: '240px', right: '82px' }}
/>
{/* bl overlay */}
<div
className="absolute z-10 bottom-overlay-b-y left-overlay-bl bg-theme-body -rotate-18.5"
className="bottom-overlay-b-y left-overlay-bl bg-theme-body -rotate-18.5 absolute z-10"
style={{ transform: 'rotate(-18.5deg)', width: '484px', height: '101px', bottom: '78px', left: '144px' }}
/>
{/* br overlay */}
<div
className="absolute z-10 right-overlay-br bottom-overlay-b-y bg-theme-body rotate-18.5"
className="right-overlay-br bottom-overlay-b-y bg-theme-body rotate-18.5 absolute z-10"
style={{ transform: 'rotate(18.5deg)', width: '484px', height: '101px', bottom: '78px', right: '144px' }}
/>
</div>

<div className="flex overflow-x-hidden absolute bottom-0 left-0 z-10 flex-row max-w-3xl rounded-2xl border border-theme-accentborder-2">
<div className="py-3 px-5 space-y-4">
<div className="flex flex-row justify-between items-center">
<div className="border-theme-accentborder-2 absolute bottom-0 left-0 z-10 flex max-w-3xl flex-row overflow-x-hidden rounded-2xl border">
<div className="space-y-4 px-5 py-3">
<div className="flex flex-row items-center justify-between">
<div className="flex flex-row items-center space-x-3">
<h2 className="font-medium">{t('Ground.Fuel.Refuel')}</h2>
<p className={formatRefuelStatusClass()}>{formatRefuelStatusLabel()}</p>
Expand All @@ -429,12 +441,12 @@ export const FuelPage = () => {
value={inputValue}
onChange={(x) => updateDesiredFuel(x)}
/>
<div className="absolute top-2 right-4 text-lg text-gray-400">{currentUnit}</div>
<div className="absolute right-4 top-2 text-lg text-gray-400">{currentUnit}</div>
</div>
{simbriefDataLoaded && (
<TooltipWrapper text={t('Ground.Fuel.TT.FillBlockFuelFromSimBrief')}>
<div
className="flex justify-center items-center px-2 h-auto rounded-md rounded-l-none border-2 transition duration-100 text-theme-body hover:text-theme-highlight bg-theme-highlight hover:bg-theme-body border-theme-highlight"
className="text-theme-body hover:text-theme-highlight bg-theme-highlight hover:bg-theme-body border-theme-highlight flex h-auto items-center justify-center rounded-md rounded-l-none border-2 px-2 transition duration-100"
onClick={simbriefDataLoaded ? handleFuelAutoFill : undefined}
>
<CloudArrowDown size={26} />
Expand All @@ -445,18 +457,20 @@ export const FuelPage = () => {
</div>
</div>

<div
className={`flex justify-center items-center w-20 ${formatRefuelStatusClass()} bg-current`}
onClick={() => switchRefuelState()}
>
<div className={`${airplaneCanRefuel() ? 'text-white' : 'text-theme-unselected'}`}>
<PlayFill size={50} className={refuelStartedByUser ? 'hidden' : ''} />
<StopCircleFill size={50} className={refuelStartedByUser ? '' : 'hidden'} />
{(!gsxFuelSyncEnabled || refuelRate === '2') && (
<div
className={`flex w-20 items-center justify-center ${formatRefuelStatusClass()} bg-current`}
onClick={() => switchRefuelState()}
>
<div className={`${airplaneCanRefuel() ? 'text-white' : 'text-theme-unselected'}`}>
<PlayFill size={50} className={refuelStartedByUser ? 'hidden' : ''} />
<StopCircleFill size={50} className={refuelStartedByUser ? '' : 'hidden'} />
</div>
</div>
</div>
)}
</div>

<div className="flex overflow-x-hidden absolute right-6 bottom-0 flex-col justify-center items-center py-3 px-6 space-y-2 rounded-2xl border border-theme-accent">
<div className="border-theme-accent absolute bottom-0 right-6 flex flex-col items-center justify-center space-y-2 overflow-x-hidden rounded-2xl border px-6 py-3">
<h2 className="flex font-medium">{t('Ground.Fuel.RefuelTime')}</h2>

<SelectGroup>
Expand Down

0 comments on commit 48ce2e2

Please sign in to comment.