Skip to content

Commit

Permalink
Hide input current limit.
Browse files Browse the repository at this point in the history
  • Loading branch information
@fwaalkens
fwaalkens committed Oct 11, 2023
1 parent c0c8a7f commit 66af927
Show file tree
Hide file tree
Showing 8 changed files with 106 additions and 192 deletions.
5 changes: 4 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

131 changes: 19 additions & 112 deletions src/app/Marine2/components/boxes/InverterCharger/InverterCharger.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,70 +2,43 @@ import { useAppStore, useInverterCharger, useShorePowerInput } from "@victronene
import { observer } from "mobx-react-lite"
import InverterChargerIcon from "../../../images/icons/inverter-charger.svg"
import { translate } from "react-i18nify"
import { SYSTEM_MODE } from "../../../utils/constants"
import { formatStateForTranslation } from "../../../utils/format"
import { useEffect, useState } from "react"
import { useState } from "react"
import Button from "../../ui/Button"
import RadioButton from "../../ui/RadioButton"
import DeviceSettingModal from "../../ui/DeviceSettingModal"
import InputLimitValue from "../../ui/InputLimitValue"
import InputLimitSelector from "../../ui/InputLimitSelector"
import ValueBox from "../../ui/ValueBox"
import ValueOverview from "../../ui/ValueOverview"
import { ComponentMode } from "@m2Types/generic/component-mode"
import { ISize } from "@m2Types/generic/size"
import { Modal } from "./Modal/Modal"
import { formatModeFor } from "../../../utils/helpers/inverter-charger/format-mode-for"

interface Props {
componentMode?: ComponentMode
compactBoxSize?: ISize
}

const InverterCharger = ({ componentMode = "compact", compactBoxSize }: Props) => {
const { locked } = useAppStore() // lock from theme settings
const inverterChargerModeFormatter = (value: number) => {
switch (value) {
case SYSTEM_MODE.CHARGER_ONLY:
return translate("common.chargerOnly")
case SYSTEM_MODE.INVERTER_ONLY:
return translate("common.inverterOnly")
case SYSTEM_MODE.ON:
return translate("common.on")
case SYSTEM_MODE.OFF:
return translate("common.off")
default:
return ""
}
}

const { inputId } = useShorePowerInput()

const { state, mode, customName, productName, modeIsAdjustable, updateMode } = useInverterCharger()
const adjustable = modeIsAdjustable === 1
const [openModal, setOpenModal] = useState(false)

const productNameShort = customName || (productName && productName.split(" ")[0])

const subTitle = !!state || parseInt(state) === 0 ? translate(formatStateForTranslation(Number(state))) : ""

const [isModeModalOpen, setIsModeModalOpen] = useState(false)
const [modeForSubmission, setModeForSubmission] = useState(Number(mode))

useEffect(() => {
setModeForSubmission(Number(mode))
}, [mode])

const closeModeModal = () => {
setIsModeModalOpen(false)
setModeForSubmission(Number(mode))
}

const submitMode = () => {
updateMode(modeForSubmission)
closeModeModal()
}

const getButtons = () => {
const buttons = []

if (!!inputId) {
buttons.push(<InputLimitSelector inputId={inputId} title={productNameShort} />)
}
if (adjustable) {

if (modeIsAdjustable === 1) {
buttons.push(
<Button disabled={locked} className="w-full" size="md" onClick={() => setIsModeModalOpen(!isModeModalOpen)}>
{inverterChargerModeFormatter(parseInt(mode))}
<Button disabled={locked} className="w-full" size="md" onClick={() => setOpenModal(!openModal)}>
{formatModeFor(parseInt(mode))}
</Button>
)
}
Expand All @@ -80,9 +53,6 @@ const InverterCharger = ({ componentMode = "compact", compactBoxSize }: Props) =
Icon={InverterChargerIcon}
title={productNameShort}
subtitle={subTitle}
inputLimitValue={!!inputId ? <InputLimitValue inputId={inputId} /> : undefined}
value={!inputId ? 0 : undefined}
unit="A"
boxSize={compactBoxSize}
/>
)
Expand All @@ -93,79 +63,16 @@ const InverterCharger = ({ componentMode = "compact", compactBoxSize }: Props) =
title={productNameShort}
subtitle={subTitle}
icon={
<InverterChargerIcon
/* todo: fix types for svg */
/* @ts-ignore */
className="w-[18px] sm-s:w-[24px] sm-m:w-[32px]"
></InverterChargerIcon>
/* todo: fix types for svg */
/* @ts-ignore */
<InverterChargerIcon className="w-[18px] sm-s:w-[24px] sm-m:w-[32px]" />
}
buttons={getButtons()}
bottomValues={[]}
>
{(adjustable && (
<DeviceSettingModal
title={productNameShort}
subtitle={translate("common.mode")}
open={isModeModalOpen}
onClose={closeModeModal}
onSet={submitMode}
>
<div className="divide-y divide-victron-darkGray-200 text-base">
<label
className="w-full flex justify-between items-center pb-4"
onClick={() => setModeForSubmission(SYSTEM_MODE.ON)}
>
<span>{translate("common.on")}</span>
<RadioButton
onChange={() => setModeForSubmission(SYSTEM_MODE.ON)}
selected={modeForSubmission === SYSTEM_MODE.ON}
responsive={false}
/>
</label>
<label
className="w-full flex justify-between items-center py-4"
onClick={() => setModeForSubmission(SYSTEM_MODE.OFF)}
>
<span>{translate("common.off")}</span>
<RadioButton
onChange={() => setModeForSubmission(SYSTEM_MODE.OFF)}
selected={modeForSubmission === SYSTEM_MODE.OFF}
responsive={false}
/>
</label>
<label
className="w-full flex justify-between items-center py-4"
onClick={() => setModeForSubmission(SYSTEM_MODE.CHARGER_ONLY)}
>
<span>{translate("common.chargerOnly")}</span>
<RadioButton
onChange={() => setModeForSubmission(SYSTEM_MODE.CHARGER_ONLY)}
selected={modeForSubmission === SYSTEM_MODE.CHARGER_ONLY}
responsive={false}
/>
</label>
<label
className="w-full flex justify-between items-center pt-4"
onClick={() => setModeForSubmission(SYSTEM_MODE.INVERTER_ONLY)}
>
<span>{translate("common.inverterOnly")}</span>
<RadioButton
onChange={() => setModeForSubmission(SYSTEM_MODE.INVERTER_ONLY)}
selected={modeForSubmission === SYSTEM_MODE.INVERTER_ONLY}
responsive={false}
/>
</label>
</div>
</DeviceSettingModal>
)) ||
undefined}
<Modal title={productNameShort} open={openModal} onClose={setOpenModal} />
</ValueBox>
)
}

interface Props {
componentMode?: ComponentMode
compactBoxSize?: { width: number; height: number }
}

export default observer(InverterCharger)
14 changes: 0 additions & 14 deletions src/app/Marine2/components/ui/InputLimitValue/InputLimitValue.tsx
View file

This file was deleted.

2 changes: 0 additions & 2 deletions src/app/Marine2/components/ui/InputLimitValue/index.ts
View file

This file was deleted.

39 changes: 39 additions & 0 deletions src/app/Marine2/components/ui/ValueOverview/Styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { BreakpointStylesType } from "../../../utils/media"

export const Styles: BreakpointStylesType = {
default: {
value: "text-base",
title: "text-sm",
subtitle: "text-xs pb-1",
icon: "w-[18px] text-victron-gray-200 dark:text-white",
smallIcon: "min-w-3 w-3 text-victron-gray-200 dark:text-white",
},
"sm-s": {
value: "text-lg",
title: "text-sm",
subtitle: "text-sm pb-1",
icon: "w-[24px] text-victron-gray-200 dark:text-white",
smallIcon: "min-w-5 w-5 text-victron-gray-200 dark:text-white",
},
"sm-m": {
value: "text-lg",
title: "text-base",
subtitle: "text-sm pb-1",
icon: "w-[32px] text-victron-gray-200 dark:text-white",
smallIcon: "min-w-5 w-5 text-victron-gray-200 dark:text-white",
},
"md-s": {
value: "text-lg",
title: "text-base",
subtitle: "text-sm pb-1",
icon: "w-[32px] text-victron-gray-200 dark:text-white",
smallIcon: "min-w-5 w-5 text-victron-gray-200 dark:text-white",
},
"md-l": {
value: "text-lg",
title: "text-lg",
subtitle: "text-sm pb-1",
icon: "w-[32px] text-victron-gray-200 dark:text-white",
smallIcon: "min-w-5 w-5 text-victron-gray-200 dark:text-white",
},
}
80 changes: 21 additions & 59 deletions src/app/Marine2/components/ui/ValueOverview/ValueOverview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,36 @@
import React from "react"
import { ComponentType } from "react"
import classNames from "classnames"
import { applyStyles, BreakpointStylesType } from "../../../utils/media"
import { applyStyles } from "../../../utils/media"
import FadedText from "../FadedText"
import { ValueWithUnit } from "../ValueWithUnit/ValueWithUnit"
import { unit } from "@m2Types/data/unit"
import { valueType } from "@m2Types/data/value-type"
import { TStatus } from "@m2Types/data/status"
import { Styles } from "./Styles"
import { ISize } from "@m2Types/generic/size"
import { observer } from "mobx-react"

interface Props {
Icon: React.ComponentType<{ className: string }>
Icon: ComponentType<{ className: string }>
valueType?: valueType
title: string
subtitle?: string
value?: number
inputLimitValue?: JSX.Element
unit?: unit
boxSize: { width: number; height: number }
boxSize: ISize
status?: TStatus
}

const styles: BreakpointStylesType = {
default: {
value: "text-base",
title: "text-sm",
subtitle: "text-xs pb-1",
icon: "w-[18px] text-victron-gray-200 dark:text-white",
smallIcon: "min-w-3 w-3 text-victron-gray-200 dark:text-white",
},
"sm-s": {
value: "text-lg",
title: "text-sm",
subtitle: "text-sm pb-1",
icon: "w-[24px] text-victron-gray-200 dark:text-white",
smallIcon: "min-w-5 w-5 text-victron-gray-200 dark:text-white",
},
"sm-m": {
value: "text-lg",
title: "text-base",
subtitle: "text-sm pb-1",
icon: "w-[32px] text-victron-gray-200 dark:text-white",
smallIcon: "min-w-5 w-5 text-victron-gray-200 dark:text-white",
},
"md-s": {
value: "text-lg",
title: "text-base",
subtitle: "text-sm pb-1",
icon: "w-[32px] text-victron-gray-200 dark:text-white",
smallIcon: "min-w-5 w-5 text-victron-gray-200 dark:text-white",
},
"md-l": {
value: "text-lg",
title: "text-lg",
subtitle: "text-sm pb-1",
icon: "w-[32px] text-victron-gray-200 dark:text-white",
smallIcon: "min-w-5 w-5 text-victron-gray-200 dark:text-white",
},
}
const ValueOverview = ({ title, subtitle, Icon, value, unit, boxSize, valueType, status }: Props) => {
const {
smallIcon,
icon,
title: titleStyle,
subtitle: subtitleStyle,
value: valueStyle,
} = applyStyles(boxSize, Styles)

const ValueOverview = ({ title, subtitle, Icon, value, unit, boxSize, valueType, inputLimitValue, status }: Props) => {
const activeStyles = applyStyles(boxSize, styles)
const iconStyles = valueType === "environment" ? activeStyles.smallIcon : activeStyles.icon
const iconStyles = valueType === "environment" ? smallIcon : icon
const classes = classNames("flex justify-between items-center", {
"h-14": subtitle,
"h-12": !subtitle,
Expand All @@ -70,28 +41,19 @@ const ValueOverview = ({ title, subtitle, Icon, value, unit, boxSize, valueType,
<div className="flex items-center min-w-0">
{/* @ts-ignore */}
<Icon className={iconStyles} />
<div className={"px-2 min-w-0 flex flex-col"}>
<FadedText
className={classNames("pr-8 text-victron-gray-200 dark:text-white", activeStyles.title)}
text={title}
/>
<div className="px-2 min-w-0 flex flex-col">
<FadedText className={classNames("pr-8 text-victron-gray-200 dark:text-white", titleStyle)} text={title} />
{subtitle && (
<FadedText
className={classNames("text-victron-gray pr-2 dark:text-victron-gray-500", activeStyles.subtitle)}
className={classNames("text-victron-gray pr-2 dark:text-victron-gray-500", subtitleStyle)}
text={subtitle}
/>
)}
</div>
</div>
<ValueWithUnit
value={value}
unit={unit}
inputLimitValue={inputLimitValue}
className={classNames(activeStyles.value)}
status={status}
/>
<ValueWithUnit value={value} unit={unit} className={classNames(valueStyle)} status={status} />
</div>
)
}

export default ValueOverview
export default observer(ValueOverview)
Loading

0 comments on commit 66af927

Please sign in to comment.