wip

src/app/Marine2/components/_composed/auto-start-stop/Buttons/Buttons.tsx

@@ -4,6 +4,7 @@ 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/auto-start-stop"
+import { useUiStore } from "../../../../modules/Ui"
 
 interface Props {
   title: string
@@ -16,32 +17,28 @@ interface Props {
 }
 
 export const Buttons: FC<Props> = ({}) => {
-  const [showModal, setShowModal] = useState(false) // naar global state? modal systeem.
+
+  const { openModalFor, toggleModalFor } = useUiStore()
   const [disabled, setDisabled] = useState(false) // dynamisch maken
 
+
   const clickHandler = () => {
-    setDisabled(!disabled)
-    setShowModal(!showModal)
+    console.log("HOHO")
+
+    openModalFor("startStopMode")
+
+    //setDisabled(!disabled)
+    //toggleModalFor("startStopMode")
   }
 
   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}
-      >
+      <ToggleSwitchButton id="toggleAutoStart" toggle={() => setDisabled(!disabled)} 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/modals/Modals.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from "react"
+import { AutoStartStopModal } from "./auto-start-stop"
+import { GeneratorStopInfo } from "./generator-stop-info"
+
+export const Modals: FC = () => (
+  <>
+    <AutoStartStopModal />
+    <GeneratorStopInfo />
+  </>
+)

src/app/Marine2/components/_composed/modals/auto-start-stop/index.tsx

@@ -2,18 +2,24 @@ import React, { FC } from "react"
 import { Modal } from "../../../ui/Modal"
 import { translate } from "react-i18nify"
 import { Message } from "../../../_elements/Message/Message"
+import { useUiStore } from "../../../../modules/Ui"
+import { useAppStore } from "@victronenergy/mfd-modules"
 
-interface Props {
-  disabled: boolean
-  onClose: () => void
-  onClick: () => void
-}
-
-export const AutoStartStopModal: FC<Props> = ({ disabled, onClose, onClick }) => {
+export const AutoStartStopModal: FC = () => {
+  const { modals, closeModalFor } = useUiStore()
+  const { locked } = useAppStore()
+  console.log('>_', modals["startStopMode"])
+  if (!modals["startStopMode"]) return null
 
   const classes = "border-victron-darkGray-200 border rounded-md w-[95%] md:w-[40rem] scale-[0.7] h-short:scale-[1]"
 
-  if (disabled) {
+  const enableHandler = () => {
+    // Logic here
+    closeModalFor("startStopMode")
+  }
+
+  //if (disabled) {
+  if (locked) {
     return (
       <Modal.Frame open={true} onClose={() => console.log(false)} className={classes}>
         <Modal.Body>
@@ -25,18 +31,23 @@ export const AutoStartStopModal: FC<Props> = ({ disabled, onClose, onClick }) =>
           />
         </Modal.Body>
         <Modal.Footer>
-          <button onClick={onClose} className="w-full">
+          <button onClick={() => closeModalFor("startStopMode")} 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">
+          <button onClick={enableHandler} className="w-full">
             {translate("common.enable")}
           </button>
         </Modal.Footer>
       </Modal.Frame>
     )
   }
 
+  const disableHandler = () => {
+    // Logic here
+    closeModalFor("startStopMode")
+  }
+
   return (
     <Modal.Frame open={true} onClose={() => console.log(false)} className={classes}>
       <Modal.Body>
@@ -48,11 +59,11 @@ export const AutoStartStopModal: FC<Props> = ({ disabled, onClose, onClick }) =>
         />
       </Modal.Body>
       <Modal.Footer>
-        <button onClick={onClose} className="w-full">
+        <button onClick={() => closeModalFor("startStopMode")} 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">
+        <button onClick={disableHandler} className="w-full">
           {translate("common.disable")}
         </button>
       </Modal.Footer>

src/app/Marine2/components/_composed/modals/generator-stop-info/index.tsx

@@ -1,41 +1,20 @@
 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"
+import { useUiStore } from "../../../../modules/Ui"
 
-interface Props {
-  linkedView?: AppViews
-  onClose: () => void
-  infoText?: InfoText
-}
-
-export interface InfoText {
-  title: string
-  body: string
-}
+export const GeneratorStopInfo: FC = () => {
+  const { modals, closeModalFor } = useUiStore()
 
-export const GeneratorStopInfo: FC<Props> = ({ linkedView, onClose, infoText }) => {
+  if (!modals["startStopMode"]) return null
 
-  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.Frame open={true} onClose={() => closeModalFor("generatorStopInfo")}>
       <Modal.Body>
-        <Message variant="info" label="Fischer Panda Genset" title={infoText.title} text={infoText.body} />
+        <Message variant="info" label="Fischer Panda Genset" title="You sure?" text="You are about to stop the generator. Are you sure?" />
       </Modal.Body>
       <Modal.Footer>
-        <button onClick={onClose} className="w-full h-[60px]">
+        <button onClick={() => closeModalFor("generatorStopInfo")} className="w-full h-[60px]">
           Ok
         </button>
       </Modal.Footer>

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

@@ -10,6 +10,16 @@ import { formatStartStopFor, StartStopValue } from "../../../utils/formatters/ge
 import { isGeneratorRunningFor } from "../../../utils/helpers/devices/generators/is-running-for"
 import { useStartStopMode } from "../../../utils/hooks/use-start-stop-mode"
 
+interface Props {
+  statusCode?: number
+  manualStart?: number
+  title: string
+  autoStart: number
+  updateManualMode: Function
+  updateAutoMode: Function
+  isAutoStartDisabled: boolean
+}
+
 const AutoStartStopSetter = ({
   statusCode,
   manualStart,
@@ -27,6 +37,8 @@ const AutoStartStopSetter = ({
   const [isModeModalOpen, setIsModeModalOpen] = useState(false)
   const [modeForSubmission, setModeForSubmission] = useState(startStopMode)
 
+
+
   useEffect(() => {
     setModeForSubmission(startStopMode)
   }, [startStopMode])
@@ -107,14 +119,4 @@ const AutoStartStopSetter = ({
   )
 }
 
-interface Props {
-  statusCode?: number
-  manualStart?: number
-  title: string
-  autoStart: number
-  updateManualMode: Function
-  updateAutoMode: Function
-  isAutoStartDisabled: boolean
-}
-
 export default observer(AutoStartStopSetter)

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

@@ -1,7 +1,7 @@
-import React, { ReactNode, RefObject, useEffect, useState } from "react"
+import React, { ReactNode, RefObject, useEffect, useRef, 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"

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

@@ -4,6 +4,7 @@ import Header from "../Header"
 import { observer } from "mobx-react"
 import { useAppViewsStore } from "../../../modules/AppViews"
 import { PageSelectorProps } from "../PageSelector"
+import { Modals } from "../../_composed/modals/Modals"
 
 const MainLayout = ({ children, title, pageSelectorProps }: Props) => {
   const appViewsStore = useAppViewsStore()
@@ -13,14 +14,15 @@ const MainLayout = ({ children, title, pageSelectorProps }: Props) => {
   }, [title, appViewsStore])
 
   return (
-    <div className={"dark:bg-black dark:text-white text-black bg-white flex flex-col w-full h-full pt-2 px-2"}>
+    <div className="dark:bg-black dark:text-white text-black bg-white flex flex-col w-full h-full pt-2 px-2">
       <div className={"flex flex-row w-full h-full grow-0 basis-0 min-h-fit"}>
         <Header title={getTitle} />
       </div>
       <div className={"flex flex-col grow w-full h-full min-h-0 cy-metrics"}>{children}</div>
       <div className={"flex flex-row w-full h-full grow-0 basis-0 min-h-fit"}>
         <Footer pageSelectorProps={pageSelectorProps} />
       </div>
+      <Modals />
     </div>
   )
 }

src/app/Marine2/components/views/RootView.tsx

@@ -10,6 +10,8 @@ import { PageSelectorProps } from "../ui/PageSelector"
 import DevicesOverview from "../boxes/DevicesOverview"
 import EnvironmentOverview from "../boxes/EnvironmentOverview/EnvironmentOverview"
 import { BOX_TYPES } from "../../utils/constants/generic"
+import { AutoStartStopModal } from "../_composed/modals/auto-start-stop"
+import { Modals } from "../_composed/modals/Modals"
 
 const RootView = () => {
   const visibleWidgetsStore = useVisibleWidgetsStore()

src/app/Marine2/modules/Ui/Ui.store.ts

@@ -1,24 +1,48 @@
 import { makeAutoObservable, observable, computed } from "mobx"
+import { useMemo } from "react"
 
-export class UiState {
-  language = "en_US"
-  pendingRequestCount = 0
+type Modal = "deviceSetting" | "startStopMode" | "generatorStopInfo"
 
-  // .struct makes sure observer won't be signaled unless the
-  // dimensions object changed in a deepEqual manner.
-  windowDimensions = {
-    width: window.innerWidth,
-    height: window.innerHeight,
+export interface Modals {
+  [keyOf: string]: boolean
+}
+
+export class UiStore {
+  modals: Modals = {
+    deviceSettings: false,
+    startStopMode: false,
+    generatorStopInfo: false,
   }
 
   constructor() {
-    makeAutoObservable(this, { windowDimensions: observable.struct })
-    window.onresize = () => {
-      //this.windowDimensions = getWindowDimensions()
-    }
+    makeAutoObservable(this)
+  }
+
+  openModalFor(id: Modal) {
+    this.modals[id] = true
+  }
+
+  closeModalFor(id: Modal) {
+    this.modals[id] = false
   }
 
-  get appIsInSync() {
-    return this.pendingRequestCount === 0
+  toggleModalFor(id: Modal) {
+    this.modals[id] = !this.modals[id]
   }
 }
+
+let store: UiStore
+
+function initializeStore() {
+  const _store = store ?? new UiStore()
+  // For SSG and SSR always create a new store
+  if (typeof window === "undefined") return _store
+  // Create the store once in the client
+  if (!store) store = _store
+
+  return _store
+}
+
+export function useUiStore() {
+  return useMemo(() => initializeStore(), [])
+}

src/app/Marine2/modules/Ui/index.ts

@@ -0,0 +1 @@
+export * from "./Ui.store"