spacecruft/Farmbot-Web-App
spacecruft/Farmbot-Web-App
1
0
Fork 0
Code Issues Pull requests Releases Activity

misc refactoring

Browse source
This commit is contained in:
gabrielburnworth 2018-08-01 18:27:19 -07:00
parent b50ed5abdf
commit 75a780a033
4 changed files with 168 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
webpack/devices/components/hardware_settings/motors.tsx
View file

@ -14,6 +14,23 @@ import { McuInputBox } from "../mcu_input_box";
import { minFwVersionCheck } from "../../../util";
import { StepsPerMmSettings } from "./steps_per_mm_settings";
const SingleSettingRow =
({ label, tooltip, settingType, children }: {
label: string,
tooltip: string,
children: React.ReactChild,
settingType: "button" | "input",
}) =>
<Row>
<Col xs={6}>
<label>{label}</label>
<SpacePanelToolTip tooltip={tooltip} />
</Col>
{settingType === "button"
? <Col xs={2} className={"centered-button-div"}>{children}</Col>
: <Col xs={6}>{children}</Col>}
</Row>;
export function Motors(props: MotorsProps) {
const {
dispatch, firmwareVersion, sourceFbosConfig, controlPanelState,
@ -30,35 +47,23 @@ export function Motors(props: MotorsProps) {
name={"motors"}
dispatch={dispatch} />
<Collapse isOpen={!!controlPanelState.motors}>
<Row>
<Col xs={6}>
<label>
{t("Max Retries")}
</label>
<SpacePanelToolTip tooltip={ToolTips.MAX_MOVEMENT_RETRIES} />
</Col>
<Col xs={6}>
<McuInputBox
setting="param_mov_nr_retry"
sourceFwConfig={sourceFwConfig}
dispatch={dispatch} />
</Col>
</Row>
<Row>
<Col xs={6}>
<label>
{t("E-Stop on Movement Error")}
</label>
<SpacePanelToolTip tooltip={ToolTips.E_STOP_ON_MOV_ERR} />
</Col>
<Col xs={2} className={"centered-button-div"}>
<ToggleButton
toggleValue={eStopOnMoveError.value}
dim={!eStopOnMoveError.consistent}
toggleAction={() => dispatch(
settingToggle("param_e_stop_on_mov_err", sourceFwConfig))} />
</Col>
</Row>
<SingleSettingRow settingType="input"
label={t("Max Retries")}
tooltip={ToolTips.MAX_MOVEMENT_RETRIES}>
<McuInputBox
setting="param_mov_nr_retry"
sourceFwConfig={sourceFwConfig}
dispatch={dispatch} />
</SingleSettingRow>
<SingleSettingRow settingType="button"
label={t("E-Stop on Movement Error")}
tooltip={ToolTips.E_STOP_ON_MOV_ERR}>
<ToggleButton
toggleValue={eStopOnMoveError.value}
dim={!eStopOnMoveError.consistent}
toggleAction={() => dispatch(
settingToggle("param_e_stop_on_mov_err", sourceFwConfig))} />
</SingleSettingRow>
<NumericMCUInputGroup
name={t("Max Speed (steps/s)")}
tooltip={ToolTips.MAX_SPEED}
@ -115,37 +120,25 @@ export function Motors(props: MotorsProps) {
z={"movement_invert_motor_z"}
dispatch={dispatch}
sourceFwConfig={sourceFwConfig} />
<Row>
<Col xs={6}>
<label>
{t("Enable 2nd X Motor")}
</label>
<SpacePanelToolTip tooltip={ToolTips.ENABLE_X2_MOTOR} />
</Col>
<Col xs={2} className={"centered-button-div"}>
<ToggleButton
toggleValue={enable2ndXMotor.value}
dim={!enable2ndXMotor.consistent}
toggleAction={() => dispatch(
settingToggle("movement_secondary_motor_x", sourceFwConfig))} />
</Col>
</Row>
<Row>
<Col xs={6}>
<label>
{t("Invert 2nd X Motor")}
</label>
<SpacePanelToolTip tooltip={ToolTips.INVERT_MOTORS} />
</Col>
<Col xs={2} className={"centered-button-div"}>
<ToggleButton
grayscale={!enable2ndXMotor.value}
toggleValue={invert2ndXMotor.value}
dim={!invert2ndXMotor.consistent}
toggleAction={() => dispatch(
settingToggle("movement_secondary_motor_invert_x", sourceFwConfig))} />
</Col>
</Row>
<SingleSettingRow settingType="button"
label={t("Enable 2nd X Motor")}
tooltip={ToolTips.ENABLE_X2_MOTOR}>
<ToggleButton
toggleValue={enable2ndXMotor.value}
dim={!enable2ndXMotor.consistent}
toggleAction={() => dispatch(
settingToggle("movement_secondary_motor_x", sourceFwConfig))} />
</SingleSettingRow>
<SingleSettingRow settingType="button"
label={t("Invert 2nd X Motor")}
tooltip={ToolTips.INVERT_MOTORS}>
<ToggleButton
grayscale={!enable2ndXMotor.value}
toggleValue={invert2ndXMotor.value}
dim={!invert2ndXMotor.consistent}
toggleAction={() => dispatch(
settingToggle("movement_secondary_motor_invert_x", sourceFwConfig))} />
</SingleSettingRow>
</Collapse>
</section>;
}

69
webpack/farm_designer/map/drag_helpers.tsx
View file

@ -19,42 +19,41 @@ enum Line {
Down = 270,
}
function getAlignment(
activeXYZ: BotPosition | undefined,
plantXYZ: BotPosition,
swappedXY: Boolean
): Alignment {
if (activeXYZ && !isUndefined(activeXYZ.x) && !isUndefined(activeXYZ.y)) {
// Plant editing (dragging) is occuring
const activeXY = { x: round(activeXYZ.x), y: round(activeXYZ.y) };
if (activeXY.x == plantXYZ.x && activeXY.y == plantXYZ.y) {
return Alignment.BOTH;
}
if (activeXY.x == plantXYZ.x) {
return swappedXY ? Alignment.HORIZONTAL : Alignment.VERTICAL;
}
if (activeXY.y == plantXYZ.y) {
return swappedXY ? Alignment.VERTICAL : Alignment.HORIZONTAL;
}
}
return Alignment.NONE;
}
function rotationArray(alignment: Alignment): number[] {
switch (alignment) {
case (Alignment.HORIZONTAL):
return [Line.Left, Line.Right];
case (Alignment.VERTICAL):
return [Line.Up, Line.Down];
case (Alignment.BOTH):
return [Line.Left, Line.Right, Line.Up, Line.Down];
default:
return [];
}
}
export function DragHelpers(props: DragHelpersProps) {
function getAlignment(
activeXYZ: BotPosition | undefined,
plantXYZ: BotPosition,
swappedXY: Boolean
): Alignment {
if (activeXYZ && !isUndefined(activeXYZ.x) && !isUndefined(activeXYZ.y)) {
// Plant editing (dragging) is occuring
const activeXY = { x: round(activeXYZ.x), y: round(activeXYZ.y) };
if (activeXY.x == plantXYZ.x && activeXY.y == plantXYZ.y) {
return Alignment.BOTH;
}
if (activeXY.x == plantXYZ.x) {
return swappedXY ? Alignment.HORIZONTAL : Alignment.VERTICAL;
}
if (activeXY.y == plantXYZ.y) {
return swappedXY ? Alignment.VERTICAL : Alignment.HORIZONTAL;
}
}
return Alignment.NONE;
}
function rotationArray(alignment: Alignment): number[] {
switch (alignment) {
case (Alignment.HORIZONTAL):
return [Line.Left, Line.Right];
case (Alignment.VERTICAL):
return [Line.Up, Line.Down];
case (Alignment.BOTH):
return [Line.Left, Line.Right, Line.Up, Line.Down];
default:
return [];
}
}
const {
dragging, plant, zoomLvl, activeDragXY, mapTransformProps, plantAreaOffset
} = props;

12
webpack/farm_designer/plants/__tests__/create_points_test.tsx
View file

@ -67,8 +67,11 @@ describe("<CreatePoints />", () => {
it("changes color", () => {
const p = fakeProps();
p.currentPoint = { cx: 0, cy: 0, r: 0 };
const wrapper = shallow(<CreatePoints {...p} />);
wrapper.find("ColorPicker").simulate("change", "red");
const wrapper = mount(<CreatePoints {...p} />);
// tslint:disable-next-line:no-any
const instance = wrapper.instance() as any;
const component = shallow(<instance.PointProperties />);
component.find("ColorPicker").simulate("change", "red");
expect(p.dispatch).toHaveBeenCalledWith({
payload: { color: "red", cx: 0, cy: 0, r: 0 },
type: Actions.SET_CURRENT_POINT_DATA
@ -79,7 +82,10 @@ describe("<CreatePoints />", () => {
const p = fakeProps();
p.currentPoint = { cx: 0, cy: 0, r: 0 };
const wrapper = shallow(<CreatePoints {...p} />);
wrapper.find("BlurableInput").first().simulate("commit", {
// tslint:disable-next-line:no-any
const instance = wrapper.instance() as any;
const component = shallow(<instance.PointProperties />);
component.find("BlurableInput").first().simulate("commit", {
currentTarget: { value: "10" }
});
expect(p.dispatch).toHaveBeenCalledWith({

134
webpack/farm_designer/plants/create_points.tsx
View file

@ -119,8 +119,76 @@ export class CreatePoints
this.cancel();
}
render() {
PointProperties = () => {
const { cx, cy, r, color } = this.state;
return <Row>
<Col xs={3}>
<label>{t("X")}</label>
<BlurableInput
name="cx"
type="number"
onCommit={this.update("cx")}
value={cx || 0} />
</Col>
<Col xs={3}>
<label>{t("Y")}</label>
<BlurableInput
name="cy"
type="number"
onCommit={this.update("cy")}
value={cy || 0} />
</Col>
<Col xs={3}>
<label>{t("radius")}</label>
<BlurableInput
name="r"
type="number"
onCommit={this.update("r")}
value={r || 0} />
</Col>
<Col xs={3}>
<label>{t("color")}</label>
<ColorPicker
current={color as Color || "green"}
onChange={this.changeColor} />
</Col>
</Row>;
}
PointActions = () =>
<Row>
<button className="fb-button green"
onClick={this.createPoint}>
{t("Create point")}
</button>
<button className="fb-button yellow"
onClick={this.updateCurrentPoint}>
{t("Update")}
</button>
<button className="fb-button gray"
onClick={this.cancel}>
{t("Cancel")}
</button>
</Row>
DeleteAllPoints = () =>
<Row>
<div className="delete-row">
<label>{t("delete")}</label>
<p>{t("Delete all of the points created through this panel.")}</p>
<button className="fb-button red delete"
onClick={() => {
if (confirm(t("Delete all the points you have created?"))) {
this.props.dispatch(deletePoints("points", "farm-designer"));
this.cancel();
}
}}>
{t("Delete all created points")}
</button>
</div>
</Row>
render() {
return <div
className="panel-container brown-panel point-creation-panel">
<div className="panel-header brown-panel">
@ -134,67 +202,9 @@ export class CreatePoints
</div>
<div className="panel-content">
<Row>
<Col xs={3}>
<label>{t("X")}</label>
<BlurableInput
name="cx"
type="number"
onCommit={this.update("cx")}
value={cx || 0} />
</Col>
<Col xs={3}>
<label>{t("Y")}</label>
<BlurableInput
name="cy"
type="number"
onCommit={this.update("cy")}
value={cy || 0} />
</Col>
<Col xs={3}>
<label>{t("radius")}</label>
<BlurableInput
name="r"
type="number"
onCommit={this.update("r")}
value={r || 0} />
</Col>
<Col xs={3}>
<label>{t("color")}</label>
<ColorPicker
current={color as Color || "green"}
onChange={this.changeColor} />
</Col>
</Row>
<Row>
<button className="fb-button green"
onClick={this.createPoint}>
{t("Create point")}
</button>
<button className="fb-button yellow"
onClick={this.updateCurrentPoint}>
{t("Update")}
</button>
<button className="fb-button gray"
onClick={this.cancel}>
{t("Cancel")}
</button>
</Row>
<Row>
<div className="delete-row">
<label>{t("delete")}</label>
<p>{t("Delete all of the points created through this panel.")}</p>
<button className="fb-button red delete"
onClick={() => {
if (confirm("Delete all the points you have created?")) {
this.props.dispatch(deletePoints("points", "farm-designer"));
this.cancel();
}
}}>
{t("Delete all created points")}
</button>
</div>
</Row>
<this.PointProperties />
<this.PointActions />
<this.DeleteAllPoints />
</div>
</div>;
}