From f74882d17fdc9720ac4048712510c036a35be75b Mon Sep 17 00:00:00 2001 From: Martin Bosma Date: Fri, 3 May 2024 15:36:16 +0200 Subject: [PATCH] wip --- .../auto-start-stop/Buttons/Buttons.tsx | 25 ++++----- .../components/_composed/modals/Modals.tsx | 10 ++++ .../modals/auto-start-stop/index.tsx | 35 ++++++++----- .../modals/generator-stop-info/index.tsx | 35 +++---------- .../AutoStartStopSetter.tsx | 22 ++++---- src/app/Marine2/components/ui/Box/Box.tsx | 4 +- .../components/ui/MainLayout/MainLayout.tsx | 4 +- src/app/Marine2/components/views/RootView.tsx | 2 + src/app/Marine2/modules/Ui/Ui.store.ts | 52 ++++++++++++++----- src/app/Marine2/modules/Ui/index.ts | 1 + 10 files changed, 109 insertions(+), 81 deletions(-) create mode 100644 src/app/Marine2/components/_composed/modals/Modals.tsx create mode 100644 src/app/Marine2/modules/Ui/index.ts diff --git a/src/app/Marine2/components/_composed/auto-start-stop/Buttons/Buttons.tsx b/src/app/Marine2/components/_composed/auto-start-stop/Buttons/Buttons.tsx index 98bccd58..0daf682a 100644 --- a/src/app/Marine2/components/_composed/auto-start-stop/Buttons/Buttons.tsx +++ b/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,12 +17,18 @@ interface Props { } export const Buttons: FC = ({}) => { - 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 ( @@ -29,19 +36,9 @@ export const Buttons: FC = ({}) => { - setShowModal(!showModal)} - size="lg" - className="w-full" - selected={!disabled} - > + setDisabled(!disabled)} size="lg" className="w-full" selected={!disabled}> {translate("common.autoStart")} - - {showModal && ( - setShowModal(!showModal)} onClick={clickHandler} /> - )} ) } diff --git a/src/app/Marine2/components/_composed/modals/Modals.tsx b/src/app/Marine2/components/_composed/modals/Modals.tsx new file mode 100644 index 00000000..251cdc9d --- /dev/null +++ b/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 = () => ( + <> + + + +) diff --git a/src/app/Marine2/components/_composed/modals/auto-start-stop/index.tsx b/src/app/Marine2/components/_composed/modals/auto-start-stop/index.tsx index 3b7acf96..cfa412f0 100644 --- a/src/app/Marine2/components/_composed/modals/auto-start-stop/index.tsx +++ b/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 = ({ 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 ( console.log(false)} className={classes}> @@ -25,11 +31,11 @@ export const AutoStartStopModal: FC = ({ disabled, onClose, onClick }) => /> -
- @@ -37,6 +43,11 @@ export const AutoStartStopModal: FC = ({ disabled, onClose, onClick }) => ) } + const disableHandler = () => { + // Logic here + closeModalFor("startStopMode") + } + return ( console.log(false)} className={classes}> @@ -48,11 +59,11 @@ export const AutoStartStopModal: FC = ({ disabled, onClose, onClick }) => /> -
- 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 index 0f65b174..2d1f3c5f 100644 --- a/src/app/Marine2/components/_composed/modals/generator-stop-info/index.tsx +++ b/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 = ({ linkedView, onClose, infoText }) => { + if (!modals["startStopMode"]) return null - if (linkedView || !infoText) { - return null - } - { - /* {!linkedView && !!infoText && ( -
- -
- )}*/ - } return ( - + closeModalFor("generatorStopInfo")}> - + - diff --git a/src/app/Marine2/components/ui/AutoStartStopSetter/AutoStartStopSetter.tsx b/src/app/Marine2/components/ui/AutoStartStopSetter/AutoStartStopSetter.tsx index cb0076d4..69d9efbc 100644 --- a/src/app/Marine2/components/ui/AutoStartStopSetter/AutoStartStopSetter.tsx +++ b/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) diff --git a/src/app/Marine2/components/ui/Box/Box.tsx b/src/app/Marine2/components/ui/Box/Box.tsx index 5a449bef..14861b78 100644 --- a/src/app/Marine2/components/ui/Box/Box.tsx +++ b/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" diff --git a/src/app/Marine2/components/ui/MainLayout/MainLayout.tsx b/src/app/Marine2/components/ui/MainLayout/MainLayout.tsx index 80fe957a..8062fdab 100644 --- a/src/app/Marine2/components/ui/MainLayout/MainLayout.tsx +++ b/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,7 +14,7 @@ const MainLayout = ({ children, title, pageSelectorProps }: Props) => { }, [title, appViewsStore]) return ( -
+
@@ -21,6 +22,7 @@ const MainLayout = ({ children, title, pageSelectorProps }: Props) => {
+
) } diff --git a/src/app/Marine2/components/views/RootView.tsx b/src/app/Marine2/components/views/RootView.tsx index b6373d38..a29dec8a 100644 --- a/src/app/Marine2/components/views/RootView.tsx +++ b/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() diff --git a/src/app/Marine2/modules/Ui/Ui.store.ts b/src/app/Marine2/modules/Ui/Ui.store.ts index ed3b6f0b..c7764bd4 100644 --- a/src/app/Marine2/modules/Ui/Ui.store.ts +++ b/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(), []) +} diff --git a/src/app/Marine2/modules/Ui/index.ts b/src/app/Marine2/modules/Ui/index.ts new file mode 100644 index 00000000..3e05d370 --- /dev/null +++ b/src/app/Marine2/modules/Ui/index.ts @@ -0,0 +1 @@ +export * from "./Ui.store"