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

form state

Browse Source
This commit is contained in:
cv
2021-03-23 17:17:48 +01:00
parent 3a9daec61e
commit de3c4da0d4
9 changed files with 202 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2
View File
@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/icons": "^1.0.7",
"@chakra-ui/react": "^1.4.1",
"@emotion/react": "^11",
"@emotion/styled": "^11",
@@ -13,6 +14,7 @@
"formik": "^2.2.6",
"framer-motion": "^4",
"react": "^17.0.1",
"react-datepicker": "^3.6.0",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-scripts": "4.0.3",
src/app/sampleData.js
+4 -4
View File
@@ -7,8 +7,8 @@ export const sampleData = {
title: 'Is the internet a fad?',
subtitle: 'It is',
presenter: 'Carlos Valente',
timeStart: '10:00',
timeEnd: '11:30',
timeStart: dummy,
timeEnd: dummy,
clockStarted: dummy,
timerDuration: 10,
message: {
@@ -22,8 +22,8 @@ export const sampleData = {
title: 'Is reddit a dictatorship?',
subtitle: 'It is',
presenter: 'Carlos Valente',
timeStart: '11:40',
timeEnd: '13:00',
timeStart: dummy,
timeEnd: dummy,
clockStarted: dummy,
timerDuration: 10,
message: {
src/common/dateConfig.js
+1
View File
@@ -0,0 +1 @@
export const timeFormat = 'HH:mm';
src/features/editors/Editor.jsx
+38 -14
View File
@@ -1,5 +1,6 @@
import { Button } from '@chakra-ui/button';
import { Heading } from '@chakra-ui/layout';
import { ArrowForwardIcon } from '@chakra-ui/icons';
import { Flex, Heading } from '@chakra-ui/layout';
import { SimpleGrid } from '@chakra-ui/layout';
import { Box } from '@chakra-ui/layout';
import { useEffect, useState } from 'react';
@@ -14,11 +15,17 @@ export default function Editor() {
const [data, setData] = useState(sampleData);
const [selectedData, setSelectedData] = useState(null);
const [selectedEvent, setSelectedEvent] = useState(null);
const [formMode, setFormMode] = useState(null);
useEffect(() => {
const se = data.events.filter((d) => d.id === selectedEvent);
if (se.length > 0) setSelectedData(se[0]);
if (selectedEvent === null) {
setSelectedData(null);
setFormMode(null);
} else {
const se = data.events.filter((d) => d.id === selectedEvent);
if (se.length > 0) setSelectedData(se[0]);
setFormMode('edit');
}
}, [data, selectedEvent]);
return (
@@ -28,31 +35,48 @@ export default function Editor() {
className={styles.mainContainer}
>
<Box className={styles.editor} borderRadius='0.5em'>
<Heading>List Events</Heading>
<NumberedText number={1} text={'Select Event'} />
<Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading>
<NumberedText
number={1}
text={'Select event or click Add Event to create new'}
/>
<div className={styles.content}>
<EventList
data={data}
selected={selectedEvent}
setSelected={setSelectedEvent}
setSelectedEvent={setSelectedEvent}
formMode={formMode}
/>
<div className={styles.buttons}>
<Button colorScheme='teal'>Add Event</Button>
<div className={styles.buttonContainer}>
<Button
colorScheme='teal'
variant={formMode === 'add' ? 'solid' : 'outline'}
rightIcon={<ArrowForwardIcon />}
disabled={formMode !== null}
onClick={() => setFormMode('add')}
>
Add Event
</Button>
</div>
</div>
</Box>
<Box className={styles.editor} borderRadius='0.5em'>
<Heading>Event Details</Heading>
<NumberedText number={2} text={'Click Save to send to screens'} />
<Heading style={{ paddingBottom: '0.25em' }}>Event Details</Heading>
<NumberedText number={2} text={'Edit event info'} />
<div className={styles.content}>
<EventForm data={selectedData} />
<EventForm
data={selectedData}
formMode={formMode}
setFormMode={setFormMode}
setSelectedEvent={setSelectedEvent}
/>
</div>
</Box>
<Box className={styles.editor} borderRadius='0.5em'>
<Heading>List Events</Heading>
<NumberedText number={3} text={'Preview changes in screens'} />
<Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading>
<NumberedText number={3} text={'Preview layout'} />
<div className={styles.content}>
<PreviewContainer />
</div>
src/features/editors/Editor.module.css
+7 -1
View File
@@ -16,4 +16,10 @@
.content {
padding-top: 2em;
}
}
.buttonContainer {
padding-top: 2em;
display: flex;
justify-content: flex-end;
}
src/features/editors/list/EventList.jsx
+4 -7
View File
@@ -1,11 +1,7 @@
import { Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
import { useState } from 'react';
import { sampleData } from '../../../app/sampleData';
import EventListItem from './EventListItem';
export default function EventList(props) {
const [data, setData] = useState(sampleData);
return (
<Table variant='simple' size='sm'>
<Thead>
@@ -18,12 +14,13 @@ export default function EventList(props) {
</Tr>
</Thead>
<Tbody>
{data.events.map((e) => (
{props.data.events.map((e) => (
<EventListItem
key={e.id}
data={e}
isSelected={props.selected === e.id}
setSelected={props.setSelected}
selected={props.selected}
setSelectedEvent={props.setSelectedEvent}
formMode={props.formMode}
/>
))}
</Tbody>
src/features/editors/list/EventListItem.jsx
+16 -9
View File
@@ -1,26 +1,33 @@
import { Button } from '@chakra-ui/button';
import { IconButton } from '@chakra-ui/button';
import { Td, Tr } from '@chakra-ui/table';
import { format } from 'date-fns';
import { timeFormat } from '../../../common/dateConfig';
import { ChevronRightIcon } from '@chakra-ui/icons';
export default function EventListItem(props) {
const selected = props.selected === props.data.id
return (
<Tr
style={
props.isSelected
selected
? { backgroundColor: '#b2f5ea' }
: { backgroundColor: 'white' }
}
>
<Td>{props.data.title}</Td>
<Td>{props.data.presenter}</Td>
<Td>{props.data.timeStart}</Td>
<Td>{props.data.timeEnd}</Td>
<Td>{format(props.data.timeStart, timeFormat)}</Td>
<Td>{format(props.data.timeEnd, timeFormat)}</Td>
<Td>
<Button
<IconButton
colorScheme='teal'
onClick={() => props.setSelected(props.data.id)}
>
❯
</Button>
variant={selected ? 'solid' : 'outline'}
onClick={() => props.setSelectedEvent(props.data.id)}
disabled={props.formMode !== null}
size='sm'
aria-label='Select Item'
icon={<ChevronRightIcon />}
/>
</Td>
</Tr>
);
src/features/form/EventForm.jsx
+42 -16
View File
@@ -1,23 +1,27 @@
import { Button } from '@chakra-ui/button';
import { Form, Formik } from 'formik';
import { useState } from 'react';
import ReactDatePicker from 'react-datepicker';
import DatePicker from 'react-datepicker';
import * as Yup from 'yup';
import ChakraInput from '../../common/input/ChakraInput';
import ChakraNumberInput from '../../common/input/ChakraNumberInput';
import TimeInput from '../../common/input/TimeInput';
import styles from './EventForm.module.css';
export default function EventForm(props) {
const today = new Date();
const initialValues = props.data ?? {
id: '1',
title: 'Is the internet a fad?',
subtitle: 'It is',
presenter: 'Carlos Valente',
timeStart: '10:00',
timeEnd: '11:30',
timerDuration: 10,
title: '',
subtitle: '',
presenter: '',
timeStart: today,
timeEnd: today,
timerDuration: 30,
message: {
text: 'Hurry Up!',
color: '#F00',
text: '',
color: '',
active: false,
},
};
@@ -26,6 +30,7 @@ export default function EventForm(props) {
title: Yup.string().required('An event requires a title'),
subtitle: Yup.string(),
presenter: Yup.string(),
timeStart: Yup.date().nullable(),
timerDuration: Yup.number()
.min(1)
.max(60)
@@ -34,10 +39,18 @@ export default function EventForm(props) {
const submitForm = (values) => {
console.log('form', values);
props.setFormMode(null);
props.setSelectedEvent(null);
};
const cancelForm = () => {
props.setFormMode(null);
props.setSelectedEvent(null);
};
if (props.data === null || props.data === undefined) {
return <div>nothing selected</div>;
if (props.formMode === null)
return <div>Replace with nice empty illustration</div>;
}
return (
@@ -47,19 +60,32 @@ export default function EventForm(props) {
validationSchema={validationSchema}
onSubmit={(values, actions) => {
setTimeout(() => {
console.log(values);
actions.setSubmitting(false);
submitForm(values);
}, 100);
}}
onReset={(values) => cancelForm()}
>
{(props) => (
<Form onSubmit={props.handleSubmit}>
<ChakraInput name='title' label='Event Title' />
<ChakraInput name='subtitle' label='Event Subtitle' />
<ChakraInput name='presenter' label='Presenter Name' />
<ChakraInput
name='title'
label='Event Title'
placeholder='eg. Is the Internet a fad?'
/>
<ChakraInput
name='subtitle'
label='Event Subtitle'
placeholder='eg. After tea thoughts'
/>
<ChakraInput
name='presenter'
label='Presenter Name'
placeholder='eg. Duran Duran'
/>
{/* <TimeInput name='timeStart' label='Scheduled Start' /> */}
<ChakraNumberInput
name='timerDuration'
label='Timer Duration'
label='Timer Duration (minutes)'
allowMouseWheel
min={1}
max={60}
yarn.lock
+88 -4
View File
@@ -1285,6 +1285,14 @@
dependencies:
"@chakra-ui/utils" "1.4.0"
"@chakra-ui/icons@^1.0.7":
version "1.0.7"
resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-1.0.7.tgz#4a2a846468c57436fc61fb991a1126acfcbaede8"
integrity sha512-Fqc8jECA8e02RJ7zjgWUu/b1ue2QevxrIptkzgzE3gZTrndquBm9ikB2In/zRKR07FkUd653amd9OOEyU2COJQ==
dependencies:
"@chakra-ui/icon" "1.1.3"
"@types/react" "^17.0.0"
"@chakra-ui/image@1.0.9":
version "1.0.9"
resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.0.9.tgz#bd301f6028000d9dc3370c897868b465edc39ed5"
@@ -1813,6 +1821,14 @@
dependencies:
"@hapi/hoek" "^8.3.0"
"@hypnosphi/create-react-context@^0.3.1":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
integrity sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==
dependencies:
gud "^1.0.0"
warning "^4.0.3"
"@istanbuljs/load-nyc-config@^1.0.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -2428,11 +2444,25 @@
resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.1.tgz#374e31645d58cb18a07b3ecd8e9dede4deb2cccd"
integrity sha512-DxZZbyMAM9GWEzXL+BMZROWz9oo6A9EilwwOMET2UVu2uZTqMWS5S69KVtuVKaRjCUpcrOXRalet86/OpG4kqw==
"@types/prop-types@*":
version "15.7.3"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
"@types/q@^1.5.1":
version "1.5.4"
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
"@types/react@^17.0.0":
version "17.0.3"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79"
integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/resolve@0.0.8":
version "0.0.8"
resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -2440,6 +2470,11 @@
dependencies:
"@types/node" "*"
"@types/scheduler@*":
version "0.16.1"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
"@types/source-list-map@*":
version "0.1.2"
resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -3875,6 +3910,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
clean-css@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -4538,7 +4578,7 @@ data-urls@^2.0.0:
whatwg-mimetype "^2.3.0"
whatwg-url "^8.0.0"
date-fns@^2.19.0:
date-fns@^2.0.1, date-fns@^2.19.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.19.0.tgz#65193348635a28d5d916c43ec7ce6fbd145059e1"
integrity sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg==
@@ -4584,7 +4624,7 @@ dedent@^0.7.0:
resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
deep-equal@^1.0.1:
deep-equal@^1.0.1, deep-equal@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@@ -6036,6 +6076,11 @@ growly@^1.3.0:
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
gud@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
gzip-size@5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -8810,6 +8855,11 @@ popmotion@9.3.1:
style-value-types "4.1.1"
tslib "^1.10.0"
popper.js@^1.14.4:
version "1.16.1"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
portfinder@^1.0.26:
version "1.0.28"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -9568,7 +9618,7 @@ prompts@2.4.0, prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9756,6 +9806,17 @@ react-clientside-effect@^1.2.2:
dependencies:
"@babel/runtime" "^7.12.13"
react-datepicker@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-3.6.0.tgz#2707a1f0aaf8b1b4333281f19c5713e71fcea69e"
integrity sha512-QCCtC1Y5kXZSbULbP33P2p0yTU+0Det7eBFABVM2k6AqdIvyBHVkO/hlq2WDeHlPtaf+DEniCIYjrv2BFdUMHw==
dependencies:
classnames "^2.2.6"
date-fns "^2.0.1"
prop-types "^15.7.2"
react-onclickoutside "^6.10.0"
react-popper "^1.3.8"
react-dev-utils@^11.0.3:
version "11.0.4"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
@@ -9832,6 +9893,24 @@ react-is@^17.0.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
react-onclickoutside@^6.10.0:
version "6.10.0"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.10.0.tgz#05abb592575b08b4d129003494056b9dff46eeeb"
integrity sha512-7i2L3ef+0ILXpL6P+Hg304eCQswh4jl3ynwR71BSlMU49PE2uk31k8B2GkP6yE9s2D4jTGKnzuSpzWxu4YxfQQ==
react-popper@^1.3.8:
version "1.3.11"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
integrity sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==
dependencies:
"@babel/runtime" "^7.1.2"
"@hypnosphi/create-react-context" "^0.3.1"
deep-equal "^1.1.1"
popper.js "^1.14.4"
prop-types "^15.6.1"
typed-styles "^0.0.7"
warning "^4.0.2"
react-refresh@^0.8.3:
version "0.8.3"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -11570,6 +11649,11 @@ type@^2.0.0:
resolved "https://registry.yarnpkg.com/type/-/type-2.3.0.tgz#ada7c045f07ead08abf9e2edd29be1a0c0661132"
integrity sha512-rgPIqOdfK/4J9FhiVrZ3cveAjRRo5rsQBAIhnylX874y1DX/kEKSVdLsnuHB6l1KTjHyU01VjiMBHgU2adejyg==
typed-styles@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
typedarray-to-buffer@^3.1.5:
version "3.1.5"
resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -11863,7 +11947,7 @@ walker@^1.0.7, walker@~1.0.5:
dependencies:
makeerror "1.0.x"
warning@^4.0.3:
warning@^4.0.2, warning@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==