- Refactors

- Initial implementation of new StartStop UI - Started looking at UI store for generic ui action like a modal system instead of prop drilling down the component tree.
victronenergy · Mar 6, 2024 · 5e94781 · 5e94781
1 parent 351a141
commit 5e94781
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 31 deletions.
diff --git a/...s/_composed/StartStop/Buttons/Buttons.tsx → ...posed/auto-start-stop/Buttons/Buttons.tsx b/...s/_composed/StartStop/Buttons/Buttons.tsx → ...posed/auto-start-stop/Buttons/Buttons.tsx
@@ -3,9 +3,17 @@ 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"
+import { AutoStartStopModal } from "../../modals/auto-start-stop"
 
-interface Props {}
+interface Props {
+  title: string
+  statusCode?: number
+  manualStart?: number
+  autoStart: number
+  updateManualMode: Function
+  updateAutoMode: Function
+  isAutoStartDisabled: boolean
+}
 
 export const Buttons: FC<Props> = ({}) => {
   const [showModal, setShowModal] = useState(false) // naar global state? modal systeem.

diff --git a/...d/StartStop/Modals/AutoStartStopModal.tsx → ...composed/modals/auto-start-stop/index.tsx b/...d/StartStop/Modals/AutoStartStopModal.tsx → ...composed/modals/auto-start-stop/index.tsx
diff --git a/src/app/Marine2/components/_composed/modals/generator-stop-info/index.tsx b/src/app/Marine2/components/_composed/modals/generator-stop-info/index.tsx
@@ -0,0 +1,44 @@
+import React, { FC } from "react"
+import { Modal } from "app/Marine2/components/ui/Modal/Modal"
+import { Message } from "../../../_elements/Message/Message"
+import { AppViews } from "../../../../modules/AppViews"
+
+interface Props {
+  linkedView?: AppViews
+  onClose: () => void
+  infoText?: InfoText
+}
+
+export interface InfoText {
+  title: string
+  body: string
+}
+
+export const GeneratorStopInfo: FC<Props> = ({ linkedView, onClose, infoText }) => {
+
+  if (linkedView || !infoText) {
+    return null
+  }
+  {
+    /*        {!linkedView && !!infoText && (
+            <div className="-mr-3 p-3" onClick={openInfo}>
+              <InfoIcon
+                className="w-7 text-victron-blue dark:text-victron-blue-dark cursor-pointer outline-none"
+                alt="Info"
+              />
+            </div>
+          )}*/
+  }
+  return (
+    <Modal.Frame open={true} onClose={onClose}>
+      <Modal.Body>
+        <Message variant="info" label="Fischer Panda Genset" title={infoText.title} text={infoText.body} />
+      </Modal.Body>
+      <Modal.Footer>
+        <button onClick={onClose} className="w-full h-[60px]">
+          Ok
+        </button>
+      </Modal.Footer>
+    </Modal.Frame>
+  )
+}
diff --git a/src/app/Marine2/components/boxes/GeneratorRelay/GeneratorRelay.tsx b/src/app/Marine2/components/boxes/GeneratorRelay/GeneratorRelay.tsx
@@ -11,8 +11,9 @@ 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"
+import { Buttons } from "../../_composed/auto-start-stop/Buttons/Buttons"
+
 
 interface Props {
   statusCode: number
@@ -38,7 +39,6 @@ const GeneratorRelay = ({
   componentMode = "compact",
   compactBoxSize,
 }: Props) => {
-
   const title = translate("widgets.generator")
   const subTitle = generatorStateFor(statusCode, active, phases)
 
@@ -65,8 +65,8 @@ const GeneratorRelay = ({
       <ValueBox
         title={title}
         subtitle={subTitle}
-        bottomValues={active || statusCode === 1 ? phasesData : []}
         status={status}
+        bottomValues={active || statusCode === 1 ? phasesData : []}
         icon={<GeneratorIcon className={responsiveBoxIcon} />}
       />
     )
@@ -77,34 +77,43 @@ const GeneratorRelay = ({
     <ValueBox
       title={title}
       subtitle={subTitle}
-      bottomValues={active || statusCode === 1 ? phasesData : []}
       status={status}
+      bottomValues={active || statusCode === 1 ? phasesData : []}
       icon={<GeneratorIcon className="w-[18px] sm-s:w-[24px] sm-m:w-[32px]" />}
-      buttons={<Buttons/>}
+      buttons={
+        <Buttons
+          title={title}
+          autoStart={autoStart}
+          isAutoStartDisabled={false}
+          updateAutoMode={updateAutoMode}
+          updateManualMode={updateManualMode}
+          manualStart={manualStart}
+        />
+      }
     />
   )
 
-/*  const buttons = (
-    <AutoStartStopSetter
-      title={title}
-      autoStart={autoStart}
-      isAutoStartDisabled={false}
-      updateAutoMode={updateAutoMode}
-      updateManualMode={updateManualMode}
-      manualStart={manualStart}
-    />
-  )
+  /*  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}
-    />
-  )*/
+    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)
diff --git a/src/app/Marine2/components/ui/Box/Box.tsx b/src/app/Marine2/components/ui/Box/Box.tsx
@@ -1,7 +1,7 @@
-import { ReactNode, RefObject, useEffect, useRef, useState } from "react"
+import React, { ReactNode, RefObject, useEffect, useState } from "react"
 import classNames from "classnames"
 import ArrowRightIcon from "../../../images/icons/arrow-right.svg"
-import InfoIcon from "../../../images/icons/info.svg"
+
 import { AppViews, useAppViewsStore } from "../../../modules/AppViews"
 import Paginator from "../Paginator"
 import useSize from "@react-hook/size"

diff --git a/src/app/Marine2/components/ui/ValueBox/ValueBox.tsx b/src/app/Marine2/components/ui/ValueBox/ValueBox.tsx
@@ -37,28 +37,32 @@ const ValueBox: FC<Props> = ({
   status,
 }) => {
   const [boxSize, setBoxSize] = useState<ISize>({ width: 0, height: 0 })
+
   const activeStyles = applyStyles(boxSize, defaultBoxStyles)
+
   return (
     <Box title={title} icon={icon} getBoxSizeCallback={setBoxSize} infoText={infoText}>
       <div className="w-full h-full flex flex-col justify-between">
-        <div className="w-full">
+        <div>
           <Heading
             value={value}
             unit={unit}
             subtitle={subtitle}
             className={classNames("text-black dark:text-white", activeStyles?.mainValue)}
             status={status}
           />
+
           {status === "unplugged" && (
             <div className={classNames("text-victron-gray-300 dark:text-victron-gray-500", activeStyles.valueSubtitle)}>
               {translate("common.unplugged")}
             </div>
           )}
+
           <div className={classNames("text-victron-gray dark:text-victron-gray-500", activeStyles.valueSubtitle)}>
             {children}
           </div>
         </div>
-        <div className="w-full flex flex-col">
+        <div>
           <BottomValues
             values={bottomValues}
             className={classNames("overflow-hidden", activeStyles.secondaryValue)}

diff --git a/src/app/Marine2/modules/Ui/Ui.store.ts b/src/app/Marine2/modules/Ui/Ui.store.ts
@@ -0,0 +1,24 @@
+import { makeAutoObservable, observable, computed } from "mobx"
+
+export class UiState {
+  language = "en_US"
+  pendingRequestCount = 0
+
+  // .struct makes sure observer won't be signaled unless the
+  // dimensions object changed in a deepEqual manner.
+  windowDimensions = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  }
+
+  constructor() {
+    makeAutoObservable(this, { windowDimensions: observable.struct })
+    window.onresize = () => {
+      //this.windowDimensions = getWindowDimensions()
+    }
+  }
+
+  get appIsInSync() {
+    return this.pendingRequestCount === 0
+  }
+}
diff --git a/src/app/Marine2/utils/media.tsx b/src/app/Marine2/utils/media.tsx
@@ -66,7 +66,9 @@ export const boxBreakpoints: BreakpointsType = {
 }
 
 export const applyStyles = (size: ComponentSizeType, stylesObject: BreakpointStylesType = defaultBoxStyles) => {
+
   let styles: StylesType = {}
+
   if (stylesObject === defaultBoxStyles) {
     Object.keys(defaultBoxBreakpoints).forEach((breakpoint) => {
       const breakpointWidth = defaultBoxBreakpoints[breakpoint].width