5 files changed, 295 insertions, 0 deletions
diff --git a/src/views/Modals/Inputs/ConfirmationModal.jsx b/src/views/Modals/Inputs/ConfirmationModal.jsx
new file mode 100644
index 0000000..10f9bee
--- /dev/null
+++ b/src/views/Modals/Inputs/ConfirmationModal.jsx
@@ -0,0 +1,43 @@
+import { Box, Button, Modal, ModalDialog, Typography } from '@mui/joy'
+import React from 'react'
+
+function ConfirmationModal({ config }) {
+  const handleAction = isConfirmed => {
+    config.onClose(isConfirmed)
+  }
+
+  return (
+    <Modal open={config?.isOpen} onClose={config?.onClose}>
+      <ModalDialog>
+        <Typography level='h4' mb={1}>
+          {config?.title}
+        </Typography>
+
+        <Typography level='body-md' gutterBottom>
+          {config?.message}
+        </Typography>
+
+        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+          <Button
+            onClick={() => {
+              handleAction(true)
+            }}
+            fullWidth
+            sx={{ mr: 1 }}
+          >
+            {config?.confirmText}
+          </Button>
+          <Button
+            onClick={() => {
+              handleAction(false)
+            }}
+            variant='outlined'
+          >
+            {config?.cancelText}
+          </Button>
+        </Box>
+      </ModalDialog>
+    </Modal>
+  )
+}
+export default ConfirmationModal
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
diff --git a/src/views/Modals/Inputs/DateModal.jsx b/src/views/Modals/Inputs/DateModal.jsx
new file mode 100644
index 0000000..34319c3
--- /dev/null
+++ b/src/views/Modals/Inputs/DateModal.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import {
+  Modal,
+  Button,
+  Input,
+  ModalDialog,
+  ModalClose,
+  Box,
+  Typography,
+} from '@mui/joy'
+
+function DateModal({ isOpen, onClose, onSave, current, title }) {
+  const [date, setDate] = useState(
+    current ? new Date(current).toISOString().split('T')[0] : null,
+  )
+
+  const handleSave = () => {
+    onSave(date)
+    onClose()
+  }
+
+  return (
+    <Modal open={isOpen} onClose={onClose}>
+      <ModalDialog>
+        {/* <ModalClose /> */}
+        <Typography variant='h4'>{title}</Typography>
+        <Input
+          sx={{ mt: 3 }}
+          type='date'
+          value={date}
+          onChange={e => setDate(e.target.value)}
+        />
+        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+          <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+            Save
+          </Button>
+          <Button onClick={onClose} variant='outlined'>
+            Cancel
+          </Button>
+        </Box>
+      </ModalDialog>
+    </Modal>
+  )
+}
+export default DateModal
diff --git a/src/views/Modals/Inputs/SelectModal.jsx b/src/views/Modals/Inputs/SelectModal.jsx
new file mode 100644
index 0000000..61e7ae9
--- /dev/null
+++ b/src/views/Modals/Inputs/SelectModal.jsx
@@ -0,0 +1,49 @@
+import {
+  Box,
+  Button,
+  Modal,
+  ModalDialog,
+  Option,
+  Select,
+  Typography,
+} from '@mui/joy'
+import React from 'react'
+
+function SelectModal({ isOpen, onClose, onSave, options, title, displayKey }) {
+  const [selected, setSelected] = React.useState(null)
+  const handleSave = () => {
+    onSave(options.find(item => item.id === selected))
+    onClose()
+  }
+
+  return (
+    <Modal open={isOpen} onClose={onClose}>
+      <ModalDialog>
+        <Typography variant='h4'>{title}</Typography>
+        <Select>
+          {options.map((item, index) => (
+            <Option
+              value={item.id}
+              key={item[displayKey]}
+              onClick={() => {
+                setSelected(item.id)
+              }}
+            >
+              {item[displayKey]}
+            </Option>
+          ))}
+        </Select>
+
+        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+          <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+            Save
+          </Button>
+          <Button onClick={onClose} variant='outlined'>
+            Cancel
+          </Button>
+        </Box>
+      </ModalDialog>
+    </Modal>
+  )
+}
+export default SelectModal
diff --git a/src/views/Modals/Inputs/TextModal.jsx b/src/views/Modals/Inputs/TextModal.jsx
new file mode 100644
index 0000000..2b44f78
--- /dev/null
+++ b/src/views/Modals/Inputs/TextModal.jsx
@@ -0,0 +1,46 @@
+import { Box, Button, Modal, ModalDialog, Textarea, Typography } from '@mui/joy'
+import { useState } from 'react'
+
+function TextModal({
+  isOpen,
+  onClose,
+  onSave,
+  current,
+  title,
+  okText,
+  cancelText,
+}) {
+  const [text, setText] = useState(current)
+
+  const handleSave = () => {
+    onSave(text)
+    onClose()
+  }
+
+  return (
+    <Modal open={isOpen} onClose={onClose}>
+      <ModalDialog>
+        {/* <ModalClose /> */}
+        <Typography variant='h4'>{title}</Typography>
+        <Textarea
+          placeholder='Type in here…'
+          value={text}
+          onChange={e => setText(e.target.value)}
+          minRows={2}
+          maxRows={4}
+          sx={{ minWidth: 300 }}
+        />
+
+        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+          <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+            {okText ? okText : 'Save'}
+          </Button>
+          <Button onClick={onClose} variant='outlined'>
+            {cancelText ? cancelText : 'Cancel'}
+          </Button>
+        </Box>
+      </ModalDialog>
+    </Modal>
+  )
+}
+export default TextModal