feat(save/restore ui): implement the save and restore ui (#104)

* feat(Save/Restore ui): add buttons to save or restore the model manually * feat(Save/Restore ui): add warning before exit and reload * fix(Save/Restore ui): add return type for confirmExit
techlauncher-mlai-edge-physics · Sep 17, 2023 · 9e44d6e · 9e44d6e
1 parent 477f7f5
commit 9e44d6e
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 26 deletions.
diff --git a/src/components/ControlBar.tsx b/src/components/ControlBar.tsx
@@ -9,42 +9,88 @@ export const ControlBarContainer = styled(Space)`
   display: flex;
 `;
 
+export const SaveBtn = styled(Button)`
+  position: absolute;
+  bottom: 4rem;
+  right: 11rem;
+  color: #eeeeee;
+  background-color: #555555;
+  height: 3.2rem;
+  width: 8rem;
+  margin: 0 0.2rem;
+  cursor: pointer;
+  @media (max-width: 760px) {
+    margin-bottom: 0.2rem;
+  }
+`;
+
+export const RestoreBtn = styled(Button)`
+  position: absolute;
+  bottom: 4rem;
+  right: 2rem;
+  color: #eeeeee;
+  background-color: #555555;
+  height: 3.2rem;
+  width: 8rem;
+  margin: 0 0.2rem;
+  cursor: pointer;
+  @media (max-width: 760px) {
+    margin-bottom: 0.2rem;
+  }
+`;
+
 interface ControlBarProps {
   worker: Worker;
 }
 
 export default function ControlBar(props: ControlBarProps): React.ReactElement {
   const { worker } = props;
   return (
-    <ControlBarContainer size="small" direction="horizontal">
-      <Button
-        onClick={() => {
-          worker.postMessage({ func: 'start' });
-        }}
-      >
-        Play
-      </Button>
-      <Button
-        onClick={() => {
-          worker.postMessage({ func: 'pause' });
-        }}
-      >
-        Pause
-      </Button>
-      <Button
+    <>
+      <SaveBtn
         onClick={() => {
-          worker.postMessage({ func: 'stop' });
+          console.log('Click Save');
         }}
       >
-        Stop
-      </Button>
-      <Button
+        Save Model
+      </SaveBtn>
+      <RestoreBtn
         onClick={() => {
-          worker.terminate();
+          console.log('Click Restore');
         }}
       >
-        TERMINATE
-      </Button>
-    </ControlBarContainer>
+        Restore Model
+      </RestoreBtn>
+      <ControlBarContainer size="small" direction="horizontal">
+        <Button
+          onClick={() => {
+            worker.postMessage({ func: 'start' });
+          }}
+        >
+          Play
+        </Button>
+        <Button
+          onClick={() => {
+            worker.postMessage({ func: 'pause' });
+          }}
+        >
+          Pause
+        </Button>
+        <Button
+          onClick={() => {
+            worker.postMessage({ func: 'stop' });
+          }}
+        >
+          Stop
+        </Button>
+        <Button
+          onClick={() => {
+            worker.terminate();
+          }}
+        >
+          TERMINATE
+        </Button>
+      </ControlBarContainer>
+    </>
   );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,8 +1,12 @@
 import ParBar from '../components/ParametersBar';
 import ControlBar from '../components/ControlBar';
-import { DiffusionPlane, type SimulationParams } from '../components/Simulation';
+import {
+  DiffusionPlane,
+  type SimulationParams,
+} from '../components/Simulation';
 import { Canvas } from '@react-three/fiber';
 import styled from 'styled-components';
+import { useEffect } from 'react';
 
 const SimulatorContainer = styled.div`
   position: relative;
@@ -34,7 +38,17 @@ interface IndexProp {
 
 export default function Home(props: IndexProp): React.ReactElement {
   const { simulationParams, setSimulationParams, worker } = props;
-
+  useEffect(() => {
+    const confirmExit = (e: BeforeUnloadEvent): void => {
+      console.log('beforeunload event triggered');
+      e.preventDefault();
+      e.returnValue = '';
+    };
+    window.addEventListener('beforeunload', confirmExit);
+    return () => {
+      window.removeEventListener('beforeunload', confirmExit);
+    };
+  }, []);
   return (
     <>
       <ParBar params={simulationParams} setParams={setSimulationParams} />