126 lines
4.3 KiB
TypeScript
126 lines
4.3 KiB
TypeScript
import * as React from "react";
|
|
import { Content, DeviceSetting } from "../../constants";
|
|
import { t } from "../../i18next_wrapper";
|
|
import { setWebAppConfigValue } from "../../config_storage/actions";
|
|
import { Row, Col } from "../../ui";
|
|
import { ToggleButton } from "../../controls/toggle_button";
|
|
import { BooleanSetting, NumericSetting } from "../../session_keys";
|
|
import { resetVirtualTrail } from "../map/layers/farmbot/bot_trail";
|
|
import { MapSizeInputs } from "../map_size_setting";
|
|
import { isUndefined } from "lodash";
|
|
import { Collapse } from "@blueprintjs/core";
|
|
import { Header } from "../../devices/components/hardware_settings/header";
|
|
import { Highlight } from "../../devices/components/maybe_highlight";
|
|
import {
|
|
DesignerSettingsSectionProps, SettingProps,
|
|
DesignerSettingsPropsBase, SettingDescriptionProps,
|
|
} from "./interfaces";
|
|
|
|
export const Designer = (props: DesignerSettingsSectionProps) => {
|
|
const { getConfigValue, dispatch, controlPanelState } = props;
|
|
const settingsProps = { getConfigValue, dispatch };
|
|
return <Highlight className={"section"}
|
|
settingName={DeviceSetting.farmDesigner}>
|
|
<Header
|
|
title={DeviceSetting.farmDesigner}
|
|
panel={"farm_designer"}
|
|
dispatch={dispatch}
|
|
expanded={controlPanelState.farm_designer} />
|
|
<Collapse isOpen={!!controlPanelState.farm_designer}>
|
|
{PlainDesignerSettings(settingsProps)}
|
|
</Collapse>
|
|
</Highlight>;
|
|
};
|
|
|
|
export const PlainDesignerSettings =
|
|
(settingsProps: DesignerSettingsPropsBase) =>
|
|
DESIGNER_SETTINGS(settingsProps).map(setting =>
|
|
<Setting key={setting.title} {...setting} {...settingsProps} />);
|
|
|
|
const Setting = (props: SettingProps) => {
|
|
const { title, setting, callback, defaultOn } = props;
|
|
const raw_value = setting ? props.getConfigValue(setting) : undefined;
|
|
const value = (defaultOn && isUndefined(raw_value)) ? true : !!raw_value;
|
|
return <Highlight settingName={title}>
|
|
<div
|
|
className={`designer-setting ${props.disabled ? "disabled" : ""}`}>
|
|
<Row>
|
|
<Col xs={9}>
|
|
<label>{t(title)}</label>
|
|
</Col>
|
|
<Col xs={3}>
|
|
{setting && <ToggleButton
|
|
toggleValue={props.invert ? !value : value}
|
|
toggleAction={() => {
|
|
props.dispatch(setWebAppConfigValue(setting, !value));
|
|
callback?.();
|
|
}}
|
|
title={`${t("toggle")} ${title}`}
|
|
customText={{ textFalse: t("off"), textTrue: t("on") }} />}
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<p>{t(props.description)}</p>
|
|
</Row>
|
|
{props.children}
|
|
</div>
|
|
</Highlight>;
|
|
};
|
|
|
|
const DESIGNER_SETTINGS =
|
|
(settingsProps: DesignerSettingsPropsBase): SettingDescriptionProps[] => ([
|
|
{
|
|
title: DeviceSetting.animations,
|
|
description: t(Content.PLANT_ANIMATIONS),
|
|
setting: BooleanSetting.disable_animations,
|
|
invert: true
|
|
},
|
|
{
|
|
title: DeviceSetting.trail,
|
|
description: t(Content.VIRTUAL_TRAIL),
|
|
setting: BooleanSetting.display_trail,
|
|
callback: resetVirtualTrail,
|
|
},
|
|
{
|
|
title: DeviceSetting.dynamicMap,
|
|
description: t(Content.DYNAMIC_MAP_SIZE),
|
|
setting: BooleanSetting.dynamic_map,
|
|
},
|
|
{
|
|
title: DeviceSetting.mapSize,
|
|
description: t(Content.MAP_SIZE),
|
|
children: <MapSizeInputs {...settingsProps} />,
|
|
disabled: !!settingsProps.getConfigValue(BooleanSetting.dynamic_map),
|
|
},
|
|
{
|
|
title: DeviceSetting.rotateMap,
|
|
description: t(Content.MAP_SWAP_XY),
|
|
setting: BooleanSetting.xy_swap,
|
|
},
|
|
{
|
|
title: DeviceSetting.mapOrigin,
|
|
description: t(Content.MAP_ORIGIN),
|
|
children: <OriginSelector {...settingsProps} />
|
|
},
|
|
{
|
|
title: DeviceSetting.confirmPlantDeletion,
|
|
description: t(Content.CONFIRM_PLANT_DELETION),
|
|
setting: BooleanSetting.confirm_plant_deletion,
|
|
defaultOn: true,
|
|
},
|
|
]);
|
|
|
|
const OriginSelector = (props: DesignerSettingsPropsBase) => {
|
|
const quadrant = props.getConfigValue(NumericSetting.bot_origin_quadrant);
|
|
const update = (value: number) => () => props.dispatch(setWebAppConfigValue(
|
|
NumericSetting.bot_origin_quadrant, value));
|
|
return <div className="farmbot-origin">
|
|
<div className="quadrants">
|
|
{[2, 1, 3, 4].map(q =>
|
|
<div key={"quadrant_" + q}
|
|
className={`quadrant ${quadrant === q ? "selected" : ""}`}
|
|
onClick={update(q)} />)}
|
|
</div>
|
|
</div>;
|
|
};
|