cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-05 07:28:01 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

mock components

Browse Source 
- App Settings
- Event Settings
- Alias
This commit is contained in:
cv
2021-10-26 21:48:45 +02:00
parent f999f19aa9
commit ec714b341f
5 changed files with 399 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/features/modals/AliasesModal.jsx
+152
View File
@@ -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
+146
View File
@@ -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/SettingsModal.jsx → client/src/features/modals/EventSettingsModal.jsx
+38 -37
View File
@@ -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
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='title'
>
Event Title
</FormLabel>
<FormLabel htmlFor='title'>Event Title</FormLabel>
<Input
size='sm'
name='title'
placeholder='Event Title'
autoComplete='off'
value={formData.title}
onChange={(event) =>
setFormData({ ...formData, title: event.target.value })
}
onChange={(event) => {
setChanged(true);
setFormData({ ...formData, title: event.target.value });
}}
isDisabled={submitting}
/>
</FormControl>
<FormControl id='url'>
<FormLabel
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='url'
>
<FormLabel 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) =>
setFormData({ ...formData, url: event.target.value })
}
onChange={(event) => {
setChanged(true);
setFormData({ ...formData, url: event.target.value });
}}
isDisabled={submitting}
/>
</FormControl>
<FormControl id='pubInfo'>
<FormLabel
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='pubInfo'
>
Public Info
</FormLabel>
<FormLabel 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
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='backstageInfo'
>
Backstage Info
</FormLabel>
<FormLabel 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
+6 -10
View File
@@ -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>
<p>Set port</p>
<p>Set end message</p>
<AppSettingsModal />
</TabPanel>
<TabPanel>
<p>You will be able to define URL aliases here!</p>
<p>List existing aliases</p>
<p>List existing aliases</p>
<p>List existing aliases</p>
<p>Add new alias input + button</p>
<AliasesModal />
</TabPanel>
</TabPanels>
</Tabs>
client/src/features/modals/Modals.module.css
+57
View File
@@ -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;
}