- Refactors

- Initial implementation of new StartStop UI

src/app/Marine2/components/_composed/StartStop/Buttons/Buttons.tsx

@@ -0,0 +1,39 @@
+import React, { FC, useState } from "react"
+import { translate } from "react-i18nify"
+import Button from "../../../_elements/Button"
+import { ToggleSwitchButton } from "../../../_elements/ToggleSwitchButton/ToggleSwitchButton"
+import { formatStartStopFor } from "../../../../utils/formatters/general/start-stop/format-start-stop-for"
+import { AutoStartStopModal } from "../Modals/AutoStartStopModal"
+
+interface Props {}
+
+export const Buttons: FC<Props> = ({}) => {
+  const [showModal, setShowModal] = useState(false) // naar global state? modal systeem.
+  const [disabled, setDisabled] = useState(false) // dynamisch maken
+
+  const clickHandler = () => {
+    setDisabled(!disabled)
+    setShowModal(!showModal)
+  }
+
+  return (
+    <>
+      <Button size="lg" className="w-full" disabled={false} onClick={() => console.log(true)}>
+        {formatStartStopFor(0)}
+      </Button>
+      <ToggleSwitchButton
+        id="toggleAutoStart"
+        toggle={() => setShowModal(!showModal)}
+        size="lg"
+        className="w-full"
+        selected={!disabled}
+      >
+        {translate("common.autoStart")}
+      </ToggleSwitchButton>
+
+      {showModal && (
+        <AutoStartStopModal disabled={disabled} onClose={() => setShowModal(!showModal)} onClick={clickHandler} />
+      )}
+    </>
+  )
+}

src/app/Marine2/components/_composed/StartStop/Modals/AutoStartStopModal.tsx

@@ -0,0 +1,61 @@
+import React, { FC } from "react"
+import { Modal } from "../../../ui/Modal"
+import { translate } from "react-i18nify"
+import { Message } from "../../../_elements/Message/Message"
+
+interface Props {
+  disabled: boolean
+  onClose: () => void
+  onClick: () => void
+}
+
+export const AutoStartStopModal: FC<Props> = ({ disabled, onClose, onClick }) => {
+
+  const classes = "border-victron-darkGray-200 border rounded-md w-[95%] md:w-[40rem] scale-[0.7] h-short:scale-[1]"
+
+  if (disabled) {
+    return (
+      <Modal.Frame open={true} onClose={() => console.log(false)} className={classes}>
+        <Modal.Body>
+          <Message
+            variant="info"
+            label="Fischer Panda Genset"
+            title={translate("messages.enableAutostart.title")}
+            text={translate("messages.enableAutostart.text")}
+          />
+        </Modal.Body>
+        <Modal.Footer>
+          <button onClick={onClose} className="w-full">
+            {translate("common.close")}
+          </button>
+          <div className="w-0 h-10 my-2 border-r border-victron-darkGray-200" />
+          <button onClick={onClick} className="w-full">
+            {translate("common.enable")}
+          </button>
+        </Modal.Footer>
+      </Modal.Frame>
+    )
+  }
+
+  return (
+    <Modal.Frame open={true} onClose={() => console.log(false)} className={classes}>
+      <Modal.Body>
+        <Message
+          variant="warning"
+          label="Fischer Panda Genset"
+          title={translate("messages.disableAutostart.title")}
+          text={translate("messages.disableAutostart.text")}
+        />
+      </Modal.Body>
+      <Modal.Footer>
+        <button onClick={onClose} className="w-full">
+          {translate("common.close")}
+        </button>
+        <div className="w-0 h-10 my-2 border-r border-victron-darkGray-200" />
+        <button onClick={onClick} className="w-full">
+          {translate("common.disable")}
+        </button>
+      </Modal.Footer>
+    </Modal.Frame>
+  )
+}

src/app/Marine2/components/_elements/Button/Button.tsx

@@ -0,0 +1,34 @@
+import { ReactNode } from "react"
+import classNames from "classnames"
+
+interface Props {
+  children: ReactNode
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  className?: string
+  disabled?: boolean
+  size?: "lg" | "md"
+  variant?: "primary" | "transparent"
+}
+
+const Button = ({ children, onClick, className, disabled, size = "lg", variant = "primary", ...props }: Props) => {
+  const classes = classNames("px-4 py-1.5 whitespace-nowrap", {
+    "rounded-md border-2": variant === "primary",
+    "bg-victron-blue/30 dark:bg-victron-blue-dark/30 border-victron-blue text-black dark:text-white cursor-pointer":
+      !disabled && variant === "primary",
+    "bg-victron-gray/30 dark:bg-victron-gray-dark/30 border-victron-gray text-victron-gray dark:text-victron-gray-dark":
+      disabled && variant === "primary",
+    "bg-transparent text-black dark:text-white cursor-pointer": !disabled && variant === "transparent",
+    "bg-transparent text-victron-gray dark:text-victron-gray-dark": disabled && variant === "transparent",
+    "text-base min-h-[2.675rem]": size === "lg",
+    "text-sm min-h-[2.375rem]": size === "md",
+    [className as string]: className,
+  })
+
+  return (
+    <button className={classes} onClick={disabled ? undefined : onClick} disabled={disabled} {...props}>
+      {children}
+    </button>
+  )
+}
+
+export default Button

src/app/Marine2/components/_elements/Message/Message.tsx

@@ -0,0 +1,37 @@
+import React, { FC, ReactNode } from "react"
+import InfoIcon from "../../../images/icons/info.svg"
+import WarningIcon from "../../../images/icons/warning.svg"
+
+type VariantType = "info" | "warning"
+
+interface Props {
+  variant: VariantType
+  label?: string
+  title: string
+  text: string
+}
+
+export const Message: FC<Props> = ({ variant, label, title, text }) => {
+  const variantToIcon: Record<VariantType, ReactNode> = {
+    info: (
+      <InfoIcon className="w-12 text-victron-blue dark:text-victron-blue-dark cursor-pointer outline-none" alt="Info" />
+    ),
+    warning: (
+      <WarningIcon
+        className="w-12 text-victron-red dark:text-victron-red-dark cursor-pointer outline-none"
+        alt="Info"
+      />
+    ),
+  }
+
+  return (
+    <div className="flex flex-col justify-center items-center gap-4 text-center">
+      {variantToIcon[variant]}
+      <span>
+        {label && <label className="text-center text-sm">{label}</label>}
+        <h3 className="text-center text-lg">{title}</h3>
+      </span>
+      <p className="text-base">{text}</p>
+    </div>
+  )
+}

src/app/Marine2/components/_elements/ToggleSwitchButton/ToggleSwitchButton.tsx

@@ -0,0 +1,30 @@
+import { FC, ReactNode } from "react"
+import ToggleSwitch from "../../ui/ToggleSwitch"
+import classNames from "classnames"
+
+interface Props {
+  id: string
+  toggle: () => void
+  selected: boolean
+  children: ReactNode
+  size?: "lg" | "md"
+  className?: string
+}
+
+export const ToggleSwitchButton: FC<Props> = ({ id, toggle, children, size = "lg", className, selected }) => {
+  const classes = classNames(
+    "flex justify-between items-center min-h-[2.375rem] border-2 border-victron-gray dark:border-victron-gray-200 text-black dark:text-white cursor-pointer rounded-md px-4 py-1.5",
+    {
+      "text-base min-h-[2.675rem]": size === "lg",
+      "text-sm min-h-[2.375rem]": size === "md",
+      [className as string]: className,
+    }
+  )
+
+  return (
+    <button className={classes} onClick={toggle}>
+      {children}
+      <ToggleSwitch id={id} selected={selected} />
+    </button>
+  )
+}

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

@@ -5,7 +5,7 @@ import { translate } from "react-i18nify"
 import { ChargerInstanceId, useCharger } from "@victronenergy/mfd-modules"
 import { CHARGER_MODE } from "../../../utils/constants"
 import { CURRENT_LIMIT_STEP } from "../../../utils/constants/generic"
-import Button from "../../ui/Button"
+import Button from "../../_elements/Button"
 import GeneratorIcon from "../../../images/icons/generator.svg"
 import InverterChargerIcon from "../../../images/icons/inverter-charger.svg"
 import ValueBar from "../../ui/ValueBar"

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

@@ -11,6 +11,7 @@ import GeneratorIcon from "../../../images/icons/generator.svg"
 import { usePhasesData } from "../../../utils/hooks/use-phases-data"
 import { phaseValueFor } from "../../../utils/formatters/phase/phase-value-for"
 import { generatorStateFor } from "../../../utils/formatters/devices/generator-relay/generator-state-for"
+import { Buttons } from "../../_composed/StartStop/Buttons/Buttons"
 
 interface Props {
   statusCode: number
@@ -36,6 +37,7 @@ const GeneratorRelay = ({
   componentMode = "compact",
   compactBoxSize,
 }: Props) => {
+
   const title = translate("widgets.generator")
   const subTitle = generatorStateFor(statusCode, active, phases)
 
@@ -57,27 +59,51 @@ const GeneratorRelay = ({
     )
   }
 
+  if (statusCode === undefined) {
+    return (
+      <ValueBox
+        title={title}
+        subtitle={subTitle}
+        bottomValues={active || statusCode === 1 ? phasesData : []}
+        status={status}
+        icon={<GeneratorIcon className="w-[18px] sm-s:w-[24px] sm-m:w-[32px]" />}
+      />
+    )
+  }
+
+  // temp
   return (
     <ValueBox
       title={title}
       subtitle={subTitle}
       bottomValues={active || statusCode === 1 ? phasesData : []}
       status={status}
       icon={<GeneratorIcon className="w-[18px] sm-s:w-[24px] sm-m:w-[32px]" />}
-      buttons={
-        statusCode !== undefined ? (
-          <AutoStartStopSetter
-            title={title}
-            autoStart={autoStart}
-            isAutoStartDisabled={false}
-            updateAutoMode={updateAutoMode}
-            updateManualMode={updateManualMode}
-            manualStart={manualStart}
-          />
-        ) : undefined
-      }
+      buttons={<Buttons/>}
+    />
+  )
+
+/*  const buttons = (
+    <AutoStartStopSetter
+      title={title}
+      autoStart={autoStart}
+      isAutoStartDisabled={false}
+      updateAutoMode={updateAutoMode}
+      updateManualMode={updateManualMode}
+      manualStart={manualStart}
     />
   )
+
+  return (
+    <ValueBox
+      title={title}
+      subtitle={subTitle}
+      bottomValues={active || statusCode === 1 ? phasesData : []}
+      status={status}
+      icon={<GeneratorIcon className="w-[18px] sm-s:w-[24px] sm-m:w-[32px]" />}
+      buttons={buttons}
+    />
+  )*/
 }
 
 export default observer(GeneratorRelay)

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

@@ -7,7 +7,7 @@ import InverterChargerIcon from "../../../images/icons/inverter-charger.svg"
 import GeneratorIcon from "../../../images/icons/generator.svg"
 import classNames from "classnames"
 import ValueBar from "../../ui/ValueBar"
-import Button from "../../ui/Button"
+import Button from "../../_elements/Button"
 import Box from "../../ui/Box"
 import { applyStyles, defaultBoxStyles } from "../../../utils/media"
 import ValueOverview from "../../ui/ValueOverview"

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

@@ -2,7 +2,7 @@ import { useState } from "react"
 import { observer } from "mobx-react-lite"
 import { useAppStore, useInverterCharger, useShorePowerInput } from "@victronenergy/mfd-modules"
 import InverterChargerIcon from "../../../images/icons/inverter-charger.svg"
-import Button from "../../ui/Button"
+import Button from "../../_elements/Button"
 import InputLimitSelector from "../../ui/InputLimitSelector"
 import ValueBox from "../../ui/ValueBox"
 import ValueOverview from "../../ui/ValueOverview"

src/app/Marine2/components/ui/AutoStartStopSetter/AutoStartStopSetter.tsx

@@ -2,10 +2,13 @@ import { observer } from "mobx-react"
 import DeviceSettingModal from "../DeviceSettingModal/DeviceSettingModal"
 import { translate } from "react-i18nify"
 import RadioButton from "../RadioButton"
-import Button from "../Button"
+import Button from "../../_elements/Button"
 import { useCallback, useEffect, useState } from "react"
 import { GENERATOR_START_STOP } from "../../../utils/constants"
 import { useAppStore } from "@victronenergy/mfd-modules"
+import { formatStartStopFor, StartStopValue } from "../../../utils/formatters/general/start-stop/format-start-stop-for"
+import { isGeneratorRunningFor } from "../../../utils/helpers/devices/generators/is-running-for"
+import { useStartStopMode } from "../../../utils/hooks/use-start-stop-mode"
 
 const AutoStartStopSetter = ({
   statusCode,
@@ -16,39 +19,21 @@ const AutoStartStopSetter = ({
   updateAutoMode,
   isAutoStartDisabled,
 }: Props) => {
-  const { locked } = useAppStore() // lock from theme settings
-  const running =
-    manualStart === undefined ? (statusCode === undefined ? 0 : statusCode >= 1 && statusCode <= 8) : manualStart === 1
-  const getStartStopMode = useCallback(() => {
-    if (running && !autoStart) {
-      return 0
-    } else if (!running && !autoStart) {
-      return 1
-    } else {
-      return 2
-    }
-  }, [autoStart, running])
-  const [isModeModalOpen, setIsModeModalOpen] = useState(false)
-  const [modeForSubmission, setModeForSubmission] = useState(getStartStopMode())
+  const { locked } = useAppStore()
 
-  const autoStartFormatter = (value: number) => {
-    switch (value) {
-      case 0:
-        return translate("common.on")
-      case 1:
-        return translate("common.off")
-      case 2:
-        return translate("common.autoStartStop")
-    }
-  }
+  const running = isGeneratorRunningFor(statusCode, manualStart)
+  const startStopMode = useStartStopMode(running, autoStart)
+
+  const [isModeModalOpen, setIsModeModalOpen] = useState(false)
+  const [modeForSubmission, setModeForSubmission] = useState(startStopMode)
 
   useEffect(() => {
-    setModeForSubmission(getStartStopMode())
-  }, [getStartStopMode])
+    setModeForSubmission(startStopMode)
+  }, [startStopMode])
 
   const closeModeModal = () => {
     setIsModeModalOpen(false)
-    setModeForSubmission(getStartStopMode())
+    setModeForSubmission(startStopMode)
   }
 
   const submitMode = () => {
@@ -66,9 +51,11 @@ const AutoStartStopSetter = ({
     }
     closeModeModal()
   }
+
   useEffect(() => {
     if (isAutoStartDisabled) setIsModeModalOpen(false)
   }, [isAutoStartDisabled])
+
   return (
     <>
       <Button
@@ -77,8 +64,9 @@ const AutoStartStopSetter = ({
         disabled={isAutoStartDisabled || locked}
         onClick={() => setIsModeModalOpen(true)}
       >
-        {autoStartFormatter(getStartStopMode())}
+        {formatStartStopFor(startStopMode)}
       </Button>
+
       {!isAutoStartDisabled && (
         <DeviceSettingModal
           title={title}