update export

railmapgen · Oct 27, 2024 · 2090343 · 2090343
1 parent 56dd6cc
commit 2090343
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 35 deletions.
diff --git a/src/components/app-root.tsx b/src/components/app-root.tsx
@@ -13,17 +13,13 @@ import WindowHeader from './header/window-header';
 import RmgPaletteAppClip from './panel/rmg-palette-app-clip';
 import DesignerRoot from './designer-root';
 import Ticket from './marketplace/ticket';
+import ExportRoot from './export-root';
 
 const RMP_GALLERY_CHANNEL_NAME = 'RMP_GALLERY_CHANNEL';
 const RMP_GALLERY_CHANNEL_OPEN_EVENT = 'OPEN_DESIGNER';
 const RMP_GALLERY_CHANNEL_NEW_EVENT = 'NEW_DESIGNER';
 const CHN = new BroadcastChannel(RMP_GALLERY_CHANNEL_NAME);
 
-const RMP_MASTER_CHANNEL_NAME = 'RMP_MASTER_CHANNEL';
-const RMP_MASTER_CHANNEL_REQUEST = 'MASTER_REQUEST';
-const RMP_MASTER_CHANNEL_POST = 'MASTER_POST';
-const CHN_MASTER = new BroadcastChannel(RMP_MASTER_CHANNEL_NAME);
-
 export default function AppRoot() {
     const navigate = useNavigate();
     const isInNew = useMatch('/new');
@@ -68,21 +64,8 @@ export default function AppRoot() {
             }
         };
         CHN.addEventListener('message', handleMessage);
-
-        const handleMaster = (e: MessageEvent) => {
-            const { event } = e.data;
-            if (event === RMP_MASTER_CHANNEL_REQUEST) {
-                const post = JSON.stringify({ ...param, id: nanoid(6) });
-                CHN_MASTER.postMessage({
-                    event: RMP_MASTER_CHANNEL_POST,
-                    data: post,
-                });
-            }
-        };
-        CHN_MASTER.addEventListener('message', handleMaster);
         return () => {
             CHN.removeEventListener('message', handleMessage);
-            CHN_MASTER.removeEventListener('message', handleMaster);
         };
     }, []);
 
@@ -108,6 +91,14 @@ export default function AppRoot() {
                                 </RmgErrorBoundary>
                             }
                         />
+                        <Route
+                            path="/export"
+                            element={
+                                <RmgErrorBoundary>
+                                    <ExportRoot />
+                                </RmgErrorBoundary>
+                            }
+                        />
                     </Routes>
 
                     <RmgPaletteAppClip

diff --git a/src/components/export-root.tsx b/src/components/export-root.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Preview } from './panel/preview';
+
+const ExportRoot = () => {
+    return <Preview isOpen={true} onClose={() => {}} exportMode={true} />;
+};
+
+export default ExportRoot;
diff --git a/src/components/panel/export.tsx b/src/components/panel/export.tsx
@@ -9,28 +9,42 @@ import {
     ModalHeader,
     ModalOverlay,
     Text,
-    Textarea,
 } from '@chakra-ui/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Param } from '../../constants/constants';
 import { nanoid } from '../../util/helper';
 
-export const Export = (props: { isOpen: boolean; onClose: () => void; param: Param }) => {
-    const { isOpen, onClose, param } = props;
+const RMP_MASTER_CHANNEL_NAME = 'RMP_MASTER_CHANNEL';
+const RMP_MASTER_CHANNEL_POST = 'MASTER_POST';
+const CHN_MASTER = new BroadcastChannel(RMP_MASTER_CHANNEL_NAME);
+
+export const Export = (props: { isOpen: boolean; onClose: () => void; param: Param; exportMode?: boolean }) => {
+    const { isOpen, onClose, param, exportMode } = props;
     const { t } = useTranslation();
 
-    const [code, setCode] = React.useState('');
+    // const [code, setCode] = React.useState('');
     React.useEffect(() => {
-        if (isOpen) {
-            // setCode(generateCode(param));
-            // console.log(JSON.stringify({ ...param, id: nanoid(10) }));
-            setCode(JSON.stringify({ ...param, id: nanoid(6) }));
-        }
+        // if (isOpen) {
+        //     // setCode(generateCode(param));
+        //     // console.log(JSON.stringify({ ...param, id: nanoid(10) }));
+        //     setCode(JSON.stringify({ ...param, id: nanoid(6) }));
+        // }
+        setLoading(false);
     }, [isOpen]);
 
+    const [loading, setLoading] = React.useState(false);
+    const postMessage = () => {
+        setLoading(true);
+        const post = JSON.stringify({ ...param, id: nanoid(6) });
+        CHN_MASTER.postMessage({
+            event: RMP_MASTER_CHANNEL_POST,
+            data: post,
+        });
+    };
+
     return (
-        <Modal isOpen={isOpen} onClose={onClose} size="2xl" scrollBehavior="inside">
+        <Modal isOpen={isOpen} onClose={onClose} size="sm" scrollBehavior="inside">
             <ModalOverlay />
             <ModalContent>
                 <ModalHeader>
@@ -44,13 +58,18 @@ export const Export = (props: { isOpen: boolean; onClose: () => void; param: Par
                 </ModalHeader>
 
                 <ModalBody>
-                    <Textarea value={code} readOnly fontFamily="monospace" fontSize="xs" minH="300" />
+                    <Text>Hi, the software has just been updated!</Text>
+                    <Text>Please open RMP and go to the master node for importing.</Text>
+                    {/*<Textarea value={code} readOnly fontFamily="monospace" fontSize="xs" minH="300" />*/}
                 </ModalBody>
 
                 <ModalFooter>
                     <Button colorScheme="blue" variant="outline" mr="1" onClick={onClose}>
                         {t('close')}
                     </Button>
+                    <Button colorScheme="blue" variant="solid" mr="1" onClick={postMessage} isLoading={loading}>
+                        {t('header.export.export')}
+                    </Button>
                 </ModalFooter>
             </ModalContent>
         </Modal>

diff --git a/src/components/panel/preview.tsx b/src/components/panel/preview.tsx
@@ -19,8 +19,8 @@ import { MetadataDetail } from '../../constants/marketplace';
 import { setLabel, setTransform } from '../../redux/param/param-slice';
 import { Export } from './export';
 
-export const Preview = (props: { isOpen: boolean; onClose: () => void }) => {
-    const { isOpen, onClose } = props;
+export const Preview = (props: { isOpen: boolean; onClose: () => void; exportMode?: boolean }) => {
+    const { isOpen, onClose, exportMode } = props;
     const navigate = useNavigate();
     const { t } = useTranslation();
     const param = useRootSelector(store => store.param);
@@ -176,7 +176,7 @@ export const Preview = (props: { isOpen: boolean; onClose: () => void }) => {
                         <Text as="b" fontSize="xl">
                             {t('header.export.preview')}
                         </Text>
-                        <ModalCloseButton />
+                        <ModalCloseButton hidden={exportMode} />
                     </ModalHeader>
 
                     <ModalBody>
@@ -289,10 +289,16 @@ export const Preview = (props: { isOpen: boolean; onClose: () => void }) => {
                     </ModalBody>
 
                     <ModalFooter>
-                        <Button colorScheme="blue" variant="outline" mr="1" onClick={onClose}>
+                        <Button colorScheme="blue" variant="outline" mr="1" hidden={exportMode} onClick={onClose}>
                             {t('cancel')}
                         </Button>
-                        <Button colorScheme="blue" variant="solid" mr="1" onClick={handleUploadMarketplace}>
+                        <Button
+                            colorScheme="blue"
+                            variant="solid"
+                            mr="1"
+                            hidden={exportMode}
+                            onClick={handleUploadMarketplace}
+                        >
                             {t('header.export.gallery')}
                         </Button>
                         <Button colorScheme="blue" variant="solid" mr="1" onClick={handleExport}>
@@ -301,7 +307,7 @@ export const Preview = (props: { isOpen: boolean; onClose: () => void }) => {
                     </ModalFooter>
                 </ModalContent>
             </Modal>
-            <Export isOpen={isExportOpen} onClose={() => setExportOpen(false)} param={param} />
+            <Export isOpen={isExportOpen} onClose={() => setExportOpen(false)} param={param} exportMode={exportMode} />
         </>
     );
 };