183 lines
7.7 KiB
TypeScript
183 lines
7.7 KiB
TypeScript
import { FC, useEffect, useState } from 'react';
|
|
import { LoadingState } from '../../types/general';
|
|
import { WASMDataPax } from '../../types/WASMData';
|
|
import { CoherentCallGSXReset, CoherentCallOptionsSet } from '../../utils/utils';
|
|
import ToggleComponentKH from '../toggleComponent/ToggleComponent';
|
|
import Input from '../input/Input';
|
|
|
|
interface OptionsPaxProps {
|
|
WASMData: WASMDataPax;
|
|
loadingState: LoadingState;
|
|
gsxActive: boolean;
|
|
}
|
|
|
|
const OptionsPax: FC<OptionsPaxProps> = ({ WASMData, loadingState, gsxActive }) => {
|
|
const [paxWeight, setPaxWeight] = useState(WASMData.options.paxWeight);
|
|
const [bagWeight, setBagWeight] = useState(WASMData.options.bagWeight);
|
|
|
|
const updateData = () => {
|
|
CoherentCallOptionsSet(undefined, paxWeight, bagWeight);
|
|
};
|
|
|
|
const handleInput = (input: string, maxValue: number, setter: (value: number) => void) => {
|
|
if (!input) {
|
|
setter(0);
|
|
return;
|
|
}
|
|
|
|
const converted = parseInt(input);
|
|
if (converted) {
|
|
if (converted < 0) setter(0);
|
|
else if (converted > maxValue) setter(maxValue);
|
|
else setter(converted);
|
|
}
|
|
};
|
|
|
|
useEffect(() => updateData(), [paxWeight, bagWeight]);
|
|
|
|
return (
|
|
<>
|
|
<div className="block flex w-full flex-col opacity-100 transition-opacity duration-150 ease-linear mb-4">
|
|
<div className="relative flex w-full items-center justify-between rounded-md bg-zinc-600 p-2 px-4">
|
|
<ToggleComponentKH
|
|
optionName="GSX Sync"
|
|
value={WASMData.options.GSXSync}
|
|
leftLabel={{ value: true }}
|
|
rightLabel={{ value: false }}
|
|
backgroundColor="bg-zinc-700"
|
|
setValue={(value) => {
|
|
CoherentCallOptionsSet(value);
|
|
}}
|
|
disabled={loadingState !== 'preview' || gsxActive}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="block flex w-full flex-col opacity-100 transition-opacity duration-150 ease-linear mb-4">
|
|
<div className="relative flex w-full items-center justify-between rounded-t-md bg-zinc-600 p-2 px-4">
|
|
<div className="flex w-full items-center justify-between text-xs">
|
|
<label>Pax Weight ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
|
|
<Input
|
|
type="text"
|
|
placeholder=""
|
|
className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
|
|
value={paxWeight}
|
|
onChange={(value) => handleInput(value, Number.MAX_VALUE, setPaxWeight)}
|
|
disabled={loadingState !== 'preview' || gsxActive}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="relative flex w-full items-center justify-between rounded-b-md bg-zinc-700 p-2 px-4">
|
|
<div className="flex w-full items-center justify-between text-xs">
|
|
<label>Bag Weight ({WASMData.userData.isImperial ? 'lbs' : 'kg'})</label>
|
|
<Input
|
|
type="text"
|
|
placeholder=""
|
|
className="w-1/2 rounded-lg border border-white bg-zinc-700 px-3 py-2 text-right focus:border-blue-600 focus:ring-blue-600"
|
|
value={bagWeight}
|
|
onChange={(value) => handleInput(value, Number.MAX_VALUE, setBagWeight)}
|
|
disabled={loadingState !== 'preview' || gsxActive}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="block flex w-full flex-col opacity-100 transition-opacity duration-150 ease-linear mb-4">
|
|
{WASMData.userData.isER ? (
|
|
<>
|
|
<h2 className="text-sm font-medium uppercase">SimBrief Profile Settings - ER Variant</h2>
|
|
<table className="text-xs">
|
|
<tbody>
|
|
<tr>
|
|
<td className="p-1 px-2">Max Passengers</td>
|
|
<td className="p-1 px-2">313</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Passenger Weight</td>
|
|
<td className="p-1 px-2">
|
|
{WASMData.options.paxWeight} {WASMData.userData.isImperial ? 'lbs' : 'kg'}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Bag Weight</td>
|
|
<td className="p-1 px-2">
|
|
{WASMData.options.bagWeight} {WASMData.userData.isImperial ? 'lbs' : 'kg'}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Empty Weight</td>
|
|
<td className="p-1 px-2">{WASMData.userData.isImperial ? '284375 lbs' : '128991 kg'}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Max Zero Fuel Weight</td>
|
|
<td className="p-1 px-2">{WASMData.userData.isImperial ? '400000 lbs' : '181437 kg'}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Max Takeoff Weight</td>
|
|
<td className="p-1 px-2">{WASMData.userData.isImperial ? '630500 lbs' : '285990 kg'}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Max Fuel Capacity</td>
|
|
<td className="p-1 px-2">{WASMData.userData.isImperial ? '282619 lbs' : '128193 kg'}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
) : (
|
|
<>
|
|
<h2 className="text-sm font-medium uppercase">SimBrief Profile Settings - Normal variant</h2>
|
|
<table className="text-xs">
|
|
<tbody>
|
|
<tr>
|
|
<td className="p-1 px-2">Max Passengers</td>
|
|
<td className="p-1 px-2">313</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Passenger Weight</td>
|
|
<td className="p-1 px-2">
|
|
{WASMData.options.paxWeight} {WASMData.userData.isImperial ? 'lbs' : 'kg'}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Bag Weight</td>
|
|
<td className="p-1 px-2">
|
|
{WASMData.options.bagWeight} {WASMData.userData.isImperial ? 'lbs' : 'kg'}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Empty Weight</td>
|
|
<td className="p-1 px-2">{WASMData.userData.isImperial ? '283975 lbs' : '128809 kg'}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Max Zero Fuel Weight</td>
|
|
<td className="p-1 px-2">{WASMData.userData.isImperial ? '400000 lbs' : '181437 kg'}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Max Takeoff Weight</td>
|
|
<td className="p-1 px-2">{WASMData.userData.isImperial ? '625500 lbs' : '283722 kg'}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-1 px-2">Max Fuel Capacity</td>
|
|
<td className="p-1 px-2">{WASMData.userData.isImperial ? '256207 lbs' : '116213 kg'}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="block flex w-full flex-col opacity-100 transition-opacity duration-150 ease-linear mb-4">
|
|
<button
|
|
className="middle none center rounded-lg bg-red-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-red-500/20 transition-all hover:shadow-lg hover:shadow-red-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
|
|
data-ripple-light="true"
|
|
onClick={CoherentCallGSXReset}
|
|
>
|
|
Reset internal GSX state & disable SYNC
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default OptionsPax;
|