Farmbot-Web-App/frontend/farm_designer/map_size_setting.tsx

52 lines
1.4 KiB
TypeScript

import * as React from "react";
import {
GetWebAppConfigValue, setWebAppConfigValue,
} from "../config_storage/actions";
import { t } from "../i18next_wrapper";
import { Row, Col } from "../ui";
import { NumericSetting } from "../session_keys";
import {
NumberConfigKey as WebAppNumberConfigKey,
} from "farmbot/dist/resources/configs/web_app";
interface LengthInputProps {
value: number;
label: string;
setting: WebAppNumberConfigKey;
dispatch: Function;
}
const LengthInput = (props: LengthInputProps) =>
<Row>
<Col xs={4}>
<label style={{ float: "right" }}>{t(props.label)}</label>
</Col>
<Col xs={5}>
<input
type="number"
name={props.setting}
value={"" + props.value}
onChange={e => props.dispatch(setWebAppConfigValue(
props.setting, e.currentTarget.value))} />
</Col>
</Row>;
export interface MapSizeInputsProps {
dispatch: Function;
getConfigValue: GetWebAppConfigValue;
}
export const MapSizeInputs = (props: MapSizeInputsProps) =>
<div className="map-size-inputs">
<LengthInput
value={parseInt("" + props.getConfigValue(NumericSetting.map_size_x))}
label={t("x (mm)")}
setting={NumericSetting.map_size_x}
dispatch={props.dispatch} />
<LengthInput
value={parseInt("" + props.getConfigValue(NumericSetting.map_size_y))}
label={t("y (mm)")}
setting={NumericSetting.map_size_y}
dispatch={props.dispatch} />
</div>;