diff --git a/src/app/Marine2/components/boxes/Tanks/Tank/Tank.tsx b/src/app/Marine2/components/boxes/Tanks/Tank/Tank.tsx index 5d7fe8207..aa5881d93 100644 --- a/src/app/Marine2/components/boxes/Tanks/Tank/Tank.tsx +++ b/src/app/Marine2/components/boxes/Tanks/Tank/Tank.tsx @@ -9,19 +9,17 @@ import useSize from "@react-hook/size" import { ComponentMode } from "@m2Types/generic/component-mode" import { compactStyles, horizontalStyles, verticalStyles } from "./Styles" import { FLUID_TRANSLATIONS } from "../../../../utils/constants/fluids" -import { formatCapacityFor } from "../../../../utils/formatters/tanks/format-capacity-for" -import { tankUnitFor } from "../../../../utils/formatters/tanks/tank-unit-for" import { formatLevelFor } from "../../../../utils/formatters/tanks/format-level-for" -import { roundLevelWidthFor } from "../../../../utils/formatters/tanks/round-level-width-for" import { FluidIcon } from "./FluidIcon/FluidIcon" import { ValueWithPercentage } from "./ValueWithPercentage/ValueWithPercentage" import { Capacity } from "./Capacity/Capacity" +import { ScreenOrientation } from "@m2Types/generic/screen-orientation" interface Props { tankInstanceId: number levelWidth?: number componentMode?: ComponentMode - orientation?: "vertical" | "horizontal" + orientation?: ScreenOrientation parentSize?: ISize } @@ -53,8 +51,6 @@ const Tank = ({ tankInstanceId, componentMode, levelWidth, orientation = "vertic // Tanks that are missing level readings and only have capacity const isAuxillaryTank = !!capacity && level === undefined - console.log(componentMode, orientation) - if (componentMode === "compact") { return (
@@ -62,11 +58,7 @@ const Tank = ({ tankInstanceId, componentMode, levelWidth, orientation = "vertic
{tankTitle}
- - - - -{/*
+
-{/*
1000 ? width * 0.7 : width * 0.5, - display: width < 368 ? "none" : "block", - } - : parentSize?.width - ? { - width: parentSize.width > 1000 ? parentSize.width * 0.7 : parentSize.width * 0.5, - display: parentSize.width < 400 ? "none" : "block", - } - : {} - } - > - -
*/} - - - - - +
1000 ? width * 0.7 : width * 0.5, + display: width < 368 ? "none" : "block", + } + : parentSize?.width + ? { + width: parentSize.width > 1000 ? parentSize.width * 0.7 : parentSize.width * 0.5, + display: parentSize.width < 400 ? "none" : "block", + } + : {} + } + > + +
+
) } @@ -163,6 +155,7 @@ const Tank = ({ tankInstanceId, componentMode, levelWidth, orientation = "vertic
= ({ level, className, isAuxillaryTank, orientation = "vertical" }) => { - const reverse = false - const isCritical = reverse ? level < 25 : level > 75 +export const ValueWithPercentage: FC = ({ + fluid, + level, + className, + isAuxillaryTank, + orientation = "vertical", +}) => { + const isCritical = isReversedLevelFor(fluid) ? level > 75 : level < 25 const value = isAuxillaryTank ? "--" : formatLevelFor(level) const classes = classnames("tank-level min-w-[70px]", className, { "text-victron-red": isCritical, - "ml-2 md:ml-5 text-end": orientation === 'vertical' + "ml-2 md:ml-5 text-end": orientation === "vertical", }) const unitClasses = classnames("ml-0.5", { "text-victron-red/70": isCritical, - "text-victron-gray/70": !isCritical || isAuxillaryTank + "text-victron-gray/70": !isCritical || isAuxillaryTank, }) return ( diff --git a/src/app/Marine2/utils/helpers/tanks/is-reversed-level-for.ts b/src/app/Marine2/utils/helpers/tanks/is-reversed-level-for.ts new file mode 100644 index 000000000..c213393e7 --- /dev/null +++ b/src/app/Marine2/utils/helpers/tanks/is-reversed-level-for.ts @@ -0,0 +1 @@ +export const isReversedLevelFor = (fluid: number) => fluid === 2 || fluid === 5 \ No newline at end of file