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