2017-12-30 02:41:51 -07:00
|
|
|
import * as React from "react";
|
2019-03-05 11:59:22 -07:00
|
|
|
import { Row, Col } from "../ui";
|
|
|
|
import { Everything } from "../interfaces";
|
|
|
|
import { BotPosition } from "../devices/interfaces";
|
2017-12-30 02:41:51 -07:00
|
|
|
import { connect } from "react-redux";
|
2019-03-05 11:59:22 -07:00
|
|
|
import { moveAbs } from "../devices/actions";
|
|
|
|
import { history } from "../history";
|
|
|
|
import { AxisInputBox } from "../controls/axis_input_box";
|
2017-12-30 02:41:51 -07:00
|
|
|
import { isNumber } from "lodash";
|
2019-03-05 11:59:22 -07:00
|
|
|
import { Actions, Content } from "../constants";
|
|
|
|
import { validBotLocationData } from "../util/util";
|
2019-11-22 12:57:22 -07:00
|
|
|
import { unselectPlant } from "./map/actions";
|
2019-03-05 11:59:22 -07:00
|
|
|
import { AxisNumberProperty } from "./map/interfaces";
|
2018-11-30 21:59:52 -07:00
|
|
|
import {
|
2020-02-28 09:35:32 -07:00
|
|
|
DesignerPanel, DesignerPanelContent, DesignerPanelHeader,
|
2019-12-10 13:09:52 -07:00
|
|
|
} from "./designer_panel";
|
2019-04-02 13:59:37 -06:00
|
|
|
import { t } from "../i18next_wrapper";
|
2020-03-13 15:06:40 -06:00
|
|
|
import { isBotOnlineFromState } from "../devices/must_be_online";
|
2019-10-25 09:33:33 -06:00
|
|
|
import { PanelColor } from "./panel_header";
|
2017-12-30 02:41:51 -07:00
|
|
|
|
2019-04-09 19:15:50 -06:00
|
|
|
export function mapStateToProps(props: Everything): MoveToProps {
|
2017-12-30 02:41:51 -07:00
|
|
|
return {
|
|
|
|
chosenLocation: props.resources.consumers.farm_designer.chosenLocation,
|
2018-01-23 16:21:44 -07:00
|
|
|
currentBotLocation:
|
|
|
|
validBotLocationData(props.bot.hardware.location_data).position,
|
2017-12-30 02:41:51 -07:00
|
|
|
dispatch: props.dispatch,
|
2020-03-13 15:06:40 -06:00
|
|
|
botOnline: isBotOnlineFromState(props.bot),
|
2017-12-30 02:41:51 -07:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2018-05-21 22:43:32 -06:00
|
|
|
export interface MoveToFormProps {
|
2017-12-30 02:41:51 -07:00
|
|
|
chosenLocation: BotPosition;
|
|
|
|
currentBotLocation: BotPosition;
|
2019-04-09 19:15:50 -06:00
|
|
|
botOnline: boolean;
|
2018-05-21 22:43:32 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface MoveToProps extends MoveToFormProps {
|
2017-12-30 02:41:51 -07:00
|
|
|
dispatch: Function;
|
|
|
|
}
|
|
|
|
|
2018-05-21 22:43:32 -06:00
|
|
|
interface MoveToFormState {
|
2017-12-30 02:41:51 -07:00
|
|
|
z: number | undefined;
|
|
|
|
}
|
|
|
|
|
2018-05-21 22:43:32 -06:00
|
|
|
export class MoveToForm extends React.Component<MoveToFormProps, MoveToFormState> {
|
2020-05-07 11:53:44 -06:00
|
|
|
state = { z: this.props.chosenLocation.z };
|
2017-12-30 02:41:51 -07:00
|
|
|
|
|
|
|
get vector(): { x: number, y: number, z: number } {
|
|
|
|
const { chosenLocation } = this.props;
|
|
|
|
const newX = chosenLocation.x;
|
|
|
|
const newY = chosenLocation.y;
|
|
|
|
const { x, y, z } = this.props.currentBotLocation;
|
|
|
|
const inputZ = this.state.z;
|
|
|
|
return {
|
|
|
|
x: isNumber(newX) ? newX : (x || 0),
|
|
|
|
y: isNumber(newY) ? newY : (y || 0),
|
|
|
|
z: isNumber(inputZ) ? inputZ : (z || 0),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { x, y } = this.props.chosenLocation;
|
2019-04-09 19:15:50 -06:00
|
|
|
const { botOnline } = this.props;
|
2020-02-28 09:34:28 -07:00
|
|
|
return <div className={"move-to-form"}>
|
2018-05-21 22:43:32 -06:00
|
|
|
<Row>
|
|
|
|
<Col xs={4}>
|
|
|
|
<label>{t("X AXIS")}</label>
|
|
|
|
</Col>
|
|
|
|
<Col xs={4}>
|
|
|
|
<label>{t("Y AXIS")}</label>
|
|
|
|
</Col>
|
|
|
|
<Col xs={4}>
|
|
|
|
<label>{t("Z AXIS")}</label>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<Col xs={4}>
|
2020-02-28 09:34:28 -07:00
|
|
|
<input disabled name="x" value={isNumber(x) ? x : "---"} />
|
2018-05-21 22:43:32 -06:00
|
|
|
</Col>
|
|
|
|
<Col xs={4}>
|
2020-02-28 09:34:28 -07:00
|
|
|
<input disabled name="y" value={isNumber(y) ? y : "---"} />
|
2018-05-21 22:43:32 -06:00
|
|
|
</Col>
|
|
|
|
<AxisInputBox
|
|
|
|
onChange={(_, val: number) => this.setState({ z: val })}
|
|
|
|
axis={"z"}
|
|
|
|
value={this.state.z} />
|
|
|
|
<Row>
|
|
|
|
<button
|
|
|
|
onClick={() => moveAbs(this.vector)}
|
2019-04-09 19:15:50 -06:00
|
|
|
className={`fb-button gray ${botOnline ? "" : "pseudo-disabled"}`}
|
2020-02-28 09:34:28 -07:00
|
|
|
title={botOnline
|
|
|
|
? t("Move to this coordinate")
|
|
|
|
: t(Content.NOT_AVAILABLE_WHEN_OFFLINE)}>
|
2018-05-21 22:43:32 -06:00
|
|
|
{t("Move to this coordinate")}
|
|
|
|
</button>
|
|
|
|
</Row>
|
|
|
|
</Row>
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-19 13:09:00 -06:00
|
|
|
export class RawMoveTo extends React.Component<MoveToProps, {}> {
|
2018-05-21 22:43:32 -06:00
|
|
|
|
2018-06-05 22:10:47 -06:00
|
|
|
componentDidMount() {
|
|
|
|
unselectPlant(this.props.dispatch)();
|
|
|
|
}
|
|
|
|
|
2018-05-21 22:43:32 -06:00
|
|
|
componentWillUnmount() {
|
|
|
|
this.props.dispatch({
|
|
|
|
type: Actions.CHOOSE_LOCATION,
|
|
|
|
payload: { x: undefined, y: undefined, z: undefined }
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2019-10-25 09:33:33 -06:00
|
|
|
return <DesignerPanel panelName={"move-to"} panelColor={PanelColor.gray}>
|
2019-04-09 19:57:46 -06:00
|
|
|
<DesignerPanelHeader
|
|
|
|
panelName={"move-to"}
|
2019-10-25 09:33:33 -06:00
|
|
|
panelColor={PanelColor.gray}
|
2019-04-09 19:57:46 -06:00
|
|
|
title={t("Move to location")}
|
|
|
|
backTo={"/app/designer/plants"}
|
|
|
|
description={Content.MOVE_MODE_DESCRIPTION} />
|
|
|
|
<DesignerPanelContent panelName={"move-to"}>
|
2018-05-21 22:43:32 -06:00
|
|
|
<MoveToForm
|
|
|
|
chosenLocation={this.props.chosenLocation}
|
2019-04-09 19:15:50 -06:00
|
|
|
currentBotLocation={this.props.currentBotLocation}
|
|
|
|
botOnline={this.props.botOnline} />
|
2018-11-30 21:59:52 -07:00
|
|
|
</DesignerPanelContent>
|
|
|
|
</DesignerPanel>;
|
2017-12-30 02:41:51 -07:00
|
|
|
}
|
|
|
|
}
|
2018-08-27 13:29:01 -06:00
|
|
|
|
|
|
|
export const MoveModeLink = () =>
|
|
|
|
<div className="move-to-mode">
|
|
|
|
<button
|
|
|
|
className="fb-button gray"
|
2018-12-03 20:05:45 -07:00
|
|
|
title={t("open move mode panel")}
|
2019-03-05 11:59:22 -07:00
|
|
|
onClick={() => history.push("/app/designer/move_to")}>
|
2018-08-27 13:29:01 -06:00
|
|
|
{t("move mode")}
|
|
|
|
</button>
|
|
|
|
</div>;
|
2018-10-25 18:02:54 -06:00
|
|
|
|
|
|
|
/** Mark a new bot target location on the map. */
|
|
|
|
export const chooseLocation = (props: {
|
|
|
|
gardenCoords: AxisNumberProperty | undefined,
|
|
|
|
dispatch: Function,
|
|
|
|
}) => {
|
|
|
|
if (props.gardenCoords) {
|
|
|
|
props.dispatch({
|
|
|
|
type: Actions.CHOOSE_LOCATION,
|
|
|
|
payload: { x: props.gardenCoords.x, y: props.gardenCoords.y, z: 0 }
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
2019-09-19 13:09:00 -06:00
|
|
|
|
|
|
|
export const MoveTo = connect(mapStateToProps)(RawMoveTo);
|