146 lines
4.6 KiB
TypeScript
146 lines
4.6 KiB
TypeScript
import * as React from "react";
|
|
import { Everything } from "../interfaces";
|
|
import { connect } from "react-redux";
|
|
import { Content } from "../constants";
|
|
import { DesignerPanel, DesignerPanelContent } from "./designer_panel";
|
|
import { t } from "../i18next_wrapper";
|
|
import {
|
|
GetWebAppConfigValue, getWebAppConfigValue, setWebAppConfigValue
|
|
} from "../config_storage/actions";
|
|
import { Row, Col } from "../ui";
|
|
import { ToggleButton } from "../controls/toggle_button";
|
|
import { BooleanConfigKey } from "farmbot/dist/resources/configs/web_app";
|
|
import { BooleanSetting, NumericSetting } from "../session_keys";
|
|
import { resetVirtualTrail } from "./map/layers/farmbot/bot_trail";
|
|
import { MapSizeInputs } from "./map_size_setting";
|
|
import { DesignerNavTabs, Panel } from "./panel_header";
|
|
import { isUndefined } from "lodash";
|
|
|
|
export const mapStateToProps = (props: Everything): DesignerSettingsProps => ({
|
|
dispatch: props.dispatch,
|
|
getConfigValue: getWebAppConfigValue(() => props),
|
|
});
|
|
|
|
export interface DesignerSettingsProps {
|
|
dispatch: Function;
|
|
getConfigValue: GetWebAppConfigValue;
|
|
}
|
|
|
|
export class RawDesignerSettings
|
|
extends React.Component<DesignerSettingsProps, {}> {
|
|
|
|
render() {
|
|
const { getConfigValue, dispatch } = this.props;
|
|
const settingsProps = { getConfigValue, dispatch };
|
|
return <DesignerPanel panelName={"settings"} panel={Panel.Settings}>
|
|
<DesignerNavTabs />
|
|
<DesignerPanelContent panelName={"settings"}>
|
|
{DESIGNER_SETTINGS(settingsProps).map(setting =>
|
|
<Setting key={setting.title} {...setting} {...settingsProps} />)}
|
|
</DesignerPanelContent>
|
|
</DesignerPanel>;
|
|
}
|
|
}
|
|
|
|
interface SettingDescriptionProps {
|
|
setting?: BooleanConfigKey;
|
|
title: string;
|
|
description: string;
|
|
invert?: boolean;
|
|
callback?: () => void;
|
|
children?: React.ReactChild;
|
|
defaultOn?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
interface SettingProps
|
|
extends DesignerSettingsProps, SettingDescriptionProps { }
|
|
|
|
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 <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>;
|
|
};
|
|
|
|
const DESIGNER_SETTINGS =
|
|
(settingsProps: DesignerSettingsProps): SettingDescriptionProps[] => ([
|
|
{
|
|
title: t("Display plant animations"),
|
|
description: t(Content.PLANT_ANIMATIONS),
|
|
setting: BooleanSetting.disable_animations,
|
|
invert: true
|
|
},
|
|
{
|
|
title: t("Display virtual FarmBot trail"),
|
|
description: t(Content.VIRTUAL_TRAIL),
|
|
setting: BooleanSetting.display_trail,
|
|
callback: resetVirtualTrail,
|
|
},
|
|
{
|
|
title: t("Dynamic map size"),
|
|
description: t(Content.DYNAMIC_MAP_SIZE),
|
|
setting: BooleanSetting.dynamic_map,
|
|
},
|
|
{
|
|
title: t("Map size"),
|
|
description: t(Content.MAP_SIZE),
|
|
children: <MapSizeInputs {...settingsProps} />,
|
|
disabled: !!settingsProps.getConfigValue(BooleanSetting.dynamic_map),
|
|
},
|
|
{
|
|
title: t("Rotate map"),
|
|
description: t(Content.MAP_SWAP_XY),
|
|
setting: BooleanSetting.xy_swap,
|
|
},
|
|
{
|
|
title: t("Map origin"),
|
|
description: t(Content.MAP_ORIGIN),
|
|
children: <OriginSelector {...settingsProps} />
|
|
},
|
|
{
|
|
title: t("Confirm plant deletion"),
|
|
description: t(Content.CONFIRM_PLANT_DELETION),
|
|
setting: BooleanSetting.confirm_plant_deletion,
|
|
defaultOn: true,
|
|
},
|
|
]);
|
|
|
|
const OriginSelector = (props: DesignerSettingsProps) => {
|
|
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>;
|
|
};
|
|
|
|
export const DesignerSettings = connect(mapStateToProps)(RawDesignerSettings);
|