import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { useNavigate, useParams } from 'react-router-dom'; import { Accordion, AccordionSummary, AccordionDetails, Typography, Container, TextField, Button, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTranslation } from '../common/components/LocalizationProvider'; import PageLayout from '../common/components/PageLayout'; import SettingsMenu from './components/SettingsMenu'; import { useCatch } from '../reactHelper'; const useStyles = makeStyles((theme) => ({ container: { marginTop: theme.spacing(2), }, buttons: { marginTop: theme.spacing(2), marginBottom: theme.spacing(2), display: 'flex', justifyContent: 'space-evenly', '& > *': { flexBasis: '33%', }, }, details: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), paddingBottom: theme.spacing(3), }, })); const AccumulatorsPage = () => { const navigate = useNavigate(); const classes = useStyles(); const t = useTranslation(); const { deviceId } = useParams(); const position = useSelector((state) => state.positions.items[deviceId]); const [item, setItem] = useState(); useEffect(() => { if (position) { setItem({ deviceId: parseInt(deviceId, 10), hours: position.attributes.hours || 0, totalDistance: position.attributes.totalDistance || 0, }); } }, [deviceId, position]); const handleSave = useCatch(async () => { const response = await fetch(`/api/devices/${deviceId}/accumulators`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(item), }); if (response.ok) { navigate(-1); } else { throw Error(await response.text()); } }); return ( } breadcrumbs={['sharedDeviceAccumulators']}> {item && ( }> {t('sharedRequired')} setItem({ ...item, hours: Number(event.target.value) })} label={t('positionHours')} /> setItem({ ...item, totalDistance: Number(event.target.value) })} label={t('deviceTotalDistance')} />
)}
); }; export default AccumulatorsPage;