diff --git a/client/src/features/modals/AliasesModal.jsx b/client/src/features/modals/AliasesModal.jsx new file mode 100644 index 000000000..3962b8768 --- /dev/null +++ b/client/src/features/modals/AliasesModal.jsx @@ -0,0 +1,152 @@ +import { IconButton } from '@chakra-ui/button'; +import { FiPlus, FiMinus } from 'react-icons/fi'; +import { ModalBody } from '@chakra-ui/modal'; +import { Input } from '@chakra-ui/react'; +import { fetchEvent } from 'app/api/eventApi'; +import { useState } from 'react'; +import { useFetch } from 'app/hooks/useFetch'; +import { EVENT_TABLE } from 'app/api/apiConstants'; +import style from './Modals.module.css'; + +export default function AliasesModal() { + const { data, status, isError } = useFetch(EVENT_TABLE, fetchEvent); + const [submitting, setSubmitting] = useState(false); + + const submitHandler = async (event) => { + event.preventDefault(); + // NOTHING HERE YET + }; + + // Hardcoded links for now + // it will need dynamic PORT assignment + const speakerLink = 'http://localhost:4001/speaker'; + const smLink = 'http://localhost:4001/sm'; + const publicLink = 'http://localhost:4001/public'; + const pipLink = 'http://localhost:4001/pip'; + + return ( + <> +
+ +

+ Configure easy to use URL Aliases +
+ !!! Feature is not yet implemented !!! +

+ + Default URLs + +
+

+ Presenter Screen
+ + {speakerLink} + +

+

+ Backstage / Stage Manager Screen
+ + {smLink} + +

+

+ Public / Foyer Screen
+ + {publicLink} + +

+

+ Picture in Picture Screen
+ + {pipLink} + +

+
+ + Manage custom aliases +
+ { + // Nothing here yet + }} + isDisabled={true} + /> + { + // Nothing here yet + }} + isDisabled={true} + /> + } + colorScheme='red' + disabled + /> +
+
+
+ { + // Nothing here yet + }} + isDisabled={true} + /> + { + // Nothing here yet + }} + isDisabled={true} + /> + } + colorScheme='blue' + disabled + /> +
+ + + + ); +} diff --git a/client/src/features/modals/AppSettingsModal.jsx b/client/src/features/modals/AppSettingsModal.jsx new file mode 100644 index 000000000..dc2ba12a4 --- /dev/null +++ b/client/src/features/modals/AppSettingsModal.jsx @@ -0,0 +1,146 @@ +import { ModalBody } from '@chakra-ui/modal'; +import { FormLabel, FormControl, Input, Button } from '@chakra-ui/react'; +import { fetchEvent } from 'app/api/eventApi'; +import { useState } from 'react'; +import { useFetch } from 'app/hooks/useFetch'; +import { EVENT_TABLE } from 'app/api/apiConstants'; +import style from './Modals.module.css'; + +export default function AppSettingsModal() { + const { data, status, isError } = useFetch(EVENT_TABLE, fetchEvent); + const [submitting, setSubmitting] = useState(false); + + const submitHandler = async (event) => { + event.preventDefault(); + // NOTHING HERE YET + }; + + return ( + <> +
+ + <> +

+ Options related to the application +
+ !!! Changing of these options is not yet implemented !!! +

+ + + + Viewer Port + + Port to access viewers - Default 4001 + + + { + // Nothing here yet + }} + isDisabled={true} + style={{ width: '6em' }} + /> + + + + OSC In Port + +
+ App control - Default 8888 + + + { + // Nothing here yet + }} + isDisabled={true} + style={{ width: '6em' }} + /> + +
+ + + OSC Out Target IP + +
+ App Feedback - Default 127.0.0.1 + + + { + // Nothing here yet + }} + isDisabled={true} + /> + + + + OSC Out Port + +
+ Default 9999 + + + { + // Nothing here yet + }} + isDisabled={true} + style={{ width: '6em' }} + /> + +
+ + + + End Message + + Message shown in timer when time is finished + + + { + // Nothing here yet + }} + isDisabled={true} + /> + + + + +
+ + ); +} diff --git a/client/src/features/modals/SettingsModal.jsx b/client/src/features/modals/EventSettingsModal.jsx similarity index 72% rename from client/src/features/modals/SettingsModal.jsx rename to client/src/features/modals/EventSettingsModal.jsx index 7188ab4c3..06e8027cd 100644 --- a/client/src/features/modals/SettingsModal.jsx +++ b/client/src/features/modals/EventSettingsModal.jsx @@ -10,6 +10,7 @@ import { fetchEvent, postEvent } from 'app/api/eventApi'; import { useEffect, useState } from 'react'; import { useFetch } from 'app/hooks/useFetch'; import { EVENT_TABLE } from 'app/api/apiConstants'; +import style from './Modals.module.css'; export default function SettingsModal() { const { data, status, isError } = useFetch(EVENT_TABLE, fetchEvent); @@ -19,6 +20,7 @@ export default function SettingsModal() { publicInfo: '', backstageInfo: '', }); + const [changed, setChanged] = useState(false); const [submitting, setSubmitting] = useState(false); useEffect(() => { @@ -37,40 +39,46 @@ export default function SettingsModal() { setSubmitting(true); await postEvent(formData).then(setSubmitting(false)); + + setChanged(false); + setSubmitting(false); }; return ( <>
- + {status === 'success' && ( <> +

+ Options related to the running event +
+ Affect rendered views +

+ - - Event Title - + Event Title - setFormData({ ...formData, title: event.target.value }) - } + onChange={(event) => { + setChanged(true); + + setFormData({ ...formData, title: event.target.value }); + }} isDisabled={submitting} /> - + Event URL + + (shown as a QR code in some views) + - setFormData({ ...formData, url: event.target.value }) - } + onChange={(event) => { + setChanged(true); + setFormData({ ...formData, url: event.target.value }); + }} isDisabled={submitting} /> - - Public Info - + Public Info