diff options
Diffstat (limited to '')
-rw-r--r-- | src/views/Modals/Inputs/CreateThingModal.jsx | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/src/views/Modals/Inputs/CreateThingModal.jsx b/src/views/Modals/Inputs/CreateThingModal.jsx new file mode 100644 index 0000000..59263ff --- /dev/null +++ b/src/views/Modals/Inputs/CreateThingModal.jsx @@ -0,0 +1,112 @@ +import { + Box, + Button, + FormLabel, + Input, + Modal, + ModalDialog, + Option, + Select, + Textarea, + Typography, +} from '@mui/joy' +import { useEffect, useState } from 'react' + +function CreateThingModal({ isOpen, onClose, onSave, currentThing }) { + const [name, setName] = useState(currentThing?.name || '') + const [type, setType] = useState(currentThing?.type || 'numeric') + const [state, setState] = useState(currentThing?.state || '') + useEffect(() => { + if (type === 'boolean') { + if (state !== 'true' && state !== 'false') { + setState('false') + } + } else if (type === 'number') { + if (isNaN(state)) { + setState(0) + } + } + }, [type]) + const handleSave = () => { + onSave({ name, type, id: currentThing?.id, state: state || null }) + onClose() + } + + return ( + <Modal open={isOpen} onClose={onClose}> + <ModalDialog> + {/* <ModalClose /> */} + <Typography variant='h4'>P;lease add info</Typography> + <FormLabel>Name</FormLabel> + + <Textarea + placeholder='Thing name' + value={name} + onChange={e => setName(e.target.value)} + sx={{ minWidth: 300 }} + /> + <FormLabel>Type</FormLabel> + <Select value={type} sx={{ minWidth: 300 }}> + {['text', 'number', 'boolean'].map(type => ( + <Option value={type} key={type} onClick={() => setType(type)}> + {type.charAt(0).toUpperCase() + type.slice(1)} + </Option> + ))} + </Select> + + {type === 'text' && ( + <> + <FormLabel>Value</FormLabel> + <Input + placeholder='Thing value' + value={state || ''} + onChange={e => setState(e.target.value)} + sx={{ minWidth: 300 }} + /> + </> + )} + {type === 'number' && ( + <> + <FormLabel>Value</FormLabel> + <Input + placeholder='Thing value' + type='number' + value={state || ''} + onChange={e => { + setState(e.target.value) + }} + sx={{ minWidth: 300 }} + /> + </> + )} + {type === 'boolean' && ( + <> + <FormLabel>Value</FormLabel> + <Select sx={{ minWidth: 300 }} value={state}> + {['true', 'false'].map(value => ( + <Option + value={value} + key={value} + onClick={() => setState(value)} + > + {value.charAt(0).toUpperCase() + value.slice(1)} + </Option> + ))} + </Select> + </> + )} + + <Box display={'flex'} justifyContent={'space-around'} mt={1}> + <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}> + {currentThing?.id ? 'Update' : 'Create'} + </Button> + <Button onClick={onClose} variant='outlined'> + {currentThing?.id ? 'Cancel' : 'Close'} + </Button> + </Box> + </ModalDialog> + </Modal> + ) +} + +export default CreateThingModal |