diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx
index 1a4e4f26f..46e950636 100644
--- a/client/src/features/editors/Editor.jsx
+++ b/client/src/features/editors/Editor.jsx
@@ -2,8 +2,8 @@ import { lazy, useEffect } from 'react';
import { Box } from '@chakra-ui/layout';
import { useDisclosure } from '@chakra-ui/hooks';
import styles from './Editor.module.css';
-import SettingsModal from 'features/modals/SettingsModal';
import MenuBar from 'features/menu/MenuBar';
+import ModalManager from 'features/modals/ModalManager';
const EventListWrapper = lazy(() =>
import('features/editors/list/EventListWrapper')
@@ -22,7 +22,7 @@ export default function Editor() {
return (
<>
-
+
diff --git a/client/src/features/menu/MenuBar.jsx b/client/src/features/menu/MenuBar.jsx
index c11ce2efb..2ed4e2c2d 100644
--- a/client/src/features/menu/MenuBar.jsx
+++ b/client/src/features/menu/MenuBar.jsx
@@ -3,7 +3,6 @@ import { downloadEvents, uploadEvents } 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';
import MaxIconBtn from './buttons/MaxIconBtn';
import MinIconBtn from './buttons/MinIconBtn';
import QuitIconBtn from './buttons/QuitIconBtn';
@@ -84,13 +83,12 @@ export default function MenuBar(props) {
size='lg'
clickhandler={() => handleIPC('help')}
/>
-
-
-
+
+
}
diff --git a/client/src/features/modals/ModalManager.jsx b/client/src/features/modals/ModalManager.jsx
new file mode 100644
index 000000000..745860bc1
--- /dev/null
+++ b/client/src/features/modals/ModalManager.jsx
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import {
+ Modal,
+ ModalCloseButton,
+ ModalContent,
+ ModalHeader,
+ ModalOverlay,
+} from '@chakra-ui/modal';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/tabs';
+import SettingsModal from './SettingsModal';
+
+export default function ModalManager(props) {
+ const { isOpen, onClose } = props;
+ return (
+
+
+
+ Ontime Settings
+
+
+
+
+ Event Settings
+ Application Settings
+ URL Aliases
+
+
+
+
+
+
+ Application settings will be here!
+ Set port
+ Set end message
+
+
+ You will be able to define URL aliases here!
+ List existing aliases
+ List existing aliases
+ List existing aliases
+ Add new alias input + button
+
+
+
+
+
+ );
+}
+
+ModalManager.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onClose: PropTypes.bool.isRequired,
+};
diff --git a/client/src/features/modals/SettingsModal.jsx b/client/src/features/modals/SettingsModal.jsx
index 7d4c507a0..7188ab4c3 100644
--- a/client/src/features/modals/SettingsModal.jsx
+++ b/client/src/features/modals/SettingsModal.jsx
@@ -1,12 +1,4 @@
-import {
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalFooter,
- ModalHeader,
- ModalOverlay,
-} from '@chakra-ui/modal';
+import { ModalBody } from '@chakra-ui/modal';
import {
FormLabel,
FormControl,
@@ -19,7 +11,7 @@ import { useEffect, useState } from 'react';
import { useFetch } from 'app/hooks/useFetch';
import { EVENT_TABLE } from 'app/api/apiConstants';
-export default function SettingsModal(props) {
+export default function SettingsModal() {
const { data, status, isError } = useFetch(EVENT_TABLE, fetchEvent);
const [formData, setFormData] = useState({
title: '',
@@ -28,7 +20,6 @@ export default function SettingsModal(props) {
backstageInfo: '',
});
const [submitting, setSubmitting] = useState(false);
- const { isOpen, onClose } = props;
useEffect(() => {
if (data == null) return;
@@ -45,128 +36,112 @@ export default function SettingsModal(props) {
event.preventDefault();
setSubmitting(true);
- await postEvent(formData).then(setSubmitting(false)).then(onClose);
+ await postEvent(formData).then(setSubmitting(false));
};
return (
-
-
-
-
-
+
+
+ Backstage Info
+
+
+ >
+ )}
+
+
+
+ >
);
}