- 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

@@ -4,7 +4,7 @@ import classNames from "classnames"
 import { translate } from "react-i18nify"
 import { ChargerInstanceId, useCharger } from "@victronenergy/mfd-modules"
 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"
 import { responsiveBoxIcon } from "../../../utils/helpers/classes/responsive-box-icon"
 
 interface Props {
@@ -37,6 +38,7 @@ const GeneratorRelay = ({
   componentMode = "compact",
   compactBoxSize,
 }: Props) => {
+
   const title = translate("widgets.generator")
   const subTitle = generatorStateFor(statusCode, active, phases)
 
@@ -58,27 +60,51 @@ const GeneratorRelay = ({
     )
   }
 
+  if (statusCode === undefined) {
+    return (
+      <ValueBox
+        title={title}
+        subtitle={subTitle}
+        bottomValues={active || statusCode === 1 ? phasesData : []}
+        status={status}
+        icon={<GeneratorIcon className={responsiveBoxIcon} />}
+      />
+    )
+  }
+
+  // temp
   return (
     <ValueBox
       title={title}
       subtitle={subTitle}
       bottomValues={active || statusCode === 1 ? phasesData : []}
       status={status}
-      icon={<GeneratorIcon className={responsiveBoxIcon} />}
-      buttons={
-        statusCode !== undefined ? (
-          <AutoStartStopSetter
-            title={title}
-            autoStart={autoStart}
-            isAutoStartDisabled={false}
-            updateAutoMode={updateAutoMode}
-            updateManualMode={updateManualMode}
-            manualStart={manualStart}
-          />
-        ) : undefined
-      }
+      icon={<GeneratorIcon className="w-[18px] sm-s:w-[24px] sm-m:w-[32px]" />}
+      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"