Merge pull request #8 from cpvalente/feat/electron

Feat/electron

client/src/App.css

@@ -7,6 +7,7 @@ body,
 html,
 .App {
   margin: 0px auto;
+  overflow: hidden;
   overflow: clip;
   height: 100vh;
 }

client/src/app/api/ontimeApi.js

@@ -28,7 +28,6 @@ export const downloadEvents = async () => {
 };
 
 export const uploadEvents = async (file) => {
-  console.log('uploading', file);
   const formData = new FormData();
   formData.append('jsondb', file); // appending file
   await axios
@@ -40,3 +39,7 @@ export const uploadEvents = async (file) => {
     .then((res) => console.log(res.data))
     .catch((err) => console.error(err));
 };
+
+export const uploadEventsWithPath = async (filepath) => {
+  await axios.post(ontimeURL + '/dbpath', { path: filepath });
+};

client/src/features/editors/Editor.jsx

@@ -27,7 +27,7 @@ export default function Editor() {
 
       <div className={styles.mainContainer}>
         <Box id='settings' className={styles.settings}>
-          <MenuBar onOpen={onOpen} onClose={onClose} />
+          <MenuBar onOpen={onOpen} />
         </Box>
 
         <Box className={styles.editor}>

client/src/features/menu/MenuBar.jsx

@@ -1,4 +1,10 @@
-import { downloadEvents } from 'app/api/ontimeApi';
+import { useMutation, useQueryClient } from 'react-query';
+import {
+  downloadEvents,
+  uploadEvents,
+  uploadEventsWithPath,
+} from 'app/api/ontimeApi';
+import { EVENTS_TABLE } from 'app/api/apiConstants';
 import DownloadIconBtn from './buttons/DownloadIconBtn';
 import SettingsIconBtn from './buttons/SettingsIconBtn';
 import InfoIconBtn from './buttons/InfoIconBtn';
@@ -7,24 +13,106 @@ import MinIconBtn from './buttons/MinIconBtn';
 import QuitIconBtn from './buttons/QuitIconBtn';
 import style from './MenuBar.module.css';
 import HelpIconBtn from './buttons/HelpIconBtn';
+import UploadIconBtn from './buttons/UploadIconBtn';
+import { useRef } from 'react';
+
+const { ipcRenderer } = window.require('electron');
 
 export default function MenuBar(props) {
-  const { onOpen, onClose } = props;
+  const { onOpen } = props;
+  const hiddenFileInput = useRef(null);
+  const queryClient = useQueryClient();
+  const uploaddb = useMutation(uploadEvents, {
+    onSettled: () => {
+      queryClient.invalidateQueries(EVENTS_TABLE);
+    },
+  });
 
   const handleDownload = () => {
     downloadEvents();
   };
 
+  const handleClick = () => {
+    if (hiddenFileInput && hiddenFileInput.current) {
+      hiddenFileInput.current.click();
+    }
+  };
+
+  const handleUpload = (event) => {
+    const fileUploaded = event.target.files[0];
+
+    if (fileUploaded == null) return;
+
+    try {
+      uploaddb.mutate(fileUploaded);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleIPC = (action) => {
+    switch (action) {
+      case 'min':
+        ipcRenderer.send('set-window', 'to-tray');
+        break;
+      case 'max':
+        ipcRenderer.send('set-window', 'to-max');
+        break;
+      case 'shutdown':
+        ipcRenderer.send('shutdown', 'now');
+        break;
+      case 'help':
+        ipcRenderer.send('send-to-link', 'help');
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <>
-      <QuitIconBtn size='md' />
-      <MaxIconBtn size='md' />
-      <MinIconBtn size='md' />
+      <QuitIconBtn size='lg' clickhandler={() => handleIPC('shutdown')} />
+      <MaxIconBtn
+        style={{ fontSize: '1.5em' }}
+        size='lg'
+        clickhandler={() => handleIPC('max')}
+      />
+      <MinIconBtn
+        style={{ fontSize: '1.5em' }}
+        size='lg'
+        clickhandler={() => handleIPC('min')}
+      />
       <div className={style.gap} />
-      <HelpIconBtn size='md' disabled />
-      <SettingsIconBtn size='md' disabled />
-      <InfoIconBtn size='md' clickhandler={onOpen} />
-      <DownloadIconBtn size='md' clickhandler={handleDownload} />
+      <HelpIconBtn
+        style={{ fontSize: '1.5em' }}
+        size='lg'
+        clickhandler={() => handleIPC('help')}
+        disabled
+      />
+      <SettingsIconBtn style={{ fontSize: '1.5em' }} size='lg' disabled />
+      <div className={style.gap} />
+      <InfoIconBtn
+        style={{ fontSize: '1.5em' }}
+        size='lg'
+        clickhandler={onOpen}
+      />
+      <input
+        type='file'
+        style={{ display: 'none' }}
+        ref={hiddenFileInput}
+        onChange={handleUpload}
+        accept='.json'
+      />
+      <UploadIconBtn
+        style={{ fontSize: '1.5em' }}
+        size='lg'
+        clickhandler={handleClick}
+      />
+      <DownloadIconBtn
+        style={{ fontSize: '1.5em' }}
+        size='lg'
+        clickhandler={handleDownload}
+      />
     </>
   );
 }

client/src/features/menu/buttons/DownloadIconBtn.jsx

@@ -10,9 +10,6 @@ export default function DownloadIconBtn(props) {
         size={props.size || 'xs'}
         icon={<FiDownload />}
         colorScheme='white'
-        variant='outline'
-        isRound
-        borderColor='#fff1'
         onClick={clickhandler}
         _focus={{ boxShadow: 'none' }}
         {...rest}

client/src/features/menu/buttons/HelpIconBtn.jsx

@@ -10,9 +10,6 @@ export default function HelpIconBtn(props) {
         size={props.size || 'xs'}
         icon={<FiHelpCircle />}
         colorScheme='white'
-        variant='outline'
-        isRound
-        borderColor='#fff1'
         onClick={clickhandler}
         _focus={{ boxShadow: 'none' }}
         {...rest}

client/src/features/menu/buttons/InfoIconBtn.jsx

@@ -10,9 +10,6 @@ export default function InfoIconBtn(props) {
         size={props.size || 'xs'}
         icon={<FiHome />}
         colorScheme='white'
-        variant='outline'
-        isRound
-        borderColor='#fff1'
         onClick={clickhandler}
         _focus={{ boxShadow: 'none' }}
         {...rest}

client/src/features/menu/buttons/MaxIconBtn.jsx

@@ -10,9 +10,6 @@ export default function MaxIconBtn(props) {
         size={props.size || 'xs'}
         icon={<FiMaximize />}
         colorScheme='white'
-        variant='outline'
-        isRound
-        borderColor='#fff1'
         onClick={clickhandler}
         _focus={{ boxShadow: 'none' }}
         {...rest}

client/src/features/menu/buttons/MinIconBtn.jsx

@@ -10,9 +10,6 @@ export default function MinIconBtn(props) {
         size={props.size || 'xs'}
         icon={<FiMinimize />}
         colorScheme='white'
-        variant='outline'
-        isRound
-        borderColor='#fff1'
         onClick={clickhandler}
         _focus={{ boxShadow: 'none' }}
         {...rest}

client/src/features/menu/buttons/QuitIconBtn.jsx

@@ -1,21 +1,68 @@
-import { IconButton } from '@chakra-ui/button';
+import { Button, IconButton } from '@chakra-ui/button';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+} from '@chakra-ui/modal';
 import { Tooltip } from '@chakra-ui/tooltip';
+import { useRef, useState } from 'react';
 import { FiPower } from 'react-icons/fi';
 
 export default function QuitIconBtn(props) {
   const { clickhandler, ...rest } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const onClose = () => setIsOpen(false);
+  const cancelRef = useRef();
+
+  const handleShutdown = () => {
+    onClose();
+    clickhandler();
+  };
+
   return (
-    <Tooltip label='Quit Application'>
-      <IconButton
-        size={props.size || 'xs'}
-        icon={<FiPower />}
-        colorScheme='red'
-        variant='outline'
-        isRound
-        onClick={clickhandler}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
+    <>
+      <Tooltip label='Quit Application'>
+        <IconButton
+          size={props.size || 'xs'}
+          icon={<FiPower />}
+          colorScheme='red'
+          variant='outline'
+          isRound
+          onClick={() => setIsOpen(true)}
+          _focus={{ boxShadow: 'none' }}
+          {...rest}
+        />
+      </Tooltip>
+      <AlertDialog
+        isOpen={isOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Server Shutdown
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              This will shutdown the program and all running servers. Are you
+              sure?
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button colorScheme='red' onClick={handleShutdown} ml={3}>
+                Shutdown
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
   );
 }

client/src/features/menu/buttons/SettingsIconBtn.jsx

@@ -10,9 +10,6 @@ export default function SettingsIconBtn(props) {
         size={props.size || 'xs'}
         icon={<FiSettings />}
         colorScheme='white'
-        variant='outline'
-        isRound
-        borderColor='#fff1'
         onClick={clickhandler}
         _focus={{ boxShadow: 'none' }}
         {...rest}

client/src/features/menu/buttons/UploadIconBtn.jsx

@@ -0,0 +1,19 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiUpload } from 'react-icons/fi';
+
+export default function UploadIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Upload File'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiUpload />}
+        colorScheme='white'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}