PumpenSteuerung/interface/src/project/SettingsController.tsx

85 lines
3.9 KiB
TypeScript

import React, {Component} from 'react';
import {ValidatorForm} from 'react-material-ui-form-validator';
import {Typography, Box, TextField} from '@material-ui/core';
import SaveIcon from '@material-ui/icons/Save';
import {ENDPOINT_ROOT} from '../api';
import {
restController,
RestControllerProps,
RestFormLoader,
FormActions,
FormButton,
SectionContent,
} from '../components';
import {SettingsState} from './types';
export const LIGHT_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "settings";
type LightStateRestControllerProps = RestControllerProps<SettingsState>;
class SettingsController extends Component<LightStateRestControllerProps> {
componentDidMount() {
this.props.loadData();
}
render() {
return (
<SectionContent title='Einstellungen' titleGutter>
<RestFormLoader
{...this.props}
render={props => {
const {data, saveData, handleValueChange} = props;
return (
<ValidatorForm onSubmit={saveData}>
<Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
<Typography variant="body1">
Die unten eingegebenen Werte werden nach klick des 'SAVE' Buttons übernommen und überleben einen Neustart.
</Typography>
</Box>
<div>
<TextField value={data.maxpumpduration} fullWidth={true} type='number'
id="maxpumpduration" label="Maximale Pumpdauer [sec]"
onChange={handleValueChange('maxpumpduration')}/>
</div>
<div>
<TextField value={data.waterOutageWaitDuration} fullWidth={true} type='number'
id="waterOutageWaitDuration" label="Wartezeit nach Wasserausfall [sec]"
onChange={handleValueChange('waterOutageWaitDuration')}/>
</div>
<div>
<TextField value={data.heatUp} fullWidth={true} type='number' id="heatUp"
label="Obere Luftfeuchtigkeitsschwelle [%]"
onChange={handleValueChange('heatUp')}/>
</div>
<div>
<TextField value={data.heatLow} fullWidth={true} type='number' id="heatLow"
label="Untere Luftfeuchtigkeitsschwelle [%]"
onChange={handleValueChange('heatLow')}/>
</div>
<div>
<TextField value={data.fanRuntime} fullWidth={true} type='number' id="fanRuntime"
label="Nachlaufzeit Lüfter [sec]"
onChange={handleValueChange('fanRuntime')}/>
</div>
<FormActions>
<FormButton startIcon={<SaveIcon/>} variant="contained" color="primary"
type="submit">Save
</FormButton>
</FormActions>
</ValidatorForm>
)
}}
/>
</SectionContent>
)
}
}
export default restController(LIGHT_SETTINGS_ENDPOINT, SettingsController);