Skip to content

Commit

Permalink
Merge branch 'marine2-energy-battery-layout-fixes' into marine2
Browse files Browse the repository at this point in the history
  • Loading branch information
@SimonVreman
SimonVreman committed Mar 2, 2023
2 parents c1382df + bdd7a05 commit 451cc95
Show file tree
Hide file tree
Showing 25 changed files with 418 additions and 569 deletions.
42 changes: 0 additions & 42 deletions src/app/Marine2/components/boxes/Batteries/AuxiliaryBatteries.tsx
View file

This file was deleted.

2 changes: 0 additions & 2 deletions src/app/Marine2/components/boxes/Batteries/index.tsx
View file

This file was deleted.

25 changes: 14 additions & 11 deletions src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { observer } from "mobx-react-lite"
import { Battery as BatteryType, useBattery } from "@elninotech/mfd-modules"
import Box from "../../ui/Box"
import { BATTERY, BoxTypes } from "../../../utils/constants"
import Grid from "../../ui/Grid"
import Battery from "../Battery/Battery"
import BatteriesIcon from "../../../images/icons/batteries.svg"
import BatterySummary from "../../ui/BatterySummary"
Expand All @@ -11,6 +10,7 @@ import { AppViews } from "../../../modules/AppViews"
import { translate } from "react-i18nify"
import { appErrorBoundaryProps } from "../../ui/Error/appErrorBoundary"
import { useVisibilityNotifier } from "../../../modules"
import GridPaginator from "../../ui/GridPaginator"
import Paginator from "../../ui/Paginator"
import { useState } from "react"

Expand All @@ -27,15 +27,6 @@ const BatteriesOverview = ({ mode = "full" }: Props) => {
const sortedBatteries = sortBatteries(batteries ?? [])
const overviewBatteries = getOverviewBatteries(sortedBatteries)

const getDetailBatteries = function () {
let boxes: JSX.Element[] = []

batteries.forEach((b) => {
boxes.push(<Battery key={b.id} battery={b} mode="full" />)
})
return boxes
}

if (mode === "compact") {
return (
<Box
Expand All @@ -57,7 +48,19 @@ const BatteriesOverview = ({ mode = "full" }: Props) => {
)
}

return <Grid childClassName={"p-1"}>{getDetailBatteries()}</Grid>
return (
<GridPaginator
childClassName={"p-2"}
childrenPerPage={4}
orientation={"horizontal"}
selectorLocation={"bottom-full"}
flow={"col"}
>
{sortedBatteries.map((b) => (
<Battery key={b.id} battery={b} />
))}
</GridPaginator>
)
}

/*
Expand Down
147 changes: 64 additions & 83 deletions src/app/Marine2/components/boxes/Battery/Battery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,116 +7,98 @@ import BatteryIcon from "../../../images/icons/battery.svg"
import BatteryDischargingIcon from "../../../images/icons/battery-discharging.svg"
import { translate } from "react-i18nify"
import classNames from "classnames"
import { applyStyles, BreakpointStylesType } from "app/Marine2/utils/media"
import { applyStyles, BreakpointStylesType, StylesType } from "app/Marine2/utils/media"
import { useState } from "react"
import ValueBar from "../../ui/ValueBar"
import ValueBox from "../../ui/ValueBox"

const styles: BreakpointStylesType = {
default: {
value: "text-2xl",
valueSubtitle: "text-base",
valueBar: "text-sm",
valueBars: "text-sm",
},
"sm-s": {
mainValue: "text-2xl",
subValue: "text-base",
value: "text-3xl",
valueSubtitle: "text-lg",
valueBar: "text-sm",
valueBars: "text-sm",
},
"md-s": {
mainValue: "text-3xl",
subValue: "text-base",
},
"lg-s": {
mainValue: "text-3xl",
subValue: "text-lg",
value: "text-3xl",
valueSubtitle: "text-lg",
valueBar: "text-lg",
valueBars: "text-lg",
},
default: {
mainValue: "text-xl",
subValue: "text-base",
"md-m": {
value: "text-4xl",
valueSubtitle: "text-xl",
valueBar: "text-xl",
valueBars: "text-lg",
},
}

const Battery = ({ battery, mode = "compact" }: Props) => {
const Battery = ({ battery }: Props) => {
const isSimpleBattery = !(battery.state || battery.state === 0)
const [boxSize, setBoxSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })

if (isSimpleBattery) {
return (
<ValueBox
/* @ts-ignore */
icon={<BatteryIcon className={"w-6"} />}
title={battery.name}
unit={"V"}
value={battery.voltage}
bottomValues={[]}
></ValueBox>
)
}

const hasPercentage = battery.soc !== undefined && battery.soc !== null
const color = hasPercentage ? colorForPercentageFormatter(Math.round(battery.soc)) : "victron-gray-400"
const color = hasPercentage ? colorForPercentageFormatter(Math.round(battery.soc)) : "victron-gray"
const colorClasses = classNames({
"text-victron-red dark:text-victron-red-dark": color === "victron-red",
"text-victron-yellow dark:text-victron-yellow-dark": color === "victron-yellow",
"text-victron-green dark:text-victron-green-dark": color === "victron-green",
"text-victron-blue dark:text-victron-blue-dark": color === "victron-blue",
"text-victron-gray-400 dark:text-victron-gray-dark": color === "victron-gray-400",
"text-victron-gray dark:text-white": color === "victron-gray",
})
const [boxSize, setBoxSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 })
const activeStyles = applyStyles(boxSize, styles)
if (mode === "compact") {
return (
<Box icon={batteryStateIconFormatter(battery.state)} title={battery.name}>
<></>
</Box>
)
}

// main batteries (state is charging or discharging)
if (battery.state !== BATTERY.IDLE) {
return (
<Box
icon={batteryStateIconFormatter(battery.state)}
title={battery.name}
className="truncate"
getBoxSizeCallback={setBoxSize}
>
<div className="w-full h-full flex flex-col">
<div className={classNames(`${colorClasses}`, activeStyles?.mainValue)}>
{Math.round(battery.soc) ?? "--"}
<span className="opacity-70">%</span>
</div>
<p className={classNames("text-victron-gray dark:text-victron-gray-dark", activeStyles?.subValue)}>
{batteryStateNameFormatter(translate, battery.state)}
</p>
<p className={classNames("text-victron-gray dark:text-victron-gray-dark", activeStyles?.subValue)}>
{battery.temperature ?? "--"}
<span className="text-victron-gray-400">°C</span>
</p>
const activeStyles: StylesType = applyStyles(boxSize, styles)
const bottomValues = [
{ value: battery.voltage, unit: "V" },
{ value: battery.current, unit: "A" },
{ value: battery.power, unit: "W" },
]

<div className="w-full h-full flex content-end flex-wrap">
<div className="w-full">
<div className="my-1 border-[1px] border-victron-gray-200" />
<div
className={classNames(
"flex justify-between whitespace-nowrap text-victron-gray",
activeStyles?.subValue
)}
>
<p>
{battery.voltage.toFixed(1)} <span className="text-victron-gray-400">V</span>
</p>
<p>
{battery.current.toFixed(1)} <span className="text-victron-gray-400">A</span>
</p>
<p>
{battery.power.toFixed(1)} <span className="text-victron-gray-400">W</span>
</p>
</div>
</div>
return (
<Box title={battery.name} icon={batteryStateIconFormatter(battery.state)} getBoxSizeCallback={setBoxSize}>
<div className="w-full h-full flex flex-col justify-between">
<div>
<div className={classNames(colorClasses, activeStyles?.value)}>
{battery.soc ? Math.round(battery.soc) : battery.soc ?? "--"}
<span className={"pl-0.5 opacity-70"}>%</span>
</div>
<div className={classNames("text-victron-gray dark:text-victron-gray-500", activeStyles.valueSubtitle)}>
<p>{batteryStateNameFormatter(translate, battery.state)}</p>
<p>
{battery.temperature ? Math.round(battery.temperature) : battery.temperature ?? "--"}
<span className={"text-victron-gray-400"}>°C</span>
</p>
</div>
</div>
</Box>
)
}

// aux batteries (state is idle)
return (
<Box
icon={batteryStateIconFormatter(battery.state)}
title={battery.name}
className="truncate"
getBoxSizeCallback={setBoxSize}
>
<div className="w-full h-full flex flex-col">
<div className={classNames(`text-black dark:text-white`, activeStyles?.mainValue)}>
{battery.voltage.toFixed(1)}
<span className="text-victron-gray dark:text-victron-gray">V</span>
<div className={classNames("-mb-1", activeStyles.valueBars)}>
<ValueBar values={bottomValues} />
</div>
</div>
</Box>
)
}

const batteryStateIconFormatter = function (state: number): JSX.Element {
const className = "w-6 text-victron-gray dark:text-victron-gray-dark"
const className = "w-6"
switch (state) {
case BATTERY.CHARGING:
/* todo: fix types for svg */
Expand All @@ -133,7 +115,6 @@ const batteryStateIconFormatter = function (state: number): JSX.Element {
}
interface Props {
battery: BatteryType
mode?: "compact" | "full"
}

export default Battery
Loading

0 comments on commit 451cc95

Please sign in to comment.