PumpenSteuerung/interface/src/project/GeneralInformation.tsx

93 lines
4.7 KiB
TypeScript

import React, {Component} from 'react';
import {Box, List, ListItem, ListItemText} from '@material-ui/core';
import {FormButton, restController, RestControllerProps, RestFormLoader, SectionContent} from '../components';
import {ENDPOINT_ROOT} from "../api";
import {GeneralInformaitonState} from "./types";
import RefreshIcon from "@material-ui/icons/Refresh";
import {getRealTimeString, stringifyTime} from "./Time";
// define api endpoint
export const GENERALINFORMATION_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "generalinfo";
type GeneralInformationRestControllerProps = RestControllerProps<GeneralInformaitonState>;
class GeneralInformation extends Component<GeneralInformationRestControllerProps> {
componentDidMount() {
this.props.loadData();
}
render() {
return (
<SectionContent title='Information' titleGutter>
<RestFormLoader
{...this.props}
render={props => (
<>
<List>
<ListItem>
<ListItemText
primary="Chip läuft seit:"
secondary={<>{stringifyTime(props.data.runtime)}
<br/> {getRealTimeString(props.data.runtime)}</>}
/>
</ListItem>
<ListItem>
<ListItemText
primary="Zuletzt zu wenig Wasser:"
secondary={props.data.lastWaterOutage !== 0 ?
<>
vor {stringifyTime(props.data.lastWaterOutage)}<br/>
{getRealTimeString(props.data.lastWaterOutage)}
</> : "noch nie!"}
/>
</ListItem>
<ListItem>
<ListItemText
primary="Letzer Pumpenzyklus"
secondary={props.data.lastpumptime !== 0 ?
<>
vor {stringifyTime(props.data.lastpumptime)}<br/>
{getRealTimeString(props.data.lastpumptime)}
</> : "noch nie!"}
/>
</ListItem>
<ListItem>
<ListItemText
primary="Letze Pumpdauer:"
secondary={props.data.lastPumpDuration !== 0 ? stringifyTime(props.data.lastPumpDuration) : "-"}
/>
</ListItem>
<ListItem>
<ListItemText
primary="Pumpzyklen seit Programmstart"
secondary={props.data.pumpcycles}
/>
</ListItem>
<ListItem>
<ListItemText
primary="WasserSensor / DruckSensor"
secondary={(props.data.watersensor ? "EIN" : "AUS!") + " / " + (props.data.pressuresensor ? "EIN" : "AUS")}
/>
</ListItem>
</List>
<Box display="flex" flexWrap="wrap">
<Box flexGrow={1} padding={1}>
<FormButton startIcon={<RefreshIcon/>} variant="contained" color="secondary"
onClick={this.props.loadData}>
Refresh
</FormButton>
</Box>
<Box flexWrap="none" padding={1} whiteSpace="nowrap">
Version: {props.data.version}
</Box>
</Box>
</>
)}
/>
</SectionContent>
);
}
}
export default restController(GENERALINFORMATION_SETTINGS_ENDPOINT, GeneralInformation);