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();
    }

    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) + ' / ' + this.getRealTimeString(props.data.runtime)}
                                    />
                                </ListItem>
                                <ListItem>
                                    <ListItemText
                                        primary="Zuletzt zu wenig Wasser:"
                                        secondary={props.data.lastWaterOutage !== 0 ? "vor " +
                                            this.stringifyTime(props.data.lastWaterOutage) + ' / ' +
                                            this.getRealTimeString(props.data.lastWaterOutage) : "noch nie!"}
                                    />
                                </ListItem>
                                <ListItem>
                                    <ListItemText
                                        primary="Letzer Pumpenzyklus"
                                        secondary={props.data.lastpumptime !== 0 ? "vor " +
                                            this.stringifyTime(props.data.lastpumptime) + ' / ' +
                                            this.getRealTimeString(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
     */
    private 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");
        }
    }

    private getRealTimeString(runtime: number): string {
        const timestamp = Date.now();

        const a = new Date(timestamp - (runtime * 1000));
        const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
        const year = a.getFullYear();
        const month = months[a.getMonth()];
        const date = a.getDate();
        const hour = a.getHours();
        const min = "0" + a.getMinutes();
        const sec = "0" + a.getSeconds();
        return '[' + date + ' ' + month + ' ' + year + ' ' + hour + ':' + min.substr(-2) + ':' + sec.substr(-2) + ']';
    }
}

export default restController(GENERALINFORMATION_SETTINGS_ENDPOINT, GeneralInformation);