import { Add, Delete, Edit, Flip, PlusOne, ToggleOff, ToggleOn, Widgets, } from '@mui/icons-material' import { Box, Card, Chip, CircularProgress, Container, Grid, IconButton, Snackbar, Typography, } from '@mui/joy' import { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import { CreateThing, DeleteThing, GetThings, SaveThing, UpdateThingState, } from '../../utils/Fetcher' import ConfirmationModal from '../Modals/Inputs/ConfirmationModal' import CreateThingModal from '../Modals/Inputs/CreateThingModal' const ThingCard = ({ thing, onEditClick, onStateChangeRequest, onDeleteClick, }) => { const [isDisabled, setIsDisabled] = useState(false) const Navigate = useNavigate() const getThingIcon = type => { if (type === 'text') { return } else if (type === 'number') { return } else if (type === 'boolean') { if (thing.state === 'true') { return } else { return } } else { return } } const handleRequestChange = thing => { setIsDisabled(true) onStateChangeRequest(thing) setTimeout(() => { setIsDisabled(false) }, 2000) } return ( { Navigate(`/things/${thing?.id}`) }} > {thing?.name} {thing?.type} Current state: {thing?.state} {/* */}
{ handleRequestChange(thing) }} sx={{ borderRadius: '50%', width: 50, minWidth: 50, height: 50, zIndex: 1, }} disabled={isDisabled} > {getThingIcon(thing?.type)} {isDisabled && ( )}
{ onEditClick(thing) }} sx={{ borderRadius: '50%', width: 25, height: 25, position: 'relative', left: -10, }} > {/* add delete icon: */} { onDeleteClick(thing) }} sx={{ borderRadius: '50%', width: 25, height: 25, position: 'relative', left: -10, }} >
) } const ThingsView = () => { const [things, setThings] = useState([]) const [isShowCreateThingModal, setIsShowCreateThingModal] = useState(false) const [createModalThing, setCreateModalThing] = useState(null) const [confirmModelConfig, setConfirmModelConfig] = useState({}) const [isSnackbarOpen, setIsSnackbarOpen] = useState(false) const [snackbarMessage, setSnackbarMessage] = useState('') const [snackbarColor, setSnackbarColor] = useState('success') useEffect(() => { // fetch things GetThings().then(result => { result.json().then(data => { setThings(data.res) }) }) }, []) const handleSaveThing = thing => { let saveFunc = CreateThing if (thing?.id) { saveFunc = SaveThing } saveFunc(thing).then(result => { result.json().then(data => { if (thing?.id) { const currentThings = [...things] const thingIndex = currentThings.findIndex( currentThing => currentThing.id === thing.id, ) currentThings[thingIndex] = data.res setThings(currentThings) } else { const currentThings = [...things] currentThings.push(data.res) setThings(currentThings) } }) }) setSnackbarMessage('Thing saved successfully') setSnackbarColor('success') setIsSnackbarOpen(true) } const handleEditClick = thing => { setCreateModalThing(thing) setIsShowCreateThingModal(true) } const handleDeleteClick = thing => { setConfirmModelConfig({ isOpen: true, title: 'Delete Things', confirmText: 'Delete', cancelText: 'Cancel', message: 'Are you sure you want to delete this Thing?', onClose: isConfirmed => { if (isConfirmed === true) { DeleteThing(thing.id).then(response => { if (response.ok) { const currentThings = [...things] const thingIndex = currentThings.findIndex( currentThing => currentThing.id === thing.id, ) currentThings.splice(thingIndex, 1) setThings(currentThings) } else if (response.status === 405) { setSnackbarMessage('Unable to delete thing with associated tasks') setSnackbarColor('danger') setIsSnackbarOpen(true) } // if method not allwo show snackbar: }) } setConfirmModelConfig({}) }, }) } 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' } } 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) } return ( {things.length === 0 && ( No things has been created/found )} {things.map(thing => ( ))} } onClick={() => { setIsShowCreateThingModal(true) }} > {isShowCreateThingModal && ( { setIsShowCreateThingModal(false) setCreateModalThing(null) }} onSave={handleSaveThing} currentThing={createModalThing} /> )} { setIsSnackbarOpen(false) }} autoHideDuration={3000} variant='soft' color={snackbarColor} size='lg' invertedColors > {snackbarMessage} ) } export default ThingsView