70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import * as React from "react";
|
|
import { Widget, WidgetHeader, WidgetBody, Row, Col } from "../../ui/index";
|
|
import { ConnectivityRow, StatusRowProps } from "./connectivity_row";
|
|
import { RetryBtn } from "./retry_btn";
|
|
import { SpecialStatus, InformationalSettings } from "farmbot";
|
|
import { ConnectivityDiagram } from "./diagram";
|
|
import { ToolTips } from "../../constants";
|
|
import {
|
|
ChipTemperatureDisplay, WiFiStrengthDisplay
|
|
} from "../components/fbos_settings/fbos_details";
|
|
import { t } from "../../i18next_wrapper";
|
|
|
|
interface Props {
|
|
onRefresh(): void;
|
|
rowData: StatusRowProps[];
|
|
children?: React.ReactChild;
|
|
status: SpecialStatus;
|
|
fbosInfo: InformationalSettings;
|
|
}
|
|
|
|
interface ConnectivityState {
|
|
hoveredConnection: string | undefined;
|
|
}
|
|
|
|
export class ConnectivityPanel extends React.Component<Props, ConnectivityState> {
|
|
state: ConnectivityState = { hoveredConnection: undefined };
|
|
|
|
hover = (name: string) =>
|
|
() => this.setState({ hoveredConnection: name });
|
|
|
|
render() {
|
|
const { rowData } = this.props;
|
|
const { soc_temp, wifi_level } = this.props.fbosInfo;
|
|
return <Widget className="connectivity-widget">
|
|
<WidgetHeader
|
|
title={t("Connectivity")}
|
|
helpText={ToolTips.CONNECTIVITY}>
|
|
<RetryBtn
|
|
status={this.props.status}
|
|
onClick={this.props.onRefresh}
|
|
flags={rowData.map(x => !!x.connectionStatus)} />
|
|
</WidgetHeader>
|
|
<WidgetBody>
|
|
<Row>
|
|
<Col md={12} lg={4}>
|
|
<ConnectivityDiagram
|
|
rowData={rowData}
|
|
hover={this.hover}
|
|
hoveredConnection={this.state.hoveredConnection} />
|
|
<div className="fbos-info">
|
|
<label>{t("Raspberry Pi Info")}</label>
|
|
<ChipTemperatureDisplay temperature={soc_temp} />
|
|
<WiFiStrengthDisplay wifiStrength={wifi_level} />
|
|
</div>
|
|
</Col>
|
|
<Col md={12} lg={8}>
|
|
<ConnectivityRow from={t("from")} to={t("to")} header={true} />
|
|
{rowData
|
|
.map((x, y) => <ConnectivityRow {...x} key={y}
|
|
hover={this.hover}
|
|
hoveredConnection={this.state.hoveredConnection} />)}
|
|
<hr style={{ marginLeft: "3rem" }} />
|
|
{this.props.children}
|
|
</Col>
|
|
</Row>
|
|
</WidgetBody>
|
|
</Widget>;
|
|
}
|
|
}
|