Merge remote-tracking branch 'origin/master' into webpack-update

package.json

@@ -5,8 +5,8 @@
   "license": "ISC",
   "author": "",
   "dependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/runtime": "^7.25.6",
+    "@babel/core": "^7.25.7",
+    "@babel/runtime": "^7.25.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@react-hook/size": "^2.1",
     "@sentry/react": "^6.15.0",
@@ -17,7 +17,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
-    "@victronenergy/mfd-modules": "^7.1.2",
+    "@victronenergy/mfd-modules": "^8.0.1",
     "axios": "^0.28.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
@@ -52,10 +52,9 @@
     "jest-watch-typeahead": "^0.6.1",
     "lodash-es": "^4.17.21",
     "mini-css-extract-plugin": "^2.9.1",
-    "mobx": "^6.13.2",
+    "mobx": "^6.13.3",
     "mobx-react": "^9.1.1",
     "mobx-utils": "^6.0.8",
-    "mqtt": "^4.2.8",
     "pnp-webpack-plugin": "^1.7.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-normalize": "^8.0.1",
@@ -82,7 +81,7 @@
     "stream-browserify": "^3.0.0",
     "terser-webpack-plugin": "^4.2.3",
     "ts-pnp": "^1.2.0",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
     "url-loader": "4.1.1",
     "web-vitals": "^0.2.4",
     "webpack": "^5.94.0",

src/app/KVNRV/components/Battery/Battery.tsx

@@ -1,7 +1,7 @@
 import { Card, SIZE_SHORT } from "../../../components/Card"
 
 import { BATTERY_STATE } from "../../../utils/constants"
-import { useBattery } from "@victronenergy/mfd-modules"
+import { useSystemBatteries } from "@victronenergy/mfd-modules"
 import { useSendUpdate } from "../../modules"
 import NumericValue, { formatNumber } from "../../../components/NumericValue"
 import { NotAvailable } from "../NotAvailable"
@@ -73,7 +73,7 @@ type BatteryProps = {
 }
 
 export const Batteries = observer(({ size }: BatteryProps) => {
-  const { batteries } = useBattery()
+  const { batteries } = useSystemBatteries()
 
   const battery = batteries
     ? batteries.length > 1

src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames"
 import { translate } from "react-i18nify"
 import { observer } from "mobx-react-lite"
 import range from "lodash-es/range"
-import { useAppStore, useBattery } from "@victronenergy/mfd-modules"
+import { useAppStore, useSystemBatteries } from "@victronenergy/mfd-modules"
 import { ComponentMode } from "@m2Types/generic/component-mode"
 import { ISize } from "@m2Types/generic/size"
 import Box from "../../ui/Box"
@@ -28,7 +28,7 @@ interface Props {
 
 const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Props) => {
   const { electricalPowerIndicator } = useAppStore()
-  const { batteries } = useBattery()
+  const { batteries } = useSystemBatteries()
   const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
 
   const { temperatureUnitToHumanReadable } = useAppStore()

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, useAppStore } from "@victronenergy/mfd-modules"
+import { BatteryState 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"
@@ -20,7 +20,7 @@ interface Props {
   unit: "°C" | "°F"
 }
 
-const Battery = ({ battery, unit }: Props) => {
+const BatteryState = ({ battery, unit }: Props) => {
   const isSimpleBattery = !(battery.state || battery.state === 0)
   const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
   const { temperatureUnit } = useAppStore()
@@ -80,4 +80,4 @@ const Battery = ({ battery, unit }: Props) => {
   )
 }
 
-export default Battery
+export default BatteryState

src/app/Marine2/components/boxes/DevicesOverview/DevicesOverview.tsx

@@ -7,20 +7,21 @@ import { ReactComponent as DevicesIcon } from "../../../images/icons/devices.svg
 import { AppViews } from "../../../modules/AppViews"
 import {
   ChargerInstanceId,
-  GeneratorFpProvider,
+  ConnectedGensetType,
+  GeneratorConnectedGensetProvider,
   GeneratorRelayProvider,
   InstanceId,
   InverterInstanceId,
   useChargers,
-  useGeneratorFp,
+  useGeneratorConnectedGenset,
   useGeneratorRelay,
   useInverters,
   useVebus,
   VebusInverters,
 } from "@victronenergy/mfd-modules"
 import Charger from "../Charger"
 import Inverter from "../Inverter"
-import GeneratorFp from "../GeneratorFp"
+import GeneratorConnectedGenset from "../GeneratorConnectedGenset"
 import InverterCharger from "../InverterCharger"
 import { useVisibilityNotifier } from "../../../modules"
 import { PageSelectorProps } from "../../ui/PageSelector"
@@ -41,7 +42,7 @@ const DevicesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Pr
   const { inverters } = useInverters()
   const { instanceId: vebusInstanceId, vebusInverters } = useVebus()
   const { chargers } = useChargers()
-  const generatorFp = useGeneratorFp()
+  const generatorConnectedGenset = useGeneratorConnectedGenset()
   const generatorRelay = useGeneratorRelay()
   const [compactBoxSize, setCompactBoxSize] = useState<ISize>({ width: 0, height: 0 })
 
@@ -50,7 +51,7 @@ const DevicesOverview = ({ componentMode = "full", pageSelectorPropsSetter }: Pr
     inverters,
     vebusInverters,
     vebusInstanceId,
-    generatorFp,
+    generatorConnectedGenset,
     generatorRelay,
     compactBoxSize,
     componentMode
@@ -101,7 +102,7 @@ const getAvailableDeviceBoxes = function (
   inverters: InverterInstanceId[],
   vebusInverters: VebusInverters,
   vebusInstanceId: InstanceId,
-  generatorFp: GeneratorFpProvider,
+  generatorConnectedGenset: GeneratorConnectedGensetProvider,
   generatorRelay: GeneratorRelayProvider,
   compactBoxSize: ISize,
   componentMode?: ComponentMode
@@ -150,11 +151,24 @@ const getAvailableDeviceBoxes = function (
     )
   }
 
-  if (!!generatorFp.phases) {
+  if (generatorConnectedGenset.gensetState.gensetType === ConnectedGensetType.ACGENSET) {
+    if (!!generatorConnectedGenset.gensetState.phases) {
+      devices.push(
+        <GeneratorConnectedGenset
+          key={"genset"} // only one /generator/1 can be present
+          generatorConnectedGenset={generatorConnectedGenset}
+          componentMode={componentMode}
+          compactBoxSize={compactBoxSize}
+        />
+      )
+    }
+  }
+
+  if (generatorConnectedGenset.gensetType === ConnectedGensetType.DCGENSET) {
     devices.push(
-      <GeneratorFp
-        key={"generatorFp"}
-        generatorFp={generatorFp}
+      <GeneratorConnectedGenset
+        key={"dcgenset"} // only one /generator/1 can be present
+        generatorConnectedGenset={generatorConnectedGenset}
         componentMode={componentMode}
         compactBoxSize={compactBoxSize}
       />

src/app/Marine2/components/boxes/EnergyAC/EnergyAC.tsx

@@ -9,6 +9,7 @@ import { ComponentMode } from "@m2Types/generic/component-mode"
 import { ISize } from "@m2Types/generic/size"
 import { usePhasesData } from "../../../utils/hooks/use-phases-data"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
+import { observer } from "mobx-react"
 
 interface Props {
   componentMode?: ComponentMode
@@ -43,4 +44,4 @@ const EnergyAC = ({ componentMode = "compact", compactBoxSize }: Props) => {
   )
 }
 
-export default EnergyAC
+export default observer(EnergyAC)

src/app/Marine2/components/boxes/EnergyAlternator/EnergyAlternator.tsx

@@ -8,6 +8,7 @@ import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box
 import { ISize } from "@m2Types/generic/size"
 import { valueFor } from "app/Marine2/utils/formatters/phase/phase-value-for"
 import { unitFor } from "app/Marine2/utils/formatters/phase/phase-unit-for"
+import { observer } from "mobx-react"
 
 interface Props {
   alternator: number
@@ -51,4 +52,4 @@ const EnergyAlternator = ({ componentMode = "compact", alternator, showInstance,
   )
 }
 
-export default EnergyAlternator
+export default observer(EnergyAlternator)

src/app/Marine2/components/boxes/EnergyConnectedGenset/EnergyConnectedGenset.tsx

@@ -0,0 +1,72 @@
+import GeneratorIcon from "../../../images/icons/generator.svg"
+import { ConnectedGensetType, useAppStore, useConnectedGenset } from "@victronenergy/mfd-modules"
+import { translate } from "react-i18nify"
+import ValueBox from "../../ui/ValueBox"
+import ValueOverview from "../../ui/ValueOverview"
+import { ComponentMode } from "@m2Types/generic/component-mode"
+import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
+import { ISize } from "@m2Types/generic/size"
+import { valueFor } from "app/Marine2/utils/formatters/phase/phase-value-for"
+import { unitFor } from "app/Marine2/utils/formatters/phase/phase-unit-for"
+import { observer } from "mobx-react"
+
+interface Props {
+  gensetType: ConnectedGensetType
+  gensetInstance: number
+  showInstance: boolean
+  componentMode?: ComponentMode
+  compactBoxSize?: ISize
+}
+
+const EnergyConnectedGenset = ({
+  componentMode = "compact",
+  gensetType,
+  gensetInstance,
+  showInstance,
+  compactBoxSize,
+}: Props) => {
+  const { electricalPowerIndicator } = useAppStore()
+  const gensetValues = useConnectedGenset(gensetType, gensetInstance)
+  const instance = showInstance ? ` [${gensetInstance}]` : ""
+
+  if (gensetValues.gensetType === ConnectedGensetType.ACGENSET) {
+    // TODO: We do not support displaying connected AC Genset
+    // TODO: on the EnergyOverview page
+    return null
+  }
+
+  if (gensetValues.gensetType === ConnectedGensetType.DCGENSET) {
+    const { customName, productName, current, voltage } = gensetValues
+    const power = voltage * current
+
+    if (componentMode === "compact" && compactBoxSize) {
+      return (
+        <ValueOverview
+          Icon={GeneratorIcon}
+          title={customName || productName || translate("boxes.generator")}
+          value={valueFor(current, power, electricalPowerIndicator)}
+          unit={unitFor(electricalPowerIndicator)}
+          boxSize={compactBoxSize}
+        />
+      )
+    }
+
+    return (
+      <ValueBox
+        title={customName || productName || translate("boxes.generator") + instance}
+        icon={<GeneratorIcon className={responsiveBoxIcon} />}
+        value={valueFor(current, power, electricalPowerIndicator)}
+        unit={unitFor(electricalPowerIndicator)}
+        bottomValues={[
+          [
+            { value: voltage, unit: "V", hideDecimal: true },
+            { value: current, unit: "A", hideDecimal: true },
+            { value: power, unit: "W", hideDecimal: true },
+          ],
+        ]}
+      />
+    )
+  }
+}
+
+export default observer(EnergyConnectedGenset)

src/app/Marine2/components/boxes/EnergyConnectedGenset/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./EnergyConnectedGenset"
+export * from "./EnergyConnectedGenset"

src/app/Marine2/components/boxes/EnergyDC/EnergyDC.tsx

@@ -8,6 +8,7 @@ import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box
 import { ISize } from "@m2Types/generic/size"
 import { valueFor } from "app/Marine2/utils/formatters/phase/phase-value-for"
 import { unitFor } from "app/Marine2/utils/formatters/phase/phase-unit-for"
+import { observer } from "mobx-react"
 
 interface Props {
   dcLoads: DcLoadsState
@@ -52,4 +53,4 @@ const EnergyDC = ({ componentMode = "compact", dcLoads, compactBoxSize }: Props)
   )
 }
 
-export default EnergyDC
+export default observer(EnergyDC)