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

update point panels

pull/1577/head
gabrielburnworth 2019-11-20 11:48:55 -08:00
parent 4eb8ac28a8
commit 0a4db75572
9 changed files with 138 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/css/farm_designer/farm_designer_panels.scss
View File

@ -333,25 +333,31 @@
.point-creation-panel {
.panel-content {
.row {
margin-left: 0;
margin-right: 0;
ul {
margin-bottom: 0;
}
margin-top: 1rem;
label {
margin-top: 0;
}
p {
margin-top: 1rem;
}
padding: 0 3rem;
padding-right: 0;
padding-left: 0;
.fb-button {
margin: 1rem;
&.green {
margin-right: 1.5rem;
}
&.delete {
float: left;
margin-top: 1rem;
}
}
.saucer {
margin-top: 0.25rem;
margin-left: 1rem;
margin: 1rem;
margin-left: 2rem;
}
.delete-row {
padding-left: 1rem;
margin: 1.5rem;
}
}
}
@ -362,7 +368,7 @@
margin: 1rem;
margin-left: 2rem;
}
.red {
.fb-button & .red {
display: block;
margin-top: 3rem;
}

6
frontend/farm_designer/plants/__tests__/create_points_test.tsx
View File

@ -115,8 +115,8 @@ describe("<CreatePoints />", () => {
const p = fakeProps();
p.currentPoint = { cx: 0, cy: 0, r: 100 };
const panel = mount<CreatePoints>(<CreatePoints {...p} />);
const wrapper = shallow(panel.instance().PointName());
wrapper.find("BlurableInput").simulate("commit", {
const wrapper = shallow(panel.instance().PointProperties());
wrapper.find("BlurableInput").first().simulate("commit", {
currentTarget: { value: "new name" }
});
expect(p.dispatch).toHaveBeenCalledWith({
@ -208,7 +208,7 @@ describe("<CreatePoints />", () => {
const wrapper = shallow<CreatePoints>(<CreatePoints {...p} />);
const PP = wrapper.instance().PointProperties;
const component = shallow(<PP />);
component.find("BlurableInput").first().simulate("commit", {
component.find("BlurableInput").at(1).simulate("commit", {
currentTarget: { value: "10" }
});
expect(p.dispatch).toHaveBeenCalledWith({

18
frontend/farm_designer/plants/__tests__/point_edit_actions_test.tsx
View File

@ -8,7 +8,7 @@ import { shallow } from "enzyme";
import {
EditPointLocation, EditPointLocationProps,
EditPointRadius, EditPointRadiusProps,
EditPointColor, EditPointColorProps, updatePoint,
EditPointColor, EditPointColorProps, updatePoint, EditPointName, EditPointNameProps,
} from "../point_edit_actions";
import { fakePoint } from "../../../__test_support__/fake_state/resources";
import { edit, save } from "../../../api/crud";
@ -28,6 +28,22 @@ describe("updatePoint()", () => {
});
});
describe("<EditPointName />", () => {
const fakeProps = (): EditPointNameProps => ({
updatePoint: jest.fn(),
name: "point name",
});
it("edits name", () => {
const p = fakeProps();
const wrapper = shallow(<EditPointName {...p} />);
wrapper.find("BlurableInput").first().simulate("commit", {
currentTarget: { value: "new point name" }
});
expect(p.updatePoint).toHaveBeenCalledWith({ name: "new point name" });
});
});
describe("<EditPointLocation />", () => {
const fakeProps = (): EditPointLocationProps => ({
updatePoint: jest.fn(),

2
frontend/farm_designer/plants/__tests__/point_info_test.tsx
View File

@ -46,7 +46,7 @@ describe("<EditPoint />", () => {
it("renders with points", () => {
mockPath = "/app/designer/points/1";
const wrapper = mount(<EditPoint {...fakeProps()} />);
expect(wrapper.text()).toContain("Edit Point 1");
expect(wrapper.text()).toContain("Edit point");
});
it("moves the device to a particular point", () => {

17
frontend/farm_designer/plants/__tests__/weeds_edit_test.tsx
View File

@ -5,7 +5,7 @@ jest.mock("../../../history", () => ({
}));
import * as React from "react";
import { mount } from "enzyme";
import { mount, shallow } from "enzyme";
import {
RawEditWeed as EditWeed, EditWeedProps, mapStateToProps
} from "../weeds_edit";
@ -14,6 +14,8 @@ import { fakeState } from "../../../__test_support__/fake_state";
import {
buildResourceIndex
} from "../../../__test_support__/resource_index_builder";
import { Actions } from "../../../constants";
import { DesignerPanelHeader } from "../designer_panel";
describe("<EditWeed />", () => {
const fakeProps = (): EditWeedProps => ({
@ -36,6 +38,19 @@ describe("<EditWeed />", () => {
const wrapper = mount(<EditWeed {...p} />);
expect(wrapper.text().toLowerCase()).toContain("edit");
});
it("goes back", () => {
mockPath = "/app/designer/weeds/1";
const p = fakeProps();
const point = fakePoint();
point.body.id = 1;
p.findPoint = () => point;
const wrapper = shallow(<EditWeed {...p} />);
wrapper.find(DesignerPanelHeader).simulate("back");
expect(p.dispatch).toHaveBeenCalledWith({
type: Actions.TOGGLE_HOVERED_POINT, payload: undefined
});
});
});
describe("mapStateToProps()", () => {

103
frontend/farm_designer/plants/create_points.tsx
View File

@ -24,6 +24,7 @@ import { parseIntInput } from "../../util";
import { t } from "../../i18next_wrapper";
import { Panel } from "../panel_header";
import { getPathArray } from "../../history";
import { ListItem } from "./plant_panel";
export function mapStateToProps(props: Everything): CreatePointsProps {
const { position } = props.bot.hardware.location_data;
@ -178,54 +179,59 @@ export class RawCreatePoints
this.cancel();
this.loadDefaultPoint();
}
PointName = () =>
<Row>
<Col xs={12}>
<label>{t("Name")}</label>
<BlurableInput
name="name"
type="text"
onCommit={this.updateValue("name")}
value={this.attr("name") || this.defaultName} />
</Col>
</Row>;
PointProperties = () => {
return <Row>
<Col xs={3}>
<label>{t("X")}</label>
<BlurableInput
name="cx"
type="number"
onCommit={this.updateValue("cx")}
value={this.attr("cx", this.props.deviceX)} />
</Col>
<Col xs={3}>
<label>{t("Y")}</label>
<BlurableInput
name="cy"
type="number"
onCommit={this.updateValue("cy")}
value={this.attr("cy", this.props.deviceY)} />
</Col>
<Col xs={3}>
<label>{t("radius")}</label>
<BlurableInput
name="r"
type="number"
onCommit={this.updateValue("r")}
value={this.attr("r")}
min={0} />
</Col>
<Col xs={3}>
<label>{t("color")}</label>
<ColorPicker
current={(this.attr("color") || this.defaultColor) as ResourceColor}
onChange={this.changeColor} />
</Col>
</Row>;
}
PointProperties = () =>
<ul>
<li>
<div>
<label>{t("Name")}</label>
<BlurableInput
name="name"
type="text"
onCommit={this.updateValue("name")}
value={this.attr("name") || this.defaultName} />
</div>
</li>
<ListItem name={t("Location")}>
<Row>
<Col xs={6}>
<label>{t("X (mm)")}</label>
<BlurableInput
name="cx"
type="number"
onCommit={this.updateValue("cx")}
value={this.attr("cx", this.props.deviceX)} />
</Col>
<Col xs={6}>
<label>{t("Y (mm)")}</label>
<BlurableInput
name="cy"
type="number"
onCommit={this.updateValue("cy")}
value={this.attr("cy", this.props.deviceY)} />
</Col>
</Row>
</ListItem>
<ListItem name={t("Size")}>
<Row>
<Col xs={6}>
<label>{t("radius")}</label>
<BlurableInput
name="r"
type="number"
onCommit={this.updateValue("r")}
value={this.attr("r")}
min={0} />
</Col>
</Row>
</ListItem>
<ListItem name={t("Color")}>
<Row>
<ColorPicker
current={(this.attr("color") || this.defaultColor) as ResourceColor}
onChange={this.changeColor} />
</Row>
</ListItem>
</ul>
PointActions = () =>
<Row>
@ -272,7 +278,6 @@ export class RawCreatePoints
backTo={`/app/designer/${this.panel}`}
description={panelDescription} />
<DesignerPanelContent panelName={"point-creation"}>
<this.PointName />
<this.PointProperties />
<this.PointActions />
{this.DeleteAllPoints(this.panel == "weeds" ? "weed" : "point")}

23
frontend/farm_designer/plants/point_edit_actions.tsx
View File

@ -26,6 +26,13 @@ export interface EditPointPropertiesProps {
export const EditPointProperties = (props: EditPointPropertiesProps) =>
<ul>
<li>
<div>
<EditPointName
name={props.point.body.name}
updatePoint={props.updatePoint} />
</div>
</li>
<ListItem name={t("Location")}>
<EditPointLocation
location={{ x: props.point.body.x, y: props.point.body.y }}
@ -66,6 +73,22 @@ export const PointActions = ({ x, y, z, uuid, dispatch }: PointActionsProps) =>
</button>
</div>;
export interface EditPointNameProps {
updatePoint(update: Partial<TaggedGenericPointer["body"]>): void;
name: string;
}
export const EditPointName = (props: EditPointNameProps) =>
<Row>
<Col xs={12}>
<label>{t("Name")}</label>
<BlurableInput
type="text"
value={props.name}
onCommit={e => props.updatePoint({ name: e.currentTarget.value })} />
</Col>
</Row>;
export interface EditPointLocationProps {
updatePoint(update: Partial<TaggedGenericPointer["body"]>): void;
location: Record<"x" | "y", number>;

2
frontend/farm_designer/plants/point_info.tsx
View File

@ -45,7 +45,7 @@ export class RawEditPoint extends React.Component<EditPointProps, {}> {
<DesignerPanelHeader
panelName={this.panelName}
panel={Panel.Points}
title={`${t("Edit")} ${point.body.name}`}
title={t("Edit point")}
backTo={this.backTo}
onBack={() => this.props.dispatch({
type: Actions.TOGGLE_HOVERED_POINT, payload: undefined

8
frontend/farm_designer/plants/weeds_edit.tsx
View File

@ -12,6 +12,7 @@ import { Panel } from "../panel_header";
import {
EditPointProperties, PointActions, updatePoint
} from "./point_edit_actions";
import { Actions } from "../../constants";
export interface EditWeedProps {
dispatch: Function;
@ -44,8 +45,11 @@ export class RawEditWeed extends React.Component<EditWeedProps, {}> {
<DesignerPanelHeader
panelName={this.panelName}
panel={Panel.Weeds}
title={`${t("Edit")} ${point.body.name}`}
backTo={this.backTo}>
title={t("Edit weed")}
backTo={this.backTo}
onBack={() => this.props.dispatch({
type: Actions.TOGGLE_HOVERED_POINT, payload: undefined
})}>
</DesignerPanelHeader>
<DesignerPanelContent panelName={this.panelName}>
<EditPointProperties point={point}