Integration finished

PackageSources/js-bundle/src/components/stationEntry/StationEntryF.tsx

@@ -78,129 +78,147 @@ const StationEntryF: FC<StationEntryProps> = ({ WASMData, loadingState, setLoadi
     <>
       <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">
-          <label>Fuel ({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`}
-            value={fuel}
-            onChange={(e) => handleInput(e.target.value, WASMData.limits.maxFuel, setFuel)}
-            disabled={loadingState !== 'preview' || GSXActive()}
-          />
-          <button
-            className="middle none center rounded-lg bg-green-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-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={() => {
-              SimVar.SetSimVarValue(
-                'L:MD11_EFB_PAYLOAD_FUEL',
-                'lbs',
-                WASMData.userData.isImperial ? fuel : fuel * 2.20462262185
-              );
-              SimVar.SetSimVarValue('L:MD11_EFB_READ_READY', 'bool', true);
-              setFuelEnabled(WASMData.livePayload.fuel === fuel);
-            }}
-            disabled={loadingState !== 'preview' || !fuelEnabled || GSXActive()}
-          >
-            Load Fuel
-          </button>
+          <div className="flex w-full items-center justify-between text-xs">
+            <label>Fuel ({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`}
+              value={fuel}
+              onChange={(e) => handleInput(e.target.value, WASMData.limits.maxFuel, setFuel)}
+              disabled={loadingState !== 'preview' || GSXActive()}
+            />
+            <button
+              className="middle none center rounded-lg bg-green-600 px-6 py-3 font-sans text-xs font-bold uppercase text-white shadow-md shadow-green-500/20 transition-all hover:shadow-lg hover:shadow-green-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={() => {
+                SimVar.SetSimVarValue(
+                  'L:MD11_EFB_PAYLOAD_FUEL',
+                  'lbs',
+                  WASMData.userData.isImperial ? fuel : fuel * 2.20462262185
+                );
+                SimVar.SetSimVarValue('L:MD11_EFB_READ_READY', 'bool', true);
+                setFuelEnabled(WASMData.livePayload.fuel === fuel);
+              }}
+              disabled={loadingState !== 'preview' || !fuelEnabled || GSXActive()}
+            >
+              Load Fuel
+            </button>
+          </div>
         </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">
-          <label>Upper 1</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={upper1}
-            onChange={(e) => handleInput(e.target.value, WASMData.limits.upper1, setUpper1)}
-            disabled={loadingState !== 'preview' || GSXActive()}
-          />
+          <div className="flex w-full items-center justify-between text-xs">
+            <label>Upper 1</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={upper1}
+              onChange={(e) => handleInput(e.target.value, WASMData.limits.upper1, setUpper1)}
+              disabled={loadingState !== 'preview' || GSXActive()}
+            />
+          </div>
         </div>
         <div className="relative flex w-full items-center justify-between bg-zinc-700 p-2 px-4">
-          <label>Upper 2</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={upper2}
-            onChange={(e) => handleInput(e.target.value, WASMData.limits.upper2, setUpper2)}
-            disabled={loadingState !== 'preview' || GSXActive()}
-          />
+          <div className="flex w-full items-center justify-between text-xs">
+            <label>Upper 2</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={upper2}
+              onChange={(e) => handleInput(e.target.value, WASMData.limits.upper2, setUpper2)}
+              disabled={loadingState !== 'preview' || GSXActive()}
+            />
+          </div>
         </div>
         <div className="relative flex w-full items-center justify-between bg-zinc-600 p-2 px-4">
-          <label>Upper 3</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={upper3}
-            onChange={(e) => handleInput(e.target.value, WASMData.limits.upper3, setUpper3)}
-            disabled={loadingState !== 'preview' || GSXActive()}
-          />
+          <div className="flex w-full items-center justify-between text-xs">
+            <label>Upper 3</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={upper3}
+              onChange={(e) => handleInput(e.target.value, WASMData.limits.upper3, setUpper3)}
+              disabled={loadingState !== 'preview' || GSXActive()}
+            />
+          </div>
         </div>
         <div className="relative flex w-full items-center justify-between bg-zinc-700 p-2 px-4">
-          <label>Upper 4</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={upper4}
-            onChange={(e) => handleInput(e.target.value, WASMData.limits.upper4, setUpper4)}
-            disabled={loadingState !== 'preview' || GSXActive()}
-          />
+          <div className="flex w-full items-center justify-between text-xs">
+            <label>Upper 4</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={upper4}
+              onChange={(e) => handleInput(e.target.value, WASMData.limits.upper4, setUpper4)}
+              disabled={loadingState !== 'preview' || GSXActive()}
+            />
+          </div>
         </div>
         <div className="relative flex w-full items-center justify-between bg-zinc-600 p-2 px-4">
-          <label>Forward Cargo ({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={lowerForward}
-            onChange={(e) => handleInput(e.target.value, WASMData.limits.lowerForward, setLowerForward)}
-            disabled={loadingState !== 'preview' || GSXActive()}
-          />
+          <div className="flex w-full items-center justify-between text-xs">
+            <label>Forward Cargo ({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={lowerForward}
+              onChange={(e) => handleInput(e.target.value, WASMData.limits.lowerForward, setLowerForward)}
+              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">
-          <label>Aft Cargo ({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={lowerRear}
-            onChange={(e) => handleInput(e.target.value, WASMData.limits.lowerRear, setLowerRear)}
-            disabled={loadingState !== 'preview' || GSXActive()}
-          />
+          <div className="flex w-full items-center justify-between text-xs">
+            <label>Aft Cargo ({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={lowerRear}
+              onChange={(e) => handleInput(e.target.value, WASMData.limits.lowerRear, setLowerRear)}
+              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">
         <div className="relative flex w-full items-center justify-between rounded-t-md bg-zinc-600 p-2 px-4">
-          <label>
-            {loadingState !== 'loaded' && !GSXActive() ? 'Expected' : 'Actual'} ZFW (
-            {WASMData.userData.isImperial ? 'lbs' : 'kg'})
-          </label>
-          <input
-            type="text"
-            placeholder=""
-            className={`w-1/2 rounded-lg border ${ZFWValid() ? 'border-white' : 'border-red-500 text-red-500'} bg-zinc-700 px-3 py-2 text-right`}
-            disabled
-            value={ZFW()}
-          />
+          <div className="flex w-full items-center justify-between text-xs">
+            <label>
+              {loadingState !== 'loaded' && !GSXActive() ? 'Expected' : 'Actual'} ZFW (
+              {WASMData.userData.isImperial ? 'lbs' : 'kg'})
+            </label>
+            <input
+              type="text"
+              placeholder=""
+              className={`w-1/2 rounded-lg border ${ZFWValid() ? 'border-white' : 'border-red-500 text-red-500'} bg-zinc-700 px-3 py-2 text-right`}
+              disabled
+              value={ZFW()}
+            />
+          </div>
         </div>
         <div className="relative flex w-full items-center justify-between rounded-b-md bg-zinc-700 p-2 px-4">
-          <label>
-            {loadingState !== 'loaded' && !GSXActive() ? 'Expected' : 'Actual'} GW (
-            {WASMData.userData.isImperial ? 'lbs' : 'kg'})
-          </label>
-          <input
-            type="text"
-            placeholder=""
-            className={`w-1/2 rounded-lg border ${GWValid() ? 'border-white' : 'border-red-500 text-red-500'} bg-zinc-700 px-3 py-2 text-right`}
-            disabled
-            value={GW()}
-          />
+          <div className="flex w-full items-center justify-between text-xs">
+            <label>
+              {loadingState !== 'loaded' && !GSXActive() ? 'Expected' : 'Actual'} GW (
+              {WASMData.userData.isImperial ? 'lbs' : 'kg'})
+            </label>
+            <input
+              type="text"
+              placeholder=""
+              className={`w-1/2 rounded-lg border ${GWValid() ? 'border-white' : 'border-red-500 text-red-500'} bg-zinc-700 px-3 py-2 text-right`}
+              disabled
+              value={GW()}
+            />
+          </div>
         </div>
       </div>
 
@@ -208,7 +226,6 @@ const StationEntryF: FC<StationEntryProps> = ({ WASMData, loadingState, setLoadi
         loadingState={loadingState}
         loadDisabled={!ZFWValid() || !GWValid()}
         GSXSync={WASMData.options.GSXSync}
-        GSXActive={GSXActive()}
         load={() => {
           setLoadingState('loaded');