import React, { useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { Accordion, AccordionSummary, AccordionDetails, Typography, Container, Button, } from '@mui/material'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation } from '../common/components/LocalizationProvider'; import BaseCommandView from './components/BaseCommandView'; import SelectField from '../common/components/SelectField'; import PageLayout from '../common/components/PageLayout'; import SettingsMenu from './components/SettingsMenu'; import { useCatch } from '../reactHelper'; import { useRestriction } from '../common/util/permissions'; import useSettingsStyles from './common/useSettingsStyles'; const CommandDevicePage = () => { const navigate = useNavigate(); const classes = useSettingsStyles(); const t = useTranslation(); const { id } = useParams(); const [savedId, setSavedId] = useState(0); const [item, setItem] = useState({}); const limitCommands = useRestriction('limitCommands'); const handleSend = useCatch(async () => { let command; if (savedId) { const response = await fetch(`/api/commands/${savedId}`); if (response.ok) { command = await response.json(); } else { throw Error(await response.text()); } } else { command = item; } command.deviceId = parseInt(id, 10); const response = await fetch('/api/commands/send', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(command), }); if (response.ok) { navigate(-1); } else { throw Error(await response.text()); } }); const validate = () => savedId || (item && item.type); return ( } breadcrumbs={['settingsTitle', 'deviceCommand']}> }> {t('sharedRequired')} setSavedId(e.target.value)} endpoint={`/api/commands/send?deviceId=${id}`} titleGetter={(it) => it.description} label={t('sharedSavedCommand')} /> {!limitCommands && !savedId && ( )}
); }; export default CommandDevicePage;