lukas/PumpenSteuerung
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

display information about last heating time in gui

Browse Source 
restructurize some jsx classes
This commit is contained in:
Lukas Heiligenbrunner
2020-12-27 15:41:06 +00:00
parent 6291c9311a
commit c185fb7a8e
13 changed files with 253 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
interface/src/project/GeneralInformation.tsx
View File

@ -4,6 +4,7 @@ import {FormButton, restController, RestControllerProps, RestFormLoader, Section
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";
@ -11,16 +12,10 @@ 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>
@ -32,35 +27,34 @@ class GeneralInformation extends Component<GeneralInformationRestControllerProps
<ListItem>
<ListItemText
primary="Chip läuft seit:"
secondary={this.stringifyTime(props.data.runtime) + ' / ' + this.getRealTimeString(props.data.runtime)}
secondary={<>{stringifyTime(props.data.runtime)}
<br/> {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!"}
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 " +
this.stringifyTime(props.data.lastpumptime) + ' / ' +
this.getRealTimeString(props.data.lastpumptime) : "noch nie!"}
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 ? 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!")}
secondary={props.data.lastPumpDuration !== 0 ? stringifyTime(props.data.lastPumpDuration) : "-"}
/>
</ListItem>
<ListItem>
@ -87,40 +81,6 @@ class GeneralInformation extends Component<GeneralInformationRestControllerProps
</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);

64
interface/src/project/HeatingInformation.tsx Normal file
View File

@ -0,0 +1,64 @@
import React from "react";
import {FormButton, restController, RestControllerProps, RestFormLoader, SectionContent} from "../components";
import {ENDPOINT_ROOT} from "../api";
import {Box, List, ListItem, ListItemText} from "@material-ui/core";
import RefreshIcon from "@material-ui/icons/Refresh";
import {getRealTimeString, stringifyTime} from "./Time";
import {HeatingInformationState} from "./types";
// define api endpoint
export const HEATING_ENDPOINT = ENDPOINT_ROOT + "heatinginfo";
type HeatingRestcontollerprops = RestControllerProps<HeatingInformationState>;
class HeatingInformation extends React.Component<HeatingRestcontollerprops> {
componentDidMount() {
this.props.loadData();
}
render = () => (
<SectionContent title='Heizung Information' titleGutter>
<RestFormLoader
{...this.props}
render={props => (
<>
<List>
<ListItem>
<ListItemText
primary="Heizung lief zuletzt:"
secondary={props.data.lastheating !== 0 ?
<>
vor {stringifyTime(props.data.lastheating)}<br/>
{getRealTimeString(props.data.lastheating)}
</> : "noch nie!"}
/>
</ListItem>
<ListItem>
<ListItemText
primary="Letze Heizdauer:"
secondary={props.data.lastheatduration === 0 ? "-" : props.data.lastheatduration === -1 ? "läuft gerade!" : stringifyTime(props.data.lastheatduration)}
/>
</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>
</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>
</>
)}
/>
</SectionContent>
);
}
export default restController(HEATING_ENDPOINT, HeatingInformation);

3
interface/src/project/PumpControl.tsx
View File

@ -9,6 +9,7 @@ import { AuthenticatedRoute } from '../authentication';
import GeneralInformation from './GeneralInformation';
import SettingsController from "./SettingsController";
import HeatingInformation from "./HeatingInformation";
class PumpControl extends Component<RouteComponentProps> {
@ -21,10 +22,12 @@ class PumpControl extends Component<RouteComponentProps> {
<MenuAppBar sectionTitle="Wasserpumpensteuerung">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
<Tab value={`/${PROJECT_PATH}/pumpe/information`} label="Information" />
<Tab value={`/${PROJECT_PATH}/pumpe/heizung`} label="Heizung" />
<Tab value={`/${PROJECT_PATH}/pumpe/settings`} label="Einstellungen" />
</Tabs>
<Switch>
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/pumpe/information`} component={GeneralInformation} />
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/pumpe/heizung`} component={HeatingInformation} />
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/pumpe/settings`} component={SettingsController} />
<Redirect to={`/${PROJECT_PATH}/pumpe/information`} />
</Switch>

33
interface/src/project/Time.ts Normal file
View File

@ -0,0 +1,33 @@
/**
* stringify seconds to a pretty format
* @param sec number of seconds
*/
export function 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 function 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) + ']';
}

10
interface/src/project/types.ts
View File

@ -7,8 +7,6 @@ export interface SettingsState {
}
export interface GeneralInformaitonState {
hum: number;
temp: number;
lastpumptime: number;
lastWaterOutage: number;
lastPumpDuration: number;
@ -17,3 +15,11 @@ export interface GeneralInformaitonState {
pressuresensor: boolean;
version: string;
}
export interface HeatingInformationState {
lastheating: number;
lastheatduration: number;
hum: number;
temp: number;
}