mock components

- App Settings
- Event Settings
- Alias

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 (
+    <>
+      <form onSubmit={submitHandler}>
+        <ModalBody className={style.modalBody}>
+          <p className={style.notes}>
+            Configure easy to use URL Aliases
+            <br />
+            !!! Feature is not yet implemented !!!
+          </p>
+
+          <span> Default URLs </span>
+
+          <div className={style.highNotes}>
+            <p className={style.flexNote}>
+              Presenter Screen <br />
+              <a
+                href={speakerLink}
+                target='_blank'
+                rel='noreferrer'
+                className={style.label}
+              >
+                {speakerLink}
+              </a>
+            </p>
+            <p className={style.flexNote}>
+              Backstage / Stage Manager Screen <br />
+              <a
+                href={smLink}
+                target='_blank'
+                rel='noreferrer'
+                className={style.label}
+              >
+                {smLink}
+              </a>
+            </p>
+            <p className={style.flexNote}>
+              Public / Foyer Screen <br />
+              <a
+                href={publicLink}
+                target='_blank'
+                rel='noreferrer'
+                className={style.label}
+              >
+                {publicLink}
+              </a>
+            </p>
+            <p className={style.flexNote}>
+              Picture in Picture Screen <br />
+              <a
+                href={pipLink}
+                target='_blank'
+                rel='noreferrer'
+                className={style.label}
+              >
+                {pipLink}
+              </a>
+            </p>
+          </div>
+
+          <span> Manage custom aliases</span>
+          <div className={style.modalInline}>
+            <Input
+              size='sm'
+              name='URL'
+              placeholder='A long URL'
+              autoComplete='off'
+              value={'A long URL'}
+              onChange={(event) => {
+                // Nothing here yet
+              }}
+              isDisabled={true}
+            />
+            <Input
+              size='sm'
+              name='Alias'
+              placeholder='A nice alias'
+              autoComplete='off'
+              value={'A nice alias'}
+              onChange={(event) => {
+                // Nothing here yet
+              }}
+              isDisabled={true}
+            />
+            <IconButton
+              size='sm'
+              icon={<FiMinus />}
+              colorScheme='red'
+              disabled
+            />
+          </div>
+          <div className={style.separator} />
+          <div className={style.modalInline}>
+            <Input
+              size='sm'
+              name='URL'
+              placeholder='URL'
+              autoComplete='off'
+              value={'URL'}
+              onChange={(event) => {
+                // Nothing here yet
+              }}
+              isDisabled={true}
+            />
+            <Input
+              size='sm'
+              name='Alias'
+              placeholder='Alias'
+              autoComplete='off'
+              value={'Alias'}
+              onChange={(event) => {
+                // Nothing here yet
+              }}
+              isDisabled={true}
+            />
+            <IconButton
+              size='sm'
+              icon={<FiPlus />}
+              colorScheme='blue'
+              disabled
+            />
+          </div>
+        </ModalBody>
+      </form>
+    </>
+  );
+}

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 (
+    <>
+      <form onSubmit={submitHandler}>
+        <ModalBody className={style.modalBody}>
+          <>
+            <p className={style.notes}>
+              Options related to the application
+              <br />
+              !!! Changing of these options is not yet implemented !!!
+            </p>
+
+            <FormControl id='viewerPort'>
+              <FormLabel htmlFor='viewerPort'>
+                Viewer Port
+                <span className={style.notes}>
+                  Port to access viewers - Default 4001
+                </span>
+              </FormLabel>
+              <Input
+                size='sm'
+                name='title'
+                placeholder='4001'
+                autoComplete='off'
+                value={4001}
+                onChange={(event) => {
+                  // Nothing here yet
+                }}
+                isDisabled={true}
+                style={{ width: '6em' }}
+              />
+            </FormControl>
+            <FormControl id='oscInPort'>
+              <FormLabel htmlFor='oscInPort'>
+                OSC In Port
+                <span className={style.notes}>
+                  <br />
+                  App control - Default 8888
+                </span>
+              </FormLabel>
+              <Input
+                size='sm'
+                name='oscInPort'
+                placeholder='8888'
+                autoComplete='off'
+                value={8888}
+                onChange={(event) => {
+                  // Nothing here yet
+                }}
+                isDisabled={true}
+                style={{ width: '6em' }}
+              />
+            </FormControl>
+            <div className={style.modalInline}>
+              <FormControl id='oscOutTarget'>
+                <FormLabel htmlFor='oscOutTarget'>
+                  OSC Out Target IP
+                  <span className={style.notes}>
+                    <br />
+                    App Feedback - Default 127.0.0.1
+                  </span>
+                </FormLabel>
+                <Input
+                  size='sm'
+                  name='oscOutPort'
+                  placeholder='9999'
+                  autoComplete='off'
+                  value={'127.0.0.1'}
+                  onChange={(event) => {
+                    // Nothing here yet
+                  }}
+                  isDisabled={true}
+                />
+              </FormControl>
+              <FormControl id='oscOutPort'>
+                <FormLabel htmlFor='oscOutPort'>
+                  OSC Out Port
+                  <span className={style.notes}>
+                    <br />
+                    Default 9999
+                  </span>
+                </FormLabel>
+                <Input
+                  size='sm'
+                  name='oscOutPort'
+                  placeholder='9999'
+                  autoComplete='off'
+                  value={9999}
+                  onChange={(event) => {
+                    // Nothing here yet
+                  }}
+                  isDisabled={true}
+                  style={{ width: '6em' }}
+                />
+              </FormControl>
+            </div>
+
+            <FormControl id='endMessage'>
+              <FormLabel htmlFor='endMessage'>
+                End Message
+                <span className={style.notes}>
+                  Message shown in timer when time is finished
+                </span>
+              </FormLabel>
+              <Input
+                size='sm'
+                name='endMessage'
+                placeholder='Time Out'
+                autoComplete='off'
+                value={'TIME UP'}
+                onChange={(event) => {
+                  // Nothing here yet
+                }}
+                isDisabled={true}
+              />
+            </FormControl>
+          </>
+          <Button
+            colorScheme='blue'
+            type='submit'
+            isLoading={submitting}
+            disabled={true}
+          >
+            Save
+          </Button>
+        </ModalBody>
+      </form>
+    </>
+  );
+}

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 (
     <>
       <form onSubmit={submitHandler}>
-        <ModalBody>
+        <ModalBody className={style.modalBody}>
           {status === 'success' && (
             <>
+              <p className={style.notes}>
+                Options related to the running event
+                <br />
+                Affect rendered views
+              </p>
+
               <FormControl id='title'>
-                <FormLabel
+                <FormLabel htmlFor='title'>Event Title</FormLabel>
-                  style={{ fontWeight: 400, paddingTop: '1em' }}
-                  htmlFor='title'
-                >
-                  Event Title
-                </FormLabel>
                 <Input
                   size='sm'
                   name='title'
                   placeholder='Event Title'
                   autoComplete='off'
                   value={formData.title}
-                  onChange={(event) =>
+                  onChange={(event) => {
-                    setFormData({ ...formData, title: event.target.value })
+                    setChanged(true);
-                  }
+
+                    setFormData({ ...formData, title: event.target.value });
+                  }}
                   isDisabled={submitting}
                 />
               </FormControl>
 
               <FormControl id='url'>
-                <FormLabel
+                <FormLabel htmlFor='url'>
-                  style={{ fontWeight: 400, paddingTop: '1em' }}
-                  htmlFor='url'
-                >
                   Event URL
+                  <span className={style.notes}>
+                    (shown as a QR code in some views)
+                  </span>
                 </FormLabel>
                 <Input
                   size='sm'
@@ -78,55 +86,48 @@ export default function SettingsModal() {
                   placeholder='www.onsite.no'
                   autoComplete='off'
                   value={formData.url}
-                  onChange={(event) =>
+                  onChange={(event) => {
-                    setFormData({ ...formData, url: event.target.value })
+                    setChanged(true);
-                  }
+                    setFormData({ ...formData, url: event.target.value });
+                  }}
                   isDisabled={submitting}
                 />
               </FormControl>
 
               <FormControl id='pubInfo'>
-                <FormLabel
+                <FormLabel htmlFor='pubInfo'>Public Info</FormLabel>
-                  style={{ fontWeight: 400, paddingTop: '1em' }}
-                  htmlFor='pubInfo'
-                >
-                  Public Info
-                </FormLabel>
                 <Textarea
                   size='sm'
                   name='pubInfo'
                   placeholder='Information to be shown on public screens'
                   autoComplete='off'
                   value={formData.publicInfo}
-                  onChange={(event) =>
+                  onChange={(event) => {
+                    setChanged(true);
                     setFormData({
                       ...formData,
                       publicInfo: event.target.value,
-                    })
+                    });
-                  }
+                  }}
                   isDisabled={submitting}
                 />
               </FormControl>
 
               <FormControl id='backstageInfo'>
-                <FormLabel
+                <FormLabel htmlFor='backstageInfo'>Backstage Info</FormLabel>
-                  style={{ fontWeight: 400, paddingTop: '1em' }}
-                  htmlFor='backstageInfo'
-                >
-                  Backstage Info
-                </FormLabel>
                 <Textarea
                   size='sm'
                   name='backstageInfo'
                   placeholder='Information to be shown on backstage screens'
                   autoComplete='off'
                   value={formData.backstageInfo}
-                  onChange={(event) =>
+                  onChange={(event) => {
+                    setChanged(true);
                     setFormData({
                       ...formData,
                       backstageInfo: event.target.value,
-                    })
+                    });
-                  }
+                  }}
                   isDisabled={submitting}
                 />
               </FormControl>
@@ -134,9 +135,9 @@ export default function SettingsModal() {
           )}
           <Button
             colorScheme='blue'
-            mr={3}
-            isLoading={submitting}
             type='submit'
+            isLoading={submitting}
+            disabled={!changed}
           >
             Save
           </Button>

client/src/features/modals/ModalManager.jsx

@@ -7,7 +7,9 @@ import {
   ModalOverlay,
 } from '@chakra-ui/modal';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/tabs';
-import SettingsModal from './SettingsModal';
+import EventSettingsModal from './EventSettingsModal';
+import AppSettingsModal from './AppSettingsModal';
+import AliasesModal from './AliasesModal';
 
 export default function ModalManager(props) {
   const { isOpen, onClose } = props;
@@ -31,19 +33,13 @@ export default function ModalManager(props) {
           </TabList>
           <TabPanels>
             <TabPanel>
-              <SettingsModal onClose={onClose} />
+              <EventSettingsModal />
             </TabPanel>
             <TabPanel>
-              <p>Application settings will be here!</p>
+              <AppSettingsModal />
-              <p>Set port</p>
-              <p>Set end message</p>
             </TabPanel>
             <TabPanel>
-              <p>You will be able to define URL aliases here!</p>
+              <AliasesModal />
-              <p>List existing aliases</p>
-              <p>List existing aliases</p>
-              <p>List existing aliases</p>
-              <p>Add new alias input + button</p>
             </TabPanel>
           </TabPanels>
         </Tabs>

client/src/features/modals/Modals.module.css

@@ -0,0 +1,57 @@
+.modalBody {
+  font-weight: 400;
+}
+
+.modalBody > * {
+  margin-top: 0.5em;
+}
+
+.notes {
+  font-weight: 400;
+  color: #2b6cb0;
+}
+
+p.notes {
+  text-align: center;
+  border-color: #2b6cb055;
+  border-width: 0 2px;
+  font-size: 0.9em;
+  margin-bottom: 1em;
+}
+
+span.notes {
+  font-size: 0.8em;
+  padding-left: 0.4em;
+}
+
+.modalInline {
+  display: flex;
+  justify-content: space-between;
+  gap: 1em;
+}
+
+.highNotes {
+  background-color: #2b6cb022;
+  margin: 1em 0;
+  padding: 0.3em;
+}
+
+.flexNote {
+  font-size: 0.9em;
+  padding-bottom: 0.3em;
+}
+
+a::after {
+  content: '  \2197';
+  color: #ff7597;
+}
+
+a:hover {
+  color: #ff7597;
+}
+
+.separator {
+  border: 1px solid #2b6cb055;
+  width: 50%;
+  margin: 0.5em auto;
+}