PumpenSteuerung/interface/src/project/GeneralInformation.tsx

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";

// define api endpoint
export const GENERALINFORMATION_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "generalinfo";

type GeneralInformationRestControllerProps = RestControllerProps<GeneralInformaitonState>;

class GeneralInformation extends Component<GeneralInformationRestControllerProps> {
    intervalhandler: number | undefined;

    componentDidMount() {
        this.props.loadData();

        // this.intervalhandler = window.setInterval(() => {
        //     this.props.loadData();
        //     console.log("refreshing data");
        //     console.log(this.props.data)
        // }, 10000);
    }

    componentWillUnmount() {
        clearInterval(this.intervalhandler);
    }

    render() {
        return (
            <SectionContent title='Information' titleGutter>
                <RestFormLoader
                    {...this.props}
                    render={props => (
                            <>
                                <List>
                                    <ListItem>
                                        <ListItemText
                                            primary="Chip läuft seit:"
                                            secondary={this.stringifyTime(props.data.runtime)}
                                        />
                                    </ListItem>
                                    <ListItem>
                                        <ListItemText
                                            primary="Zuletzt zu wenig Wasser:"
                                            secondary={props.data.lastWaterOutage !== 0 ? "vor " + this.stringifyTime(props.data.lastWaterOutage) : "noch nie!"}
                                        />
                                    </ListItem>
                                    <ListItem>
                                        <ListItemText
                                            primary="Letzer Pumpenzyklus"
                                            secondary={props.data.lastpumptime !== 0 ? "vor " + this.stringifyTime(props.data.lastpumptime) : "noch nie!"}
                                        />
                                    </ListItem>
                                    <ListItem>
                                        <ListItemText
                                            primary="Letze Pumpdauer:"
                                            secondary={props.data.lastPumpDuration !== 0 ? this.stringifyTime(props.data.lastPumpDuration) : "-"}
                                        />
                                    </ListItem>
                                    <ListItem>
                                        <ListItemText
                                            primary="Temperatur/Luftfeuchtigkeit:"
                                            secondary={(props.data.temp !== -1 ? props.data.temp + "C" : "Auslesefehler!") + " / " + (props.data.hum !== -1 ? props.data.hum + "%" : "Auslesefehler!")}
                                        />
                                    </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>
        );
    }

    /**
     * stringify seconds to a pretty format
     * @param sec number of seconds
     */
    stringifyTime(sec: number): string {
        if (sec >= 86400) {
            // display days
            return (Math.trunc(sec / 86400) + "d " + Math.trunc((sec % 86400) / 3600) + "h " + Math.trunc((sec % 3600) / 60) + "min " + sec % 60 + "sec");
        } else if (sec >= 3600) {
            // display hours
            return (Math.trunc(sec / 3600) + "h " + Math.trunc((sec % 3600) / 60) + "min " + sec % 60 + "sec");
        } else if (sec >= 60) {
            // only seconds and minutes
            return (Math.trunc(sec / 60) + "min " + sec % 60 + "sec");
        } else {
            // only seconds
            return (sec + "sec");
        }
    }
}

export default restController(GENERALINFORMATION_SETTINGS_ENDPOINT, GeneralInformation);