109 lines
3.1 KiB
TypeScript
109 lines
3.1 KiB
TypeScript
import * as React from "react";
|
|
import { McuInputBox } from "./mcu_input_box";
|
|
import { PinGuardMCUInputGroupProps } from "./interfaces";
|
|
import { Row, Col, Help } from "../../ui/index";
|
|
import { settingToggle } from "../actions";
|
|
import { ToggleButton } from "../../controls/toggle_button";
|
|
import { isUndefined } from "lodash";
|
|
import { t } from "../../i18next_wrapper";
|
|
import { PinNumberDropdown } from "./pin_number_dropdown";
|
|
import { DevSettings } from "../../account/dev/dev_support";
|
|
import { ToolTips } from "../../constants";
|
|
import { Position } from "@blueprintjs/core";
|
|
|
|
export class PinGuardMCUInputGroup
|
|
extends React.Component<PinGuardMCUInputGroupProps> {
|
|
|
|
get newFormat() { return DevSettings.futureFeaturesEnabled(); }
|
|
|
|
Number = () =>
|
|
<PinNumberDropdown
|
|
pinNumKey={this.props.pinNumKey}
|
|
dispatch={this.props.dispatch}
|
|
resources={this.props.resources}
|
|
sourceFwConfig={this.props.sourceFwConfig} />
|
|
|
|
Timeout = () =>
|
|
<McuInputBox
|
|
setting={this.props.timeoutKey}
|
|
sourceFwConfig={this.props.sourceFwConfig}
|
|
dispatch={this.props.dispatch}
|
|
filter={32000} />
|
|
|
|
State = () => {
|
|
const { sourceFwConfig, dispatch, activeStateKey } = this.props;
|
|
const activeStateValue = sourceFwConfig(activeStateKey).value;
|
|
const inactiveState = isUndefined(activeStateValue)
|
|
? undefined
|
|
: !activeStateValue;
|
|
return <ToggleButton
|
|
customText={{ textFalse: t("low"), textTrue: t("high") }}
|
|
toggleValue={inactiveState}
|
|
dim={!sourceFwConfig(activeStateKey).consistent}
|
|
toggleAction={() =>
|
|
dispatch(settingToggle(activeStateKey, sourceFwConfig))} />;
|
|
}
|
|
|
|
render() {
|
|
const { label } = this.props;
|
|
return !this.newFormat
|
|
? <Row>
|
|
<Col xs={3}>
|
|
<label>
|
|
{label}
|
|
</label>
|
|
</Col>
|
|
<Col xs={3}>
|
|
<this.Number />
|
|
</Col>
|
|
<Col xs={4}>
|
|
<this.Timeout />
|
|
</Col>
|
|
<Col xs={2} className={"centered-button-div"}>
|
|
<this.State />
|
|
</Col>
|
|
</Row>
|
|
: <div className={"pin-guard-input-row"}>
|
|
<Row>
|
|
<Col xs={12}>
|
|
<label>
|
|
{label}
|
|
</label>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={5} xsOffset={1} className="no-pad">
|
|
<label>
|
|
{t("Pin Number")}
|
|
</label>
|
|
<Help text={ToolTips.PIN_GUARD_PIN_NUMBER} requireClick={true}
|
|
position={Position.TOP_RIGHT} />
|
|
</Col>
|
|
<Col xs={5} className="no-pad">
|
|
<this.Number />
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={5} xsOffset={1} className="no-pad">
|
|
<label>
|
|
{t("Timeout (sec)")}
|
|
</label>
|
|
</Col>
|
|
<Col xs={5} className="no-pad">
|
|
<this.Timeout />
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={5} xsOffset={1} className="no-pad">
|
|
<label>
|
|
{t("To State")}
|
|
</label>
|
|
</Col>
|
|
<Col xs={5} className="no-pad">
|
|
<this.State />
|
|
</Col>
|
|
</Row>
|
|
</div>;
|
|
}
|
|
}
|