import React, { useState } from 'react'; import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, TextField, FormControl, InputLabel, MenuItem, Select, } from '@material-ui/core'; import InputAdornment from '@material-ui/core/InputAdornment'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { prefixString } from '../common/stringUtils'; import EditItemView from '../EditItemView'; import EditAttributesView from '../attributes/EditAttributesView'; import { useAttributePreference } from '../common/preferences'; import { speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters, } from '../common/converter'; import { useTranslation } from '../LocalizationProvider'; import { usePositionAttributes } from '../attributes/positionAttributes'; const useStyles = makeStyles(() => ({ details: { flexDirection: 'column', }, })); const MaintenancePage = () => { const classes = useStyles(); const t = useTranslation(); const positionAttributes = usePositionAttributes(t); const [item, setItem] = useState(); const [labels, setLabels] = useState({ start: '', period: '' }); const speedUnit = useAttributePreference('speedUnit'); const distanceUnit = useAttributePreference('distanceUnit'); const convertToList = (attributes) => { const otherList = []; Object.keys(attributes).forEach((key) => { const value = attributes[key]; if (value.type === 'number') { otherList.push({ key, name: value.name, type: value.type }); } }); return otherList; }; const onMaintenanceTypeChange = (event) => { const newValue = event.target.value; setItem({ ...item, type: newValue, start: 0, period: 0, }); const attribute = positionAttributes[newValue]; if (attribute && attribute.dataType) { switch (attribute.dataType) { case 'distance': setLabels({ ...labels, start: t(prefixString('shared', distanceUnit)), period: t(prefixString('shared', distanceUnit)) }); break; case 'speed': setLabels({ ...labels, start: t(prefixString('shared', speedUnit)), period: t(prefixString('shared', speedUnit)) }); break; default: break; } } }; const rawToValue = (value) => { const attribute = positionAttributes[item.type]; if (attribute && attribute.dataType) { switch (attribute.dataType) { case 'speed': return speedFromKnots(value, speedUnit); case 'distance': return distanceFromMeters(value, distanceUnit); default: return value; } } return value; }; const valueToRaw = (value) => { const attribute = positionAttributes[item.type]; if (attribute && attribute.dataType) { switch (attribute.dataType) { case 'speed': return speedToKnots(value, speedUnit); case 'distance': return distanceToMeters(value, distanceUnit); default: return value; } } return value; }; return ( {item && ( <> }> {t('sharedRequired')} setItem({ ...item, name: event.target.value })} label={t('sharedName')} variant="filled" /> {t('sharedType')} setItem({ ...item, start: valueToRaw(event.target.value) })} label={t('maintenanceStart')} variant="filled" InputProps={{ endAdornment: {labels.start}, }} /> setItem({ ...item, period: valueToRaw(event.target.value) })} label={t('maintenancePeriod')} variant="filled" InputProps={{ endAdornment: {labels.period}, }} /> }> {t('sharedAttributes')} setItem({ ...item, attributes })} definitions={{}} /> )} ); }; export default MaintenancePage;