2017-07-07 22:19:37 -06:00
|
|
|
import * as React from "react";
|
2018-07-31 18:48:43 -06:00
|
|
|
import { DirectionButton } from "./controls/move/direction_button";
|
2018-02-14 18:19:58 -07:00
|
|
|
import { getDevice } from "./device";
|
2018-07-31 18:48:43 -06:00
|
|
|
import { buildDirectionProps } from "./controls/move/direction_axes_props";
|
|
|
|
import { ControlsPopupProps } from "./controls/move/interfaces";
|
2018-05-02 09:09:24 -06:00
|
|
|
import { commandErr } from "./devices/actions";
|
2019-04-11 21:17:18 -06:00
|
|
|
import { mapPanelClassName } from "./farm_designer/map/util";
|
2019-12-27 11:37:54 -07:00
|
|
|
import {
|
2020-02-28 09:35:32 -07:00
|
|
|
cameraBtnProps,
|
2019-12-27 11:37:54 -07:00
|
|
|
} from "./devices/components/fbos_settings/camera_selection";
|
|
|
|
import { t } from "./i18next_wrapper";
|
2017-07-18 10:24:18 -06:00
|
|
|
|
2018-03-02 08:12:47 -07:00
|
|
|
interface State {
|
2017-07-18 10:24:18 -06:00
|
|
|
isOpen: boolean;
|
|
|
|
}
|
|
|
|
|
2018-04-12 19:27:06 -06:00
|
|
|
export class ControlsPopup
|
|
|
|
extends React.Component<ControlsPopupProps, Partial<State>> {
|
|
|
|
state: State = { isOpen: false };
|
2017-07-18 10:24:18 -06:00
|
|
|
|
2018-03-02 08:25:15 -07:00
|
|
|
private toggle = (property: keyof State) => () =>
|
2017-07-18 10:24:18 -06:00
|
|
|
this.setState({ [property]: !this.state[property] });
|
2017-07-07 22:19:37 -06:00
|
|
|
|
|
|
|
public render() {
|
2017-08-28 05:44:37 -06:00
|
|
|
const isOpen = this.state.isOpen ? "open" : "";
|
2019-04-09 19:15:50 -06:00
|
|
|
const { stepSize, xySwap, arduinoBusy, botOnline } = this.props;
|
2018-04-12 19:27:06 -06:00
|
|
|
const directionAxesProps = buildDirectionProps(this.props);
|
2018-04-12 17:55:38 -06:00
|
|
|
const rightLeft = xySwap ? "y" : "x";
|
|
|
|
const upDown = xySwap ? "x" : "y";
|
2019-12-27 11:37:54 -07:00
|
|
|
const movementDisabled = !isOpen || arduinoBusy || !botOnline;
|
|
|
|
const commonProps = { steps: stepSize, disabled: movementDisabled };
|
|
|
|
const camDisabled = cameraBtnProps(this.props.env);
|
2017-08-28 05:44:37 -06:00
|
|
|
return <div
|
2019-04-11 21:17:18 -06:00
|
|
|
className={`controls-popup ${isOpen} ${mapPanelClassName()}`}>
|
2017-09-06 04:29:19 -06:00
|
|
|
<i className="fa fa-crosshairs"
|
|
|
|
onClick={this.toggle("isOpen")} />
|
2017-08-28 05:44:37 -06:00
|
|
|
<div className="controls-popup-menu-outer">
|
|
|
|
<div className="controls-popup-menu-inner">
|
2019-12-27 11:37:54 -07:00
|
|
|
<DirectionButton {...commonProps}
|
2018-04-12 17:55:38 -06:00
|
|
|
axis={rightLeft}
|
2017-09-06 04:29:19 -06:00
|
|
|
direction="right"
|
2019-12-27 11:37:54 -07:00
|
|
|
directionAxisProps={directionAxesProps[rightLeft]} />
|
|
|
|
<DirectionButton {...commonProps}
|
2018-04-12 17:55:38 -06:00
|
|
|
axis={upDown}
|
2017-09-06 04:29:19 -06:00
|
|
|
direction="up"
|
2019-12-27 11:37:54 -07:00
|
|
|
directionAxisProps={directionAxesProps[upDown]} />
|
|
|
|
<DirectionButton {...commonProps}
|
2018-04-12 17:55:38 -06:00
|
|
|
axis={upDown}
|
2017-08-28 05:44:37 -06:00
|
|
|
direction="down"
|
2019-12-27 11:37:54 -07:00
|
|
|
directionAxisProps={directionAxesProps[upDown]} />
|
|
|
|
<DirectionButton {...commonProps}
|
2018-04-12 17:55:38 -06:00
|
|
|
axis={rightLeft}
|
2017-09-06 04:29:19 -06:00
|
|
|
direction="left"
|
2019-12-27 11:37:54 -07:00
|
|
|
directionAxisProps={directionAxesProps[rightLeft]} />
|
2018-02-14 18:19:58 -07:00
|
|
|
<button
|
2019-12-27 11:37:54 -07:00
|
|
|
className={`fa fa-camera arrow-button fb-button brown ${
|
|
|
|
camDisabled.class}`}
|
|
|
|
disabled={!isOpen || !botOnline}
|
|
|
|
title={camDisabled.title || t("Take a photo")}
|
|
|
|
onClick={camDisabled.click ||
|
|
|
|
(() => getDevice().takePhoto().catch(commandErr("Photo")))} />
|
2017-07-07 23:37:12 -06:00
|
|
|
</div>
|
2017-07-07 22:23:25 -06:00
|
|
|
</div>
|
2017-08-28 05:44:37 -06:00
|
|
|
</div>;
|
2017-07-07 22:19:37 -06:00
|
|
|
}
|
|
|
|
}
|