[Update] Config Page: Add notification ui. show error messages.

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 = () => {
                 <ConfigPage />
                 <MainPage />
                 <ModalController />
+                <SnackbarController />
             </div>
             :
             <UpdatingComponent />

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 (
+        <div>
+            <Snackbar
+                open={currentNotificationStatus.data.is_open}
+                onClose={handleClose}
+                TransitionComponent={SlideTransition}
+                key={currentNotificationStatus.data.key}
+                autoHideDuration={5000}
+            >
+                <div className={snackbar_classname}>
+                    <p className={styles.snackbar_message}>{currentNotificationStatus.data.message}</p>
+                </div>
+            </Snackbar>
+        </div>
+    );
+};
+
+const SlideTransition = (props) => {
+    return <Slide {...props} direction="up" />;
+};

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;
+}

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";

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,
+    };
+};

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:

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