From e7b8dac36da56983757dc4c829e97a659f5a65cd Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Sun, 8 Dec 2024 17:02:19 +0900 Subject: [PATCH] [Update] Config Page: Add notification ui. show error messages. --- src-ui/app/App.jsx | 2 + .../setting_box/translation/Translation.jsx | 2 +- .../SnackbarController.jsx | 41 ++++++++++++++++++ .../SnackbarController.module.scss | 16 +++++++ src-ui/logics/common/index.js | 1 + src-ui/logics/common/useNotificationStatus.js | 42 +++++++++++++++++++ src-ui/logics/useReceiveRoutes.js | 8 ++++ src-ui/store.js | 6 +++ 8 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 src-ui/app/snackbar_controller/SnackbarController.jsx create mode 100644 src-ui/app/snackbar_controller/SnackbarController.module.scss create mode 100644 src-ui/logics/common/useNotificationStatus.js diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index 896cbb34..e9d12d08 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -8,6 +8,7 @@ import { ConfigPage } from "./config_page/ConfigPage"; import { SplashComponent } from "./splash_component/SplashComponent"; import { UpdatingComponent } from "./updating_component/UpdatingComponent"; import { ModalController } from "./modal_controller/ModalController"; +import { SnackbarController } from "./snackbar_controller/SnackbarController"; import styles from "./App.module.scss"; import { useIsBackendReady, useIsSoftwareUpdating } from "@logics_common"; @@ -45,6 +46,7 @@ const Contents = () => { + : diff --git a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx index 724e73b3..95ebdb54 100644 --- a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx @@ -170,4 +170,4 @@ const findKeyByDeviceValue = (devices, target_value) => { } } return null; -}; +}; \ No newline at end of file diff --git a/src-ui/app/snackbar_controller/SnackbarController.jsx b/src-ui/app/snackbar_controller/SnackbarController.jsx new file mode 100644 index 00000000..c6433293 --- /dev/null +++ b/src-ui/app/snackbar_controller/SnackbarController.jsx @@ -0,0 +1,41 @@ +import { useState } from "react"; +import Button from "@mui/material/Button"; +import Snackbar from "@mui/material/Snackbar"; +import Slide from "@mui/material/Slide"; + +import styles from "./SnackbarController.module.scss"; +import { useNotificationStatus } from "@logics_common"; +import { clsx } from "clsx"; + +export const SnackbarController = () => { + const { currentNotificationStatus, closeNotification } = useNotificationStatus(); + + const handleClose = (event, reason) => { + closeNotification(event, reason); + }; + + const snackbar_classname = clsx(styles.snackbar_content, { + [styles.is_success]: currentNotificationStatus.data.status === "success", + [styles.is_error]: currentNotificationStatus.data.status === "error", + }); + + return ( +
+ +
+

{currentNotificationStatus.data.message}

+
+ +
+ ); +}; + +const SlideTransition = (props) => { + return ; +}; diff --git a/src-ui/app/snackbar_controller/SnackbarController.module.scss b/src-ui/app/snackbar_controller/SnackbarController.module.scss new file mode 100644 index 00000000..2db44fa9 --- /dev/null +++ b/src-ui/app/snackbar_controller/SnackbarController.module.scss @@ -0,0 +1,16 @@ +.snackbar_content { + width: 100%; + height: 100%; + padding: 2rem; + color: #fff; + &.is_success { + background-color: #368777; + } + &.is_error { + background-color: #bb4448; + } +} + +.snackbar_message { + font-size: 1.4rem; +} \ No newline at end of file diff --git a/src-ui/logics/common/index.js b/src-ui/logics/common/index.js index 8f1cd737..e63b28db 100644 --- a/src-ui/logics/common/index.js +++ b/src-ui/logics/common/index.js @@ -5,6 +5,7 @@ export { useWindow } from "./useWindow"; export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage"; export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable"; export { useIsSoftwareUpdating } from "./useIsSoftwareUpdating"; +export { useNotificationStatus } from "./useNotificationStatus"; export { useOpenFolder } from "./useOpenFolder"; export { useMessage } from "./useMessage"; export { useUpdateSoftware } from "./useUpdateSoftware"; diff --git a/src-ui/logics/common/useNotificationStatus.js b/src-ui/logics/common/useNotificationStatus.js new file mode 100644 index 00000000..f36c0c45 --- /dev/null +++ b/src-ui/logics/common/useNotificationStatus.js @@ -0,0 +1,42 @@ +import { useStore_NotificationStatus } from "@store"; + +export const useNotificationStatus = () => { + const { currentNotificationStatus, updateNotificationStatus } = useStore_NotificationStatus(); + + const generateRandomKey = () => Math.random(); + + const showNotification_Error = (message) => { + updateNotificationStatus({ + status: "error", + is_open: true, + key: generateRandomKey(), + message: message, + }); + }; + + const showNotification_Success = (message) => { + updateNotificationStatus({ + status: "success", + is_open: true, + key: generateRandomKey(), + message: message, + }); + }; + + const closeNotification = (event, reason) => { + if (reason === "clickaway") return; + updateNotificationStatus((prev) => ({ + ...prev.data, + is_open: false, + })); + }; + + return { + currentNotificationStatus, + updateNotificationStatus, + + showNotification_Error, + showNotification_Success, + closeNotification, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 748b5061..0c09da4f 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -2,6 +2,9 @@ import { translator_status } from "@ui_configs"; import { arrayToObject } from "@utils"; import { + useNotificationStatus, + + useComputeMode, useInitProgress, useIsBackendReady, @@ -167,6 +170,10 @@ export const useReceiveRoutes = () => { const { updateOscIpAddress } = useOscIpAddress(); const { updateOscPort } = useOscPort(); + + + const { showNotification_Success, showNotification_Error } = useNotificationStatus(); + const routes = { // Common "/run/feed_watchdog": () => {}, @@ -494,6 +501,7 @@ export const useReceiveRoutes = () => { const error_route = error_routes[parsed_data.endpoint]; (error_route) ? error_route(parsed_data.result.data) : console.error(`Invalid endpoint: ${parsed_data.endpoint}\nresult: ${JSON.stringify(parsed_data.result)}`); console.error(`status 400: ${JSON.stringify(parsed_data.result)}`); + showNotification_Error(parsed_data.result.message); break; case 348: diff --git a/src-ui/store.js b/src-ui/store.js index cf63e236..878911cc 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -115,6 +115,12 @@ export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_I export const { atomInstance: Atom_InitProgress, useHook: useStore_InitProgress } = createAtomWithHook(0, "InitProgress"); export const { atomInstance: Atom_IsBreakPoint, useHook: useStore_IsBreakPoint } = createAtomWithHook(false, "IsBreakPoint"); export const { atomInstance: Atom_IsSoftwareUpdating, useHook: useStore_IsSoftwareUpdating } = createAtomWithHook(false, "IsSoftwareUpdating"); +export const { atomInstance: Atom_NotificationStatus, useHook: useStore_NotificationStatus } = createAtomWithHook({ + status: "", + is_open: false, + key: 0, + message: "", +}, "NotificationStatus"); // Main Page // Functions