From 8cbc4a178a439dc0cdf2b2b23c57777471f2a75e Mon Sep 17 00:00:00 2001 From: fwaalkens Date: Tue, 20 Feb 2024 11:35:45 +0100 Subject: [PATCH] Implemented fahrenheit support for temperatures. --- src/app/Marine2/components/boxes/Battery/Battery.tsx | 10 +++++++--- .../boxes/EnvironmentOverview/TemperatureData.tsx | 12 +++++++----- src/app/Marine2/types/data/unit.ts | 2 +- .../formatters/temperature/celcius-to-fahrenheit.ts | 1 + .../formatters/temperature/temperature-value-for.ts | 11 +++++++++++ 5 files changed, 27 insertions(+), 9 deletions(-) create mode 100644 src/app/Marine2/utils/formatters/temperature/celcius-to-fahrenheit.ts create mode 100644 src/app/Marine2/utils/formatters/temperature/temperature-value-for.ts diff --git a/src/app/Marine2/components/boxes/Battery/Battery.tsx b/src/app/Marine2/components/boxes/Battery/Battery.tsx index 9da3f0575..2371e48b9 100644 --- a/src/app/Marine2/components/boxes/Battery/Battery.tsx +++ b/src/app/Marine2/components/boxes/Battery/Battery.tsx @@ -3,7 +3,7 @@ import classNames from "classnames" import { Styles } from "./Styles" import { ISize } from "@m2Types/generic/size" import { ValueWithUnit } from "@m2Types/data/value-with-units" -import { Battery as BatteryType } from "@victronenergy/mfd-modules" +import { Battery as BatteryType, useAppStore } from "@victronenergy/mfd-modules" import { applyStyles, StylesType } from "app/Marine2/utils/media" import Box from "../../ui/Box" import ValueBar from "../../ui/ValueBar" @@ -13,6 +13,7 @@ import { batteryIconFor } from "../../../utils/formatters/devices/battery/batter import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon" import { colorFor } from "../../../utils/formatters/generic" import BatteryIcon from "../../../images/icons/battery.svg" +import { temperatureValueFor } from "../../../utils/formatters/temperature/temperature-value-for" interface Props { battery: BatteryType @@ -21,6 +22,7 @@ interface Props { const Battery = ({ battery }: Props) => { const isSimpleBattery = !(battery.state || battery.state === 0) const [boxSize, setBoxSize] = useState({ width: 0, height: 0 }) + const { temperatureUnitToHumanReadable, temperatureUnit } = useAppStore() if (isSimpleBattery) { return ( @@ -63,8 +65,10 @@ const Battery = ({ battery }: Props) => {

{batteryNameFor(battery.state, battery.timetogo ?? null)}

{battery.temperature && (

- {Math.round(battery.temperature)} - °C + {temperatureValueFor(battery.temperature, temperatureUnit)} + + {temperatureUnitToHumanReadable} +

)} diff --git a/src/app/Marine2/components/boxes/EnvironmentOverview/TemperatureData.tsx b/src/app/Marine2/components/boxes/EnvironmentOverview/TemperatureData.tsx index 58e3697fd..d3832e7e6 100644 --- a/src/app/Marine2/components/boxes/EnvironmentOverview/TemperatureData.tsx +++ b/src/app/Marine2/components/boxes/EnvironmentOverview/TemperatureData.tsx @@ -1,5 +1,5 @@ import { observer } from "mobx-react-lite" -import { useTemperature } from "@victronenergy/mfd-modules" +import { useAppStore, useTemperature } from "@victronenergy/mfd-modules" import ValueOverview from "../../ui/ValueOverview" import ThermometerIcon from "../../../images/icons/thermometer.svg" import ValueBox from "../../ui/ValueBox" @@ -8,6 +8,7 @@ import { useCallback, useContext, useEffect } from "react" import { VisibleComponentsContext } from "./EnvironmentOverview" import { ComponentMode } from "@m2Types/generic/component-mode" import { ISize } from "@m2Types/generic/size" +import { temperatureValueFor } from "../../../utils/formatters/temperature/temperature-value-for" interface Props { dataId: number @@ -18,6 +19,7 @@ interface Props { const TemperatureData = ({ dataId, componentMode, boxSize }: Props) => { const { temperature, customName } = useTemperature(dataId) const { passVisibility } = useContext(VisibleComponentsContext) + const { temperatureUnitToHumanReadable, temperatureUnit } = useAppStore() const handlePassVisibility = useCallback( (id: number, isVisible: boolean) => { @@ -43,9 +45,9 @@ const TemperatureData = ({ dataId, componentMode, boxSize }: Props) => { ) @@ -55,9 +57,9 @@ const TemperatureData = ({ dataId, componentMode, boxSize }: Props) => { } - value={temperature} + value={temperatureValueFor(temperature, temperatureUnit)} bottomValues={[]} - unit="°C" + unit={temperatureUnitToHumanReadable} /> ) } diff --git a/src/app/Marine2/types/data/unit.ts b/src/app/Marine2/types/data/unit.ts index 3c7c2db2f..7c1c66527 100644 --- a/src/app/Marine2/types/data/unit.ts +++ b/src/app/Marine2/types/data/unit.ts @@ -1 +1 @@ -export type unit = "W" | "kW" | "V" | "A" | "Hz" | "hPa" | "°C" | "%" +export type unit = "W" | "kW" | "V" | "A" | "Hz" | "hPa" | "°C" | "°F" | "%" diff --git a/src/app/Marine2/utils/formatters/temperature/celcius-to-fahrenheit.ts b/src/app/Marine2/utils/formatters/temperature/celcius-to-fahrenheit.ts new file mode 100644 index 000000000..0894c699d --- /dev/null +++ b/src/app/Marine2/utils/formatters/temperature/celcius-to-fahrenheit.ts @@ -0,0 +1 @@ +export const celsiusToFahrenheit = (degrees: number) => 1.8 * degrees + 32 diff --git a/src/app/Marine2/utils/formatters/temperature/temperature-value-for.ts b/src/app/Marine2/utils/formatters/temperature/temperature-value-for.ts new file mode 100644 index 000000000..23bcf7346 --- /dev/null +++ b/src/app/Marine2/utils/formatters/temperature/temperature-value-for.ts @@ -0,0 +1,11 @@ +import { TemperatureUnit } from "@victronenergy/mfd-modules" +import { celsiusToFahrenheit } from "./celcius-to-fahrenheit" + +export const temperatureValueFor = (temperature: number, unit: TemperatureUnit) => { + if (unit === "fahrenheit") { + const fahrenheitValue = celsiusToFahrenheit(temperature) + return Math.round(fahrenheitValue * 10) / 10 + } + + return Math.round(temperature * 10) / 10 +}