diff --git a/src/views/Landing/Footer.jsx b/src/views/Landing/Footer.jsx
index fc542c7..3bb5b7d 100644
--- a/src/views/Landing/Footer.jsx
+++ b/src/views/Landing/Footer.jsx
@@ -108,15 +108,19 @@ function Footer() {
>
Roadmap
-
- Documentation(soon)
+
+ Documentation
- Changelog(soon)
+ Changelog
V{version}
diff --git a/src/views/Modals/Inputs/EditThingState.jsx b/src/views/Modals/Inputs/EditThingState.jsx
new file mode 100644
index 0000000..26d333e
--- /dev/null
+++ b/src/views/Modals/Inputs/EditThingState.jsx
@@ -0,0 +1,69 @@
+import {
+ Box,
+ Button,
+ FormControl,
+ FormHelperText,
+ Input,
+ Modal,
+ ModalDialog,
+ Typography,
+} from '@mui/joy'
+import { useState } from 'react'
+
+function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
+ const [state, setState] = useState(currentThing?.state || '')
+ const [errors, setErrors] = useState({})
+
+ const isValid = () => {
+ const newErrors = {}
+
+ if (state.trim() === '') {
+ newErrors.state = 'State is required'
+ }
+
+ setErrors(newErrors)
+ return Object.keys(newErrors).length === 0
+ }
+
+ const handleSave = () => {
+ if (!isValid()) {
+ return
+ }
+ onSave({
+ name,
+ type: currentThing?.type,
+ id: currentThing?.id,
+ state: state || null,
+ })
+ onClose()
+ }
+
+ return (
+
+
+ Update state
+
+
+ Value
+ setState(e.target.value)}
+ sx={{ minWidth: 300 }}
+ />
+ {errors.state}
+
+
+
+
+
+
+
+
+ )
+}
+export default EditThingStateModal
diff --git a/src/views/Things/ThingsView.jsx b/src/views/Things/ThingsView.jsx
index 322eadf..ff61324 100644
--- a/src/views/Things/ThingsView.jsx
+++ b/src/views/Things/ThingsView.jsx
@@ -29,6 +29,7 @@ import {
} from '../../utils/Fetcher'
import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
import CreateThingModal from '../Modals/Inputs/CreateThingModal'
+import EditThingStateModal from '../Modals/Inputs/EditThingState'
const ThingCard = ({
thing,
onEditClick,
@@ -164,6 +165,7 @@ const ThingCard = ({
const ThingsView = () => {
const [things, setThings] = useState([])
const [isShowCreateThingModal, setIsShowCreateThingModal] = useState(false)
+ const [isShowEditThingStateModal, setIsShowEditStateModal] = useState(false)
const [createModalThing, setCreateModalThing] = useState(null)
const [confirmModelConfig, setConfirmModelConfig] = useState({})
@@ -206,8 +208,8 @@ const ThingsView = () => {
setIsSnackbarOpen(true)
}
const handleEditClick = thing => {
+ setIsShowEditStateModal(true)
setCreateModalThing(thing)
- setIsShowCreateThingModal(true)
}
const handleDeleteClick = thing => {
setConfirmModelConfig({
@@ -240,31 +242,27 @@ const ThingsView = () => {
}
const handleStateChangeRequest = thing => {
- if (thing?.type === 'text') {
- setCreateModalThing(thing)
- setIsShowCreateThingModal(true)
- } else {
- if (thing?.type === 'number') {
- thing.state = Number(thing.state) + 1
- } else if (thing?.type === 'boolean') {
- if (thing.state === 'true') {
- thing.state = 'false'
- } else {
- thing.state = 'true'
- }
+ if (thing?.type === 'number') {
+ thing.state = Number(thing.state) + 1
+ } else if (thing?.type === 'boolean') {
+ if (thing.state === 'true') {
+ thing.state = 'false'
+ } else {
+ thing.state = 'true'
}
-
- UpdateThingState(thing).then(result => {
- result.json().then(data => {
- const currentThings = [...things]
- const thingIndex = currentThings.findIndex(
- currentThing => currentThing.id === thing.id,
- )
- currentThings[thingIndex] = data.res
- setThings(currentThings)
- })
- })
}
+
+ UpdateThingState(thing).then(result => {
+ result.json().then(data => {
+ const currentThings = [...things]
+ const thingIndex = currentThings.findIndex(
+ currentThing => currentThing.id === thing.id,
+ )
+ currentThings[thingIndex] = data.res
+ setThings(currentThings)
+ })
+ })
+
setSnackbarMessage('Thing state updated successfully')
setIsSnackbarOpen(true)
}
@@ -342,6 +340,18 @@ const ThingsView = () => {
currentThing={createModalThing}
/>
)}
+ {isShowEditThingStateModal && (
+ {
+ setIsShowEditStateModal(false)
+ setCreateModalThing(null)
+ }}
+ onSave={handleStateChangeRequest}
+ currentThing={createModalThing}
+ />
+ )}
+
{
sx={{
fontWeight: 700,
fontSize: 20,
+ cursor: 'pointer',
}}
>
Done